mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-26 13:26:40 +07:00
removed redux completely
This commit is contained in:
Fedor Katurov
parent
26e6d8d41b
commit
a4bb07e9cf
323 changed files with 2464 additions and 3348 deletions
|
|
@ -1,73 +0,0 @@
|
|||
import React, { FC, MouseEventHandler, useEffect, useRef } from "react";
|
||||
import styles from "./styles.module.scss";
|
||||
import { clearAllBodyScrollLocks, disableBodyScroll } from "body-scroll-lock";
|
||||
import { Icon } from "~/components/input/Icon";
|
||||
import { LoaderCircle } from "~/components/input/LoaderCircle";
|
||||
|
||||
interface IProps {
|
||||
children: React.ReactChild;
|
||||
header?: JSX.Element;
|
||||
footer?: JSX.Element;
|
||||
backdrop?: JSX.Element;
|
||||
size?: 'medium' | 'big';
|
||||
width?: number;
|
||||
error?: string;
|
||||
is_loading?: boolean;
|
||||
overlay?: JSX.Element;
|
||||
|
||||
onOverlayClick?: MouseEventHandler<HTMLDivElement>;
|
||||
onRefCapture?: (ref: any) => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
const BetterScrollDialog: FC<IProps> = ({
|
||||
children,
|
||||
header,
|
||||
footer,
|
||||
backdrop,
|
||||
width = 600,
|
||||
error,
|
||||
onClose,
|
||||
is_loading,
|
||||
overlay = null,
|
||||
}) => {
|
||||
const ref = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
disableBodyScroll(ref.current, { reserveScrollBarGap: true });
|
||||
|
||||
return () => clearAllBodyScrollLocks();
|
||||
}, [ref]);
|
||||
|
||||
return (
|
||||
<div className={styles.wrap} ref={ref}>
|
||||
{backdrop && <div className={styles.backdrop}>{backdrop}</div>}
|
||||
|
||||
<div className={styles.container} style={{ maxWidth: width }}>
|
||||
{onClose && (
|
||||
<div className={styles.close} onClick={onClose}>
|
||||
<Icon icon="close" />
|
||||
</div>
|
||||
)}
|
||||
{header && <div className={styles.header}>{header}</div>}
|
||||
|
||||
<div className={styles.body}>
|
||||
{children}
|
||||
{error && <div className={styles.error}>{error}</div>}
|
||||
</div>
|
||||
|
||||
{!!is_loading && (
|
||||
<div className={styles.shade}>
|
||||
<LoaderCircle size={48} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{overlay}
|
||||
|
||||
{footer && <div className={styles.footer}>{footer}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { BetterScrollDialog };
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.wrap {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: transparentize(darken($content_bg, 4%), 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 70px 20px 40px 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include tablet {
|
||||
padding: 70px 5px 5px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-width: $cell;
|
||||
max-width: 400px;
|
||||
max-height: 100%;
|
||||
max-height: calc(100vh - 75px);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > div:nth-child(2) {
|
||||
border-top-left-radius: $dialog_radius;
|
||||
border-top-right-radius: $dialog_radius;
|
||||
}
|
||||
|
||||
& > div:last-child {
|
||||
border-bottom-left-radius: $dialog_radius;
|
||||
border-bottom-right-radius: $dialog_radius;
|
||||
}
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer {
|
||||
@include outer_shadow();
|
||||
|
||||
// padding: 10px;
|
||||
background: darken($content_bg, 2%);
|
||||
}
|
||||
|
||||
.body {
|
||||
@include outer_shadow();
|
||||
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
background: $content_bg;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
top: -48px;
|
||||
}
|
||||
100% {
|
||||
top: -58px;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
background: darken($content_bg, 2%);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
top: -58px;
|
||||
right: 50%;
|
||||
transform: translate(50%, 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.25s, background-color 0.25s;
|
||||
animation: appear 0.5s forwards;
|
||||
|
||||
&:hover {
|
||||
background-color: $red;
|
||||
transform: translate(50%, -5px);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.shade {
|
||||
position: absolute;
|
||||
background: transparentize($content_bg, 0.3);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $radius;
|
||||
animation: appear 1s forwards;
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import { EMPTY_NODE, NODE_TYPES } from '~/constants/node';
|
|||
import { EditorDialog } from '~/containers/dialogs/EditorDialog';
|
||||
import { useHistory, useRouteMatch } from 'react-router';
|
||||
import { values } from 'ramda';
|
||||
import { INode } from '~/redux/types';
|
||||
import { INode } from '~/types';
|
||||
import { useCreateNode } from '~/hooks/node/useCreateNode';
|
||||
|
||||
const EditorCreateDialog: FC = () => {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
import React, { createElement, FC, useCallback, useMemo, useState } from "react";
|
||||
import styles from "./styles.module.scss";
|
||||
import { NODE_EDITORS } from "~/constants/node";
|
||||
import { BetterScrollDialog } from "../BetterScrollDialog";
|
||||
import { CoverBackdrop } from "~/components/containers/CoverBackdrop";
|
||||
import { prop } from "ramda";
|
||||
import { useNodeFormFormik } from "~/hooks/node/useNodeFormFormik";
|
||||
import { EditorButtons } from "~/components/editors/EditorButtons";
|
||||
import { UploadSubject, UploadTarget } from "~/constants/uploads";
|
||||
import { FormikProvider } from "formik";
|
||||
import { INode } from "~/redux/types";
|
||||
import { ModalWrapper } from "~/components/dialogs/ModalWrapper";
|
||||
import { useTranslatedError } from "~/hooks/data/useTranslatedError";
|
||||
import { useCloseOnEscape } from "~/hooks";
|
||||
import { EditorConfirmClose } from "~/components/editors/EditorConfirmClose";
|
||||
import { DialogComponentProps } from "~/types/modal";
|
||||
import { useUploader } from "~/hooks/data/useUploader";
|
||||
import { UploaderContextProvider } from "~/utils/context/UploaderContextProvider";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import React, { createElement, FC, useCallback, useMemo, useState } from 'react';
|
||||
import styles from './styles.module.scss';
|
||||
import { NODE_EDITORS } from '~/constants/node';
|
||||
import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
|
||||
import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
|
||||
import { prop } from 'ramda';
|
||||
import { useNodeFormFormik } from '~/hooks/node/useNodeFormFormik';
|
||||
import { EditorButtons } from '~/components/editors/EditorButtons';
|
||||
import { UploadSubject, UploadTarget } from '~/constants/uploads';
|
||||
import { FormikProvider } from 'formik';
|
||||
import { INode } from '~/types';
|
||||
import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
|
||||
import { useTranslatedError } from '~/hooks/data/useTranslatedError';
|
||||
import { useCloseOnEscape } from '~/hooks';
|
||||
import { EditorConfirmClose } from '~/components/editors/EditorConfirmClose';
|
||||
import { DialogComponentProps } from '~/types/modal';
|
||||
import { useUploader } from '~/hooks/data/useUploader';
|
||||
import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
|
||||
interface Props extends DialogComponentProps {
|
||||
node: INode;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { LoaderCircle } from '~/components/input/LoaderCircle';
|
|||
import styles from './styles.module.scss';
|
||||
import { useLoadNode } from '~/hooks/node/useLoadNode';
|
||||
import { useUpdateNode } from '~/hooks/node/useUpdateNode';
|
||||
import { INode } from '~/redux/types';
|
||||
import { INode } from '~/types';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
const EditorEditDialog: FC = observer(() => {
|
||||
|
|
|
|||
|
|
@ -1,62 +1,29 @@
|
|||
import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import React, { FC, useCallback } from 'react';
|
||||
import { useCloseOnEscape } from '~/hooks';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { InputText } from '~/components/input/InputText';
|
||||
import { Button } from '~/components/input/Button';
|
||||
import { Padder } from '~/components/containers/Padder';
|
||||
import { selectAuthLogin } from '~/redux/auth/selectors';
|
||||
import { API } from '~/constants/api';
|
||||
import { BetterScrollDialog } from '../BetterScrollDialog';
|
||||
import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
import * as ACTIONS from '~/redux/auth/actions';
|
||||
import { ISocialProvider } from '~/redux/auth/types';
|
||||
import { pick } from 'ramda';
|
||||
import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
|
||||
import { OAUTH_EVENT_TYPES } from '~/redux/types';
|
||||
import { LoginDialogButtons } from '~/components/auth/login/LoginDialogButtons';
|
||||
import { DialogTitle } from '~/components/dialogs/DialogTitle';
|
||||
import { useTranslatedError } from '~/hooks/data/useTranslatedError';
|
||||
import { DialogComponentProps } from '~/types/modal';
|
||||
import { useShowModal } from '~/hooks/modal/useShowModal';
|
||||
import { Dialog } from '~/constants/modal';
|
||||
import { useAuth } from '~/hooks/auth/useAuth';
|
||||
import { useLoginForm } from '~/hooks/auth/useLoginForm';
|
||||
import { useOAuth } from '~/hooks/auth/useOAuth';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
...pick(['error', 'is_registering'], selectAuthLogin(state)),
|
||||
});
|
||||
type LoginDialogProps = DialogComponentProps & {};
|
||||
|
||||
const mapDispatchToProps = {
|
||||
userSendLoginRequest: ACTIONS.userSendLoginRequest,
|
||||
userSetLoginError: ACTIONS.userSetLoginError,
|
||||
authLoginWithSocial: ACTIONS.authLoginWithSocial,
|
||||
authGotOauthLoginEvent: ACTIONS.authGotOauthLoginEvent,
|
||||
};
|
||||
|
||||
type IProps = ReturnType<typeof mapStateToProps> &
|
||||
typeof mapDispatchToProps &
|
||||
DialogComponentProps & {};
|
||||
|
||||
const LoginDialogUnconnected: FC<IProps> = ({
|
||||
error,
|
||||
|
||||
onRequestClose,
|
||||
userSendLoginRequest,
|
||||
userSetLoginError,
|
||||
authGotOauthLoginEvent,
|
||||
}) => {
|
||||
const [username, setUserName] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const LoginDialog: FC<LoginDialogProps> = ({ onRequestClose }) => {
|
||||
useCloseOnEscape(onRequestClose);
|
||||
|
||||
const { login } = useAuth();
|
||||
const { openOauthWindow } = useOAuth();
|
||||
const showRestoreDialog = useShowModal(Dialog.RestoreRequest);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
(event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
userSendLoginRequest({ username, password });
|
||||
},
|
||||
[userSendLoginRequest, username, password]
|
||||
);
|
||||
|
||||
const onRestoreRequest = useCallback(
|
||||
event => {
|
||||
event.preventDefault();
|
||||
|
|
@ -65,44 +32,13 @@ const LoginDialogUnconnected: FC<IProps> = ({
|
|||
[showRestoreDialog]
|
||||
);
|
||||
|
||||
const openOauthWindow = useCallback(
|
||||
(provider: ISocialProvider) => () => {
|
||||
window.open(API.USER.OAUTH_WINDOW(provider), '', 'width=600,height=400');
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const onMessage = useCallback(
|
||||
(event: MessageEvent) => {
|
||||
if (!event?.data?.type || !Object.values(OAUTH_EVENT_TYPES).includes(event.data.type)) {
|
||||
return;
|
||||
}
|
||||
|
||||
authGotOauthLoginEvent(event.data);
|
||||
},
|
||||
[authGotOauthLoginEvent]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (error) userSetLoginError('');
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [username, password]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('message', onMessage);
|
||||
return () => window.removeEventListener('message', onMessage);
|
||||
}, [onMessage]);
|
||||
|
||||
useCloseOnEscape(onRequestClose);
|
||||
|
||||
const translatedError = useTranslatedError(error);
|
||||
const { values, errors, handleSubmit, handleChange } = useLoginForm(login, onRequestClose);
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<BetterScrollDialog
|
||||
width={300}
|
||||
error={translatedError}
|
||||
onClose={onRequestClose}
|
||||
footer={<LoginDialogButtons openOauthWindow={openOauthWindow} />}
|
||||
backdrop={<div className={styles.backdrop} />}
|
||||
|
|
@ -112,9 +48,21 @@ const LoginDialogUnconnected: FC<IProps> = ({
|
|||
<Group>
|
||||
<DialogTitle>Решительно войти</DialogTitle>
|
||||
|
||||
<InputText title="Логин" handler={setUserName} value={username} autoFocus />
|
||||
<InputText
|
||||
title="Логин"
|
||||
handler={handleChange('username')}
|
||||
value={values.username}
|
||||
error={errors.username}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<InputText title="Пароль" handler={setPassword} value={password} type="password" />
|
||||
<InputText
|
||||
title="Пароль"
|
||||
handler={handleChange('password')}
|
||||
value={values.password}
|
||||
error={errors.password}
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<Button
|
||||
color="link"
|
||||
|
|
@ -133,6 +81,4 @@ const LoginDialogUnconnected: FC<IProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
const LoginDialog = connect(mapStateToProps, mapDispatchToProps)(LoginDialogUnconnected);
|
||||
|
||||
export { LoginDialog };
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
import React, { FC, MouseEventHandler } from "react";
|
||||
import { Button } from "~/components/input/Button";
|
||||
import { Grid } from "~/components/containers/Grid";
|
||||
import { Group } from "~/components/containers/Group";
|
||||
import styles from "./styles.module.scss";
|
||||
import { ISocialProvider } from "~/redux/auth/types";
|
||||
|
||||
interface IProps {
|
||||
openOauthWindow: (provider: ISocialProvider) => MouseEventHandler;
|
||||
}
|
||||
|
||||
const LoginDialogButtons: FC<IProps> = ({ openOauthWindow }) => (
|
||||
<Group className={styles.footer}>
|
||||
<Button>Войти</Button>
|
||||
|
||||
<Grid columns="repeat(2, 1fr)">
|
||||
<Button color="outline" iconLeft="google" type="button" onClick={openOauthWindow('google')}>
|
||||
<span>Google</span>
|
||||
</Button>
|
||||
|
||||
<Button color="outline" iconLeft="vk" type="button" onClick={openOauthWindow('vkontakte')}>
|
||||
<span>Вконтакте</span>
|
||||
</Button>
|
||||
</Grid>
|
||||
</Group>
|
||||
);
|
||||
|
||||
export { LoginDialogButtons };
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.footer {
|
||||
padding: $gap;
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import React, { FC } from "react";
|
||||
import { Button } from "~/components/input/Button";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
interface IProps {}
|
||||
|
||||
const LoginSocialRegisterButtons: FC<IProps> = () => (
|
||||
<div className={styles.wrap}>
|
||||
<Button>Впустите меня!</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export { LoginSocialRegisterButtons };
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.wrap {
|
||||
padding: $gap $gap * 2;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,76 +1,52 @@
|
|||
import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { BetterScrollDialog } from '~/containers/dialogs/BetterScrollDialog';
|
||||
import React, { FC, useCallback, useState } from 'react';
|
||||
import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog';
|
||||
import { Padder } from '~/components/containers/Padder';
|
||||
import { DialogTitle } from '~/components/dialogs/DialogTitle';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { InputText } from '~/components/input/InputText';
|
||||
import styles from './styles.module.scss';
|
||||
import { selectAuthRegisterSocial } from '~/redux/auth/selectors';
|
||||
import * as AUTH_ACTIONS from '~/redux/auth/actions';
|
||||
import { useCloseOnEscape } from '~/hooks';
|
||||
import { LoginSocialRegisterButtons } from '~/containers/dialogs/LoginSocialRegisterButtons';
|
||||
import { LoginSocialRegisterButtons } from '~/components/auth/oauth/LoginSocialRegisterButtons';
|
||||
import { Toggle } from '~/components/input/Toggle';
|
||||
import { DialogComponentProps } from '~/types/modal';
|
||||
import { getRandomPhrase } from '~/constants/phrases';
|
||||
import { useSocialRegisterForm } from '~/hooks/auth/useSocialRegisterForm';
|
||||
import { apiLoginWithSocial } from '~/api/auth';
|
||||
import { useModal } from '~/hooks/modal/useModal';
|
||||
import { useAuthStore } from '~/store/auth/useAuthStore';
|
||||
|
||||
const mapStateToProps = selectAuthRegisterSocial;
|
||||
const mapDispatchToProps = {
|
||||
authSetRegisterSocialErrors: AUTH_ACTIONS.authSetRegisterSocialErrors,
|
||||
authSetRegisterSocial: AUTH_ACTIONS.authSetRegisterSocial,
|
||||
authSendRegisterSocial: AUTH_ACTIONS.authSendRegisterSocial,
|
||||
};
|
||||
type LoginSocialRegisterDialogProps = DialogComponentProps & { token: string };
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> &
|
||||
typeof mapDispatchToProps &
|
||||
DialogComponentProps & {};
|
||||
const phrase = getRandomPhrase('REGISTER');
|
||||
|
||||
const phrase = [
|
||||
'Сушёный кабачок особенно хорош в это время года, знаете ли.',
|
||||
'Бывало, стреляешь по кабачку, или он стреляет в тебя.',
|
||||
'Он всегда рядом, кабачок -- первый сорт! Надежда империи.',
|
||||
];
|
||||
|
||||
const LoginSocialRegisterDialogUnconnected: FC<Props> = ({
|
||||
const LoginSocialRegisterDialog: FC<LoginSocialRegisterDialogProps> = ({
|
||||
onRequestClose,
|
||||
errors,
|
||||
error,
|
||||
|
||||
authSetRegisterSocialErrors,
|
||||
authSetRegisterSocial,
|
||||
authSendRegisterSocial,
|
||||
token,
|
||||
}) => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [isDryingPants, setIsDryingPants] = useState(false);
|
||||
useCloseOnEscape(onRequestClose);
|
||||
const { hideModal } = useModal();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const onSubmit = useCallback(
|
||||
(event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
authSendRegisterSocial(username, password);
|
||||
const [isDryingPants, setIsDryingPants] = useState(false);
|
||||
const onSuccess = useCallback(
|
||||
(loginToken: string) => {
|
||||
auth.setToken(loginToken);
|
||||
hideModal();
|
||||
},
|
||||
[username, password, authSendRegisterSocial]
|
||||
[auth, hideModal]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (errors.username) authSetRegisterSocialErrors({ username: '' });
|
||||
}, [authSetRegisterSocialErrors, errors.username, username]);
|
||||
|
||||
useEffect(() => {
|
||||
if (errors.password) authSetRegisterSocialErrors({ password: '' });
|
||||
}, [authSetRegisterSocialErrors, errors.password, password]);
|
||||
|
||||
useEffect(() => {
|
||||
if (error) authSetRegisterSocial({ error: '' });
|
||||
}, [username, password, error, authSetRegisterSocial]);
|
||||
|
||||
useCloseOnEscape(onRequestClose);
|
||||
const { values, errors, handleChange, handleSubmit } = useSocialRegisterForm(
|
||||
token,
|
||||
apiLoginWithSocial,
|
||||
onSuccess
|
||||
);
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} autoComplete="new-password">
|
||||
<form onSubmit={handleSubmit} autoComplete="new-password">
|
||||
<BetterScrollDialog
|
||||
onClose={onRequestClose}
|
||||
width={300}
|
||||
error={error}
|
||||
footer={<LoginSocialRegisterButtons />}
|
||||
>
|
||||
<Padder>
|
||||
|
|
@ -79,16 +55,16 @@ const LoginSocialRegisterDialogUnconnected: FC<Props> = ({
|
|||
<DialogTitle>Добро пожаловать в семью!</DialogTitle>
|
||||
|
||||
<InputText
|
||||
handler={setUsername}
|
||||
value={username}
|
||||
handler={handleChange('username')}
|
||||
value={values.username}
|
||||
title="Юзернэйм"
|
||||
error={errors.username}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
|
||||
<InputText
|
||||
handler={setPassword}
|
||||
value={password}
|
||||
handler={handleChange('password')}
|
||||
value={values.password}
|
||||
title="Пароль"
|
||||
type="password"
|
||||
error={errors.password}
|
||||
|
|
@ -102,7 +78,7 @@ const LoginSocialRegisterDialogUnconnected: FC<Props> = ({
|
|||
|
||||
<div className={styles.check} onClick={() => setIsDryingPants(!isDryingPants)}>
|
||||
<Toggle value={!isDryingPants} color="primary" />
|
||||
<span>{phrase[Math.floor(Math.random() * phrase.length)]}</span>
|
||||
<span>{phrase}</span>
|
||||
</div>
|
||||
</Group>
|
||||
</div>
|
||||
|
|
@ -112,9 +88,4 @@ const LoginSocialRegisterDialogUnconnected: FC<Props> = ({
|
|||
);
|
||||
};
|
||||
|
||||
const LoginSocialRegisterDialog = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(LoginSocialRegisterDialogUnconnected);
|
||||
|
||||
export { LoginSocialRegisterDialog };
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { FC } from "react";
|
||||
import { ModalWrapper } from "~/components/dialogs/ModalWrapper";
|
||||
import { DIALOG_CONTENT } from "~/constants/modal";
|
||||
import { useModalStore } from "~/store/modal/useModalStore";
|
||||
import { has } from "ramda";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import React, { FC } from 'react';
|
||||
import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
|
||||
import { DIALOG_CONTENT } from '~/constants/modal';
|
||||
import { useModalStore } from '~/store/modal/useModalStore';
|
||||
import { has } from 'ramda';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
|
||||
type IProps = {};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,9 @@ import { getURL } from '~/utils/dom';
|
|||
import { PRESETS } from '~/constants/urls';
|
||||
import styles from './styles.module.scss';
|
||||
import classNames from 'classnames';
|
||||
import { useBlockBackButton } from '~/hooks/navigation/useBlockBackButton';
|
||||
import { useModal } from '~/hooks/modal/useModal';
|
||||
import { observer } from 'mobx-react';
|
||||
import { IFile } from '~/redux/types';
|
||||
import { IFile } from '~/types';
|
||||
import { DialogComponentProps } from '~/types/modal';
|
||||
|
||||
export interface PhotoSwipeProps extends DialogComponentProps {
|
||||
|
|
@ -60,8 +59,6 @@ const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
|
|||
});
|
||||
}, [hideModal, items, index]);
|
||||
|
||||
useBlockBackButton(hideModal);
|
||||
|
||||
return (
|
||||
<div className="pswp" tabIndex={-1} role="dialog" aria-hidden="true" ref={ref}>
|
||||
<div className={classNames('pswp__bg', styles.bg)} />
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import React, { FC } from 'react';
|
||||
import { BetterScrollDialog } from '../BetterScrollDialog';
|
||||
import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
|
||||
import { ProfileInfo } from '~/containers/profile/ProfileInfo';
|
||||
import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
|
||||
import { Tabs } from '~/components/dialogs/Tabs';
|
||||
import { ProfileDescription } from '~/components/profile/ProfileDescription';
|
||||
import { ProfileMessages } from '~/containers/profile/ProfileMessages';
|
||||
import { ProfileSettings } from '~/components/profile/ProfileSettings';
|
||||
import { ProfileAccounts } from '~/components/profile/ProfileAccounts';
|
||||
import { ProfileAccounts } from '~/containers/profile/ProfileAccounts';
|
||||
import { DialogComponentProps } from '~/types/modal';
|
||||
import { useUser } from '~/hooks/user/userUser';
|
||||
import { useUser } from '~/hooks/auth/useUser';
|
||||
import { useGetProfile } from '~/hooks/profile/useGetProfile';
|
||||
import { ProfileProvider } from '~/utils/providers/ProfileProvider';
|
||||
|
||||
|
|
@ -18,7 +18,9 @@ export interface ProfileDialogProps extends DialogComponentProps {
|
|||
|
||||
const ProfileDialog: FC<ProfileDialogProps> = ({ username, onRequestClose }) => {
|
||||
const { isLoading, profile } = useGetProfile(username);
|
||||
const { id } = useUser();
|
||||
const {
|
||||
user: { id },
|
||||
} = useUser();
|
||||
|
||||
return (
|
||||
<ProfileProvider username={username}>
|
||||
|
|
|
|||
|
|
@ -1,137 +1,77 @@
|
|||
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { BetterScrollDialog } from '../BetterScrollDialog';
|
||||
import React, { FC, useCallback, useMemo, useState } from 'react';
|
||||
import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { InputText } from '~/components/input/InputText';
|
||||
import { Button } from '~/components/input/Button';
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
import * as AUTH_ACTIONS from '~/redux/auth/actions';
|
||||
import { pick } from 'ramda';
|
||||
import { selectAuthRestore } from '~/redux/auth/selectors';
|
||||
import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
import { useCloseOnEscape } from '~/hooks';
|
||||
import { DialogComponentProps } from '~/types/modal';
|
||||
import { useRestoreCode } from '~/hooks/auth/useRestoreCode';
|
||||
import { RestoreInvalidCode } from '~/components/auth/restore/RestoreInvalidCode';
|
||||
import { RestoreSuccess } from '~/components/auth/restore/RestoreSuccess';
|
||||
import { useRestorePasswordForm } from '~/hooks/auth/useRestorePasswordForm';
|
||||
import { apiRestoreCode } from '~/api/auth';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
restore: selectAuthRestore(state),
|
||||
});
|
||||
type RestorePasswordDialogProps = DialogComponentProps & {
|
||||
code: string;
|
||||
};
|
||||
|
||||
const mapDispatchToProps = pick(['authRestorePassword', 'authSetRestore'], AUTH_ACTIONS);
|
||||
const RestorePasswordDialog: FC<RestorePasswordDialogProps> = ({ onRequestClose, code }) => {
|
||||
useCloseOnEscape(onRequestClose);
|
||||
|
||||
type IProps = DialogComponentProps &
|
||||
ReturnType<typeof mapStateToProps> &
|
||||
typeof mapDispatchToProps & {};
|
||||
const { codeUser, isLoading, error } = useRestoreCode(code);
|
||||
|
||||
const RestorePasswordDialogUnconnected: FC<IProps> = ({
|
||||
restore: { error, is_loading, is_succesfull, user },
|
||||
authSetRestore,
|
||||
onRequestClose,
|
||||
authRestorePassword,
|
||||
}) => {
|
||||
const [password, setPassword] = useState('');
|
||||
const [password_again, setPasswordAgain] = useState('');
|
||||
const [isSent, setIsSent] = useState(false);
|
||||
const onSent = useCallback(() => setIsSent(true), [setIsSent]);
|
||||
|
||||
const doesnt_match = useMemo(
|
||||
() => !password || !password_again || password.trim() !== password_again.trim(),
|
||||
[password_again, password]
|
||||
const { handleChange, handleSubmit, values, errors } = useRestorePasswordForm(
|
||||
code,
|
||||
apiRestoreCode,
|
||||
onSent
|
||||
);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
event => {
|
||||
event.preventDefault();
|
||||
|
||||
if (doesnt_match) return;
|
||||
|
||||
authRestorePassword(password);
|
||||
},
|
||||
[doesnt_match, authRestorePassword, password]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (error || is_succesfull) {
|
||||
authSetRestore({ error: '', is_succesfull: false });
|
||||
}
|
||||
}, [authSetRestore, error, is_succesfull, password, password_again]);
|
||||
|
||||
const buttons = useMemo(
|
||||
() => (
|
||||
<Group className={styles.buttons}>
|
||||
<Button color={doesnt_match ? 'outline' : 'primary'}>Восстановить</Button>
|
||||
<Button color="primary">Восстановить</Button>
|
||||
</Group>
|
||||
),
|
||||
[doesnt_match]
|
||||
[]
|
||||
);
|
||||
|
||||
const overlay = useMemo(
|
||||
() =>
|
||||
is_succesfull ? (
|
||||
<Group className={styles.shade}>
|
||||
<Icon icon="check" size={64} />
|
||||
const overlay = useMemo(() => {
|
||||
if (isSent) {
|
||||
return <RestoreSuccess username={codeUser?.username} onClick={onRequestClose} />;
|
||||
}
|
||||
|
||||
<div>Пароль обновлен</div>
|
||||
<div>Добро пожаловать домой, ~{user?.username}!</div>
|
||||
if (error) {
|
||||
return <RestoreInvalidCode onClose={onRequestClose} error={error} />;
|
||||
}
|
||||
|
||||
<div />
|
||||
|
||||
<Button color="secondary" onClick={onRequestClose}>
|
||||
Ура!
|
||||
</Button>
|
||||
</Group>
|
||||
) : (
|
||||
undefined
|
||||
),
|
||||
[is_succesfull, onRequestClose, user]
|
||||
);
|
||||
|
||||
const not_ready = useMemo(
|
||||
() => (is_loading && !user ? <div className={styles.shade} /> : undefined),
|
||||
[is_loading, user]
|
||||
);
|
||||
|
||||
const invalid_code = useMemo(
|
||||
() =>
|
||||
!is_loading && !user ? (
|
||||
<Group className={styles.error_shade}>
|
||||
<Icon icon="close" size={64} />
|
||||
|
||||
<div>{ERROR_LITERAL[error || ERRORS.CODE_IS_INVALID]}</div>
|
||||
|
||||
<div className={styles.spacer} />
|
||||
|
||||
<Button color="primary" onClick={onRequestClose}>
|
||||
Очень жаль
|
||||
</Button>
|
||||
</Group>
|
||||
) : (
|
||||
undefined
|
||||
),
|
||||
[is_loading, user, error, onRequestClose]
|
||||
);
|
||||
|
||||
useCloseOnEscape(onRequestClose);
|
||||
if (isLoading) {
|
||||
return <div className={styles.shade} />;
|
||||
}
|
||||
}, [isLoading, error, isSent, codeUser, onRequestClose]);
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<BetterScrollDialog
|
||||
footer={buttons}
|
||||
overlay={overlay}
|
||||
width={300}
|
||||
onClose={onRequestClose}
|
||||
is_loading={is_loading}
|
||||
error={error && ERROR_LITERAL[error]}
|
||||
overlay={overlay || not_ready || invalid_code}
|
||||
is_loading={isLoading}
|
||||
>
|
||||
<div className={styles.wrap}>
|
||||
<Group>
|
||||
<div className={styles.header}>
|
||||
Пришло время сменить пароль{user && user.username && `, ~${user.username}`}
|
||||
</div>
|
||||
<div className={styles.header}>Пришло время сменить пароль, {codeUser?.username}</div>
|
||||
|
||||
<InputText
|
||||
title="Новый пароль"
|
||||
value={password}
|
||||
handler={setPassword}
|
||||
value={values.newPassword}
|
||||
handler={handleChange('newPassword')}
|
||||
error={errors.newPassword}
|
||||
autoFocus
|
||||
type="password"
|
||||
/>
|
||||
|
|
@ -139,9 +79,9 @@ const RestorePasswordDialogUnconnected: FC<IProps> = ({
|
|||
<InputText
|
||||
title="Ещё раз"
|
||||
type="password"
|
||||
value={password_again}
|
||||
handler={setPasswordAgain}
|
||||
error={password_again && doesnt_match ? ERROR_LITERAL[ERRORS.DOESNT_MATCH] : ''}
|
||||
value={values.newPasswordAgain}
|
||||
handler={handleChange('newPasswordAgain')}
|
||||
error={errors.newPasswordAgain}
|
||||
/>
|
||||
|
||||
<Group className={styles.text}>
|
||||
|
|
@ -158,9 +98,4 @@ const RestorePasswordDialogUnconnected: FC<IProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
const RestorePasswordDialog = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(RestorePasswordDialogUnconnected);
|
||||
|
||||
export { RestorePasswordDialog };
|
||||
|
|
|
|||
|
|
@ -1,58 +1,32 @@
|
|||
import React, { useCallback, useEffect, useMemo, useState, VFC } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { BetterScrollDialog } from "../BetterScrollDialog";
|
||||
import { Group } from "~/components/containers/Group";
|
||||
import { InputText } from "~/components/input/InputText";
|
||||
import { Button } from "~/components/input/Button";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
import * as AUTH_ACTIONS from "~/redux/auth/actions";
|
||||
import { selectAuthRestore } from "~/redux/auth/selectors";
|
||||
import { ERROR_LITERAL } from "~/constants/errors";
|
||||
import { Icon } from "~/components/input/Icon";
|
||||
import { useCloseOnEscape } from "~/hooks";
|
||||
import { DialogComponentProps } from "~/types/modal";
|
||||
import { useShallowSelect } from "~/hooks/data/useShallowSelect";
|
||||
import { IAuthState } from "~/redux/auth/types";
|
||||
import React, { useCallback, useMemo, useState, VFC } from 'react';
|
||||
import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { InputText } from '~/components/input/InputText';
|
||||
import { Button } from '~/components/input/Button';
|
||||
import styles from './styles.module.scss';
|
||||
import { useCloseOnEscape } from '~/hooks';
|
||||
import { DialogComponentProps } from '~/types/modal';
|
||||
import { useRestoreRequestForm } from '~/hooks/auth/useRestoreRequestForm';
|
||||
import { apiRequestRestoreCode } from '~/api/auth';
|
||||
import { RestoreSent } from '~/components/auth/restore/RestoreSent';
|
||||
|
||||
interface RestoreRequestDialogProps extends DialogComponentProps {}
|
||||
|
||||
const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({ onRequestClose }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { error, is_loading, is_succesfull } = useShallowSelect(selectAuthRestore);
|
||||
const [field, setField] = useState('');
|
||||
useCloseOnEscape(onRequestClose);
|
||||
|
||||
const authSetRestore = useCallback(
|
||||
(restore: Partial<IAuthState['restore']>) => dispatch(AUTH_ACTIONS.authSetRestore(restore)),
|
||||
[dispatch]
|
||||
const [isSent, setIsSent] = useState(false);
|
||||
const onSent = useCallback(() => setIsSent(true), [setIsSent]);
|
||||
|
||||
const { isSubmitting, handleSubmit, handleChange, errors, values } = useRestoreRequestForm(
|
||||
apiRequestRestoreCode,
|
||||
onSent
|
||||
);
|
||||
|
||||
const authRequestRestoreCode = useCallback(
|
||||
(field: string) => dispatch(AUTH_ACTIONS.authRequestRestoreCode(field)),
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
event => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!field) return;
|
||||
|
||||
authRequestRestoreCode(field);
|
||||
},
|
||||
[authRequestRestoreCode, field]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (error || is_succesfull) {
|
||||
authSetRestore({ error: '', is_succesfull: false });
|
||||
}
|
||||
}, [authSetRestore, error, field, is_succesfull]);
|
||||
|
||||
const buttons = useMemo(
|
||||
() => (
|
||||
<Group className={styles.buttons}>
|
||||
<Button>Восстановить</Button>
|
||||
<Button color="secondary">Восстановить</Button>
|
||||
</Group>
|
||||
),
|
||||
[]
|
||||
|
|
@ -60,42 +34,25 @@ const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({ onRequestClose }
|
|||
|
||||
const header = useMemo(() => <div className={styles.illustration} />, []);
|
||||
|
||||
const overlay = useMemo(
|
||||
() =>
|
||||
is_succesfull ? (
|
||||
<Group className={styles.shade}>
|
||||
<Icon icon="check" size={64} />
|
||||
|
||||
<div>Проверьте почту, мы отправили на неё код</div>
|
||||
|
||||
<div />
|
||||
|
||||
<Button color="secondary" onClick={onRequestClose}>
|
||||
Отлично!
|
||||
</Button>
|
||||
</Group>
|
||||
) : (
|
||||
undefined
|
||||
),
|
||||
[is_succesfull, onRequestClose]
|
||||
);
|
||||
|
||||
useCloseOnEscape(onRequestClose);
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<BetterScrollDialog
|
||||
header={header}
|
||||
footer={buttons}
|
||||
width={300}
|
||||
onClose={onRequestClose}
|
||||
is_loading={is_loading}
|
||||
error={error && ERROR_LITERAL[error]}
|
||||
overlay={overlay}
|
||||
is_loading={isSubmitting}
|
||||
overlay={isSent ? <RestoreSent onClose={onRequestClose} /> : undefined}
|
||||
>
|
||||
<div className={styles.wrap}>
|
||||
<Group>
|
||||
<InputText title="Имя или email" value={field} handler={setField} autoFocus />
|
||||
<InputText
|
||||
title="Имя или email"
|
||||
value={values.field}
|
||||
handler={handleChange('field')}
|
||||
error={errors.field}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<div className={styles.text}>
|
||||
Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля.
|
||||
|
|
|
|||
|
|
@ -21,29 +21,3 @@
|
|||
justify-content: center;
|
||||
font: $font_18_semibold;
|
||||
}
|
||||
|
||||
.shade {
|
||||
@include outer_shadow();
|
||||
|
||||
background: $content_bg;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $radius;
|
||||
padding: $gap * 2;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font: $font_18_semibold;
|
||||
text-align: center;
|
||||
color: $wisegreen;
|
||||
|
||||
svg {
|
||||
fill: $wisegreen;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { FC } from "react";
|
||||
import { BetterScrollDialog } from "../BetterScrollDialog";
|
||||
import styles from "./styles.module.scss";
|
||||
import React, { FC } from 'react';
|
||||
import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue