From 5be0529bb7a7dbbdc83b3775a79449c4b5dcd288 Mon Sep 17 00:00:00 2001 From: Jigme Lodey <90403145+jigmeloday@users.noreply.github.com> Date: Fri, 21 Jul 2023 12:06:42 +0600 Subject: [PATCH 1/6] auth services --- src/app/auth/login/components/form.component.tsx | 9 +++++++-- src/app/auth/services/schema/schema.service.ts | 16 ++++++++++++++++ src/shared/constant/shared.constant.ts | 6 ++++++ src/shared/model/common.model.ts | 2 ++ 4 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 src/shared/constant/shared.constant.ts diff --git a/src/app/auth/login/components/form.component.tsx b/src/app/auth/login/components/form.component.tsx index 12bf2cc..04fc9d0 100644 --- a/src/app/auth/login/components/form.component.tsx +++ b/src/app/auth/login/components/form.component.tsx @@ -6,13 +6,15 @@ import Input from '@/shared/component/input/input.component'; import Button from '@/shared/component/button/button.component'; import Typography from '@/shared/component/typography/typography'; import Checkbox from '@/shared/component/checkbox/checkbox.component'; +import { LOGIN_SCHEMA } from '@/app/auth/services/schema/schema.service'; export default function LoginForm () { return ( alert( 'hello' ) } initialValues={ {} } - render={ ( { handleChange, handleSubmit } ) => ( + validationSchema={LOGIN_SCHEMA} + render={ ( { handleChange, handleBlur, handleSubmit, errors, touched } ) => ( { LOGIN_FORM.map( ( { label, name } ) => ( @@ -20,7 +22,10 @@ export default function LoginForm () { diff --git a/src/app/auth/services/schema/schema.service.ts b/src/app/auth/services/schema/schema.service.ts index e69de29..c3610e3 100644 --- a/src/app/auth/services/schema/schema.service.ts +++ b/src/app/auth/services/schema/schema.service.ts @@ -0,0 +1,16 @@ +import * as Yup from 'yup'; +import { + EMAIL_FIELD, + PASSWORD_LENGTH, PASSWORD_REQUIRED_LOWERCASE, + PASSWORD_REQUIRED_NUMBER, PASSWORD_REQUIRED_UPPERCASE, + REQUIRED_FIELD +} from '@/shared/constant/shared.constant'; + +export const LOGIN_SCHEMA = Yup.object().shape( { + email: Yup.string() + .required( REQUIRED_FIELD ).email( EMAIL_FIELD ), + password: Yup.string().required( REQUIRED_FIELD ).min( 6, PASSWORD_LENGTH ) + .matches( /[0-9]/, PASSWORD_REQUIRED_NUMBER ) + .matches( /[a-z]/, PASSWORD_REQUIRED_LOWERCASE ) + .matches( /[A-Z]/, PASSWORD_REQUIRED_UPPERCASE ), +} ); diff --git a/src/shared/constant/shared.constant.ts b/src/shared/constant/shared.constant.ts new file mode 100644 index 0000000..a684739 --- /dev/null +++ b/src/shared/constant/shared.constant.ts @@ -0,0 +1,6 @@ +export const REQUIRED_FIELD = 'The field is required'; +export const EMAIL_FIELD = 'Email must be a valid email'; +export const PASSWORD_LENGTH = 'Password must be 6 characters long'; +export const PASSWORD_REQUIRED_NUMBER = 'Password requires a number'; +export const PASSWORD_REQUIRED_LOWERCASE = 'Password requires a lowercase letter'; +export const PASSWORD_REQUIRED_UPPERCASE = 'Password requires an uppercase letter'; diff --git a/src/shared/model/common.model.ts b/src/shared/model/common.model.ts index 437be45..823caee 100644 --- a/src/shared/model/common.model.ts +++ b/src/shared/model/common.model.ts @@ -1,3 +1,5 @@ export type MatColors = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'; export type MatVariants = 'text' | 'outlined' | 'contained'; export type MatInputVariants = 'filled' | 'outlined' | 'standard'; + + From 7c80c0e5e5b788d966d850dc2450089c1863984c Mon Sep 17 00:00:00 2001 From: Jigme Lodey <90403145+jigmeloday@users.noreply.github.com> Date: Fri, 21 Jul 2023 12:18:18 +0600 Subject: [PATCH 2/6] auth services --- .../auth/login/components/form.component.tsx | 20 ++++++++++++++++--- src/app/auth/login/constant/login.constant.ts | 8 +++++--- src/app/auth/login/model/login.model.ts | 3 ++- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/app/auth/login/components/form.component.tsx b/src/app/auth/login/components/form.component.tsx index 04fc9d0..92372ed 100644 --- a/src/app/auth/login/components/form.component.tsx +++ b/src/app/auth/login/components/form.component.tsx @@ -1,14 +1,18 @@ 'use client'; import { Formik } from 'formik'; -import { Box, Grid } from '@mui/material'; +import { Box, Grid, InputAdornment } from '@mui/material'; import { LOGIN_FORM } from '@/app/auth/login/constant/login.constant'; import Input from '@/shared/component/input/input.component'; import Button from '@/shared/component/button/button.component'; import Typography from '@/shared/component/typography/typography'; import Checkbox from '@/shared/component/checkbox/checkbox.component'; import { LOGIN_SCHEMA } from '@/app/auth/services/schema/schema.service'; +import { useState } from 'react'; +import Icon from '@/shared/component/icon/icon'; export default function LoginForm () { + const [ passwordView, setPasswordView ] = useState( true ); + return ( alert( 'hello' ) } @@ -17,16 +21,26 @@ export default function LoginForm () { render={ ( { handleChange, handleBlur, handleSubmit, errors, touched } ) => ( { - LOGIN_FORM.map( ( { label, name } ) => ( + LOGIN_FORM.map( ( { label, name, type } ) => ( - + setPasswordView( !passwordView )}> + + + ), + } } /> ) ) diff --git a/src/app/auth/login/constant/login.constant.ts b/src/app/auth/login/constant/login.constant.ts index f2d0db3..81c6f5c 100644 --- a/src/app/auth/login/constant/login.constant.ts +++ b/src/app/auth/login/constant/login.constant.ts @@ -4,12 +4,14 @@ import gmail from '../../../../../public/icons/Gmail.svg'; export const LOGIN_FORM: LoginForm[] = [ { name: 'email', - label: 'Email' + label: 'Email', + type: 'email' }, { name: 'password', - label: 'Password' - } + label: 'Password', + type: 'password' + }, ]; export const LOGIN_ICONS: LoginIcons[] = [ diff --git a/src/app/auth/login/model/login.model.ts b/src/app/auth/login/model/login.model.ts index 52e7c1b..9895e85 100644 --- a/src/app/auth/login/model/login.model.ts +++ b/src/app/auth/login/model/login.model.ts @@ -1,6 +1,7 @@ export interface LoginForm { name: string; - label: string + label: string; + type: string } export interface LoginIcons { From 7b715e09817530242939f13a12199a93c5da41aa Mon Sep 17 00:00:00 2001 From: Jigme Lodey <90403145+jigmeloday@users.noreply.github.com> Date: Fri, 21 Jul 2023 12:45:46 +0600 Subject: [PATCH 3/6] auth services --- .../auth/login/components/form.component.tsx | 20 +++++++++---- .../auth/services/api-service/api-service.ts | 28 +++++++++++++++++++ 2 files changed, 43 insertions(+), 5 deletions(-) diff --git a/src/app/auth/login/components/form.component.tsx b/src/app/auth/login/components/form.component.tsx index 92372ed..58813f5 100644 --- a/src/app/auth/login/components/form.component.tsx +++ b/src/app/auth/login/components/form.component.tsx @@ -9,16 +9,25 @@ import Checkbox from '@/shared/component/checkbox/checkbox.component'; import { LOGIN_SCHEMA } from '@/app/auth/services/schema/schema.service'; import { useState } from 'react'; import Icon from '@/shared/component/icon/icon'; +import { useLoginUserMutation } from '@/app/auth/services/api-service/api-service'; export default function LoginForm () { const [ passwordView, setPasswordView ] = useState( true ); - + const [ login ] = useLoginUserMutation(); return ( alert( 'hello' ) } - initialValues={ {} } + onSubmit={ ({ email, password }) => { + const data = { + user: { + email, + password + } + }; + login(data); + } } + initialValues={ { email: '', password: '' } } validationSchema={LOGIN_SCHEMA} - render={ ( { handleChange, handleBlur, handleSubmit, errors, touched } ) => ( + render={ ( { handleChange, values, handleBlur, handleSubmit, errors, touched } ) => ( { LOGIN_FORM.map( ( { label, name, type } ) => ( @@ -27,6 +36,7 @@ export default function LoginForm () { name={ name } label={ label } onBlur={handleBlur} + value={values[name]} variant='outlined' type={( type === 'password' && passwordView ? 'password' : 'text' ) || type} helperText={(touched[name as keyof unknown] && @@ -59,7 +69,7 @@ export default function LoginForm () { -