mirror of
https://github.com/strapi/strapi.git
synced 2025-09-26 00:39:49 +00:00
Change Profile page dom
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette
parent
4ba04f8b10
commit
6394d33a6d
@ -1,11 +1,9 @@
|
||||
import styled from 'styled-components';
|
||||
import { Label, Text } from '@buffetjs/core';
|
||||
import { Label } from '@buffetjs/core';
|
||||
|
||||
export const Title = styled(Text)`
|
||||
text-transform: uppercase;
|
||||
color: ${({ theme }) => theme.main.colors.grey};
|
||||
`;
|
||||
|
||||
export const ProfilePageLabel = styled(Label)`
|
||||
const ProfilePageLabel = styled(Label)`
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 15px;
|
||||
`;
|
||||
|
||||
export default ProfilePageLabel;
|
||||
|
||||
@ -1,23 +1,21 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { BackHeader, BaselineAlignment, auth, Select, Option, Row } from 'strapi-helper-plugin';
|
||||
import { BaselineAlignment, auth, Select, Option } from 'strapi-helper-plugin';
|
||||
import { Padded, Text } from '@buffetjs/core';
|
||||
import { Col } from 'reactstrap';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { get } from 'lodash';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { languages, languageNativeNames } from '../../i18n';
|
||||
import ContainerFluid from '../../components/ContainerFluid';
|
||||
import PageTitle from '../../components/PageTitle';
|
||||
import SizedInput from '../../components/SizedInput';
|
||||
import { Header } from '../../components/Settings';
|
||||
import FormBloc from '../../components/FormBloc';
|
||||
import { useSettingsForm } from '../../hooks';
|
||||
import { form, schema } from './utils';
|
||||
import useChangeLanguage from '../LanguageProvider/hooks/useChangeLanguage';
|
||||
import { languages, languageNativeNames } from '../../i18n';
|
||||
import { Title, ProfilePageLabel } from './components';
|
||||
import Bloc from '../../components/Bloc';
|
||||
import ProfilePageLabel from './components';
|
||||
import { form, schema } from './utils';
|
||||
|
||||
const ProfilePage = () => {
|
||||
const { goBack } = useHistory();
|
||||
const changeLanguage = useChangeLanguage();
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
@ -50,150 +48,111 @@ const ProfilePage = () => {
|
||||
}, [modifiedData]);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<>
|
||||
<PageTitle title="User profile" />
|
||||
<BackHeader onClick={goBack} />
|
||||
|
||||
<BaselineAlignment top size="2px" />
|
||||
|
||||
<ContainerFluid padding="18px 30px 0 30px">
|
||||
<Header
|
||||
isLoading={showHeaderLoader}
|
||||
initialData={initialData}
|
||||
label={headerLabel}
|
||||
modifiedData={modifiedData}
|
||||
onCancel={handleCancel}
|
||||
showHeaderButtonLoader={showHeaderButtonLoader}
|
||||
/>
|
||||
</ContainerFluid>
|
||||
|
||||
<BaselineAlignment top size="5px" />
|
||||
|
||||
{/* Experience block */}
|
||||
<Padded size="md" left right bottom>
|
||||
<Bloc isLoading={isLoading}>
|
||||
<Padded size="sm" top left right bottom>
|
||||
<Col>
|
||||
<Padded size="sm" top bottom>
|
||||
<Title>
|
||||
{formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
|
||||
</Title>
|
||||
</Padded>
|
||||
</Col>
|
||||
|
||||
<BaselineAlignment top size="9px" />
|
||||
|
||||
<Row>
|
||||
{Object.keys(form).map(key => (
|
||||
<SizedInput
|
||||
{...form[key]}
|
||||
key={key}
|
||||
error={formErrors[key]}
|
||||
name={key}
|
||||
onChange={handleChange}
|
||||
value={get(modifiedData, key, '')}
|
||||
/>
|
||||
))}
|
||||
</Row>
|
||||
</Padded>
|
||||
</Bloc>
|
||||
</Padded>
|
||||
|
||||
<BaselineAlignment top size="13px" />
|
||||
|
||||
{/* Password block */}
|
||||
<Padded size="md" left right bottom>
|
||||
<Bloc>
|
||||
<Padded size="sm" top left right bottom>
|
||||
<Col>
|
||||
<Padded size="sm" top bottom>
|
||||
<Title>
|
||||
{formatMessage({ id: 'Settings.profile.form.section.password.title' })}
|
||||
</Title>
|
||||
</Padded>
|
||||
</Col>
|
||||
|
||||
<BaselineAlignment top size="9px" />
|
||||
|
||||
<Row>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<ContainerFluid padding="18px 30px 0 30px">
|
||||
<Header
|
||||
isLoading={showHeaderLoader}
|
||||
initialData={initialData}
|
||||
label={headerLabel}
|
||||
modifiedData={modifiedData}
|
||||
onCancel={handleCancel}
|
||||
showHeaderButtonLoader={showHeaderButtonLoader}
|
||||
/>
|
||||
<BaselineAlignment top size="3px" />
|
||||
{/* Experience block */}
|
||||
<FormBloc
|
||||
isLoading={isLoading}
|
||||
title={formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
|
||||
>
|
||||
{Object.keys(form).map(key => (
|
||||
<SizedInput
|
||||
label="Auth.form.password.label"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
validations={{}}
|
||||
error={formErrors.password}
|
||||
name="password"
|
||||
{...form[key]}
|
||||
key={key}
|
||||
error={formErrors[key]}
|
||||
name={key}
|
||||
onChange={handleChange}
|
||||
value={get(modifiedData, 'password', '')}
|
||||
value={get(modifiedData, key, '')}
|
||||
/>
|
||||
))}
|
||||
</FormBloc>
|
||||
<BaselineAlignment top size="2px" />
|
||||
|
||||
<SizedInput
|
||||
label="Auth.form.confirmPassword.label"
|
||||
type="password"
|
||||
validations={{}}
|
||||
error={formErrors.confirmPassword}
|
||||
name="confirmPassword"
|
||||
onChange={handleChange}
|
||||
value={get(modifiedData, 'confirmPassword', '')}
|
||||
/>
|
||||
</Row>
|
||||
</Padded>
|
||||
</Bloc>
|
||||
</Padded>
|
||||
{/* Password block */}
|
||||
{!isLoading && (
|
||||
<>
|
||||
<Padded top size="md">
|
||||
<FormBloc
|
||||
title={formatMessage({ id: 'Settings.profile.form.section.password.title' })}
|
||||
>
|
||||
<SizedInput
|
||||
label="Auth.form.password.label"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
validations={{}}
|
||||
error={formErrors.password}
|
||||
name="password"
|
||||
onChange={handleChange}
|
||||
value={get(modifiedData, 'password', '')}
|
||||
/>
|
||||
|
||||
<BaselineAlignment top size="13px" />
|
||||
|
||||
{/* Interface block */}
|
||||
<Padded size="md" left right bottom>
|
||||
<Bloc>
|
||||
<Padded size="sm" top left right bottom>
|
||||
<Col>
|
||||
<Padded size="sm" top bottom>
|
||||
<Title>
|
||||
{formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
|
||||
</Title>
|
||||
<SizedInput
|
||||
label="Auth.form.confirmPassword.label"
|
||||
type="password"
|
||||
validations={{}}
|
||||
error={formErrors.confirmPassword}
|
||||
name="confirmPassword"
|
||||
onChange={handleChange}
|
||||
value={get(modifiedData, 'confirmPassword', '')}
|
||||
/>
|
||||
</FormBloc>
|
||||
</Padded>
|
||||
</Col>
|
||||
|
||||
<BaselineAlignment top size="7px" />
|
||||
<BaselineAlignment top size="13px" />
|
||||
|
||||
<div className="col-6">
|
||||
<ProfilePageLabel htmlFor="">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.interfaceLanguage',
|
||||
})}
|
||||
</ProfilePageLabel>
|
||||
{/* Interface block */}
|
||||
<Padded top size="smd">
|
||||
<FormBloc
|
||||
title={formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
|
||||
>
|
||||
<ProfilePageLabel htmlFor="">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.interfaceLanguage',
|
||||
})}
|
||||
</ProfilePageLabel>
|
||||
<Col xs="6">
|
||||
<Select
|
||||
aria-labelledby="interface-language"
|
||||
selectedValue={get(modifiedData, 'preferedLanguage')}
|
||||
onChange={nextLocaleCode => setField('preferedLanguage', nextLocaleCode)}
|
||||
>
|
||||
{languages.map(language => {
|
||||
const langName = languageNativeNames[language];
|
||||
|
||||
<Select
|
||||
aria-labelledby="interface-language"
|
||||
selectedValue={get(modifiedData, 'preferedLanguage')}
|
||||
onChange={nextLocaleCode => setField('preferedLanguage', nextLocaleCode)}
|
||||
>
|
||||
{languages.map(language => {
|
||||
const langName = languageNativeNames[language];
|
||||
return (
|
||||
<Option value={language} key={language}>
|
||||
{langName}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
|
||||
return (
|
||||
<Option value={language} key={language}>
|
||||
{langName}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
|
||||
<Padded size="sm" top bottom>
|
||||
<Text color="grey">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
|
||||
})}
|
||||
</Text>
|
||||
<Padded size="sm" top bottom>
|
||||
<Text color="grey">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
|
||||
})}
|
||||
</Text>
|
||||
</Padded>
|
||||
</Col>
|
||||
</FormBloc>
|
||||
</Padded>
|
||||
</div>
|
||||
</Padded>
|
||||
</Bloc>
|
||||
</Padded>
|
||||
|
||||
<BaselineAlignment top size="80px" />
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</ContainerFluid>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -101,6 +101,7 @@ const getStyles = theme => {
|
||||
...base,
|
||||
padding: '2px 10px 4px 10px', // These value don't exist in the theme
|
||||
fontSize: sizes.fonts.md,
|
||||
lineHeight: '18px',
|
||||
}),
|
||||
indicatorsContainer: base => ({
|
||||
...base,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user