yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-07 08:16:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

admin components, onboarding, auth page, profile page

Browse Source
This commit is contained in:
ronronscelestes 2021-11-19 10:45:26 +01:00
parent 586bc9de0a
commit d14a5271ce
11 changed files with 76 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js
View File

@ -10,7 +10,6 @@ import { Link } from '@strapi/design-system/Link';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Stack } from '@strapi/design-system/Stack'; import { Stack } from '@strapi/design-system/Stack';
import { Flex } from '@strapi/design-system/Flex'; import { Flex } from '@strapi/design-system/Flex';
import { H1 } from '@strapi/design-system/Text';
import { Typography } from '@strapi/design-system/Typography'; import { Typography } from '@strapi/design-system/Typography';
import { Content, IconBox, Overlay } from './Overlay'; import { Content, IconBox, Overlay } from './Overlay';
@ -48,7 +47,9 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
<Content size={6}> <Content size={6}>
<Stack size={2}> <Stack size={2}>
<Flex justifyContent="center"> <Flex justifyContent="center">
<H1>{formatMessage(title)}</H1> <Typography as="h1" variant="alpha">
{formatMessage(title)}
</Typography>
</Flex> </Flex>
<Flex justifyContent="center"> <Flex justifyContent="center">
<Typography as="h2" textColor="neutral600" fontSize={4} fontWeight="regular"> <Typography as="h2" textColor="neutral600" fontSize={4} fontWeight="regular">

10
packages/core/admin/admin/src/components/LeftMenu/index.js
View File

@ -15,7 +15,7 @@ import {
} from '@strapi/design-system/MainNav'; } from '@strapi/design-system/MainNav';
import { FocusTrap } from '@strapi/design-system/FocusTrap'; import { FocusTrap } from '@strapi/design-system/FocusTrap';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Text } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Stack } from '@strapi/design-system/Stack'; import { Stack } from '@strapi/design-system/Stack';
import Write from '@strapi/icons/Write'; import Write from '@strapi/icons/Write';
import Exit from '@strapi/icons/Exit'; import Exit from '@strapi/icons/Exit';
@ -144,20 +144,20 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
<FocusTrap onEscape={handleToggleUserLinks}> <FocusTrap onEscape={handleToggleUserLinks}>
<Stack size={0}> <Stack size={0}>
<LinkUser onClick={handleToggleUserLinks} to="/me"> <LinkUser onClick={handleToggleUserLinks} to="/me">
<Text> <Typography>
{formatMessage({ {formatMessage({
id: 'app.components.LeftMenu.profile', id: 'app.components.LeftMenu.profile',
defaultMessage: 'Profile', defaultMessage: 'Profile',
})} })}
</Text> </Typography>
</LinkUser> </LinkUser>
<LinkUser onClick={handleLogout} logout="logout" to="/auth/login"> <LinkUser onClick={handleLogout} logout="logout" to="/auth/login">
<Text textColor="danger600"> <Typography textColor="danger600">
{formatMessage({ {formatMessage({
id: 'app.components.LeftMenu.logout', id: 'app.components.LeftMenu.logout',
defaultMessage: 'Logout', defaultMessage: 'Logout',
})} })}
</Text> </Typography>
<Exit /> <Exit />
</LinkUser> </LinkUser>
</Stack> </Stack>

18
packages/core/admin/admin/src/components/UpgradePlanModal /index.js
View File

