mirror of
https://github.com/strapi/strapi.git
synced 2025-09-20 14:00:48 +00:00
Merge pull request #11060 from strapi/profile-fix
MigrationQA/ Profile page fix
This commit is contained in:
cyril lopez
GitHub
commit
e3b018cbb5
@ -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 = () => {
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<ContentLayout>
|
||||
<Stack size={6}>
|
||||
<Box
|
||||
background="neutral0"
|
||||
hasRadius
|
||||
shadow="filterShadow"
|
||||
paddingTop={6}
|
||||
paddingBottom={6}
|
||||
paddingLeft={7}
|
||||
paddingRight={7}
|
||||
>
|
||||
<Stack size={4}>
|
||||
<H3 as="h2">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.profile.title',
|
||||
defaultMessage: 'Profile',
|
||||
})}
|
||||
</H3>
|
||||
<Grid gap={5}>
|
||||
{layout[0].map(input => {
|
||||
return (
|
||||
<GridItem key={input.name} {...input.size}>
|
||||
<GenericInput
|
||||
{...input}
|
||||
error={errors[input.name]}
|
||||
onChange={handleChange}
|
||||
value={values[input.name] || ''}
|
||||
/>
|
||||
</GridItem>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box
|
||||
background="neutral0"
|
||||
hasRadius
|
||||
shadow="filterShadow"
|
||||
paddingTop={6}
|
||||
paddingBottom={6}
|
||||
paddingLeft={7}
|
||||
paddingRight={7}
|
||||
>
|
||||
<Stack size={4}>
|
||||
<H3 as="h2">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.password.title',
|
||||
defaultMessage: 'Change password',
|
||||
})}
|
||||
</H3>
|
||||
<Grid gap={5}>
|
||||
{layout[1].map(input => {
|
||||
return (
|
||||
<GridItem key={input.name} {...input.size}>
|
||||
<GenericInput
|
||||
{...input}
|
||||
error={errors[input.name]}
|
||||
onChange={handleChange}
|
||||
value={values[input.name] || ''}
|
||||
/>
|
||||
</GridItem>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box
|
||||
background="neutral0"
|
||||
hasRadius
|
||||
shadow="filterShadow"
|
||||
paddingTop={6}
|
||||
paddingBottom={6}
|
||||
paddingLeft={7}
|
||||
paddingRight={7}
|
||||
>
|
||||
<Stack size={4}>
|
||||
<H3 as="h2">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.title',
|
||||
defaultMessage: 'Experience',
|
||||
})}
|
||||
</H3>
|
||||
<Select
|
||||
label={formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.interfaceLanguage',
|
||||
defaultMessage: 'Interface language',
|
||||
})}
|
||||
placeholder={formatMessage({
|
||||
id: 'components.Select.placeholder',
|
||||
defaultMessage: 'Select',
|
||||
})}
|
||||
hint={formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
|
||||
defaultMessage:
|
||||
'This will only display your own interface in the chosen language.',
|
||||
})}
|
||||
onClear={() =>
|
||||
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];
|
||||
<Box paddingBottom={10}>
|
||||
<ContentLayout>
|
||||
<Stack size={6}>
|
||||
<Box
|
||||
background="neutral0"
|
||||
hasRadius
|
||||
shadow="filterShadow"
|
||||
paddingTop={6}
|
||||
paddingBottom={6}
|
||||
paddingLeft={7}
|
||||
paddingRight={7}
|
||||
>
|
||||
<Stack size={4}>
|
||||
<H3 as="h2">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.profile.title',
|
||||
defaultMessage: 'Profile',
|
||||
})}
|
||||
</H3>
|
||||
<Grid gap={5}>
|
||||
<GridItem s={12} col={6}>
|
||||
<GenericInput
|
||||
intlLabel={{
|
||||
id: 'Auth.form.firstname.label',
|
||||
defaultMessage: 'First name',
|
||||
}}
|
||||
error={errors.firstname}
|
||||
onChange={handleChange}
|
||||
value={values.firstname || ''}
|
||||
type="text"
|
||||
name="firstname"
|
||||
/>
|
||||
</GridItem>
|
||||
<GridItem s={12} col={6}>
|
||||
<GenericInput
|
||||
intlLabel={{
|
||||
id: 'Auth.form.lastname.label',
|
||||
defaultMessage: 'Last name',
|
||||
}}
|
||||
error={errors.lastname}
|
||||
onChange={handleChange}
|
||||
value={values.lastname || ''}
|
||||
type="text"
|
||||
name="lastname"
|
||||
/>
|
||||
</GridItem>
|
||||
<GridItem s={12} col={6}>
|
||||
<GenericInput
|
||||
intlLabel={{ id: 'Auth.form.email.label', defaultMessage: 'Email' }}
|
||||
error={errors.email}
|
||||
onChange={handleChange}
|
||||
value={values.email || ''}
|
||||
type="email"
|
||||
name="email"
|
||||
/>
|
||||
</GridItem>
|
||||
<GridItem s={12} col={6}>
|
||||
<GenericInput
|
||||
intlLabel={{
|
||||
id: 'Auth.form.username.label',
|
||||
defaultMessage: 'Username',
|
||||
}}
|
||||
error={errors.username}
|
||||
onChange={handleChange}
|
||||
value={values.username || ''}
|
||||
type="text"
|
||||
name="username"
|
||||
/>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box
|
||||
background="neutral0"
|
||||
hasRadius
|
||||
shadow="filterShadow"
|
||||
paddingTop={6}
|
||||
paddingBottom={6}
|
||||
paddingLeft={7}
|
||||
paddingRight={7}
|
||||
>
|
||||
<Stack size={4}>
|
||||
<H3 as="h2">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.password.title',
|
||||
defaultMessage: 'Change password',
|
||||
})}
|
||||
</H3>
|
||||
<Grid gap={5}>
|
||||
<GridItem s={12} col={6}>
|
||||
<TextInput
|
||||
error={
|
||||
errors.password
|
||||
? formatMessage({
|
||||
id: errors.password,
|
||||
defaultMessage: 'This value is required.',
|
||||
})
|
||||
: ''
|
||||
}
|
||||
onChange={handleChange}
|
||||
value={values.password || ''}
|
||||
label={formatMessage({
|
||||
id: 'Auth.form.password.label',
|
||||
defaultMessage: 'Password',
|
||||
})}
|
||||
name="password"
|
||||
type={passwordShown ? 'text' : 'password'}
|
||||
endAction={
|
||||
<FieldActionWrapper
|
||||
onClick={e => {
|
||||
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 ? <Show /> : <Hide />}
|
||||
</FieldActionWrapper>
|
||||
}
|
||||
/>
|
||||
</GridItem>
|
||||
<GridItem s={12} col={6}>
|
||||
<TextInput
|
||||
error={
|
||||
errors.password
|
||||
? formatMessage({
|
||||
id: errors.password,
|
||||
defaultMessage: 'This value is required.',
|
||||
})
|
||||
: ''
|
||||
}
|
||||
onChange={handleChange}
|
||||
value={values.confirmPassword || ''}
|
||||
label={formatMessage({
|
||||
id: 'Auth.form.confirmPassword.label',
|
||||
defaultMessage: 'Password confirmation',
|
||||
})}
|
||||
name="confirmPassword"
|
||||
type={passwordConfirmShown ? 'text' : 'password'}
|
||||
endAction={
|
||||
<FieldActionWrapper
|
||||
onClick={e => {
|
||||
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 ? <Show /> : <Hide />}
|
||||
</FieldActionWrapper>
|
||||
}
|
||||
/>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box
|
||||
background="neutral0"
|
||||
hasRadius
|
||||
shadow="filterShadow"
|
||||
paddingTop={6}
|
||||
paddingBottom={6}
|
||||
paddingLeft={7}
|
||||
paddingRight={7}
|
||||
>
|
||||
<Stack size={4}>
|
||||
<H3 as="h2">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.title',
|
||||
defaultMessage: 'Experience',
|
||||
})}
|
||||
</H3>
|
||||
<Grid gap={5}>
|
||||
<GridItem s={12} col={6}>
|
||||
<Select
|
||||
label={formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.interfaceLanguage',
|
||||
defaultMessage: 'Interface language',
|
||||
})}
|
||||
placeholder={formatMessage({
|
||||
id: 'components.Select.placeholder',
|
||||
defaultMessage: 'Select',
|
||||
})}
|
||||
hint={formatMessage({
|
||||
id:
|
||||
'Settings.profile.form.section.experience.interfaceLanguage.hint',
|
||||
defaultMessage:
|
||||
'This will only display your own interface in the chosen language.',
|
||||
})}
|
||||
onClear={() =>
|
||||
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 (
|
||||
<Option value={language} key={language}>
|
||||
{langName}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</ContentLayout>
|
||||
return (
|
||||
<Option value={language} key={language}>
|
||||
{langName}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</ContentLayout>
|
||||
</Box>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,2 +0,0 @@
|
||||
export { default as layout } from './layout';
|
||||
export { default as schema } from './schema';
|
||||
@ -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;
|
||||
Loading…
x
Reference in New Issue
Block a user