103 lines
2.6 KiB
TypeScript
103 lines
2.6 KiB
TypeScript
import { memo, useState } from '../../lib/teact/teact';
|
|
import { getActions, withGlobal } from '../../global';
|
|
|
|
import type { GlobalState } from '../../global/types';
|
|
|
|
import useLang from '../../hooks/useLang';
|
|
import useLastCallback from '../../hooks/useLastCallback';
|
|
|
|
import ConfirmDialog from '../ui/ConfirmDialog';
|
|
import PasswordForm from './PasswordForm';
|
|
import PasswordMonkey from './PasswordMonkey';
|
|
|
|
import styles from './PasswordConfirmModal.module.scss';
|
|
|
|
type OwnProps = {
|
|
isOpen: boolean;
|
|
title?: string;
|
|
confirmLabel?: string;
|
|
description?: string;
|
|
onClose: NoneToVoidFunction;
|
|
onSubmit: (password: string) => void;
|
|
};
|
|
|
|
type StateProps = {
|
|
error?: GlobalState['twoFaSettings']['errorKey'];
|
|
hint?: string;
|
|
isLoading?: boolean;
|
|
};
|
|
|
|
const PasswordConfirmModal = ({
|
|
isOpen,
|
|
title,
|
|
confirmLabel,
|
|
description,
|
|
error,
|
|
hint,
|
|
isLoading,
|
|
onClose,
|
|
onSubmit,
|
|
}: OwnProps & StateProps) => {
|
|
const { checkPassword, clearTwoFaError } = getActions();
|
|
const lang = useLang();
|
|
|
|
const [shouldShowPassword, setShouldShowPassword] = useState(false);
|
|
const [password, setPassword] = useState('');
|
|
|
|
const handlePasswordChange = useLastCallback((value: string) => {
|
|
setPassword(value);
|
|
});
|
|
|
|
const handleSubmit = useLastCallback(() => {
|
|
checkPassword({
|
|
currentPassword: password,
|
|
onSuccess: () => {
|
|
onSubmit(password);
|
|
setPassword('');
|
|
setShouldShowPassword(false);
|
|
},
|
|
});
|
|
});
|
|
|
|
const handleClose = useLastCallback(() => {
|
|
onClose();
|
|
clearTwoFaError();
|
|
setPassword('');
|
|
setShouldShowPassword(false);
|
|
});
|
|
|
|
return (
|
|
<ConfirmDialog
|
|
isOpen={isOpen}
|
|
title={title || lang('EnterPassword')}
|
|
confirmLabel={confirmLabel || lang('AutoDeleteConfirm')}
|
|
confirmHandler={handleSubmit}
|
|
confirmIsDestructive
|
|
onClose={handleClose}
|
|
>
|
|
<PasswordMonkey isBig isPasswordVisible={shouldShowPassword} />
|
|
{description && <p className={styles.description}>{description}</p>}
|
|
<PasswordForm
|
|
error={error && lang.withRegular(error)}
|
|
hint={hint}
|
|
isLoading={isLoading}
|
|
isPasswordVisible={shouldShowPassword}
|
|
onChangePasswordVisibility={setShouldShowPassword}
|
|
onClearError={clearTwoFaError}
|
|
onInputChange={handlePasswordChange}
|
|
/>
|
|
</ConfirmDialog>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal<OwnProps>(
|
|
(global): Complete<StateProps> => {
|
|
const { errorKey, hint, isLoading } = global.twoFaSettings;
|
|
return {
|
|
error: errorKey,
|
|
hint,
|
|
isLoading,
|
|
};
|
|
},
|
|
)(PasswordConfirmModal));
|