yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-21 06:22:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11060 from strapi/profile-fix

Browse Source 
MigrationQA/ Profile page fix
This commit is contained in:
cyril lopez 2021-09-24 14:25:46 +02:00 committed by GitHub
commit e3b018cbb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 792 additions and 613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

373
packages/core/admin/admin/src/pages/ProfilePage/index.js
View File

@ -1,4 +1,5 @@
import React from 'react'; import React, { useState } from 'react';
import styled from 'styled-components';
import { import {
Form, Form,
GenericInput, GenericInput,
@ -24,12 +25,28 @@ import { Grid, GridItem } from '@strapi/parts/Grid';
import { Stack } from '@strapi/parts/Stack'; import { Stack } from '@strapi/parts/Stack';
import { useNotifyAT } from '@strapi/parts/LiveRegions'; import { useNotifyAT } from '@strapi/parts/LiveRegions';
import { Select, Option } from '@strapi/parts/Select'; 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 CheckIcon from '@strapi/icons/CheckIcon';
import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider'; import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
import { fetchUser, putUser } from './utils/api'; 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 ProfilePage = () => {
const [passwordShown, setPasswordShown] = useState(false);
const [passwordConfirmShown, setPasswordConfirmShown] = useState(false);
const { changeLocale, localeNames } = useLocalesProvider(); const { changeLocale, localeNames } = useLocalesProvider();
const { setUserDisplayName } = useAppInfos(); const { setUserDisplayName } = useAppInfos();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -145,126 +162,240 @@ const ProfilePage = () => {
</Button> </Button>
} }
/> />
<ContentLayout> <Box paddingBottom={10}>
<Stack size={6}> <ContentLayout>
<Box <Stack size={6}>
background="neutral0" <Box
hasRadius background="neutral0"
shadow="filterShadow" hasRadius
paddingTop={6} shadow="filterShadow"
paddingBottom={6} paddingTop={6}
paddingLeft={7} paddingBottom={6}
paddingRight={7} paddingLeft={7}
> paddingRight={7}
<Stack size={4}> >
<H3 as="h2"> <Stack size={4}>
{formatMessage({ <H3 as="h2">
id: 'Settings.profile.form.section.profile.title', {formatMessage({
defaultMessage: 'Profile', id: 'Settings.profile.form.section.profile.title',
})} defaultMessage: 'Profile',
</H3> })}
<Grid gap={5}> </H3>
{layout[0].map(input => { <Grid gap={5}>
return ( <GridItem s={12} col={6}>
<GridItem key={input.name} {...input.size}> <GenericInput
<GenericInput intlLabel={{
{...input} id: 'Auth.form.firstname.label',
error={errors[input.name]} defaultMessage: 'First name',
onChange={handleChange} }}
value={values[input.name] || ''} error={errors.firstname}
/> onChange={handleChange}
</GridItem> value={values.firstname || ''}
); type="text"
})} name="firstname"
</Grid> />
</Stack> </GridItem>
</Box> <GridItem s={12} col={6}>
<Box <GenericInput
background="neutral0" intlLabel={{
hasRadius id: 'Auth.form.lastname.label',
shadow="filterShadow" defaultMessage: 'Last name',
paddingTop={6} }}
paddingBottom={6} error={errors.lastname}
paddingLeft={7} onChange={handleChange}
paddingRight={7} value={values.lastname || ''}
> type="text"
<Stack size={4}> name="lastname"
<H3 as="h2"> />
{formatMessage({ </GridItem>
id: 'Settings.profile.form.section.password.title', <GridItem s={12} col={6}>
defaultMessage: 'Change password', <GenericInput
})} intlLabel={{ id: 'Auth.form.email.label', defaultMessage: 'Email' }}
</H3> error={errors.email}
<Grid gap={5}> onChange={handleChange}
{layout[1].map(input => { value={values.email || ''}
return ( type="email"
<GridItem key={input.name} {...input.size}> name="email"
<GenericInput />
{...input} </GridItem>
error={errors[input.name]} <GridItem s={12} col={6}>
onChange={handleChange} <GenericInput
value={values[input.name] || ''} intlLabel={{
/> id: 'Auth.form.username.label',
</GridItem> defaultMessage: 'Username',
); }}
})} error={errors.username}
</Grid> onChange={handleChange}
</Stack> value={values.username || ''}
</Box> type="text"
<Box name="username"
background="neutral0" />
hasRadius </GridItem>
shadow="filterShadow" </Grid>
paddingTop={6} </Stack>
paddingBottom={6} </Box>
paddingLeft={7} <Box
paddingRight={7} background="neutral0"
> hasRadius
<Stack size={4}> shadow="filterShadow"
<H3 as="h2"> paddingTop={6}
{formatMessage({ paddingBottom={6}
id: 'Settings.profile.form.section.experience.title', paddingLeft={7}
defaultMessage: 'Experience', paddingRight={7}
})} >
</H3> <Stack size={4}>
<Select <H3 as="h2">
label={formatMessage({ {formatMessage({
id: 'Settings.profile.form.section.experience.interfaceLanguage', id: 'Settings.profile.form.section.password.title',
defaultMessage: 'Interface language', defaultMessage: 'Change password',
})} })}
placeholder={formatMessage({ </H3>
id: 'components.Select.placeholder', <Grid gap={5}>
defaultMessage: 'Select', <GridItem s={12} col={6}>
})} <TextInput
hint={formatMessage({ error={
id: 'Settings.profile.form.section.experience.interfaceLanguage.hint', errors.password
defaultMessage: ? formatMessage({
'This will only display your own interface in the chosen language.', id: errors.password,
})} defaultMessage: 'This value is required.',
onClear={() => })
handleChange({ target: { name: 'preferedLanguage', value: null } })} : ''
clearLabel={formatMessage({ }
id: 'Settings.profile.form.section.experience.clear.select', onChange={handleChange}
defaultMessage: 'Clear the interface language selected', value={values.password || ''}
})} label={formatMessage({
value={values.preferedLanguage} id: 'Auth.form.password.label',
onChange={e => defaultMessage: 'Password',
handleChange({ target: { name: 'preferedLanguage', value: e } })} })}
> name="password"
{Object.keys(localeNames).map(language => { type={passwordShown ? 'text' : 'password'}
const langName = localeNames[language]; 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 ( return (
<Option value={language} key={language}> <Option value={language} key={language}>
{langName} {langName}
</Option> </Option>
); );
})} })}
</Select> </Select>
</Stack> </GridItem>
</Box> </Grid>
</Stack> </Stack>
</ContentLayout> </Box>
</Stack>
</ContentLayout>
</Box>
</Form> </Form>
); );
}} }}

950
packages/core/admin/admin/src/pages/ProfilePage/tests/index.test.js
View File

File diff suppressed because it is too large Load Diff

2
packages/core/admin/admin/src/pages/ProfilePage/utils/index.js
View File

@ -1,2 +0,0 @@
export { default as layout } from './layout';
export { default as schema } from './schema';

80
packages/core/admin/admin/src/pages/ProfilePage/utils/layout.js
View File

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