All files / app/modals/components decrypt-wallet-form.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { ErrorLabel } from '@components/error-label';
import { ErrorText } from '@components/error-text';
import { Box, color, Input, Text } from '@stacks/ui';
import { HomeSelectors } from 'app/tests/features/home.selectors';
import React, { forwardRef } from 'react';
 
interface DecryptWalletFormProps {
  hasSubmitted: boolean;
  decryptionError: string | null;
  description: string;
  onForgottenPassword(): void;
  onSetPassword(password: string): void;
}
 
export const DecryptWalletForm = forwardRef((props: DecryptWalletFormProps, ref) => {
  const { description, onSetPassword, decryptionError, hasSubmitted, onForgottenPassword } = props;
 
  const handlePasswordInput = (e: React.FormEvent<HTMLInputElement>) => {
    e.preventDefault();
    const pass = e.currentTarget.value;
    onSetPassword(pass);
  };
 
  return (
    <Box mx="extra-loose" mt="extra-loose">
      <Text textStyle="body.large">{description}</Text>
      <Input
        onChange={handlePasswordInput}
        type="password"
        mt="base-loose"
        data-test={HomeSelectors.InputDecryptWallet}
        ref={ref as any}
      />
      {hasSubmitted && decryptionError && (
        <ErrorLabel>
          <ErrorText>{decryptionError}</ErrorText>
        </ErrorLabel>
      )}
      <Text textStyle="body.small" mt="base-tight" mb="base-loose" display="block">
        Forgot password?{' '}
        <Text
          as="button"
          color={color('brand')}
          fontWeight={500}
          onClick={onForgottenPassword}
          _focus={{ textDecoration: 'underline', outline: 0 }}
        >
          Reset your wallet
        </Text>{' '}
        to set a new password.
      </Text>
    </Box>
  );
});
 
DecryptWalletForm.displayName = 'DecryptWalletForm';