added request code dialog

2025-04-25 12:56:41 +07:00 · 2019-11-25 16:08:22 +07:00 · 2019-11-25 16:08:22 +07:00 · 6dcb21e9e4
commit 6dcb21e9e4
parent c0c832d158
18 changed files with 292 additions and 88 deletions
--- a/src/components/input/Button/index.tsx
+++ b/src/components/input/Button/index.tsx
@ -9,6 +9,7 @@ type IButtonProps = DetailedHTMLProps<
  HTMLButtonElement
 > & {
  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
+  color?: 'primary' | 'secondary' | 'outline' | 'link';
  iconLeft?: IIcon;
  iconRight?: IIcon;
  seamless?: boolean;
@ -25,6 +26,7 @@ type IButtonProps = DetailedHTMLProps<
 const Button: FC<IButtonProps> = memo(
  ({
    className = '',
+    color = 'primary',
    size = 'normal',
    iconLeft,
    iconRight,
@ -44,7 +46,7 @@ const Button: FC<IButtonProps> = memo(
    createElement(
      seamless || non_submitting ? 'div' : 'button',
      {
-        className: classnames(styles.button, className, styles[size], {
+        className: classnames(styles.button, className, styles[size], styles[color], {
          red,
          grey,
          seamless,
--- a/src/components/input/Button/styles.scss
+++ b/src/components/input/Button/styles.scss
@ -143,6 +143,34 @@
    padding-right: $gap;
  }

+  &.primary {
+    background: $red_gradient;
+  }
+
+  &.secondary {
+    background: $green_gradient;
+  }
+
+  &.outline {
+    background: transparent;
+    box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
+    color: transparentize(white, 0.8);
+
+    svg {
+      fill: transparentize(white, 0.8);
+    }
+  }
+
+  &.link {
+    background: transparent;
+    color: white;
+    box-shadow: none;
+
+    svg {
+      fill: white;
+    }
+  }
+
  > * {
    margin: 0 5px;

--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@ -1,29 +1,30 @@
-import { INode } from "~/redux/types";
+import { INode } from '~/redux/types';

 export const API = {
  BASE: process.env.API_HOST,
  USER: {
-    LOGIN: "/user/login",
+    LOGIN: '/user/login',
    VKONTAKTE_LOGIN: `${process.env.API_HOST}/user/vkontakte`,
-    ME: "/user/",
+    ME: '/user/',
    PROFILE: (username: string) => `/user/${username}/profile`,
    MESSAGES: (username: string) => `/user/${username}/messages`,
    MESSAGE_SEND: (username: string) => `/user/${username}/messages`,
-    GET_UPDATES: "/user/updates",
+    GET_UPDATES: '/user/updates',
+    REQUEST_CODE: (code?: string) => `/user/restore/${code || ''}`,

-    UPLOAD: (target, type) => `/upload/${target}/${type}`
+    UPLOAD: (target, type) => `/upload/${target}/${type}`,
  },
  NODE: {
-    SAVE: "/node/",
-    GET: "/node/",
-    GET_DIFF: "/node/diff",
+    SAVE: '/node/',
+    GET: '/node/',
+    GET_DIFF: '/node/diff',
    GET_NODE: (id: number | string) => `/node/${id}`,

-    COMMENT: (id: INode["id"]) => `/node/${id}/comment`,
-    RELATED: (id: INode["id"]) => `/node/${id}/related`,
-    UPDATE_TAGS: (id: INode["id"]) => `/node/${id}/tags`,
-    POST_LIKE: (id: INode["id"]) => `/node/${id}/like`,
-    POST_STAR: (id: INode["id"]) => `/node/${id}/heroic`,
-    SET_CELL_VIEW: (id: INode["id"]) => `/node/${id}/cell-view`
-  }
+    COMMENT: (id: INode['id']) => `/node/${id}/comment`,
+    RELATED: (id: INode['id']) => `/node/${id}/related`,
+    UPDATE_TAGS: (id: INode['id']) => `/node/${id}/tags`,
+    POST_LIKE: (id: INode['id']) => `/node/${id}/like`,
+    POST_STAR: (id: INode['id']) => `/node/${id}/heroic`,
+    SET_CELL_VIEW: (id: INode['id']) => `/node/${id}/cell-view`,
+  },
 };
--- a/src/containers/dialogs/BetterScrollDialog/index.tsx
+++ b/src/containers/dialogs/BetterScrollDialog/index.tsx
@ -1,7 +1,8 @@
-import React, { FC, MouseEventHandler, useEffect, useRef } from 'react';
+import React, { FC, MouseEventHandler, useEffect, useRef, ReactElement } from 'react';
 import * as styles from './styles.scss';
 import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
 import { Icon } from '~/components/input/Icon';
+import { LoaderCircle } from '~/components/input/LoaderCircle';

 interface IProps {
  children: React.ReactChild;
@ -11,6 +12,8 @@ interface IProps {
  size?: 'medium' | 'big';
  width?: number;
  error?: string;
+  is_loading?: boolean;
+  overlay?: ReactElement;

  onOverlayClick?: MouseEventHandler<HTMLDivElement>;
  onRefCapture?: (ref: any) => void;
@ -25,6 +28,8 @@ const BetterScrollDialog: FC<IProps> = ({
  width = 600,
  error,
  onClose,
+  is_loading,
+  overlay = null,
 }) => {
  const ref = useRef(null);

@ -51,7 +56,15 @@ const BetterScrollDialog: FC<IProps> = ({
          {error && <div className={styles.error}>{error}</div>}
        </div>

-        {footer && <div className={styles.header}>{footer}</div>}
+        {!!is_loading && (
+          <div className={styles.shade}>
+            <LoaderCircle size={48} />
+          </div>
+        )}
+
+        {overlay}
+
+        {footer && <div className={styles.footer}>{footer}</div>}
      </div>
    </div>
  );
--- a/src/containers/dialogs/BetterScrollDialog/styles.scss
+++ b/src/containers/dialogs/BetterScrollDialog/styles.scss
@ -109,3 +109,31 @@
  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;
+  }
+}
--- a/src/containers/dialogs/LoginDialog/index.tsx
+++ b/src/containers/dialogs/LoginDialog/index.tsx
@ -67,12 +67,7 @@ const LoginDialogUnconnected: FC<IProps> = ({
  const buttons = useMemo(
    () => (
      <Group className={styles.footer}>
-        <Button
-          className={styles.secondary_button}
-          iconLeft="vk"
-          type="button"
-          onClick={onSocialLogin}
-        >
+        <Button color="outline" iconLeft="vk" type="button" onClick={onSocialLogin}>
          <span>Вконтакте</span>
        </Button>

@ -88,7 +83,7 @@ const LoginDialogUnconnected: FC<IProps> = ({

  return (
    <form onSubmit={onSubmit}>
-      <BetterScrollDialog width={260} error={error} onClose={onRequestClose} footer={buttons}>
+      <BetterScrollDialog width={300} error={error} onClose={onRequestClose} footer={buttons}>
        <Padder>
          <div className={styles.wrap}>
            <Group>
@ -98,7 +93,12 @@ const LoginDialogUnconnected: FC<IProps> = ({

              <InputText title="Пароль" handler={setPassword} value={password} type="password" />

-              <Button className={styles.forgot_button} type="button" onClick={onRestoreRequest}>
+              <Button
+                color="link"
+                type="button"
+                onClick={onRestoreRequest}
+                className={styles.forgot_button}
+              >
                Вспомнить пароль
              </Button>
            </Group>
--- a/src/containers/dialogs/LoginDialog/styles.scss
+++ b/src/containers/dialogs/LoginDialog/styles.scss
@ -28,9 +28,7 @@ $vk_color: $secondary_color;
 }

 .forgot_button {
-  background: $content_bg;
-  box-shadow: none;
-  color: $secondary_color;
+  opacity: 0.5;
 }

 .buttons {
--- a/src/containers/dialogs/RestoreRequestDialog/index.tsx
+++ b/src/containers/dialogs/RestoreRequestDialog/index.tsx
@ -1,33 +1,101 @@
-import React, { FC, useState, useMemo, useCallback } from 'react';
+import React, { FC, useState, useMemo, useCallback, useEffect } from 'react';
 import { IDialogProps } from '~/redux/types';
 import { connect } 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.scss';

-const mapStateToProps = () => ({});
-const mapDispatchToProps = {};
+import * as AUTH_ACTIONS from '~/redux/auth/actions';
+import pick from 'ramda/es/pick';
+import { selectAuthRestore } from '~/redux/auth/selectors';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { ERROR_LITERAL } from '~/constants/errors';
+import { Icon } from '~/components/input/Icon';
+
+const mapStateToProps = state => ({
+  restore: selectAuthRestore(state),
+});
+
+const mapDispatchToProps = pick(['authRequestRestoreCode', 'authSetRestore'], AUTH_ACTIONS);

 type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};

-const RestoreRequestDialogUnconnected: FC<IProps> = ({}) => {
+const RestoreRequestDialogUnconnected: FC<IProps> = ({
+  restore: { error, is_loading, is_succesfull },
+  authSetRestore,
+  onRequestClose,
+  authRequestRestoreCode,
+}) => {
  const [field, setField] = useState();

-  const onSubmit = useCallback(event => {
-    event.preventDefault();
-  }, []);
+  const onSubmit = useCallback(
+    event => {
+      event.preventDefault();

-  const buttons = useMemo(() => <Button>Восстановить</Button>, []);
+      if (!field) return;
+
+      authRequestRestoreCode(field);
+    },
+    [authRequestRestoreCode, field]
+  );
+
+  useEffect(() => {
+    if (error || is_succesfull) {
+      authSetRestore({ error: null, is_succesfull: false });
+    }
+  }, [field]);
+
+  const buttons = useMemo(
+    () => (
+      <Group className={styles.buttons}>
+        <Button>Восстановить</Button>
+      </Group>
+    ),
+    []
+  );
+
+  const header = useMemo(() => <div className={styles.illustration}>ILLUSTRATE ME</div>, []);
+
+  const overlay = useMemo(
+    () =>
+      is_succesfull ? (
+        <Group className={styles.shade}>
+          <Icon icon="check" size={64} />
+
+          <div>Проверьте почту, мы отправили на неё код</div>
+
+          <div />
+
+          <Button color="secondary" onClick={onRequestClose}>
+            Отлично!
+          </Button>
+        </Group>
+      ) : null,
+    [is_succesfull]
+  );

  return (
    <form onSubmit={onSubmit}>
-      <BetterScrollDialog footer={buttons}>
-        <Group>
-          <InputText title="Имя или email" value={field} handler={setField} />
+      <BetterScrollDialog
+        header={header}
+        footer={buttons}
+        width={300}
+        onClose={onRequestClose}
+        is_loading={is_loading}
+        error={error && ERROR_LITERAL[error]}
+        overlay={overlay}
+      >
+        <div className={styles.wrap}>
+          <Group>
+            <InputText title="Имя или email" value={field} handler={setField} autoFocus />

-          <div>Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля.</div>
-        </Group>
+            <div className={styles.text}>
+              Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля.
+            </div>
+          </Group>
+        </div>
      </BetterScrollDialog>
    </form>
  );
--- a/src/containers/dialogs/RestoreRequestDialog/styles.scss
+++ b/src/containers/dialogs/RestoreRequestDialog/styles.scss
@ -0,0 +1,47 @@
+.wrap {
+  padding: $gap $gap $gap * 4;
+}
+
+.buttons {
+  padding: $gap;
+}
+
+.text {
+  font: $font_14_regular;
+  padding: $gap;
+  color: darken(white, 50%);
+}
+
+.illustration {
+  min-height: 160px;
+  display: flex;
+  align-items: center;
+  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;
+  }
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,11 +1,11 @@
-import * as React from "react";
-import { render } from "react-dom";
-import { Provider } from "react-redux";
-import { PersistGate } from "redux-persist/integration/react";
-import { configureStore } from "~/redux/store";
-import App from "~/containers/App";
+import * as React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { configureStore } from '~/redux/store';
+import App from '~/containers/App';

-require("./styles/main.scss");
+require('./styles/main.scss');

 const { store, persistor } = configureStore();

@ -15,12 +15,13 @@ render(
      <App />
    </PersistGate>
  </Provider>,
-  document.getElementById("app")
+  document.getElementById('app')
 );

 /*

  [Stage 0]:
+- illustrate restoreRequestDialog
 - check if email is registered at social login
 - friendship
 - password restore
--- a/src/redux/auth/actions.ts
+++ b/src/redux/auth/actions.ts
@ -77,6 +77,11 @@ export const authPatchUser = (user: Partial<IUser>) => ({
  user,
 });

+export const authRequestRestoreCode = (field: string) => ({
+  type: AUTH_USER_ACTIONS.REQUEST_RESTORE_CODE,
+  field,
+});
+
 export const authSetRestore = (restore: Partial<IAuthState['restore']>) => ({
  type: AUTH_USER_ACTIONS.SET_RESTORE,
  restore,
--- a/src/redux/auth/api.ts
+++ b/src/redux/auth/api.ts
@ -1,17 +1,12 @@
-import {
-  api,
-  errorMiddleware,
-  resultMiddleware,
-  configWithToken
-} from "~/utils/api";
-import { API } from "~/constants/api";
-import { IResultWithStatus, IMessage } from "~/redux/types";
-import { userLoginTransform } from "~/redux/auth/transforms";
-import { IUser } from "./types";
+import { api, errorMiddleware, resultMiddleware, configWithToken } from '~/utils/api';
+import { API } from '~/constants/api';
+import { IResultWithStatus, IMessage } from '~/redux/types';
+import { userLoginTransform } from '~/redux/auth/transforms';
+import { IUser } from './types';

 export const apiUserLogin = ({
  username,
-  password
+  password,
 }: {
  username: string;
  password: string;
@ -22,9 +17,7 @@ export const apiUserLogin = ({
    .catch(errorMiddleware)
    .then(userLoginTransform);

-export const apiAuthGetUser = ({
-  access
-}): Promise<IResultWithStatus<{ user: IUser }>> =>
+export const apiAuthGetUser = ({ access }): Promise<IResultWithStatus<{ user: IUser }>> =>
  api
    .get(API.USER.ME, configWithToken(access))
    .then(resultMiddleware)
@ -32,7 +25,7 @@ export const apiAuthGetUser = ({

 export const apiAuthGetUserProfile = ({
  access,
-  username
+  username,
 }): Promise<IResultWithStatus<{ user: IUser }>> =>
  api
    .get(API.USER.PROFILE(username), configWithToken(access))
@ -41,7 +34,7 @@ export const apiAuthGetUserProfile = ({

 export const apiAuthGetUserMessages = ({
  access,
-  username
+  username,
 }): Promise<IResultWithStatus<{ messages: IMessage[] }>> =>
  api
    .get(API.USER.MESSAGES(username), configWithToken(access))
@ -51,7 +44,7 @@ export const apiAuthGetUserMessages = ({
 export const apiAuthSendMessage = ({
  access,
  username,
-  message
+  message,
 }): Promise<IResultWithStatus<{ message: IMessage }>> =>
  api
    .post(API.USER.MESSAGE_SEND(username), { message }, configWithToken(access))
@ -61,21 +54,21 @@ export const apiAuthSendMessage = ({
 export const apiAuthGetUpdates = ({
  access,
  exclude_dialogs,
-  last
+  last,
 }): Promise<IResultWithStatus<{ message: IMessage }>> =>
  api
-    .get(
-      API.USER.GET_UPDATES,
-      configWithToken(access, { params: { exclude_dialogs, last } })
-    )
+    .get(API.USER.GET_UPDATES, configWithToken(access, { params: { exclude_dialogs, last } }))
    .then(resultMiddleware)
    .catch(errorMiddleware);

-export const apiUpdateUser = ({
-  access,
-  user
-}): Promise<IResultWithStatus<{ user: IUser }>> =>
+export const apiUpdateUser = ({ access, user }): Promise<IResultWithStatus<{ user: IUser }>> =>
  api
    .patch(API.USER.ME, { user }, configWithToken(access))
    .then(resultMiddleware)
    .catch(errorMiddleware);
+
+export const apiRequestRestoreCode = ({ field }): Promise<IResultWithStatus<{}>> =>
+  api
+    .post(API.USER.REQUEST_CODE(), { field })
+    .then(resultMiddleware)
+    .catch(errorMiddleware);
--- a/src/redux/auth/constants.ts
+++ b/src/redux/auth/constants.ts
@ -20,6 +20,7 @@ export const AUTH_USER_ACTIONS = {
  PATCH_USER: 'PATCH_USER',

  SET_RESTORE: 'SET_RESTORE',
+  REQUEST_RESTORE_CODE: 'REQUEST_RESTORE_CODE',
  RESTORE_PASSWORD: 'RESTORE_PASSWORD',
 };

--- a/src/redux/auth/reducer.ts
+++ b/src/redux/auth/reducer.ts
@ -37,7 +37,7 @@ const INITIAL_STATE: IAuthState = {
    user: null,
    is_loading: false,
    is_succesfull: false,
-    errors: {},
+    error: null,
  },
 };

--- a/src/redux/auth/sagas.ts
+++ b/src/redux/auth/sagas.ts
@ -16,6 +16,7 @@ import {
  authPatchUser,
  authRestorePassword,
  authSetRestore,
+  authRequestRestoreCode,
 } from '~/redux/auth/actions';
 import {
  apiUserLogin,
@ -25,6 +26,7 @@ import {
  apiAuthSendMessage,
  apiAuthGetUpdates,
  apiUpdateUser,
+  apiRequestRestoreCode,
 } from '~/redux/auth/api';
 import { modalSetShown, modalShowDialog } from '~/redux/modal/actions';
 import { selectToken, selectAuthProfile, selectAuthUser, selectAuthUpdates } from './selectors';
@ -275,11 +277,26 @@ function* patchUser({ user }: ReturnType<typeof authPatchUser>) {
  yield put(authSetProfile({ user: { ...me, ...data.user }, tab: 'profile' }));
 }

+function* requestRestoreCode({ field }: ReturnType<typeof authRequestRestoreCode>) {
+  if (!field) return;
+
+  yield put(authSetRestore({ error: null, is_loading: true }));
+  const { error, data } = yield call(apiRequestRestoreCode, { field });
+
+  console.log(data);
+
+  if (data.error || error) {
+    return yield put(authSetRestore({ is_loading: false, error: data.error || error }));
+  }
+
+  yield put(authSetRestore({ is_loading: false, is_succesfull: true }));
+}
+
 function* restorePassword({ code }: ReturnType<typeof authRestorePassword>) {
  if (!code && !code.length) {
    return yield put(
      authSetRestore({
-        errors: { code: ERRORS.CODE_IS_INVALID },
+        error: ERRORS.CODE_IS_INVALID,
        is_loading: false,
      })
    );
@ -300,6 +317,7 @@ function* authSaga() {
  yield takeLatest(AUTH_USER_ACTIONS.SET_LAST_SEEN_MESSAGES, setLastSeenMessages);
  yield takeLatest(AUTH_USER_ACTIONS.PATCH_USER, patchUser);
  yield takeLatest(AUTH_USER_ACTIONS.RESTORE_PASSWORD, restorePassword);
+  yield takeLatest(AUTH_USER_ACTIONS.REQUEST_RESTORE_CODE, requestRestoreCode);
 }

 export default authSaga;
--- a/src/redux/auth/selectors.ts
+++ b/src/redux/auth/selectors.ts
@ -1,9 +1,10 @@
 import { IState } from '~/redux/store';

-export const selectAuth = (state: IState): IState['auth'] => state.auth;
-export const selectUser = (state: IState): IState['auth']['user'] => state.auth.user;
-export const selectToken = (state: IState): IState['auth']['token'] => state.auth.token;
-export const selectAuthLogin = (state: IState): IState['auth']['login'] => state.auth.login;
-export const selectAuthProfile = (state: IState): IState['auth']['profile'] => state.auth.profile;
-export const selectAuthUser = (state: IState): IState['auth']['user'] => state.auth.user;
-export const selectAuthUpdates = (state: IState): IState['auth']['updates'] => state.auth.updates;
+export const selectAuth = (state: IState) => state.auth;
+export const selectUser = (state: IState) => state.auth.user;
+export const selectToken = (state: IState) => state.auth.token;
+export const selectAuthLogin = (state: IState) => state.auth.login;
+export const selectAuthProfile = (state: IState) => state.auth.profile;
+export const selectAuthUser = (state: IState) => state.auth.user;
+export const selectAuthUpdates = (state: IState) => state.auth.updates;
+export const selectAuthRestore = (state: IState) => state.auth.restore;
--- a/src/redux/auth/types.ts
+++ b/src/redux/auth/types.ts
@ -55,6 +55,6 @@ export type IAuthState = Readonly<{
    user: Pick<IUser, 'username' | 'photo'>;
    is_loading: boolean;
    is_succesfull: boolean;
-    errors: Record<string, string>;
+    error: string;
  };
 }>;
--- a/src/redux/modal/reducer.ts
+++ b/src/redux/modal/reducer.ts
@ -9,8 +9,8 @@ export interface IModalState {
 }

 const INITIAL_STATE: IModalState = {
-  is_shown: false,
-  dialog: null,
+  is_shown: true,
+  dialog: DIALOGS.RESTORE_REQUEST,
 };

 export default createReducer(INITIAL_STATE, MODAL_HANDLERS);