55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import type { FC } from '../../lib/teact/teact';
|
|
import { memo, useCallback, useState } from '../../lib/teact/teact';
|
|
import { getActions, withGlobal } from '../../global';
|
|
|
|
import type { GlobalState } from '../../global/types';
|
|
|
|
import { pick } from '../../util/iteratees';
|
|
|
|
import useLang from '../../hooks/useLang';
|
|
|
|
import PasswordForm from '../common/PasswordForm';
|
|
import MonkeyPassword from '../common/PasswordMonkey';
|
|
|
|
type StateProps = Pick<GlobalState, 'authIsLoading' | 'authErrorKey' | 'authHint'>;
|
|
|
|
const AuthPassword: FC<StateProps> = ({
|
|
authIsLoading, authErrorKey, authHint,
|
|
}) => {
|
|
const { setAuthPassword, clearAuthErrorKey } = getActions();
|
|
|
|
const lang = useLang();
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
const handleChangePasswordVisibility = useCallback((isVisible) => {
|
|
setShowPassword(isVisible);
|
|
}, []);
|
|
|
|
const handleSubmit = useCallback((password: string) => {
|
|
setAuthPassword({ password });
|
|
}, [setAuthPassword]);
|
|
|
|
return (
|
|
<div id="auth-password-form" className="custom-scroll">
|
|
<div className="auth-form">
|
|
<MonkeyPassword isPasswordVisible={showPassword} />
|
|
<h1>{lang('LoginHeaderPassword')}</h1>
|
|
<p className="note">{lang('LoginEnterPasswordDescription')}</p>
|
|
<PasswordForm
|
|
clearError={clearAuthErrorKey}
|
|
error={authErrorKey && lang.withRegular(authErrorKey)}
|
|
hint={authHint}
|
|
isLoading={authIsLoading}
|
|
isPasswordVisible={showPassword}
|
|
onChangePasswordVisibility={handleChangePasswordVisibility}
|
|
onSubmit={handleSubmit}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal(
|
|
(global): StateProps => pick(global, ['authIsLoading', 'authErrorKey', 'authHint']),
|
|
)(AuthPassword));
|