@ -8,7 +8,7 @@ import { IconButton } from '@strapi/design-system/IconButton';
import { LinkButton } from '@strapi/design-system/LinkButton'; import { LinkButton } from '@strapi/design-system/LinkButton';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Flex } from '@strapi/design-system/Flex'; import { Flex } from '@strapi/design-system/Flex';
import { Text, H1 } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Stack } from '@strapi/design-system/Stack'; import { Stack } from '@strapi/design-system/Stack';
import ExternalLink from '@strapi/icons/ExternalLink'; import ExternalLink from '@strapi/icons/ExternalLink';
import Cross from '@strapi/icons/Cross'; import Cross from '@strapi/icons/Cross';
@ -48,10 +48,6 @@ const UpgradeContainer = styled(Flex)`
} }
`; `;
const TextBold = styled(Text)`
font-weight: 700;
`;
const StackFlexStart = styled(Stack)` const StackFlexStart = styled(Stack)`
align-items: flex-start; align-items: flex-start;
max-width: ${400 / 16}rem; max-width: ${400 / 16}rem;
@ -82,26 +78,26 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
<IconButton onClick={onClose} aria-label="Close" icon={<Cross />} /> <IconButton onClick={onClose} aria-label="Close" icon={<Cross />} />
</CloseButtonContainer> </CloseButtonContainer>
<StackFlexStart size={6}> <StackFlexStart size={6}>
<TextBold textColor="primary600"> <Typography fontWeight="bold" textColor="primary600">
{formatMessage({ {formatMessage({
id: 'app.components.UpgradePlanModal.text-ce', id: 'app.components.UpgradePlanModal.text-ce',
defaultMessage: 'COMMUNITY EDITION', defaultMessage: 'COMMUNITY EDITION',
})} })}
</TextBold> </Typography>
<Stack size={2}> <Stack size={2}>
<H1 as="h2" id="upgrade-plan"> <Typography variant="alpha" as="h2" id="upgrade-plan">
{formatMessage({ {formatMessage({
id: 'app.components.UpgradePlanModal.limit-reached', id: 'app.components.UpgradePlanModal.limit-reached',
defaultMessage: 'You have reached the limit', defaultMessage: 'You have reached the limit',
})} })}
</H1> </Typography>
<Text> <Typography>
{formatMessage({ {formatMessage({
id: 'app.components.UpgradePlanModal.text-power', id: 'app.components.UpgradePlanModal.text-power',
defaultMessage: defaultMessage:
'Unlock the full power of Strapi by upgrading your plan to the Enterprise Edition', 'Unlock the full power of Strapi by upgrading your plan to the Enterprise Edition',
})} })}
</Text> </Typography>
</Stack> </Stack>
<LinkButton href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}> <LinkButton href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
{formatMessage({ {formatMessage({

8
packages/core/admin/admin/src/pages/Admin/Onboarding/index.js
View File

@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons'; import { faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Text } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { FocusTrap } from '@strapi/design-system/FocusTrap'; import { FocusTrap } from '@strapi/design-system/FocusTrap';
import { useConfigurations } from '../../../hooks'; import { useConfigurations } from '../../../hooks';
@ -52,12 +52,12 @@ const StyledLink = styled.a`
color: ${({ theme }) => theme.colors.neutral700}; color: ${({ theme }) => theme.colors.neutral700};
} }
${[Text]} { ${[Typography]} {
color: ${({ theme }) => theme.colors.neutral700}; color: ${({ theme }) => theme.colors.neutral700};
} }
} }
${[Text]} { ${[Typography]} {
color: ${({ theme }) => theme.colors.neutral600}; color: ${({ theme }) => theme.colors.neutral600};
} }
`; `;
@ -124,7 +124,7 @@ const Onboarding = () => {
href={link.destination} href={link.destination}
> >
<FontAwesomeIcon icon={link.icon} /> <FontAwesomeIcon icon={link.icon} />
<Text>{link.label}</Text> <Typography>{link.label}</Typography>
</StyledLink> </StyledLink>
))} ))}
</LinksWrapper> </LinksWrapper>

15
packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js
View File

