Infrastructure/zipline
1
Fork 0
Code Issues Pull requests Activity

fix: password strength not showing up on invites (#186)

Browse source
This commit is contained in:
diced 2022-10-16 14:32:27 -07:00
parent 940b844857
commit a4af980e11
No known key found for this signature in database
GPG key ID: 370BD1BA142842D1
2 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/PasswordStrength.tsx
View file

@ -49,10 +49,15 @@ export default function PasswordStrength({ value, setValue, setStrength, ...prop
return ( return (
<Popover <Popover
opened={popoverOpened} opened={popoverOpened}
position='top' position='bottom'
width='target' width='target'
withArrow withArrow
trapFocus={false} trapFocus={false}
styles={{
dropdown: {
zIndex: 999999,
},
}}
> >
<Popover.Target> <Popover.Target>
<div <div
@ -68,7 +73,7 @@ export default function PasswordStrength({ value, setValue, setStrength, ...prop
/> />
</div> </div>
</Popover.Target> </Popover.Target>
<Popover.Dropdown sx={{ }}> <Popover.Dropdown>
<Progress color={color} value={strength} size={7} mb='md' /> <Progress color={color} value={strength} size={7} mb='md' />
<PasswordRequirement label='Includes at least 8 characters' meets={value.length > 7} /> <PasswordRequirement label='Includes at least 8 characters' meets={value.length > 7} />
{checks} {checks}

12
src/pages/invite/[code].tsx
View file

@ -1,7 +1,7 @@
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import prisma from 'lib/prisma'; import prisma from 'lib/prisma';
import { useState } from 'react'; import { useState } from 'react';
import { Button, Card, Center, Group, PasswordInput, Stepper, TextInput } from '@mantine/core'; import { Box, Button, Card, Center, Group, PasswordInput, Stepper, TextInput } from '@mantine/core';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import PasswordStrength from 'components/PasswordStrength'; import PasswordStrength from 'components/PasswordStrength';
import { showNotification } from '@mantine/notifications'; import { showNotification } from '@mantine/notifications';
@ -84,7 +84,13 @@ export default function Invite({ code, title }) {
<title>{title} - Invite ({code})</title> <title>{title} - Invite ({code})</title>
</Head> </Head>
<Center sx={{ height: '100vh' }}> <Center sx={{ height: '100vh' }}>
<Card> <Box
sx={t => ({
backgroundColor: t.colors.dark[6],
borderRadius: t.radius.sm,
})}
p='md'
>
<Stepper active={active} onStepClick={setActive} breakpoint='sm'> <Stepper active={active} onStepClick={setActive} breakpoint='sm'>
<Stepper.Step label='Welcome' description='Choose a username' allowStepSelect={active > 0}> <Stepper.Step label='Welcome' description='Choose a username' allowStepSelect={active > 0}>
<TextInput <TextInput
@ -125,7 +131,7 @@ export default function Invite({ code, title }) {
</Group> </Group>
</Stepper.Completed> </Stepper.Completed>
</Stepper> </Stepper>
</Card> </Box>
</Center> </Center>
</> </>
); );