1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00

refactor auth components

This commit is contained in:
Fedor Katurov 2023-11-19 17:02:10 +06:00
parent 1caf402ef3
commit b3acef0a1e
21 changed files with 37 additions and 19 deletions

View file

@ -1,7 +1,5 @@
import { FC, useCallback, useRef } from 'react'; import { FC, useCallback, useRef } from 'react';
import { LoginDialogButtons } from '~/components/auth/login/LoginDialogButtons';
import { LoginStaticScene } from '~/components/auth/login/LoginStaticScene';
import { Group } from '~/components/containers/Group'; import { Group } from '~/components/containers/Group';
import { Padder } from '~/components/containers/Padder'; import { Padder } from '~/components/containers/Padder';
import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog'; import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog';
@ -9,6 +7,8 @@ import { DialogTitle } from '~/components/dialogs/DialogTitle';
import { Button } from '~/components/input/Button'; import { Button } from '~/components/input/Button';
import { InputText } from '~/components/input/InputText'; import { InputText } from '~/components/input/InputText';
import { Dialog } from '~/constants/modal'; import { Dialog } from '~/constants/modal';
import { LoginDialogButtons } from '~/containers/dialogs/LoginDialog/components/LoginDialogButtons';
import { LoginStaticScene } from '~/containers/dialogs/LoginDialog/components/LoginStaticScene';
import { useCloseOnEscape } from '~/hooks'; import { useCloseOnEscape } from '~/hooks';
import { useAuth } from '~/hooks/auth/useAuth'; import { useAuth } from '~/hooks/auth/useAuth';
import { useLoginForm } from '~/hooks/auth/useLoginForm'; import { useLoginForm } from '~/hooks/auth/useLoginForm';

View file