@ -9,7 +9,7 @@ import { Flex } from '@strapi/design-system/Flex';
import { Link } from '@strapi/design-system/Link'; import { Link } from '@strapi/design-system/Link';
import { Button } from '@strapi/design-system/Button'; import { Button } from '@strapi/design-system/Button';
import { TextInput } from '@strapi/design-system/TextInput'; import { TextInput } from '@strapi/design-system/TextInput';
import { H1, Text } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Formik } from 'formik'; import { Formik } from 'formik';
import UnauthenticatedLayout, { import UnauthenticatedLayout, {
Column, Column,
@ -38,20 +38,25 @@ const ForgotPassword = ({ onSubmit, schema }) => {
<Column> <Column>
<Logo /> <Logo />
<Box paddingTop={6} paddingBottom={7}> <Box paddingTop={6} paddingBottom={7}>
<H1> <Typography as="h1" variant="alpha">
{formatMessage({ {formatMessage({
id: 'Auth.form.button.password-recovery', id: 'Auth.form.button.password-recovery',
defaultMessage: 'Password Recovery', defaultMessage: 'Password Recovery',
})} })}
</H1> </Typography>
</Box> </Box>
{errors.errorMessage && ( {errors.errorMessage && (
<Text id="global-form-error" role="alert" tabIndex={-1} textColor="danger600"> <Typography
id="global-form-error"
role="alert"
tabIndex={-1}
textColor="danger600"
>
{formatMessage({ {formatMessage({
id: errors.errorMessage, id: errors.errorMessage,
defaultMessage: 'An error occurred', defaultMessage: 'An error occurred',
})} })}
</Text> </Typography>
)} )}
</Column> </Column>

14
packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js
View File

@ -4,7 +4,7 @@ import { Box } from '@strapi/design-system/Box';
import { Main } from '@strapi/design-system/Main'; import { Main } from '@strapi/design-system/Main';
import { Flex } from '@strapi/design-system/Flex'; import { Flex } from '@strapi/design-system/Flex';
import { Link } from '@strapi/design-system/Link'; import { Link } from '@strapi/design-system/Link';
import { H1, Text } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import UnauthenticatedLayout, { import UnauthenticatedLayout, {
Column, Column,
LayoutContent, LayoutContent,
@ -21,27 +21,27 @@ const ForgotPasswordSuccess = () => {
<Column> <Column>
<Logo /> <Logo />
<Box paddingTop={6} paddingBottom={7}> <Box paddingTop={6} paddingBottom={7}>
<H1> <Typography as="h1" variant="alpha">
{formatMessage({ {formatMessage({
id: 'app.containers.AuthPage.ForgotPasswordSuccess.title', id: 'app.containers.AuthPage.ForgotPasswordSuccess.title',
defaultMessage: 'Email sent', defaultMessage: 'Email sent',
})} })}
</H1> </Typography>
</Box> </Box>
<Text> <Typography>
{formatMessage({ {formatMessage({
id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.email', id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.email',
defaultMessage: 'It can take a few minutes to receive your password recovery link.', defaultMessage: 'It can take a few minutes to receive your password recovery link.',
})} })}
</Text> </Typography>
<Box paddingTop={4}> <Box paddingTop={4}>
<Text> <Typography>
{formatMessage({ {formatMessage({
id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.contact-admin', id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.contact-admin',
defaultMessage: defaultMessage:
'If you do not receive this link, please contact your administrator.', 'If you do not receive this link, please contact your administrator.',
})} })}
</Text> </Typography>
</Box> </Box>
</Column> </Column>
</LayoutContent> </LayoutContent>

19
packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
View File

@ -9,7 +9,7 @@ import { Link } from '@strapi/design-system/Link';
import { Button } from '@strapi/design-system/Button'; import { Button } from '@strapi/design-system/Button';
import { TextInput } from '@strapi/design-system/TextInput'; import { TextInput } from '@strapi/design-system/TextInput';
import { Checkbox } from '@strapi/design-system/Checkbox'; import { Checkbox } from '@strapi/design-system/Checkbox';
import { H1, Text, Subtitle } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Form } from '@strapi/helper-plugin'; import { Form } from '@strapi/helper-plugin';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
@ -48,25 +48,30 @@ const Login = ({ onSubmit, schema, children }) => {
<Column> <Column>
<Logo /> <Logo />
<Box paddingTop={6} paddingBottom={1}> <Box paddingTop={6} paddingBottom={1}>
<H1> <Typography as="h1">
{formatMessage({ {formatMessage({
id: 'Auth.form.welcome.title', id: 'Auth.form.welcome.title',
defaultMessage: 'Welcome!', defaultMessage: 'Welcome!',
})} })}
</H1> </Typography>
</Box> </Box>
<Box paddingBottom={7}> <Box paddingBottom={7}>
<Subtitle textColor="neutral600"> <Typography variant="epsilon" textColor="neutral600">
{formatMessage({ {formatMessage({
id: 'Auth.form.welcome.subtitle', id: 'Auth.form.welcome.subtitle',
defaultMessage: 'Log in to your Strapi account', defaultMessage: 'Log in to your Strapi account',
})} })}
</Subtitle> </Typography>
</Box> </Box>
{errors.errorMessage && ( {errors.errorMessage && (
<Text id="global-form-error" role="alert" tabIndex={-1} textColor="danger600"> <Typography
id="global-form-error"
role="alert"
tabIndex={-1}
textColor="danger600"
>
{errors.errorMessage} {errors.errorMessage}
</Text> </Typography>
)} )}
</Column> </Column>

12
packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js
View File

@ -5,7 +5,7 @@ import { Box } from '@strapi/design-system/Box';
import { Main } from '@strapi/design-system/Main'; import { Main } from '@strapi/design-system/Main';
import { Flex } from '@strapi/design-system/Flex'; import { Flex } from '@strapi/design-system/Flex';
import { Link } from '@strapi/design-system/Link'; import { Link } from '@strapi/design-system/Link';
import { H1, Text } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import UnauthenticatedLayout, { import UnauthenticatedLayout, {
Column, Column,
LayoutContent, LayoutContent,
@ -30,18 +30,18 @@ const Oops = () => {
<Column> <Column>
<Logo /> <Logo />
<Box paddingTop={6} paddingBottom={7}> <Box paddingTop={6} paddingBottom={7}>
<H1> <Typography as="h1" variant="alpha">
{formatMessage({ id: 'Auth.components.Oops.title', defaultMessage: 'Oops...' })} {formatMessage({ id: 'Auth.components.Oops.title', defaultMessage: 'Oops...' })}
</H1> </Typography>
</Box> </Box>
<Text>{message}</Text> <Typography>{message}</Typography>
<Box paddingTop={4}> <Box paddingTop={4}>
<Text> <Typography>
{formatMessage({ {formatMessage({
id: 'Auth.components.Oops.text.admin', id: 'Auth.components.Oops.text.admin',
defaultMessage: 'If this is a mistake, please contact your administrator.', defaultMessage: 'If this is a mistake, please contact your administrator.',
})} })}
</Text> </Typography>
</Box> </Box>
</Column> </Column>
</LayoutContent> </LayoutContent>

10
packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js
View File

@ -12,7 +12,7 @@ import { Button } from '@strapi/design-system/Button';
import { TextInput } from '@strapi/design-system/TextInput'; import { TextInput } from '@strapi/design-system/TextInput';
import { Checkbox } from '@strapi/design-system/Checkbox'; import { Checkbox } from '@strapi/design-system/Checkbox';
import { Grid, GridItem } from '@strapi/design-system/Grid'; import { Grid, GridItem } from '@strapi/design-system/Grid';
import { H1, Subtitle } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import EyeStriked from '@strapi/icons/EyeStriked'; import EyeStriked from '@strapi/icons/EyeStriked';
import Eye from '@strapi/icons/Eye'; import Eye from '@strapi/icons/Eye';
import { Form, useQuery, useNotification } from '@strapi/helper-plugin'; import { Form, useQuery, useNotification } from '@strapi/helper-plugin';
@ -113,21 +113,21 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
<Column> <Column>
<Logo /> <Logo />
<Box paddingTop={6} paddingBottom={1}> <Box paddingTop={6} paddingBottom={1}>
<H1> <Typography as="h1" variant="alpha">
{formatMessage({ {formatMessage({
id: 'Auth.form.welcome.title', id: 'Auth.form.welcome.title',
defaultMessage: 'Welcome!', defaultMessage: 'Welcome!',
})} })}
</H1> </Typography>
</Box> </Box>
<CenteredBox paddingBottom={7}> <CenteredBox paddingBottom={7}>
<Subtitle textColor="neutral600"> <Typography variant="epsilon" textColor="neutral600">
{formatMessage({ {formatMessage({
id: 'Auth.form.register.subtitle', id: 'Auth.form.register.subtitle',
defaultMessage: defaultMessage:
'Your credentials are only used to authenticate yourself on the admin panel. All saved data will be stored in your own database.', 'Your credentials are only used to authenticate yourself on the admin panel. All saved data will be stored in your own database.',
})} })}
</Subtitle> </Typography>
</CenteredBox> </CenteredBox>
</Column> </Column>
<Stack size={7}> <Stack size={7}>

15
packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js
View File

@ -9,7 +9,7 @@ import { Flex } from '@strapi/design-system/Flex';
import { Link } from '@strapi/design-system/Link'; import { Link } from '@strapi/design-system/Link';
import { Button } from '@strapi/design-system/Button'; import { Button } from '@strapi/design-system/Button';
import { TextInput } from '@strapi/design-system/TextInput'; import { TextInput } from '@strapi/design-system/TextInput';
import { H1, Text } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import EyeStriked from '@strapi/icons/EyeStriked'; import EyeStriked from '@strapi/icons/EyeStriked';
import Eye from '@strapi/icons/Eye'; import Eye from '@strapi/icons/Eye';
import styled from 'styled-components'; import styled from 'styled-components';
@ -51,20 +51,25 @@ const ForgotPassword = ({ onSubmit, schema }) => {
<Column> <Column>
<Logo /> <Logo />
<Box paddingTop={6} paddingBottom={7}> <Box paddingTop={6} paddingBottom={7}>
<H1> <Typography as="h1" variant="alpha">
{formatMessage({ {formatMessage({
id: 'Auth.reset-password.title', id: 'Auth.reset-password.title',
defaultMessage: 'Reset password', defaultMessage: 'Reset password',
})} })}
</H1> </Typography>
</Box> </Box>
{errors.errorMessage && ( {errors.errorMessage && (
<Text id="global-form-error" role="alert" tabIndex={-1} textColor="danger600"> <Typography
id="global-form-error"
role="alert"
tabIndex={-1}
textColor="danger600"
>
{formatMessage({ {formatMessage({
id: errors.errorMessage, id: errors.errorMessage,
defaultMessage: 'An error occurred', defaultMessage: 'An error occurred',
})} })}
</Text> </Typography>
)} )}
</Column> </Column>

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

@ -17,7 +17,7 @@ import pick from 'lodash/pick';
import omit from 'lodash/omit'; import omit from 'lodash/omit';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import { Main } from '@strapi/design-system/Main'; import { Main } from '@strapi/design-system/Main';
import { H3 } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout'; import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
import { Button } from '@strapi/design-system/Button'; import { Button } from '@strapi/design-system/Button';
@ -192,12 +192,12 @@ const ProfilePage = () => {
paddingRight={7} paddingRight={7}
> >
<Stack size={4}> <Stack size={4}>
<H3 as="h2"> <Typography variant="delta" as="h2">
{formatMessage({ {formatMessage({
id: 'Settings.profile.form.section.profile.title', id: 'Settings.profile.form.section.profile.title',
defaultMessage: 'Profile', defaultMessage: 'Profile',
})} })}
</H3> </Typography>
<Grid gap={5}> <Grid gap={5}>
<GridItem s={12} col={6}> <GridItem s={12} col={6}>
<GenericInput <GenericInput
@ -261,12 +261,12 @@ const ProfilePage = () => {
paddingRight={7} paddingRight={7}
> >
<Stack size={4}> <Stack size={4}>
<H3 as="h2"> <Typography variant="delta" as="h2">
{formatMessage({ {formatMessage({
id: 'Settings.profile.form.section.password.title', id: 'Settings.profile.form.section.password.title',
defaultMessage: 'Change password', defaultMessage: 'Change password',
})} })}
</H3> </Typography>
<Grid gap={5}> <Grid gap={5}>
<GridItem s={12} col={6}> <GridItem s={12} col={6}>
@ -408,12 +408,12 @@ const ProfilePage = () => {
paddingRight={7} paddingRight={7}
> >
<Stack size={4}> <Stack size={4}>
<H3 as="h2"> <Typography variant="delta" as="h2">
{formatMessage({ {formatMessage({
id: 'Settings.profile.form.section.experience.title', id: 'Settings.profile.form.section.experience.title',
defaultMessage: 'Experience', defaultMessage: 'Experience',
})} })}
</H3> </Typography>
<Grid gap={5}> <Grid gap={5}>
<GridItem s={12} col={6}> <GridItem s={12} col={6}>
<Select <Select