packages/components/containers/forgotUsername/MinimalForgotUsernameContainer.tsx

   1 import { useState } from 'react';
   2 import { Link, useHistory } from 'react-router-dom';
   3
   4 import { c } from 'ttag';
   5
   6 import Alert from '@proton/components/components/alert/Alert';
   7 import PrimaryButton from '@proton/components/components/button/PrimaryButton';
   8 import EmailInput from '@proton/components/components/input/EmailInput';
   9 import useApi from '@proton/components/hooks/useApi';
  10 import useNotifications from '@proton/components/hooks/useNotifications';
  11 import { useLoading } from '@proton/hooks';
  12 import { requestUsername } from '@proton/shared/lib/api/reset';
  13
  14 const MinimalForgotUsernameContainer = () => {
  15     const api = useApi();
  16     const history = useHistory();
  17     const [loading, withLoading] = useLoading();
  18     const { createNotification } = useNotifications();
  19     const [email, setEmail] = useState('');
  20
  21     const handleSubmit = async () => {
  22         await api(requestUsername({ Email: email }));
  23         createNotification({
  24             text: c('Success')
  25                 .t`If you entered a valid notification email we will send you an email with your usernames in the next minute`,
  26         });
  27         history.push('/login');
  28     };
  29
  30     return (
  31         <form
  32             onSubmit={(e) => {
  33                 e.preventDefault();
  34                 withLoading(handleSubmit());
  35             }}
  36         >
  37             <Alert className="mb-4">{c('Info')
  38                 .t`Enter your recovery email address, and we'll send you your username(s). (This is usually the email address you provided during signup.)`}</Alert>
  39             <div className="mb-4">
  40                 <EmailInput
  41                     name="email"
  42                     autoFocus
  43                     autoCapitalize="off"
  44                     autoCorrect="off"
  45                     id="email"
  46                     placeholder={c('Placeholder').t`Email`}
  47                     value={email}
  48                     onChange={({ target }) => setEmail(target.value)}
  49                     required
  50                 />
  51             </div>
  52             <div className="flex flex-nowrap justify-space-between mb-4">
  53                 <Link to="/login">{c('Link').t`Back to login`}</Link>
  54                 <PrimaryButton loading={loading} type="submit">{c('Action').t`Email me my username(s)`}</PrimaryButton>
  55             </div>
  56         </form>
  57     );
  58 };
  59
  60 export default MinimalForgotUsernameContainer;