yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-20 14:00:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add error state

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-12-24 11:17:50 +01:00 committed by Convly
parent 1f2e5c23c0
commit 24d6883e59
3 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/strapi-admin/ee/admin/containers/SettingsPage/SingleSignOn/index.js
View File

@ -74,8 +74,9 @@ const SingleSignOn = () => {
<BaselineAlignment top size="3px" /> <BaselineAlignment top size="3px" />
<FormBloc isLoading={showLoader}> <FormBloc isLoading={showLoader}>
{Object.keys(form).map(key => { {Object.keys(form).map(key => {
let type = key === 'defaultRole' && !canReadRoles ? 'notAllowed' : form[key].type; // TODO: at some point it would be great to handle this in the upcoming input layout
let description = const type = key === 'defaultRole' && !canReadRoles ? 'notAllowed' : form[key].type;
const description =
key === 'defaultRole' && !canReadRoles key === 'defaultRole' && !canReadRoles
? form[key].notAllowedDescription ? form[key].notAllowedDescription
: form[key].description; : form[key].description;

7
packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/Field.js
View File

@ -1,4 +1,4 @@
import styled from 'styled-components'; import styled, { css } from 'styled-components';
const Field = styled.div` const Field = styled.div`
height: 34px; height: 34px;
@ -10,6 +10,11 @@ const Field = styled.div`
padding-top: 2px; padding-top: 2px;
border-radius: 2px; border-radius: 2px;
background-color: ${({ theme }) => theme.main.colors.mediumGrey}; background-color: ${({ theme }) => theme.main.colors.mediumGrey};
${({ error }) =>
error &&
css`
border: 1px solid ${({ theme }) => theme.main.colors.lightOrange};
`}
`; `;
export default Field; export default Field;

16
packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/index.js
View File

@ -6,7 +6,7 @@ import EyeSlashed from '../../svgs/EyeSlashed';
import BaselineAlignment from '../BaselineAlignment'; import BaselineAlignment from '../BaselineAlignment';
import Field from './Field'; import Field from './Field';
const NotAllowedInput = ({ label, description, spacerHeight }) => { const NotAllowedInput = ({ label, description, error, spacerHeight }) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const formatMessageRef = useRef(formatMessage); const formatMessageRef = useRef(formatMessage);
const text = useMemo( const text = useMemo(
@ -19,7 +19,7 @@ const NotAllowedInput = ({ label, description, spacerHeight }) => {
<Text fontWeight="semiBold" lineHeight="18px"> <Text fontWeight="semiBold" lineHeight="18px">
{label} {label}
</Text> </Text>
<Field> <Field error={error}>
<Padded left right size="sm"> <Padded left right size="sm">
<Flex> <Flex>
<Padded right size="sm"> <Padded right size="sm">
@ -32,15 +32,21 @@ const NotAllowedInput = ({ label, description, spacerHeight }) => {
</Flex> </Flex>
</Padded> </Padded>
</Field> </Field>
{description ? ( {!error && description && (
<BaselineAlignment top size="9px"> <BaselineAlignment top size="9px">
<Text fontSize="md" color="grey" lineHeight="18px" ellipsis> <Text fontSize="md" color="grey" lineHeight="18px" ellipsis>
{description} {description}
</Text> </Text>
</BaselineAlignment> </BaselineAlignment>
) : (
<BaselineAlignment top size={spacerHeight} />
)} )}
{error && (
<BaselineAlignment top size="9px">
<Text fontSize="md" color="lightOrange" lineHeight="18px" ellipsis>
{error}
</Text>
</BaselineAlignment>
)}
{!error && !description && <BaselineAlignment top size={spacerHeight} />}
</BaselineAlignment> </BaselineAlignment>
); );
}; };