From 41057fc8d568bc3d82999ae9bacecc4ddeea8bc8 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 23 Sep 2021 13:50:29 +0200 Subject: [PATCH 1/3] profile page passwords fix + select size --- .../admin/src/pages/ProfilePage/index.js | 185 +++++++--- .../src/pages/ProfilePage/tests/index.test.js | 339 ++++++++++++------ .../src/pages/ProfilePage/utils/layout.js | 112 +++--- 3 files changed, 419 insertions(+), 217 deletions(-) diff --git a/packages/core/admin/admin/src/pages/ProfilePage/index.js b/packages/core/admin/admin/src/pages/ProfilePage/index.js index 610271400a..fa1cc00383 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'; +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(); @@ -164,7 +181,7 @@ const ProfilePage = () => { })} - {layout[0].map(input => { + {layout.map(input => { return ( { })} - {layout[1].map(input => { - return ( - - - - ); - })} + + { + e.stopPropagation(); + setPasswordShown(prev => !prev); + }} + label={formatMessage( + passwordShown + ? { + id: 'Auth.form.password.show-password', + defaultMessage: 'Show password', + } + : { + id: 'Auth.form.password.hide-password', + defaultMessage: 'Hide password', + } + )} + > + {passwordShown ? : } + + } + /> + + + { + e.stopPropagation(); + setPasswordConfirmShown(prev => !prev); + }} + label={formatMessage( + passwordConfirmShown + ? { + id: 'Auth.form.password.show-password', + defaultMessage: 'Show password', + } + : { + id: 'Auth.form.password.hide-password', + defaultMessage: 'Hide password', + } + )} + > + {passwordConfirmShown ? : } + + } + /> + @@ -227,40 +314,44 @@ const ProfilePage = () => { 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..5390bc6f41 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 @@ -174,6 +174,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 +200,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 +252,7 @@ describe('ADMIN | Pages | Profile page', () => { align-items: center; } - .c34 { + .c39 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -250,7 +266,7 @@ describe('ADMIN | Pages | Profile page', () => { align-items: center; } - .c28 { + .c33 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -260,16 +276,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 +294,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,11 +323,11 @@ describe('ADMIN | Pages | Profile page', () => { border: none; } - .c39 svg { + .c44 svg { width: 0.375rem; } - .c33 { + .c38 { min-height: 2.5rem; } @@ -367,6 +383,11 @@ describe('ADMIN | Pages | Profile page', () => { color: #32324d; } + .c30 { + padding-right: 12px; + padding-left: 8px; + } + .c23 { display: -webkit-box; display: -webkit-flex; @@ -437,6 +458,44 @@ describe('ADMIN | Pages | Profile page', () => { color: inherit; } + .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; + } + .c26 { border: 1px solid #dcdce4; border-radius: 4px; @@ -545,6 +604,20 @@ describe('ADMIN | Pages | Profile page', () => { word-break: break-all; } + .c28 { + grid-column: span 12; + word-break: break-all; + } + + .c32 svg { + height: 1rem; + width: 1rem; + } + + .c32 svg path { + fill: #666687; + } + @media (max-width:68.75rem) { .c20 { grid-column: span; @@ -557,6 +630,18 @@ describe('ADMIN | Pages | Profile page', () => { } } + @media (max-width:68.75rem) { + .c28 { + grid-column: span 6; + } + } + + @media (max-width:34.375rem) { + .c28 { + grid-column: span; + } + } +
{ class="c19" >
{ +
+ +
@@ -870,7 +976,7 @@ describe('ADMIN | Pages | Profile page', () => {
{ +
+ +
@@ -925,98 +1052,110 @@ describe('ADMIN | Pages | Profile page', () => { > Experience -
+
- - 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/layout.js b/packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js index 7214478f70..e7d067ec09 100644 --- a/packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js +++ b/packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js @@ -1,80 +1,52 @@ const layout = [ - [ - { - intlLabel: { - id: 'Auth.form.firstname.label', - defaultMessage: 'First name', - }, - name: 'firstname', - type: 'text', - size: { - col: 6, - xs: 12, - }, + { + intlLabel: { + id: 'Auth.form.firstname.label', + defaultMessage: 'First name', }, - { - intlLabel: { - id: 'Auth.form.lastname.label', - defaultMessage: 'Last name', - }, - name: 'lastname', - type: 'text', - size: { - col: 6, - xs: 12, - }, + name: 'firstname', + 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.lastname.label', + defaultMessage: 'Last name', }, - { - intlLabel: { - id: 'Auth.form.username.label', - defaultMessage: 'Username', - }, - name: 'username', - type: 'text', - size: { - col: 6, - xs: 12, - }, + name: 'lastname', + 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.email.label', + defaultMessage: 'Email', }, - { - intlLabel: { - id: 'Auth.form.confirmPassword.label', - defaultMessage: 'Password confirmation', - }, - name: 'confirmPassword', - type: 'password', - size: { - col: 6, - xs: 12, - }, + 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, + }, + }, ]; export default layout; From 40b1169241e4cc22853c803427c80d990f36d4a0 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 23 Sep 2021 14:07:48 +0200 Subject: [PATCH 2/3] fixed grid and padding bottom layout --- .../admin/src/pages/ProfilePage/index.js | 334 +++--- .../src/pages/ProfilePage/tests/index.test.js | 989 ++++++++++-------- .../src/pages/ProfilePage/utils/layout.js | 112 +- 3 files changed, 824 insertions(+), 611 deletions(-) diff --git a/packages/core/admin/admin/src/pages/ProfilePage/index.js b/packages/core/admin/admin/src/pages/ProfilePage/index.js index 610271400a..5409f60f05 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'; +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,203 @@ 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..3e342b864d 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; @@ -173,7 +177,23 @@ describe('ADMIN | Pages | Profile page', () => { background: #4945ff; } - .c31 { + .c32 { + 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; + } + + .c37 { position: absolute; left: 0; right: 0; @@ -184,41 +204,41 @@ describe('ADMIN | Pages | Profile page', () => { border: none; } - .c31:focus { + .c37:focus { outline: none; } - .c29 { + .c35 { font-weight: 500; font-size: 0.75rem; line-height: 1.33; color: #32324d; } - .c36 { + .c42 { font-weight: 400; font-size: 0.875rem; line-height: 1.43; color: #32324d; } - .c40 { + .c46 { font-weight: 400; font-size: 0.75rem; line-height: 1.33; color: #666687; } - .c35 { + .c41 { padding-right: 16px; padding-left: 16px; } - .c38 { + .c44 { padding-left: 12px; } - .c32 { + .c38 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -236,21 +256,21 @@ describe('ADMIN | Pages | Profile page', () => { align-items: center; } + .c40 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + .c34 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .c28 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -260,16 +280,16 @@ describe('ADMIN | Pages | Profile page', () => { flex-direction: column; } - .c28 > * { + .c34 > * { margin-top: 0; margin-bottom: 0; } - .c28 > * + * { + .c34 > * + * { margin-top: 4px; } - .c30 { + .c36 { position: relative; border: 1px solid #dcdce4; padding-right: 12px; @@ -278,27 +298,27 @@ describe('ADMIN | Pages | Profile page', () => { overflow: hidden; } - .c30:focus-within { + .c36:focus-within { border: 1px solid #4945ff; } - .c37 { + .c43 { background: transparent; border: none; position: relative; z-index: 1; } - .c37 svg { + .c43 svg { height: 0.6875rem; width: 0.6875rem; } - .c37 svg path { + .c43 svg path { fill: #666687; } - .c39 { + .c45 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -307,15 +327,15 @@ describe('ADMIN | Pages | Profile page', () => { border: none; } - .c39 svg { + .c45 svg { width: 0.375rem; } - .c33 { + .c39 { 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 { + .c31 { + 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 { + .c30 { + 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; + } + + .c30::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c30::-moz-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c30:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c30::placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c30[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,29 +597,55 @@ 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; } + .c29 { + grid-column: span 6; + word-break: break-all; + } + + .c33 svg { + height: 1rem; + width: 1rem; + } + + .c33 svg path { + fill: #666687; + } + @media (max-width:68.75rem) { - .c20 { + .c21 { grid-column: span; } } @media (max-width:34.375rem) { - .c20 { + .c21 { grid-column: span 12; } } + @media (max-width:68.75rem) { + .c29 { + grid-column: span 12; + } + } + + @media (max-width:34.375rem) { + .c29 { + grid-column: span; + } + } +
{
-

- 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/layout.js b/packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js index 7214478f70..e7d067ec09 100644 --- a/packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js +++ b/packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js @@ -1,80 +1,52 @@ const layout = [ - [ - { - intlLabel: { - id: 'Auth.form.firstname.label', - defaultMessage: 'First name', - }, - name: 'firstname', - type: 'text', - size: { - col: 6, - xs: 12, - }, + { + intlLabel: { + id: 'Auth.form.firstname.label', + defaultMessage: 'First name', }, - { - intlLabel: { - id: 'Auth.form.lastname.label', - defaultMessage: 'Last name', - }, - name: 'lastname', - type: 'text', - size: { - col: 6, - xs: 12, - }, + name: 'firstname', + 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.lastname.label', + defaultMessage: 'Last name', }, - { - intlLabel: { - id: 'Auth.form.username.label', - defaultMessage: 'Username', - }, - name: 'username', - type: 'text', - size: { - col: 6, - xs: 12, - }, + name: 'lastname', + 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.email.label', + defaultMessage: 'Email', }, - { - intlLabel: { - id: 'Auth.form.confirmPassword.label', - defaultMessage: 'Password confirmation', - }, - name: 'confirmPassword', - type: 'password', - size: { - col: 6, - xs: 12, - }, + 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, + }, + }, ]; export default layout; From 862d9b5940f1e11fab0705fb8a743fdfb06fe470 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Fri, 24 Sep 2021 14:13:12 +0200 Subject: [PATCH 3/3] feedback fix - removed layout --- .../admin/src/pages/ProfilePage/index.js | 63 +++++++-- .../src/pages/ProfilePage/tests/index.test.js | 121 ++++++++---------- .../src/pages/ProfilePage/utils/index.js | 2 - .../src/pages/ProfilePage/utils/layout.js | 52 -------- 4 files changed, 102 insertions(+), 136 deletions(-) delete mode 100644 packages/core/admin/admin/src/pages/ProfilePage/utils/index.js delete mode 100644 packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js diff --git a/packages/core/admin/admin/src/pages/ProfilePage/index.js b/packages/core/admin/admin/src/pages/ProfilePage/index.js index 5409f60f05..02be23f755 100644 --- a/packages/core/admin/admin/src/pages/ProfilePage/index.js +++ b/packages/core/admin/admin/src/pages/ProfilePage/index.js @@ -32,7 +32,7 @@ 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 { @@ -182,18 +182,55 @@ const ProfilePage = () => { })} - {layout.map(input => { - 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 3e342b864d..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 @@ -177,7 +177,7 @@ describe('ADMIN | Pages | Profile page', () => { background: #4945ff; } - .c32 { + .c31 { border: none; background: transparent; font-size: 1.6rem; @@ -193,7 +193,7 @@ describe('ADMIN | Pages | Profile page', () => { align-items: center; } - .c37 { + .c36 { position: absolute; left: 0; right: 0; @@ -204,41 +204,41 @@ describe('ADMIN | Pages | Profile page', () => { border: none; } - .c37:focus { + .c36:focus { outline: none; } - .c35 { + .c34 { font-weight: 500; font-size: 0.75rem; line-height: 1.33; color: #32324d; } - .c42 { + .c41 { font-weight: 400; font-size: 0.875rem; line-height: 1.43; color: #32324d; } - .c46 { + .c45 { font-weight: 400; font-size: 0.75rem; line-height: 1.33; color: #666687; } - .c41 { + .c40 { padding-right: 16px; padding-left: 16px; } - .c44 { + .c43 { padding-left: 12px; } - .c38 { + .c37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -256,7 +256,7 @@ describe('ADMIN | Pages | Profile page', () => { align-items: center; } - .c40 { + .c39 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -270,7 +270,7 @@ describe('ADMIN | Pages | Profile page', () => { align-items: center; } - .c34 { + .c33 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -280,16 +280,16 @@ describe('ADMIN | Pages | Profile page', () => { flex-direction: column; } - .c34 > * { + .c33 > * { margin-top: 0; margin-bottom: 0; } - .c34 > * + * { + .c33 > * + * { margin-top: 4px; } - .c36 { + .c35 { position: relative; border: 1px solid #dcdce4; padding-right: 12px; @@ -298,27 +298,27 @@ describe('ADMIN | Pages | Profile page', () => { overflow: hidden; } - .c36:focus-within { + .c35:focus-within { border: 1px solid #4945ff; } - .c43 { + .c42 { background: transparent; border: none; position: relative; z-index: 1; } - .c43 svg { + .c42 svg { height: 0.6875rem; width: 0.6875rem; } - .c43 svg path { + .c42 svg path { fill: #666687; } - .c45 { + .c44 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -327,11 +327,11 @@ describe('ADMIN | Pages | Profile page', () => { border: none; } - .c45 svg { + .c44 svg { width: 0.375rem; } - .c39 { + .c38 { min-height: 2.5rem; } @@ -387,7 +387,7 @@ describe('ADMIN | Pages | Profile page', () => { color: #32324d; } - .c31 { + .c30 { padding-right: 12px; padding-left: 8px; } @@ -462,7 +462,7 @@ describe('ADMIN | Pages | Profile page', () => { color: inherit; } - .c30 { + .c29 { border: none; border-radius: 4px; padding-left: 16px; @@ -475,27 +475,27 @@ describe('ADMIN | Pages | Profile page', () => { height: 2.5rem; } - .c30::-webkit-input-placeholder { + .c29::-webkit-input-placeholder { color: #8e8ea9; opacity: 1; } - .c30::-moz-placeholder { + .c29::-moz-placeholder { color: #8e8ea9; opacity: 1; } - .c30:-ms-input-placeholder { + .c29:-ms-input-placeholder { color: #8e8ea9; opacity: 1; } - .c30::placeholder { + .c29::placeholder { color: #8e8ea9; opacity: 1; } - .c30[aria-disabled='true'] { + .c29[aria-disabled='true'] { background: inherit; color: inherit; } @@ -608,40 +608,23 @@ describe('ADMIN | Pages | Profile page', () => { word-break: break-all; } - .c29 { - grid-column: span 6; - word-break: break-all; - } - - .c33 svg { + .c32 svg { height: 1rem; width: 1rem; } - .c33 svg path { + .c32 svg path { fill: #666687; } @media (max-width:68.75rem) { .c21 { - grid-column: span; + grid-column: span 12; } } @media (max-width:34.375rem) { .c21 { - grid-column: span 12; - } - } - - @media (max-width:68.75rem) { - .c29 { - grid-column: span 12; - } - } - - @media (max-width:34.375rem) { - .c29 { grid-column: span; } } @@ -920,7 +903,7 @@ describe('ADMIN | Pages | Profile page', () => { class="c20" >
{
{

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 e7d067ec09..0000000000 --- a/packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js +++ /dev/null @@ -1,52 +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, - }, - }, -]; - -export default layout;