diff --git a/packages/core/admin/admin/src/pages/ProfilePage/index.js b/packages/core/admin/admin/src/pages/ProfilePage/index.js index 610271400a..02be23f755 100644 --- a/packages/core/admin/admin/src/pages/ProfilePage/index.js +++ b/packages/core/admin/admin/src/pages/ProfilePage/index.js @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { useState } from 'react'; +import styled from 'styled-components'; import { Form, GenericInput, @@ -24,12 +25,28 @@ import { Grid, GridItem } from '@strapi/parts/Grid'; import { Stack } from '@strapi/parts/Stack'; import { useNotifyAT } from '@strapi/parts/LiveRegions'; import { Select, Option } from '@strapi/parts/Select'; +import { FieldAction } from '@strapi/parts/Field'; +import { TextInput } from '@strapi/parts/TextInput'; +import Show from '@strapi/icons/Show'; +import Hide from '@strapi/icons/Hide'; import CheckIcon from '@strapi/icons/CheckIcon'; import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider'; import { fetchUser, putUser } from './utils/api'; -import { schema, layout } from './utils'; +import schema from './utils/schema'; + +const FieldActionWrapper = styled(FieldAction)` + svg { + height: 1rem; + width: 1rem; + path { + fill: ${({ theme }) => theme.colors.neutral600}; + } + } +`; const ProfilePage = () => { + const [passwordShown, setPasswordShown] = useState(false); + const [passwordConfirmShown, setPasswordConfirmShown] = useState(false); const { changeLocale, localeNames } = useLocalesProvider(); const { setUserDisplayName } = useAppInfos(); const queryClient = useQueryClient(); @@ -145,126 +162,240 @@ const ProfilePage = () => { } /> - - - - -

- {formatMessage({ - id: 'Settings.profile.form.section.profile.title', - defaultMessage: 'Profile', - })} -

- - {layout[0].map(input => { - return ( - - - - ); - })} - -
-
- - -

- {formatMessage({ - id: 'Settings.profile.form.section.password.title', - defaultMessage: 'Change password', - })} -

- - {layout[1].map(input => { - return ( - - - - ); - })} - -
-
- - -

- {formatMessage({ - id: 'Settings.profile.form.section.experience.title', - defaultMessage: 'Experience', - })} -

- + handleChange({ target: { name: 'preferedLanguage', value: null } })} + clearLabel={formatMessage({ + id: 'Settings.profile.form.section.experience.clear.select', + defaultMessage: 'Clear the interface language selected', + })} + value={values.preferedLanguage} + onChange={e => + handleChange({ target: { name: 'preferedLanguage', value: e } })} + > + {Object.keys(localeNames).map(language => { + const langName = localeNames[language]; - return ( - - ); - })} - -
-
-
-
+ return ( + + ); + })} + + + + + + + + ); }} diff --git a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js index df53c11d70..04c9ba74d4 100644 --- a/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js @@ -61,7 +61,11 @@ describe('ADMIN | Pages | Profile page', () => { }); expect(container.firstChild).toMatchInlineSnapshot(` - .c16 { + .c14 { + padding-bottom: 56px; + } + + .c17 { background: #ffffff; padding-top: 24px; padding-right: 32px; @@ -174,6 +178,22 @@ describe('ADMIN | Pages | Profile page', () => { } .c31 { + border: none; + background: transparent; + font-size: 1.6rem; + width: auto; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c36 { position: absolute; left: 0; right: 0; @@ -184,41 +204,41 @@ describe('ADMIN | Pages | Profile page', () => { border: none; } - .c31:focus { + .c36:focus { outline: none; } - .c29 { + .c34 { font-weight: 500; font-size: 0.75rem; line-height: 1.33; color: #32324d; } - .c36 { + .c41 { font-weight: 400; font-size: 0.875rem; line-height: 1.43; color: #32324d; } - .c40 { + .c45 { font-weight: 400; font-size: 0.75rem; line-height: 1.33; color: #666687; } - .c35 { + .c40 { padding-right: 16px; padding-left: 16px; } - .c38 { + .c43 { padding-left: 12px; } - .c32 { + .c37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -236,7 +256,7 @@ describe('ADMIN | Pages | Profile page', () => { align-items: center; } - .c34 { + .c39 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -250,7 +270,7 @@ describe('ADMIN | Pages | Profile page', () => { align-items: center; } - .c28 { + .c33 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -260,16 +280,16 @@ describe('ADMIN | Pages | Profile page', () => { flex-direction: column; } - .c28 > * { + .c33 > * { margin-top: 0; margin-bottom: 0; } - .c28 > * + * { + .c33 > * + * { margin-top: 4px; } - .c30 { + .c35 { position: relative; border: 1px solid #dcdce4; padding-right: 12px; @@ -278,27 +298,27 @@ describe('ADMIN | Pages | Profile page', () => { overflow: hidden; } - .c30:focus-within { + .c35:focus-within { border: 1px solid #4945ff; } - .c37 { + .c42 { background: transparent; border: none; position: relative; z-index: 1; } - .c37 svg { + .c42 svg { height: 0.6875rem; width: 0.6875rem; } - .c37 svg path { + .c42 svg path { fill: #666687; } - .c39 { + .c44 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -307,15 +327,15 @@ describe('ADMIN | Pages | Profile page', () => { border: none; } - .c39 svg { + .c44 svg { width: 0.375rem; } - .c33 { + .c38 { min-height: 2.5rem; } - .c15 { + .c16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -325,16 +345,16 @@ describe('ADMIN | Pages | Profile page', () => { flex-direction: column; } - .c15 > * { + .c16 > * { margin-top: 0; margin-bottom: 0; } - .c15 > * + * { + .c16 > * + * { margin-top: 24px; } - .c17 { + .c18 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -344,30 +364,35 @@ describe('ADMIN | Pages | Profile page', () => { flex-direction: column; } - .c17 > * { + .c18 > * { margin-top: 0; margin-bottom: 0; } - .c17 > * + * { + .c18 > * + * { margin-top: 16px; } - .c18 { + .c19 { font-weight: 500; font-size: 1rem; line-height: 1.25; color: #32324d; } - .c24 { + .c25 { font-weight: 500; font-size: 0.75rem; line-height: 1.33; color: #32324d; } - .c23 { + .c30 { + padding-right: 12px; + padding-left: 8px; + } + + .c24 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -381,7 +406,7 @@ describe('ADMIN | Pages | Profile page', () => { align-items: center; } - .c25 { + .c26 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -399,7 +424,7 @@ describe('ADMIN | Pages | Profile page', () => { align-items: center; } - .c27 { + .c28 { border: none; border-radius: 4px; padding-left: 16px; @@ -412,38 +437,76 @@ describe('ADMIN | Pages | Profile page', () => { height: 2.5rem; } - .c27::-webkit-input-placeholder { + .c28::-webkit-input-placeholder { color: #8e8ea9; opacity: 1; } - .c27::-moz-placeholder { + .c28::-moz-placeholder { color: #8e8ea9; opacity: 1; } - .c27:-ms-input-placeholder { + .c28:-ms-input-placeholder { color: #8e8ea9; opacity: 1; } - .c27::placeholder { + .c28::placeholder { color: #8e8ea9; opacity: 1; } - .c27[aria-disabled='true'] { + .c28[aria-disabled='true'] { background: inherit; color: inherit; } - .c26 { + .c29 { + border: none; + border-radius: 4px; + padding-left: 16px; + padding-right: 0; + color: #32324d; + font-weight: 400; + font-size: 0.875rem; + display: block; + width: 100%; + height: 2.5rem; + } + + .c29::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c29::-moz-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c29:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c29::placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c29[aria-disabled='true'] { + background: inherit; + color: inherit; + } + + .c27 { border: 1px solid #dcdce4; border-radius: 4px; background: #ffffff; } - .c22 { + .c23 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -453,16 +516,16 @@ describe('ADMIN | Pages | Profile page', () => { flex-direction: column; } - .c22 > * { + .c23 > * { margin-top: 0; margin-bottom: 0; } - .c22 > * + * { + .c23 > * + * { margin-top: 4px; } - .c21 textarea { + .c22 textarea { height: 5rem; } @@ -478,7 +541,7 @@ describe('ADMIN | Pages | Profile page', () => { padding-left: 56px; } - .c14 { + .c15 { padding-right: 56px; padding-left: 56px; } @@ -534,26 +597,35 @@ describe('ADMIN | Pages | Profile page', () => { line-height: 1.5; } - .c19 { + .c20 { display: grid; grid-template-columns: repeat(12,1fr); gap: 20px; } - .c20 { + .c21 { grid-column: span 6; word-break: break-all; } + .c32 svg { + height: 1rem; + width: 1rem; + } + + .c32 svg path { + fill: #666687; + } + @media (max-width:68.75rem) { - .c20 { - grid-column: span; + .c21 { + grid-column: span 12; } } @media (max-width:34.375rem) { - .c20 { - grid-column: span 12; + .c21 { + grid-column: span; } } @@ -634,389 +706,447 @@ describe('ADMIN | Pages | Profile page', () => {
-

- Profile -

-
-
-
-
-
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
-
-
-
- -
-
-

- Change password -

-
+

+ Profile +

-
-
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-

- Experience -

-
-
- - Interface language - -
-
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+

+ Change password +

+
+
+
+
+
+
+
+ +
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+

+ Experience +

+
+
+
+
- Select + Interface language +
+ + +
+
+
+

+ This will only display your own interface in the chosen language. +

-
- - -
-

- This will only display your own interface in the chosen language. -

diff --git a/packages/core/admin/admin/src/pages/ProfilePage/utils/index.js b/packages/core/admin/admin/src/pages/ProfilePage/utils/index.js deleted file mode 100644 index 5146ead881..0000000000 --- a/packages/core/admin/admin/src/pages/ProfilePage/utils/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as layout } from './layout'; -export { default as schema } from './schema'; diff --git a/packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js b/packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js deleted file mode 100644 index 7214478f70..0000000000 --- a/packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js +++ /dev/null @@ -1,80 +0,0 @@ -const layout = [ - [ - { - intlLabel: { - id: 'Auth.form.firstname.label', - defaultMessage: 'First name', - }, - name: 'firstname', - type: 'text', - size: { - col: 6, - xs: 12, - }, - }, - { - intlLabel: { - id: 'Auth.form.lastname.label', - defaultMessage: 'Last name', - }, - name: 'lastname', - type: 'text', - size: { - col: 6, - xs: 12, - }, - }, - { - intlLabel: { - id: 'Auth.form.email.label', - defaultMessage: 'Email', - }, - name: 'email', - type: 'email', - size: { - col: 6, - xs: 12, - }, - }, - { - intlLabel: { - id: 'Auth.form.username.label', - defaultMessage: 'Username', - }, - name: 'username', - type: 'text', - size: { - col: 6, - xs: 12, - }, - }, - ], - [ - { - intlLabel: { - id: 'Auth.form.password.label', - defaultMessage: 'Password', - }, - name: 'password', - type: 'password', - size: { - col: 6, - xs: 12, - }, - }, - { - intlLabel: { - id: 'Auth.form.confirmPassword.label', - defaultMessage: 'Password confirmation', - }, - name: 'confirmPassword', - type: 'password', - size: { - col: 6, - xs: 12, - }, - }, - ], -]; - -export default layout;