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',
- })}
-
-
+
+
+
+
+
+
+
);
}}
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;