diff --git a/packages/extension-ui/src/Popup/Signing/Request.tsx b/packages/extension-ui/src/Popup/Signing/Request.tsx index f4ab1c04..b11abc5a 100644 --- a/packages/extension-ui/src/Popup/Signing/Request.tsx +++ b/packages/extension-ui/src/Popup/Signing/Request.tsx @@ -47,6 +47,7 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst, const [isBusy, setIsBusy] = useState(false); const [isLocked, setIsLocked] = useState(null); const [savePass, setSavePass] = useState(false); + const [password, setPassword] = useState(''); useEffect(() => { setIsLocked(null); @@ -58,6 +59,10 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst, timeout = setTimeout(() => { setIsLocked(true); }, remainingTime); + + // if the account was unlocked check the remember me + // automatically to prolong the unlock period + !isLocked && setSavePass(true); }) .catch((error: Error) => console.error(error)); @@ -90,7 +95,7 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst, ); const _onSign = useCallback( - (password?: string): Promise => { + (): Promise => { setIsBusy(true); return approveSignPassword(signId, savePass, password) @@ -104,12 +109,7 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst, console.error(error); }); }, - [onAction, savePass, signId] - ); - - const _onSignQuick = useCallback( - () => _onSign(), - [_onSign] + [onAction, password, savePass, signId] ); const _onSignature = useCallback( @@ -123,33 +123,45 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst, [onAction, signId] ); - const SignButton = () => isLocked - ? ( - - ( - "Don't ask me again for the next {{expiration}} minutes", - { replace: { expiration: PASSWORD_EXPIRY_MIN } } - )} - onChange={setSavePass} + const RememberPasswordCheckbox = () => ( + ( + 'Remember my password for the next {{expiration}} minutes', + { replace: { expiration: PASSWORD_EXPIRY_MIN } } + ) + : t( + 'Extend the period without password by {{expiration}} minutes', + { replace: { expiration: PASSWORD_EXPIRY_MIN } } + ) + } + onChange={setSavePass} + /> + ); + + const SignButton = () => ( + <> + { isLocked && ( + - - ) - : ( + )} + - ); + + ); if (payload !== null) { const json = request.payload as SignerPayloadJSON; @@ -180,7 +192,9 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst, ) } - {isFirst && !isExternal && } + {isFirst && !isExternal && ( + + )} Promise; + onSign: () => Promise; + password: string; + setError: (error: string | null) => void; + setPassword: (password: string) => void; } -function Unlock ({ buttonText, children, className, error, isBusy, onSign }: Props): React.ReactElement { +function Unlock ({ className, error, isBusy, onSign, password, setError, setPassword }: Props): React.ReactElement { const { t } = useTranslation(); - const [ownError, setError] = useState(); - const [password, setPassword] = useState(''); - - useEffect((): void => { - setError(error || null); - }, [error]); const _onChangePassword = useCallback( (password: string): void => { setPassword(password); setError(null); }, - [] - ); - - const _onClick = useCallback( - () => onSign(password), - [onSign, password] + [setError, setPassword] ); return (
('Password for this account')} onChange={_onChangePassword} - onEnter={_onClick} + onEnter={onSign} type='password' - withoutMargin={!!children} + value={password} + withoutMargin={true} /> - {children} - + {error &&
{error}
}
); } -export default React.memo(Unlock); +export default React.memo(styled(Unlock)(({ theme }: ThemeProps) => ` + .error { + font-size: ${theme.labelFontSize}; + line-height: ${theme.labelLineHeight}; + color: ${theme.errorColor}; + } +`)); diff --git a/packages/extension-ui/src/components/InputWithLabel.tsx b/packages/extension-ui/src/components/InputWithLabel.tsx index dbf08710..c69efdc3 100644 --- a/packages/extension-ui/src/components/InputWithLabel.tsx +++ b/packages/extension-ui/src/components/InputWithLabel.tsx @@ -24,7 +24,7 @@ interface Props { withoutMargin?: boolean; } -function InputWithLabel ({ className, defaultValue, disabled, isError, isFocused, isReadOnly, label, onBlur, onChange, onEnter, placeholder, type = 'text', value }: Props): React.ReactElement { +function InputWithLabel ({ className, defaultValue, disabled, isError, isFocused, isReadOnly, label = '', onBlur, onChange, onEnter, placeholder, type = 'text', value, withoutMargin }: Props): React.ReactElement { const _checkEnter = useCallback( (event: React.KeyboardEvent): void => { onEnter && event.key === 'Enter' && onEnter(); @@ -41,7 +41,7 @@ function InputWithLabel ({ className, defaultValue, disabled, isError, isFocused return (