All files / src/components/Checkout Login.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
 
 
4x
 
 
 
 
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC, useState } from 'react';
import { StepComponentProps } from '../../types';
const styles = require('./Checkout.module.css')
import { LoginForm } from '../AuthModal/LoginForm';
import { RegisterForm } from '../AuthModal/RegisterForm';
import { useTranslation } from 'react-i18next';
import { Layout } from './Layout';
import { Button } from 'ag-ems-ui-library';
import { RequestResetPasswordForm } from '../AuthModal/RequestResetPasswordForm';
 
export const Login: FC<StepComponentProps> = ({ setNextStep }) => {
  const { t } = useTranslation();
  const [active, setActive] = useState<'login' | 'register'>('login');
  const [showReset, setShowReset] = useState(false);
 
  return <Layout classes={styles.Auth}>
    <section className={styles.AuthCol}>
 
      <h2>{!showReset ? t('checkout.welcomeBack') : t('checkout.resetPassword')}</h2>
 
      <div className={`${styles.AuthCollapse} ${active === 'login' ? styles.show : ''}`}>
        <div className={styles.AuthCollapseButton}>
          <Button value={t('login')} sizing="md" variant="ghost" fullWidth={true}
            onClick={() => setActive('login')} classes="mb-2" />
        </div>
        <div className={styles.AuthCollapseContent}>
          {!showReset
            ? <LoginForm onResetPassword={() => setShowReset(true)} />
            : <>
              <p>{t('resetPassword.message')}</p>
              <RequestResetPasswordForm onBackToLogin={() => setShowReset(false)} />
            </>
          }
        </div>
      </div>
    </section>
 
    <section className={styles.AuthCol}>
      <h2>{t('checkout.iAmNewHere')}</h2>
 
      <div className={`${styles.AuthCollapse} ${active === 'register' ? styles.show : ''}`}>
        <div className={styles.AuthCollapseButton}>
          <Button value={t('register')} sizing="md" variant="ghost" fullWidth={true}
            onClick={() => {
              setShowReset(false);
              setActive('register');
            }} classes="mb-2" />
        </div>
        <div className={styles.AuthCollapseContent}>
          <RegisterForm />
        </div>
      </div>
    </section>
  </Layout>;
};