Skip to content

Commit

Permalink
refactor(CE): updated types and auth views
Browse files Browse the repository at this point in the history
  • Loading branch information
@macintushar
macintushar committed Sep 3, 2024
1 parent c8c2b63 commit e55262b
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 91 deletions.
9 changes: 8 additions & 1 deletion ui/src/services/authentication.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { multiwovenFetch } from './common';
import { ErrorResponse, multiwovenFetch } from './common';

export type SignUpPayload = {
email: string;
Expand Down Expand Up @@ -28,6 +28,12 @@ export type SignInResponse = {
errors?: SignInErrorResponse[];
};

export type AuthErrorResponse = {
status: number;
title: string;
detail: string;
};

export type AuthResponse = {
type: string;
id: string;
Expand All @@ -44,6 +50,7 @@ export type AuthResponse = {
export type ApiResponse<T> = {
data?: T;
status: number;
errors?: ErrorResponse[];
};

export const signUp = async (payload: SignUpPayload) =>
Expand Down
192 changes: 103 additions & 89 deletions ui/src/views/Authentication/AuthViews/SignInAuthView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,102 +3,116 @@ import { Form, Formik } from 'formik';
import { Button, Checkbox, HStack, Heading, Stack, Text } from '@chakra-ui/react';
import { FormField, PasswordField } from '@/components/Fields';
import { Link } from 'react-router-dom';
import { SignInAuthViewProps, SignInSchema } from '../types';
import { SignInAuthViewProps } from '../types';
import { SignInSchema } from '@/constants/schemas';
import { useEffect } from 'react';
import { useStore } from '@/stores';
import Cookies from 'js-cookie';

export const SignInAuthView = ({
brandName,
logoUrl,
handleSubmit,
submitting,
}: SignInAuthViewProps) => (
<>
<AuthCard logoUrl={logoUrl} brandName={brandName}>
<Formik
initialValues={{
email: '',
password: '',
}}
onSubmit={(values) => handleSubmit(values)}
validationSchema={SignInSchema}
>
{({ getFieldProps, touched, errors }) => (
<Form>
<Stack spacing='8px' textAlign='center' mb='32px'>
<Heading size='xs' fontWeight='semibold'>
{"Let's activate your data"}
</Heading>
<Text size='sm' color='black.200'>
{`Sign In to your ${brandName} account`}
</Text>
</Stack>
<Stack spacing='6'>
<Stack spacing='3'>
<FormField
placeholder='Enter email'
name='email'
type='text'
getFieldProps={getFieldProps}
touched={touched}
errors={errors}
/>
<PasswordField
placeholder='Enter password'
name='password'
type='password'
getFieldProps={getFieldProps}
touched={touched}
errors={errors}
/>
<HStack justify='space-between'>
<Checkbox
defaultChecked
_checked={{
'& .chakra-checkbox__control': {
background: 'brand.400',
borderColor: 'brand.400',
},
'& .chakra-checkbox__control:hover': {
background: 'brand.400',
borderColor: 'brand.400',
},
}}
iconSize='12px'
size='sm'
}: SignInAuthViewProps) => {
// clears the state when the sign in auth loads
useEffect(() => {
Cookies?.remove('authToken');
useStore.getState().clearState();
}, []);

return (
<>
<AuthCard logoUrl={logoUrl} brandName={brandName}>
<Formik
initialValues={{
email: '',
password: '',
}}
onSubmit={(values) => handleSubmit(values)}
validationSchema={SignInSchema}
>
{({ getFieldProps, touched, errors }) => (
<Form>
<Stack spacing='8px' textAlign='center' mb='32px'>
<Heading size='xs' fontWeight='semibold'>
{"Let's activate your data"}
</Heading>
<Text size='sm' color='black.200'>
{`Sign In to your ${brandName} account`}
</Text>
</Stack>
<Stack spacing='6'>
<Stack spacing='3'>
<FormField
placeholder='Enter email'
name='email'
type='text'
getFieldProps={getFieldProps}
touched={touched}
errors={errors}
/>
<PasswordField
placeholder='Enter password'
name='password'
type='password'
getFieldProps={getFieldProps}
touched={touched}
errors={errors}
/>
<HStack justify='space-between'>
<Checkbox
defaultChecked
_checked={{
'& .chakra-checkbox__control': {
background: 'brand.400',
borderColor: 'brand.400',
},
'& .chakra-checkbox__control:hover': {
background: 'brand.400',
borderColor: 'brand.400',
},
}}
iconSize='12px'
size='sm'
>
<Text size='xs' fontWeight='medium'>
Stay signed in
</Text>
</Checkbox>
<Link to='/forgot-password'>
<Text size='xs' color='brand.400' fontWeight='semibold'>
Forgot Password?
</Text>
</Link>
</HStack>
</Stack>
<Stack spacing='6'>
<Button
type='submit'
isLoading={submitting}
loadingText='Signing In'
variant='solid'
width='full'
>
<Text size='xs' fontWeight='medium'>
Stay signed in
</Text>
</Checkbox>
<Text size='xs' color='brand.400' fontWeight='semibold'>
Forgot Password?
Sign In
</Button>
</Stack>
<HStack spacing={1} justify='center'>
<Text color='black.500' size='xs' fontWeight='medium'>
{"Don't have an account?"}{' '}
</Text>
<Link to='/sign-up'>
<Text color='brand.400' size='xs' fontWeight='semibold'>
Sign Up
</Text>
</Link>
</HStack>
</Stack>
<Stack spacing='6'>
<Button
type='submit'
isLoading={submitting}
loadingText='Signing In'
variant='solid'
width='full'
>
Sign In
</Button>
</Stack>
<HStack spacing={1} justify='center'>
<Text color='black.500' size='xs' fontWeight='medium'>
{"Don't have an account?"}{' '}
</Text>
<Link to='/sign-up'>
<Text color='brand.400' size='xs' fontWeight='semibold'>
Sign Up
</Text>
</Link>
</HStack>
</Stack>
</Form>
)}
</Formik>
</AuthCard>
</>
);
</Form>
)}
</Formik>
</AuthCard>
</>
);
};
1 change: 0 additions & 1 deletion ui/src/views/Authentication/AuthViews/SignUpAuthView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { Form, Formik } from 'formik';
import { Button, HStack, Stack, Text } from '@chakra-ui/react';
import { FormField, PasswordField } from '@/components/Fields';
import { Link } from 'react-router-dom';

import { SignUpAuthViewProps } from '../types';
import { SignUpSchema } from '@/constants/schemas';

Expand Down

0 comments on commit e55262b

Please sign in to comment.