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:
parent
1caf402ef3
commit
b3acef0a1e
21 changed files with 37 additions and 19 deletions
|
@ -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';
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {}
|
||||||
|
|
|
@ -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 {}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue