attaching accounts and displaying errors

src/components/profile/ProfileAccounts/index.tsx

@@ -10,6 +10,7 @@ import { selectAuthProfile } from '~/redux/auth/selectors';
 import { IState } from '~/redux/store';
 import { connect } from 'react-redux';
 import { API } from '~/constants/api';
+import { ProfileAccountsError } from '~/components/profile/ProfileAccountsError';
 
 const mapStateToProps = (state: IState) => selectAuthProfile(state).socials;
 const mapDispatchToProps = {
@@ -33,6 +34,7 @@ const ProfileAccountsUnconnected: FC<IProps> = ({
   authSetSocials,
   accounts,
   is_loading,
+  error,
 }) => {
   const onMessage = useCallback(
     (event: MessageEvent) => {
@@ -57,6 +59,8 @@ const ProfileAccountsUnconnected: FC<IProps> = ({
     []
   );
 
+  const resetErrors = useCallback(() => authSetSocials({ error: '' }), [authSetSocials]);
+
   useEffect(() => {
     authGetSocials();
   }, [authGetSocials]);
@@ -68,6 +72,8 @@ const ProfileAccountsUnconnected: FC<IProps> = ({
 
   return (
     <Group className={styles.wrap}>
+      {error && <ProfileAccountsError onClose={resetErrors} error={error} />}
+
       <Group className={styles.info}>
         <p>
           Ты можешь входить в Убежище, используя аккаунты на других сайтах вместо ввода логина и

src/components/profile/ProfileAccounts/styles.scss

@@ -3,7 +3,6 @@
 }
 
 .list {
-  padding: $gap;
   box-shadow: inset transparentize(white, 0.9) 0 0 0 2px;
   border-radius: $radius;
 }
@@ -38,6 +37,12 @@
   grid-template-columns: 20px auto 20px;
   grid-column-gap: $gap * 1.5;
   align-items: center;
+  border-bottom: 1px solid transparentize(white, 0.9);
+  padding: $gap;
+
+  &:last-child {
+    border-bottom: none;
+  }
 
   &__photo {
     width: 28px;

src/components/profile/ProfileAccountsError/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import styles from './styles.scss';
+import { Group } from '~/components/containers/Group';
+import { ERROR_LITERAL } from '~/constants/errors';
+import { Button } from '~/components/input/Button';
+
+interface IProps {
+  onClose: () => void;
+  error: string;
+}
+
+const ProfileAccountsError: FC<IProps> = ({ onClose, error }) => (
+  <div className={styles.wrap}>
+    <Group className={styles.content}>
+      <div className={styles.title}>О НЕТ!</div>
+      <div className={styles.text}>{ERROR_LITERAL[error] || error}</div>
+      <Button onClick={onClose}>Оу, жаль</Button>
+    </Group>
+  </div>
+);
+
+export { ProfileAccountsError };

src/components/profile/ProfileAccountsError/styles.scss

@@ -0,0 +1,36 @@
+.wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background-color: transparentize(black, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @include can_backdrop {
+  background-color: transparentize($content_bg, 0.5);
+    backdrop-filter: blur(10px);
+  }
+}
+
+.title {
+  text-transform: capitalize;
+  font: $font_cell_title;
+}
+
+.text {
+  padding: $gap 0 $gap * 3;
+}
+
+.content {
+  max-width: 260px;
+  width: 100%;
+  color: white;
+  border-radius: $radius;
+  background-color: $content_bg;
+  padding: $gap * 2;
+  line-height: 1.2em;
+}