60 lines
1.2 KiB
JavaScript
60 lines
1.2 KiB
JavaScript
import React, { useState, useRef } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Base from './Base';
|
|
import { TYPE } from './constants';
|
|
|
|
const PasscodeEnter = ({
|
|
theme, type, finishProcess
|
|
}) => {
|
|
const confirmRef = useRef(null);
|
|
const [subtitle, setSubtitle] = useState(null);
|
|
const [status, setStatus] = useState(type);
|
|
const [previousPasscode, setPreviouPasscode] = useState(null);
|
|
|
|
const firstStep = (p) => {
|
|
setStatus(TYPE.CONFIRM);
|
|
setPreviouPasscode(p);
|
|
};
|
|
|
|
const changePasscode = p => finishProcess && finishProcess(p);
|
|
|
|
const onError = () => {
|
|
setStatus(TYPE.CHOOSE);
|
|
setSubtitle('Passcodes don\'t match. Try again.');
|
|
confirmRef?.current?.animate('shake');
|
|
};
|
|
|
|
if (status === TYPE.CONFIRM) {
|
|
return (
|
|
<Base
|
|
ref={confirmRef}
|
|
theme={theme}
|
|
type={TYPE.CONFIRM}
|
|
onEndProcess={changePasscode}
|
|
previousPasscode={previousPasscode}
|
|
title='Confirm your new passcode'
|
|
onError={onError}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Base
|
|
theme={theme}
|
|
type={TYPE.CHOOSE}
|
|
onEndProcess={firstStep}
|
|
title='Choose your new passcode'
|
|
subtitle={subtitle}
|
|
/>
|
|
);
|
|
};
|
|
|
|
PasscodeEnter.propTypes = {
|
|
theme: PropTypes.string,
|
|
type: PropTypes.string,
|
|
finishProcess: PropTypes.func
|
|
};
|
|
|
|
export default PasscodeEnter;
|