Skip to content

Commit

Permalink
feat: update auth card areas
Browse files Browse the repository at this point in the history
  • Loading branch information
@benfurber
benfurber committed Jul 11, 2024
1 parent 6255dae commit 5653093
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 163 deletions.
2 changes: 1 addition & 1 deletion packages/cypress/src/integration/SignUp.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ describe('[User sign-up]', () => {

cy.step('Using valid inputs')
cy.signUpNewUser()
cy.get('div').contains('Sign up successful').should('be.visible')
cy.contains('Yay! You signed up!')
cy.get('[data-cy=user-menu]')
})
})
Expand Down
180 changes: 71 additions & 109 deletions src/pages/SignIn/SignIn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ const SignInPage = observer((props: IProps) => {
const navigate = useNavigate()
const [{ authProvider, notificationProps, errorMsg }, setState] =
useState<IState>({
// if passed form values from props initially populate
formValues: {
email: props.preloadValues ? props.preloadValues.email : '',
password: props.preloadValues ? props.preloadValues.password : '',
Expand Down Expand Up @@ -119,124 +118,87 @@ const SignInPage = observer((props: IProps) => {
>
<Flex sx={{ flexDirection: 'column', width: '100%' }}>
<HeroBanner type="celebration" />
<Card bg={'softblue'}>
<Flex px={3} py={2}>
<Heading>Welcome back</Heading>
</Flex>
</Card>
<Card mt={3}>
<Card sx={{ borderRadius: 3 }}>
<Flex
px={4}
pt={0}
pb={4}
sx={{
flexWrap: 'wrap',
flexDirection: 'column',
padding: 4,
gap: 4,
width: '100%',
}}
>
{/* PauthProvider Provider Select */}
{!authProvider && (
<>
<Text mb={3} mt={3}>
Login with :
</Text>
{Object.values(AUTH_PROVIDERS).map((p) => (
<Button
sx={{ width: '100%' }}
key={p.provider}
mb={2}
variant="outline"
onClick={() =>
setState((state) => ({
...state,
authProvider: p,
}))
}
>
{p.buttonLabel}
</Button>
))}
</>
)}
{/* Login Form */}
{authProvider && (
<>
<Heading
variant="small"
py={4}
sx={{ width: '100%' }}
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<Heading>Log in</Heading>
<Text sx={{ fontSize: 1 }} color={'grey'}>
<Link to={'/sign-up'} data-cy="no-account">
Don't have an account? Sign-up here
</Link>
</Text>
</Flex>

{notificationProps && notificationProps.text && (
<Box>
<TextNotification
isVisible={notificationProps.isVisible}
variant={notificationProps.variant}
>
Log in to your account
</Heading>
<Flex sx={{ flexDirection: 'column' }} mb={3}>
<Label htmlFor="title">
{authProvider!.inputLabel}
</Label>
<Field
name="email"
type="email"
data-cy="email"
component={FieldInput}
validate={required}
/>
</Flex>
<Flex sx={{ flexDirection: 'column' }} mb={3}>
<Label htmlFor="title">Password</Label>
<PasswordField
name="password"
data-cy="password"
component={FieldInput}
validate={required}
/>
</Flex>
<Text color="red">{errorMsg}</Text>
<Flex mb={1} sx={{ justifyContent: 'space-between' }}>
<Text sx={{ fontSize: 1 }} color={'grey'} mt={2}>
<Link to={'/sign-up'} data-cy="no-account">
Don't have an account?
</Link>
</Text>
<Text sx={{ fontSize: 1 }} color={'grey'} mt={2}>
<Link
to="#"
data-cy="lost-password"
onClick={() => resetPasword(values.email)}
>
Lost password?
</Link>
</Text>
</Flex>
{getFriendlyMessage(notificationProps?.text)}
</TextNotification>
</Box>
)}

{notificationProps && (
<Box
sx={{
marginBottom: 3,
}}
>
<TextNotification
isVisible={notificationProps.isVisible}
variant={notificationProps.variant}
>
{getFriendlyMessage(notificationProps?.text)}
</TextNotification>
</Box>
)}
{errorMsg && <Text color="red">{errorMsg}</Text>}

<Flex>
<Button
large
data-cy="submit"
sx={{ width: '100%', justifyContent: 'center' }}
variant={'primary'}
disabled={submitting || invalid}
type="submit"
>
Log in
</Button>
</Flex>
</>
)}
<Flex sx={{ flexDirection: 'column' }}>
<Label htmlFor="title">
{authProvider!.inputLabel}
</Label>
<Field
name="email"
type="email"
data-cy="email"
component={FieldInput}
validate={required}
/>
</Flex>
<Flex sx={{ flexDirection: 'column' }}>
<Label htmlFor="title">Password</Label>
<PasswordField
name="password"
data-cy="password"
component={FieldInput}
validate={required}
/>
</Flex>
<Flex sx={{ justifyContent: 'space-between' }}>
<Text sx={{ fontSize: 1 }} color={'grey'}>
<Link
to="#"
data-cy="lost-password"
onClick={() => resetPasword(values.email)}
>
Forgotten password?
</Link>
</Text>
</Flex>

<Flex>
<Button
large
data-cy="submit"
sx={{
borderRadius: 3,
width: '100%',
justifyContent: 'center',
}}
variant={'primary'}
disabled={submitting || invalid}
type="submit"
>
Log in
</Button>
</Flex>
</Flex>
</Card>
</Flex>
Expand Down
47 changes: 19 additions & 28 deletions src/pages/SignUp/SignUp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,52 +128,43 @@ const SignUpPage = observer(() => {
>
<Flex sx={{ flexDirection: 'column', width: '100%' }}>
<HeroBanner type="celebration" />
<Card bg={'softblue'}>
<Flex px={3} py={2} sx={{ width: '100%' }}>
<Heading>Hey, nice to see you here</Heading>
</Flex>
</Card>
<Card mt={3}>
<Card sx={{ borderRadius: 3 }}>
<Flex
px={4}
pt={0}
pb={4}
sx={{
flexWrap: 'wrap',
flexDirection: 'column',
padding: 4,
gap: 4,
width: '100%',
}}
>
<Heading variant="small" py={2} sx={{ width: '100%' }}>
Create an account
</Heading>
<Flex mb={3} sx={{ justifyContent: 'space-between' }}>
<Flex sx={{ flexDirection: 'column', gap: 2 }}>
<Heading>Create an account</Heading>
<Text color={'grey'} sx={{ fontSize: 1 }}>
Already have an account ?
<Link
to="/sign-in"
style={{
color: '#98cc98',
textDecoration: 'underline',
}}
>
{' '}
Sign-in here
Already have an account? Sign-in here
</Link>
</Text>
</Flex>
<Text color={'red'} data-cy="error-msg">
{state.errorMsg}
</Text>
{state.errorMsg && (
<Text color={'red'} data-cy="error-msg">
{state.errorMsg}
</Text>
)}
<Flex
mb={3}
sx={{
width: rowWidth,
flexDirection: 'column',
}}
>
<Label htmlFor="displayName">Username</Label>
<Text color={'grey'} mt={1} mb={1} sx={{ fontSize: 1 }}>
<Text color={'grey'} sx={{ fontSize: 1 }}>
Think carefully. You can't change this.
</Text>
<Field
Expand All @@ -189,14 +180,13 @@ const SignUpPage = observer(() => {
/>
</Flex>
<Flex
mb={3}
sx={{
flexDirection: 'column',
width: rowWidth,
}}
>
<Label htmlFor="email">Email</Label>
<Text color={'grey'} mt={1} mb={1} sx={{ fontSize: 1 }}>
<Text color={'grey'} sx={{ fontSize: 1 }}>
It can be personal or work email.
</Text>
<Field
Expand All @@ -209,7 +199,6 @@ const SignUpPage = observer(() => {
/>
</Flex>
<Flex
mb={3}
sx={{
flexDirection: 'column',
width: rowWidth,
Expand All @@ -224,7 +213,6 @@ const SignUpPage = observer(() => {
/>
</Flex>
<Flex
mb={3}
sx={{
flexDirection: 'column',
width: rowWidth,
Expand All @@ -238,12 +226,11 @@ const SignUpPage = observer(() => {
validate={required}
/>
</Flex>
<Flex mb={3} mt={2} sx={{ width: rowWidth }}>
<Flex>
<Label
sx={{
display: 'flex',
alignItems: 'flex-start',
gap: '6px',
}}
>
<Field
Expand Down Expand Up @@ -273,7 +260,11 @@ const SignUpPage = observer(() => {
<Flex>
<Button
large
sx={{ width: '100%', justifyContent: 'center' }}
sx={{
borderRadius: 3,
width: '100%',
justifyContent: 'center',
}}
data-cy="submit"
variant={'primary'}
disabled={disabled}
Expand Down
40 changes: 15 additions & 25 deletions src/pages/SignUp/SignUpMessage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,24 @@ const SignUpMessagePage = () => (
>
<Flex sx={{ flexDirection: 'column', width: '100%' }}>
<HeroBanner type="email" />
<Card sx={{ backgroundColor: 'softblue', px: 3, py: 2 }}>
<Heading>Yay! You signed up!</Heading>
</Card>
<Card mt={3}>
<Flex
px={4}
pt={0}
pb={4}
sx={{ flexWrap: 'wrap', width: '100%', flexDirection: 'column' }}
>
<Heading variant="small" py={4} sx={{ width: '100%' }}>
...Now please verify your account
</Heading>
<Flex sx={{ flexDirection: 'column' }} mb={3}>
<Text>
We've sent you an email. Please find a confirmation link in your
mailbox.
</Text>
<Card sx={{ borderRadius: 3 }}>
<Flex sx={{ padding: 4, gap: 4, flexDirection: 'column' }}>
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<Heading>Yay! You signed up!</Heading>
<Heading variant="small">...Now please verify your account</Heading>
</Flex>
<Text sx={{ color: 'grey' }}>
We've sent you an email. Please find a confirmation link in your
mailbox.
</Text>
<Link to={'/settings'}>
<Button variant="primary" data-cy="home" sx={{ borderRadius: 3 }}>
Complete your profile
</Button>
</Link>
</Flex>
</Card>
<Flex mt={3} sx={{ justifyContent: 'flex-start' }}>
<Link to={'/settings'}>
<Button variant="primary" data-cy="home">
Complete your profile
</Button>
</Link>
</Flex>
<Flex mt={3} sx={{ justifyContent: 'flex-start' }}></Flex>
</Flex>
</Flex>
)
Expand Down

0 comments on commit 5653093

Please sign in to comment.