Rework layout of the profile

packages/app/components/profile/Profile.tsx

@@ -2,8 +2,10 @@ import React, { ComponentType, useCallback, useRef } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
+
 import { ChangeLanguageLink } from 'app/components/languageSwitcher';
 import { RelativeTime } from 'app/components/ui';
+import { Button } from 'app/components/ui/form';
 import { User } from 'app/components/user';
 import RulesPage from 'app/pages/rules/RulesPage';
 
@@ -61,7 +63,7 @@ const Profile: ComponentType<Props> = ({ user, activeLocale }) => {
                 </div>
 
                 <div className={styles.formColumn}>
-                    <div className={profileForm.form}>
+                    <div className={styles.profilePanel}>
                         <div className={styles.item}>
                             <h3 className={profileForm.title}>
                                 <Message key="personalData" defaultMessage="Personal data" />
@@ -108,20 +110,6 @@ const Profile: ComponentType<Props> = ({ user, activeLocale }) => {
                             value={user.email}
                         />
 
-                        <ProfileField
-                            link="/profile/change-password"
-                            label={<Message key="password" defaultMessage="Password:" />}
-                            value={
-                                <Message
-                                    key="changedAt"
-                                    defaultMessage="Changed {at}"
-                                    values={{
-                                        at: <RelativeTime timestamp={user.passwordChangedAt * 1000} />,
-                                    }}
-                                />
-                            }
-                        />
-
                         <ProfileField
                             label={<Message key="siteLanguage" defaultMessage="Site language:" />}
                             value={<ChangeLanguageLink />}
@@ -150,18 +138,6 @@ const Profile: ComponentType<Props> = ({ user, activeLocale }) => {
                             }
                         />
 
-                        <ProfileField
-                            link="/profile/mfa"
-                            label={<Message key="twoFactorAuth" defaultMessage="Two‑factor auth:" />}
-                            value={
-                                user.isOtpEnabled ? (
-                                    <Message key="enabled" defaultMessage="Enabled" />
-                                ) : (
-                                    <Message key="disabled" defaultMessage="Disabled" />
-                                )
-                            }
-                        />
-
                         <ProfileField
                             label={<Message key="uuid" defaultMessage="UUID:" />}
                             value={
@@ -175,6 +151,55 @@ const Profile: ComponentType<Props> = ({ user, activeLocale }) => {
                             }
                         />
                     </div>
+
+                    <div className={styles.profilePanel}>
+                        <div className={styles.item}>
+                            <h3 className={profileForm.title}>
+                                <Message key="accountManagement" defaultMessage="Account management" />
+                            </h3>
+                            <p className={profileForm.description}>
+                                <Message
+                                    key="accountManagementDescription"
+                                    defaultMessage="In this area you can manage the security settings of your account. Some operations may cause logout on other devices."
+                                />
+                            </p>
+                        </div>
+
+                        <ProfileField
+                            link="/profile/change-password"
+                            label={<Message key="password" defaultMessage="Password:" />}
+                            value={
+                                <Message
+                                    key="changedAt"
+                                    defaultMessage="Changed {at}"
+                                    values={{
+                                        at: <RelativeTime timestamp={user.passwordChangedAt * 1000} />,
+                                    }}
+                                />
+                            }
+                        />
+
+                        <ProfileField
+                            link="/profile/mfa"
+                            label={<Message key="twoFactorAuth" defaultMessage="Two‑factor auth:" />}
+                            value={
+                                user.isOtpEnabled ? (
+                                    <Message key="enabled" defaultMessage="Enabled" />
+                                ) : (
+                                    <Message key="disabled" defaultMessage="Disabled" />
+                                )
+                            }
+                        />
+
+                        <ProfileField
+                            value={
+                                // @ts-ignore
+                                <Button component={Link} to="/profile/delete" small color="black">
+                                    <Message key="accountDeletion" defaultMessage="Account deletion" />
+                                </Button>
+                            }
+                        />
+                    </div>
                 </div>
             </div>
         </div>

packages/app/components/profile/ProfileField.tsx

@@ -10,7 +10,7 @@ function ProfileField({
     link,
     onChange,
 }: {
-    label: React.ReactNode;
+    label?: React.ReactNode;
     link?: string;
     onChange?: () => void;
     value: React.ReactNode;
@@ -29,7 +29,7 @@ function ProfileField({
     return (
         <div className={styles.paramItem} data-testid="profile-item">
             <div className={styles.paramRow}>
-                <div className={styles.paramName}>{label}</div>
+                {label ? <div className={styles.paramName}>{label}</div> : ''}
                 <div className={styles.paramValue}>{value}</div>
 
                 {Action && (

packages/app/components/profile/profile.scss

@@ -10,7 +10,6 @@ $formColumnWidth: 416px;
 .formColumn {
     width: $formColumnWidth;
     min-width: $formColumnWidth; // Чтобы flex не ужимал блок, несмотря на фикс ширину выше
-    border-bottom: 10px solid #ddd8ce;
 }
 
 .descriptionColumn {
@@ -30,6 +29,13 @@ $formColumnWidth: 416px;
     color: #9a9a9a;
 }
 
+.profilePanel {
+    composes: form from '~app/components/profile/profileForm.scss';
+
+    margin-bottom: 30px;
+    border-bottom: 10px solid #ddd8ce;
+}
+
 .item {
     padding: 30px;
     border-bottom: 1px solid #eee;