Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 5x 5x 8x 8x 8x 8x 5x 8x | import React, { FC, useEffect, useState } from 'react';
import { /* ButtonClasses, */ KsHeaderLogo } from 'ag-ems-ui-library';
const styles = require('./AuthModal.module.css')
import baseLogoSrc from '../../images/klarschiff-logo.svg';
import { useTranslation } from 'react-i18next';
import { Modal } from '../Modal';
import { Tab, Tabs } from '../Tabs';
import { SvgIcon } from '../SvgIcon';
// import googleIcon from '../../images/icons/google.svg';
// import appleIcon from '../../images/icons/apple.svg';
import { RegisterForm } from './RegisterForm';
import { LoginForm } from './LoginForm';
import { RequestResetPasswordForm } from './RequestResetPasswordForm';
// const LoginWith = () => {
// const { t } = useTranslation();
// return (
// <>
// <a href="#"
// className={`${styles.AuthModalButton} ${styles.google} ${ButtonClasses.lg} ${ButtonClasses.rounded} ${ButtonClasses.fullWidth}`}>
// <img src={googleIcon} alt="" />
// <span>{t('signin_with', { vendor: 'Google' })}</span>
// </a>
// <a href="#"
// className={`${styles.AuthModalButton} ${styles.apple} ${ButtonClasses.lg} ${ButtonClasses.rounded} ${ButtonClasses.fullWidth}`}>
// <img src={appleIcon} alt="" />
// <span>{t('signin_with', { vendor: 'Apple' })}</span>
// </a>
// <div className={styles.AuthModalDelimiter}>
// <span>{t('signin_with_email')}</span>
// </div>
// </>
// )
// }
export const AuthModal: FC<{
isOpen: boolean;
onClose: () => void
}> = ({
isOpen = false,
onClose
}) => {
const { t } = useTranslation();
const [activeTab, setActiveTab] = useState<'register' | 'login'>('register');
const [page, setPage] = useState(false);
useEffect(() => {
Iif (isOpen) {
setActiveTab('login');
setPage(false);
}
}, [isOpen]);
return (
<Modal
isOpen={isOpen}
onClose={onClose}
header={
page
? <div className={styles.AuthModalBack}>
<button className="min-click-area" type="button" onClick={() => setPage(false)} aria-label={t('back')}>
<SvgIcon icon={{ name: 'chevron-left', width: 20, height: 20, fill: '#144154' }} />
</button>
<span>{t('forgotPassword')}</span>
</div>
: <KsHeaderLogo
baseLogo={{ src: baseLogoSrc, alt: 'Klarschiff.de Logo' }}
/>
}
>
<div className={styles.AuthModal}>
{!page
? <>
<Tabs>
<Tab current={activeTab === 'register'} onClick={() => setActiveTab('register')}>{t('register')}</Tab>
<Tab current={activeTab === 'login'} onClick={() => setActiveTab('login')}>{t('login')}</Tab>
</Tabs>
<div className={`${styles.AuthModalContent} ${activeTab === 'register' ? styles.show : ''}`}>
<RegisterForm closeHandler={onClose} />
</div>
<div className={`${styles.AuthModalContent} ${activeTab === 'login' ? styles.show : ''}`}>
<LoginForm closeHandler={onClose} onResetPassword={() => setPage(true)} />
</div>
</>
: <div className={`${styles.AuthModalContent} ${styles.show}`}>
<p className={styles.AuthModalLead}>{t('resetPassword.title')}</p>
<p className={styles.AuthModalText}>{t('resetPassword.message')}</p>
<RequestResetPasswordForm closeHandler={onClose} />
</div>
}
</div>
</Modal>
);
};
|