Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Make integrations fields required

Browse Source 
Minor integration styling, bigger tooltips, longer texts, removed clear secret button
This commit is contained in:
ajnart
2023-03-18 19:09:21 +08:00
parent 04a304dcd6
commit b3aae68469
1 changed files with 17 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
View File

@@ -6,7 +6,6 @@ import {
Grid, Grid,
Group, Group,
PasswordInput, PasswordInput,
Stack,
ThemeIcon, ThemeIcon,
Title, Title,
Text, Text,
@@ -40,7 +39,7 @@ export const GenericSecretInput = ({
const Icon = setIcon; const Icon = setIcon;
const [displayUpdateField, setDisplayUpdateField] = useState<boolean>(false); const [displayUpdateField, setDisplayUpdateField] = useState<boolean>(!secretIsPresent);
const { t } = useTranslation(['layout/modals/add-app', 'common']); const { t } = useTranslation(['layout/modals/add-app', 'common']);
return ( return (
@@ -51,26 +50,26 @@ export const GenericSecretInput = ({
<ThemeIcon color={secretIsPresent ? 'green' : 'red'} variant="light" size="lg"> <ThemeIcon color={secretIsPresent ? 'green' : 'red'} variant="light" size="lg">
<Icon size={18} /> <Icon size={18} />
</ThemeIcon> </ThemeIcon>
<Stack spacing={0}> <Flex justify="start" align="start" direction="column">
<Group spacing="xs"> <Group spacing="xs">
<Title className={classes.subtitle} order={6}> <Title className={classes.subtitle} order={6}>
{t(label)} {t(label)}
</Title> </Title>
<Group spacing="xs"> <Group spacing="xs">
{secretIsPresent ? ( <Badge
<Badge className={classes.textTransformUnset} color="green" variant="dot"> className={classes.textTransformUnset}
{t('integration.type.defined')} color={secretIsPresent ? 'green' : 'red'}
</Badge> variant="dot"
) : ( >
<Badge className={classes.textTransformUnset} color="red" variant="dot"> {secretIsPresent
{t('integration.type.undefined')} ? t('integration.type.defined')
</Badge> : t('integration.type.undefined')}
)} </Badge>
{type === 'private' ? ( {type === 'private' ? (
<Tooltip <Tooltip
label={t('integration.type.explanationPrivate')} label={t('integration.type.explanationPrivate')}
width={200} width={400}
multiline multiline
withinPortal withinPortal
withArrow withArrow
@@ -82,7 +81,7 @@ export const GenericSecretInput = ({
) : ( ) : (
<Tooltip <Tooltip
label={t('integration.type.explanationPublic')} label={t('integration.type.explanationPublic')}
width={200} width={400}
multiline multiline
withinPortal withinPortal
withArrow withArrow
@@ -94,29 +93,20 @@ export const GenericSecretInput = ({
)} )}
</Group> </Group>
</Group> </Group>
<Text size="xs" color="dimmed"> <Text size="xs" color="dimmed" w={400}>
{type === 'private' {type === 'private'
? 'Private: Once saved, you cannot read out this value again' ? 'Private: Once saved, you cannot read out this value again'
: 'Public: Can be read out repeatedly'} : 'Public: Can be read out repeatedly'}
</Text> </Text>
</Stack> </Flex>
</Group> </Group>
</Grid.Col> </Grid.Col>
<Grid.Col xs={12} md={6}> <Grid.Col xs={12} md={6}>
<Flex gap={10} justify="end" align="end"> <Flex gap={10} justify="end" align="end">
<Button
onClick={() => {
setDisplayUpdateField(false);
onClickUpdateButton(undefined);
}}
variant="subtle"
color="gray"
px="xl"
>
{t('integration.secrets.clear')}
</Button>
{displayUpdateField === true ? ( {displayUpdateField === true ? (
<PasswordInput <PasswordInput
required
defaultValue={value}
placeholder="new secret" placeholder="new secret"
styles={{ root: { width: 200 } }} styles={{ root: { width: 200 } }}
{...props} {...props}