@ -1,7 +1,6 @@
import React, { FC, useCallback, useState } from 'react'; import React, { FC, useCallback, useState } from 'react';
import { apiLoginWithSocial } from '~/api/auth'; import { apiLoginWithSocial } from '~/api/auth';
import { LoginSocialRegisterButtons } from '~/components/auth/oauth/LoginSocialRegisterButtons';
import { Group } from '~/components/containers/Group'; import { Group } from '~/components/containers/Group';
import { Padder } from '~/components/containers/Padder'; import { Padder } from '~/components/containers/Padder';
import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog'; import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog';
@ -9,6 +8,7 @@ import { DialogTitle } from '~/components/dialogs/DialogTitle';
import { InputText } from '~/components/input/InputText'; import { InputText } from '~/components/input/InputText';
import { Toggle } from '~/components/input/Toggle'; import { Toggle } from '~/components/input/Toggle';
import { getRandomPhrase } from '~/constants/phrases'; import { getRandomPhrase } from '~/constants/phrases';
import { LoginSocialRegisterButtons } from '~/containers/dialogs/LoginDialog/components/LoginSocialRegisterButtons';
import { useCloseOnEscape } from '~/hooks'; import { useCloseOnEscape } from '~/hooks';
import { useSocialRegisterForm } from '~/hooks/auth/useSocialRegisterForm'; import { useSocialRegisterForm } from '~/hooks/auth/useSocialRegisterForm';
import { useModal } from '~/hooks/modal/useModal'; import { useModal } from '~/hooks/modal/useModal';
@ -35,13 +35,13 @@ const LoginSocialRegisterDialog: FC<LoginSocialRegisterDialogProps> = ({
auth.setToken(loginToken); auth.setToken(loginToken);
hideModal(); hideModal();
}, },
[auth, hideModal] [auth, hideModal],
); );
const { values, errors, handleChange, handleSubmit } = useSocialRegisterForm( const { values, errors, handleChange, handleSubmit } = useSocialRegisterForm(
token, token,
apiLoginWithSocial, apiLoginWithSocial,
onSuccess onSuccess,
); );
return ( return (
@ -73,12 +73,20 @@ const LoginSocialRegisterDialog: FC<LoginSocialRegisterDialogProps> = ({
autoComplete="new-password" autoComplete="new-password"
/> />
<div className={styles.check} onClick={() => setIsDryingPants(!isDryingPants)}> <div
className={styles.check}
onClick={() => setIsDryingPants(!isDryingPants)}
>
<Toggle value={isDryingPants} color="primary" /> <Toggle value={isDryingPants} color="primary" />
<span>Это не мои штаны сушатся на радиаторе в третьей лаборатории</span> <span>
Это не мои штаны сушатся на радиаторе в третьей лаборатории
</span>
</div> </div>
<div className={styles.check} onClick={() => setIsDryingPants(!isDryingPants)}> <div
className={styles.check}
onClick={() => setIsDryingPants(!isDryingPants)}
>
<Toggle value={!isDryingPants} color="primary" /> <Toggle value={!isDryingPants} color="primary" />
<span>{phrase}</span> <span>{phrase}</span>
</div> </div>

View file

@ -1,8 +1,6 @@
import React, { FC, useCallback, useMemo, useState } from 'react'; import React, { FC, useCallback, useMemo, useState } from 'react';
import { apiRestoreCode } from '~/api/auth'; import { apiRestoreCode } from '~/api/auth';
import { RestoreInvalidCode } from '~/components/auth/restore/RestoreInvalidCode';
import { RestoreSuccess } from '~/components/auth/restore/RestoreSuccess';
import { Group } from '~/components/containers/Group'; import { Group } from '~/components/containers/Group';
import { Button } from '~/components/input/Button'; import { Button } from '~/components/input/Button';
import { InputText } from '~/components/input/InputText'; import { InputText } from '~/components/input/InputText';
@ -13,13 +11,18 @@ import { DialogComponentProps } from '~/types/modal';
import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog'; import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
import { RestoreInvalidCode } from './components/RestoreInvalidCode';
import { RestoreSuccess } from './components/RestoreSuccess';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
type RestorePasswordDialogProps = DialogComponentProps & { type RestorePasswordDialogProps = DialogComponentProps & {
code: string; code: string;
}; };
const RestorePasswordDialog: FC<RestorePasswordDialogProps> = ({ onRequestClose, code }) => { const RestorePasswordDialog: FC<RestorePasswordDialogProps> = ({
onRequestClose,
code,
}) => {
useCloseOnEscape(onRequestClose); useCloseOnEscape(onRequestClose);
const { codeUser, isLoading, error } = useRestoreCode(code); const { codeUser, isLoading, error } = useRestoreCode(code);
@ -30,7 +33,7 @@ const RestorePasswordDialog: FC<RestorePasswordDialogProps> = ({ onRequestClose,
const { handleChange, handleSubmit, values, errors } = useRestorePasswordForm( const { handleChange, handleSubmit, values, errors } = useRestorePasswordForm(
code, code,
apiRestoreCode, apiRestoreCode,
onSent onSent,
); );
const buttons = useMemo( const buttons = useMemo(
@ -39,12 +42,17 @@ const RestorePasswordDialog: FC<RestorePasswordDialogProps> = ({ onRequestClose,
<Button color="primary">Восстановить</Button> <Button color="primary">Восстановить</Button>
</Group> </Group>
), ),
[] [],
); );
const overlay = useMemo(() => { const overlay = useMemo(() => {
if (isSent) { if (isSent) {
return <RestoreSuccess username={codeUser?.username} onClick={onRequestClose} />; return (
<RestoreSuccess
username={codeUser?.username}
onClick={onRequestClose}
/>
);
} }
if (error) { if (error) {
@ -67,7 +75,9 @@ const RestorePasswordDialog: FC<RestorePasswordDialogProps> = ({ onRequestClose,
> >
<div className={styles.wrap}> <div className={styles.wrap}>
<Group> <Group>
<div className={styles.header}>Пришло время сменить пароль, {codeUser?.username}</div> <div className={styles.header}>
Пришло время сменить пароль, {codeUser?.username}
</div>
<InputText <InputText
title="Новый пароль" title="Новый пароль"
@ -89,8 +99,8 @@ const RestorePasswordDialog: FC<RestorePasswordDialogProps> = ({ onRequestClose,
<Group className={styles.text}> <Group className={styles.text}>
<p>Новый пароль должен быть не короче 6 символов.</p> <p>Новый пароль должен быть не короче 6 символов.</p>
<p> <p>
Вряд ли кто-нибудь будет пытаться нас взломать, но сложный пароль всегда лучше Вряд ли кто-нибудь будет пытаться нас взломать, но сложный
простого. пароль всегда лучше простого.
</p> </p>
</Group> </Group>
</Group> </Group>

View file

@ -1,7 +1,6 @@
import React, { useCallback, useMemo, useState, VFC } from 'react'; import React, { useCallback, useMemo, useState, VFC } from 'react';
import { apiRequestRestoreCode } from '~/api/auth'; import { apiRequestRestoreCode } from '~/api/auth';
import { RestoreSent } from '~/components/auth/restore/RestoreSent';
import { Group } from '~/components/containers/Group'; import { Group } from '~/components/containers/Group';
import { Button } from '~/components/input/Button'; import { Button } from '~/components/input/Button';
import { InputText } from '~/components/input/InputText'; import { InputText } from '~/components/input/InputText';
@ -11,6 +10,7 @@ import { DialogComponentProps } from '~/types/modal';
import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog'; import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
import { RestoreSent } from './components/RestoreSent';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
interface RestoreRequestDialogProps extends DialogComponentProps {} interface RestoreRequestDialogProps extends DialogComponentProps {}

View file

@ -7,8 +7,8 @@ import { Button } from '~/components/input/Button';
import { useTelegramAccount } from '~/hooks/auth/useTelegramAccount'; import { useTelegramAccount } from '~/hooks/auth/useTelegramAccount';
import { DialogComponentProps } from '~/types/modal'; import { DialogComponentProps } from '~/types/modal';
import { TelegramLoginForm } from '../../../components/auth/oauth/TelegramLoginForm/index';
import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog'; import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
import { TelegramLoginForm } from '../LoginDialog/components/TelegramLoginForm/index';
interface TelegramAttachDialogProps extends DialogComponentProps {} interface TelegramAttachDialogProps extends DialogComponentProps {}