ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-06-28 19:33:10 +05:30
Code Issues Packages Projects Releases Wiki Activity

Rework layout of the profile

Browse Source
This commit is contained in:
ErickSkrauch 2020-07-22 18:15:58 +03:00
parent 8f335a3511
commit a790c2b24f
No known key found for this signature in database
GPG Key ID: 669339FCBB30EE0E
3 changed files with 61 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/app/components/profile/Profile.tsx
View File

@ -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>

4
packages/app/components/profile/ProfileField.tsx
View File

@ -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 && (

8
packages/app/components/profile/profile.scss
View File

@ -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;