From 108f17b0e909e801545668dca059f52d50a4b47a Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 28 Jul 2020 14:11:04 +0700
Subject: [PATCH] moved accounts to settings

---
 src/components/main/UserButton/index.tsx      |  5 ---
 .../profile/ProfileAccounts/styles.scss       |  5 +--
 .../profile/ProfileAccountsError/styles.scss  |  3 +-
 .../profile/ProfileSettings/index.tsx         | 31 +++++++++++++---
 .../profile/ProfileSettings/styles.scss       | 37 +++++++++++++++++--
 src/constants/errors.ts                       |  2 +-
 src/containers/profile/ProfileInfo/index.tsx  | 28 ++++++--------
 src/containers/profile/ProfileTabs/index.tsx  |  7 ----
 src/redux/auth/types.ts                       |  2 +-
 9 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx
index b31acbc2..c3220067 100644
--- a/src/components/main/UserButton/index.tsx
+++ b/src/components/main/UserButton/index.tsx
@@ -22,10 +22,6 @@ const UserButton: FC<IProps> = ({ user: { username, photo }, authOpenProfile, on
     authOpenProfile(username, 'settings');
   }, [authOpenProfile, username]);
 
-  const onAccountsOpen = useCallback(() => {
-    authOpenProfile(username, 'accounts');
-  }, [authOpenProfile, username]);
-
   return (
     <div className={styles.wrap}>
       <Group horizontal className={styles.user_button}>
@@ -42,7 +38,6 @@ const UserButton: FC<IProps> = ({ user: { username, photo }, authOpenProfile, on
       <div className={styles.menu}>
         <div onClick={onProfileOpen}>Профиль</div>
         <div onClick={onSettingsOpen}>Настройки</div>
-        <div onClick={onAccountsOpen}>Аккаунты</div>
         <div onClick={onLogout}>Выдох</div>
       </div>
     </div>
diff --git a/src/components/profile/ProfileAccounts/styles.scss b/src/components/profile/ProfileAccounts/styles.scss
index bdbb7351..b425072d 100644
--- a/src/components/profile/ProfileAccounts/styles.scss
+++ b/src/components/profile/ProfileAccounts/styles.scss
@@ -1,10 +1,9 @@
 .wrap {
-  padding: $gap;
 }
 
 .list {
-  box-shadow: inset transparentize(white, 0.9) 0 0 0 2px;
   border-radius: $radius;
+  background: transparentize(white, 0.95);
 }
 
 .buttons {
@@ -80,6 +79,6 @@
 }
 
 .info {
-  padding: $gap;
+  padding: $gap $gap / 2;
   font: $font_14_regular;
 }
diff --git a/src/components/profile/ProfileAccountsError/styles.scss b/src/components/profile/ProfileAccountsError/styles.scss
index 10604e68..c36a67a5 100644
--- a/src/components/profile/ProfileAccountsError/styles.scss
+++ b/src/components/profile/ProfileAccountsError/styles.scss
@@ -12,9 +12,10 @@
   margin: 0 !important;
   padding: $gap;
   box-sizing: border-box;
+  border-radius: $radius;
 
   @include can_backdrop {
-  background-color: transparentize($red, 0.5);
+    background-color: transparentize($red, 0.5);
     backdrop-filter: blur(10px);
   }
 }
diff --git a/src/components/profile/ProfileSettings/index.tsx b/src/components/profile/ProfileSettings/index.tsx
index d0f9f9eb..e1f3b724 100644
--- a/src/components/profile/ProfileSettings/index.tsx
+++ b/src/components/profile/ProfileSettings/index.tsx
@@ -11,6 +11,7 @@ import reject from 'ramda/es/reject';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { ProfileAccounts } from '~/components/profile/ProfileAccounts';
+import classNames from 'classnames';
 
 const mapStateToProps = state => ({
   user: selectAuthUser(state),
@@ -70,7 +71,11 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
   return (
     <form className={styles.wrap} onSubmit={onSubmit}>
       <Group>
-        <Group>
+        <Group className={styles.pad}>
+          <div className={styles.pad__title}>
+            <span>О себе</span>
+          </div>
+
           <InputText
             value={data.fullname}
             handler={setFullname}
@@ -86,7 +91,13 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
           </div>
         </Group>
 
-        <Group className={styles.pad}>
+        <Filler />
+
+        <Group className={classNames(styles.pad, styles.pad_danger)}>
+          <div className={styles.pad__title}>
+            <span>Логин и пароли</span>
+          </div>
+
           <InputText
             value={data.username}
             handler={setUsername}
@@ -109,8 +120,6 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
             error={patch_errors.new_password && ERROR_LITERAL[patch_errors.new_password]}
           />
 
-          <div />
-
           <InputText
             value={password}
             handler={setPassword}
@@ -122,11 +131,23 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
           <div className={styles.small}>
             Чтобы изменить любое из этих полей, нужно ввести старый пароль.
           </div>
+
+          <Filler />
         </Group>
 
         <Filler />
 
-        <Group horizontal>
+        <Filler />
+
+        <div className={styles.pad}>
+          <div className={styles.pad__title}>
+            <span>Аккаунты</span>
+          </div>
+
+          <ProfileAccounts />
+        </div>
+
+        <Group horizontal className={styles.buttons}>
           <Filler />
           <Button title="Сохранить" type="submit" />
         </Group>
diff --git a/src/components/profile/ProfileSettings/styles.scss b/src/components/profile/ProfileSettings/styles.scss
index 7c64f431..03139f25 100644
--- a/src/components/profile/ProfileSettings/styles.scss
+++ b/src/components/profile/ProfileSettings/styles.scss
@@ -1,16 +1,47 @@
+$pad_danger: mix($red, $content_bg, 70%);
+$pad_usual: mix(white, $content_bg, 10%);
+
 .wrap {
   padding: $gap;
 }
 
 .pad {
-  padding: $gap;
-  box-shadow: transparentize($color: $red, $amount: 0.5) 0 0 0 2px;
+  padding: $gap * 1.5 $gap $gap;
+  box-shadow: inset $pad_usual 0 0 0 2px;
   border-radius: $radius;
+  position: relative;
+
+  &_danger {
+    box-shadow: inset $pad_danger 0 0 0 2px;
+
+    .pad__title {
+      span {
+        background: $pad_danger;
+      }
+    }
+  }
+
+  &__title {
+    position: relative;
+
+    span {
+      position: absolute;
+      top: -5px;
+      left: $radius;
+      transform: translate(0, -100%);
+      background: $pad_usual;
+      border-radius: 4px;
+      font: $font_10_semibold;
+      line-height: 12px;
+      padding: 2px $gap / 2;
+      text-transform: uppercase;
+    }
+  }
 }
 
 .small {
   font: $font_12_regular;
-  padding: 0 $gap $gap;
+  padding: 0 $gap 0;
 }
 
 .grid {
diff --git a/src/constants/errors.ts b/src/constants/errors.ts
index a73f4304..33924dca 100644
--- a/src/constants/errors.ts
+++ b/src/constants/errors.ts
@@ -46,5 +46,5 @@ export const ERROR_LITERAL = {
   [ERRORS.UNKNOWN_FILE_TYPE]: 'Запрещенный тип файла',
   [ERRORS.FILE_IS_TOO_BIG]: 'Файл слишком большой',
   [ERRORS.USER_EXIST_WITH_EMAIL]:
-    'Мы не можем продолжить, потому что у другого пользователя есть этот email.',
+    'Мы не можем продолжить, потому что есть другой пользователь с этим имэйлом.',
 };
diff --git a/src/containers/profile/ProfileInfo/index.tsx b/src/containers/profile/ProfileInfo/index.tsx
index 08eeb626..d8a8283c 100644
--- a/src/containers/profile/ProfileInfo/index.tsx
+++ b/src/containers/profile/ProfileInfo/index.tsx
@@ -1,13 +1,13 @@
-import React, { FC } from "react";
-import { IUser } from "~/redux/auth/types";
-import styles from "./styles.scss";
-import { Group } from "~/components/containers/Group";
-import { Placeholder } from "~/components/placeholders/Placeholder";
-import { getURL, getPrettyDate } from "~/utils/dom";
-import { PRESETS } from "~/constants/urls";
-import { ProfileTabs } from "../ProfileTabs";
-import { MessageForm } from "~/components/profile/MessageForm";
-import { ProfileAvatar } from "../ProfileAvatar";
+import React, { FC } from 'react';
+import { IUser } from '~/redux/auth/types';
+import styles from './styles.scss';
+import { Group } from '~/components/containers/Group';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { getURL, getPrettyDate } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import { ProfileTabs } from '../ProfileTabs';
+import { MessageForm } from '~/components/profile/MessageForm';
+import { ProfileAvatar } from '../ProfileAvatar';
 
 interface IProps {
   user?: IUser;
@@ -20,7 +20,7 @@ interface IProps {
 }
 
 const TAB_HEADERS = {
-  messages: <MessageForm is_sending_message={false} />
+  messages: <MessageForm is_sending_message={false} />,
 };
 
 const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab }) => (
@@ -30,11 +30,7 @@ const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab }) => (
 
       <div className={styles.field}>
         <div className={styles.name}>
-          {is_loading ? (
-            <Placeholder width="80%" />
-          ) : (
-            user.fullname || user.username
-          )}
+          {is_loading ? <Placeholder width="80%" /> : user.fullname || user.username}
         </div>
 
         <div className={styles.description}>
diff --git a/src/containers/profile/ProfileTabs/index.tsx b/src/containers/profile/ProfileTabs/index.tsx
index 65bcac3f..48b78981 100644
--- a/src/containers/profile/ProfileTabs/index.tsx
+++ b/src/containers/profile/ProfileTabs/index.tsx
@@ -30,13 +30,6 @@ const ProfileTabs: FC<IProps> = ({ tab, is_own, setTab }) => (
         >
           Настройки
         </div>
-
-        <div
-          className={classNames(styles.tab, { [styles.active]: tab === 'accounts' })}
-          onClick={() => setTab('accounts')}
-        >
-          Аккаунты
-        </div>
       </>
     )}
   </div>
diff --git a/src/redux/auth/types.ts b/src/redux/auth/types.ts
index 3675da4c..40f7f4ba 100644
--- a/src/redux/auth/types.ts
+++ b/src/redux/auth/types.ts
@@ -49,7 +49,7 @@ export type IAuthState = Readonly<{
   };
 
   profile: {
-    tab: 'profile' | 'messages' | 'settings' | 'accounts';
+    tab: 'profile' | 'messages' | 'settings';
     is_loading: boolean;
     is_loading_messages: boolean;
     is_sending_messages: boolean;