Skip to content

Commit

Permalink
fix: fixing deployment issues with amplify
Browse files Browse the repository at this point in the history
  • Loading branch information
yokwejuste committed Jan 2, 2025
1 parent 8ed8813 commit 432004f
Show file tree
Hide file tree
Showing 6 changed files with 170 additions and 124 deletions.
18 changes: 18 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"yup": "^1.4.0"
},
"devDependencies": {
"@types/node": "^22.10.3",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^6.21.0",
Expand Down
6 changes: 3 additions & 3 deletions src/models/password.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export interface ForgotPasswordForm {
email: string
email: string;
code: string;
}

export interface ResetPasswordForm {
// code :string
password: string;
confirmPassword: string;
}
}
248 changes: 127 additions & 121 deletions src/pages/auth/forgot-password/Forgot-password.tsx
Original file line number Diff line number Diff line change
@@ -1,146 +1,152 @@
import {Link, useNavigate} from 'react-router-dom'
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { AuthImages, HomeImages } from '../../../assets'
import { Button } from '../../../components/layout';
import { IoIosCheckmark } from 'react-icons/io';
import { useForm } from 'react-hook-form';
import { ForgotPasswordForm } from '../../../models';
import {yupResolver} from '@hookform/resolvers/yup';
import {AuthImages, HomeImages} from '@/assets'
import {Button} from '@components/layout';
import {IoIosCheckmark} from 'react-icons/io';
import {useForm} from 'react-hook-form';
import {ForgotPasswordForm} from '@/models';

const ForgotPassword = () => {
const navigate = useNavigate()
const ForgotPasswordSchema = yup.object().shape({
email: yup
.string()
.required('This field is required')
.matches(
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
`${'Enter a valid email'}`
),
code: yup
.string()
.required('enter a code')

});

const navigate = useNavigate()
const ForgotPasswordSchema = yup.object().shape({
email: yup
.string()
.required('This field is required')
.matches(
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
`${'Enter a valid email'}`
),
code: yup
.string()
.required('enter a code'),
}
);

const {

const {
handleSubmit,
register,
formState: { errors },
} = useForm<ForgotPasswordForm>({
formState: {errors},
} = useForm<ForgotPasswordForm>({
resolver: yupResolver(ForgotPasswordSchema),
});
});


const onSubmit = async (data: ForgotPasswordForm) => {
const onSubmit = async (data: ForgotPasswordForm) => {
console.log(data);
};
};


return (
<div className=' px-5 py-10 bg-no-repeat bg-cover h-screen bg-center flex flex-col justify-start items-center'>
<Link to={'/'} className='pb-4 w-40'>
<img src={HomeImages.Logo} alt='' />
</Link>
<div>
<h1 className='text-3xl font-bold text-center'>Forgot Password</h1>
<p className='text-center text-lg text-medium'>
We are very sorry for you losing your password but we got your back.
</p>
</div>
<div>
<div className='mt-10 flex justify-center items-center gap-10'>
<div className='hidden md:block w-80'>
<img className='' src={AuthImages.Lock} alt='' />
</div>
return (
<div className=' px-5 py-10 bg-no-repeat bg-cover h-screen bg-center flex flex-col justify-start items-center'>
<Link to={'/'} className='pb-4 w-40'>
<img src={HomeImages.Logo} alt=''/>
</Link>
<div>
<h1 className='text-3xl font-bold text-center'>Forgot Password</h1>
<p className='text-center text-lg text-medium'>
We are very sorry for you losing your password but we got your back.
</p>
</div>
<div>
<div className='mt-10 flex justify-center items-center gap-10'>
<div className='hidden md:block w-80'>
<img className='' src={AuthImages.Lock} alt=''/>
</div>

<div className='w-full md:w-[50%]'>
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor='email' className='mb-2 text-lg font-light'>
Enter you email
<span className='text-red-600 text-lg my-0'>*</span>
</label>
<input
type='email'
id='email'
placeholder='enter email'
className='mt-2 w-full border-[1px] py-3 px-3 border-gray-500 placeholder:text-lg rounded-lg focus:outline-none focus:border-secondary'
{...register('email')}
/>
</div>
<label className='label'>
{errors['email'] && (
<span className='label-text-alt text-red-500'>
<div className='w-full md:w-[50%]'>
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor='email' className='mb-2 text-lg font-light'>
Enter you email
<span className='text-red-600 text-lg my-0'>*</span>
</label>
<input
type='email'
id='email'
placeholder='enter email'
className='mt-2 w-full border-[1px] py-3 px-3 border-gray-500 placeholder:text-lg rounded-lg focus:outline-none focus:border-secondary'
{...register('email')}
/>
</div>
<label className='label'>
{errors['email'] && (
<span className='label-text-alt text-red-500'>
{errors['email']?.message}
</span>
)}
</label>
<div>
<div className='w-2 h-8 ml-5 bg-transparent border-l border-dashed border-gray-500'></div>
<div className='flex gap-2 ml-3 items-start justify-start relative b'>
<div className='w-5 h-5 rounded-full border flex justify-center items-center border-gray-500 bg-transparent'>
<IoIosCheckmark />
</div>
<span className='text-gray-400 text-base'>
)}
</label>
<div>
<div
className='w-2 h-8 ml-5 bg-transparent border-l border-dashed border-gray-500'></div>
<div className='flex gap-2 ml-3 items-start justify-start relative b'>
<div
className='w-5 h-5 rounded-full border flex justify-center items-center border-gray-500 bg-transparent'>
<IoIosCheckmark/>
</div>
<span className='text-gray-400 text-base'>
Verifying email...
</span>
</div>
</div>
<div>
<div className='w-2 h-8 ml-5 bg-transparent border-l border-dashed border-gray-500'></div>
<div className='flex gap-2 ml-3 items-start justify-start relative b'>
<div className='w-5 h-5 rounded-full border flex justify-center items-center border-gray-500 bg-transparent'>
<IoIosCheckmark />
</div>
<span className='text-gray-400 text-base'>
</div>
</div>
<div>
<div
className='w-2 h-8 ml-5 bg-transparent border-l border-dashed border-gray-500'></div>
<div className='flex gap-2 ml-3 items-start justify-start relative b'>
<div
className='w-5 h-5 rounded-full border flex justify-center items-center border-gray-500 bg-transparent'>
<IoIosCheckmark/>
</div>
<span className='text-gray-400 text-base'>
Sending verification code...
</span>
</div>
</div>
<div>
<div className='w-2 h-8 ml-5 bg-transparent border-l border-dashed border-gray-500'></div>
<div>
<label
htmlFor='email'
className='mb-2 text-gray-400 font-light'
>
Enter the verification code we sent to your email
<span className='text-red-600 text-lg my-0'>*</span>
</label>
<input
type='text'
id='code'
placeholder='enter code'
className='mt-2 w-full border-[1px] py-3 px-3 border-gray-500 placeholder:text-lg rounded-lg focus:outline-none focus:border-secondary'
{...register('code')}
/>
</div>
</div>
<label className='label'>
{errors['code'] && (
<span className='label-text-alt text-red-500'>
</div>
</div>
<div>
<div
className='w-2 h-8 ml-5 bg-transparent border-l border-dashed border-gray-500'></div>
<div>
<label
htmlFor='email'
className='mb-2 text-gray-400 font-light'
>
Enter the verification code we sent to your email
<span className='text-red-600 text-lg my-0'>*</span>
</label>
<input
type='text'
id='code'
placeholder='enter code'
className='mt-2 w-full border-[1px] py-3 px-3 border-gray-500 placeholder:text-lg rounded-lg focus:outline-none focus:border-secondary'
{...register('code')}
/>
</div>
</div>
<label className='label'>
{errors['code'] && (
<span className='label-text-alt text-red-500'>
{errors['code']?.message}
</span>
)}
</label>
<div className='flex justify-center items-center gap-7 mt-10'>
<button onClick={()=>{
navigate('/auth/login')
}} className='text-red-500 bg-transparent border border-red-500 rounded-xl px-10 py-2 flex justify-center items-center text-lg font-semibold'>
Cancel
</button>
<Button outline={false} backgroundColor='bg-secondary'>
<p className='px-10'>Proceed</p>
</Button>
</div>
</form>
</div>
)}
</label>
<div className='flex justify-center items-center gap-7 mt-10'>
<button onClick={() => {
navigate('/auth/login')
}}
className='text-red-500 bg-transparent border border-red-500 rounded-xl px-10 py-2 flex justify-center items-center text-lg font-semibold'>
Cancel
</button>
<Button outline={false} backgroundColor='bg-secondary'>
<p className='px-10'>Proceed</p>
</Button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
);
);
}

export default ForgotPassword
20 changes: 20 additions & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,26 @@
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": [
"src/components/*"
],
"@utils/*": [
"src/utils/*"
],
"@hooks/*": [
"src/hooks/*"
],
"@types/*": [
"src/types/*"
],
"@assets/*": [
"src/assets/*"
],
"@services/*": [
"src/services/*"
],
"@features/*": [
"src/features/*"]
},

},
Expand Down
1 change: 1 addition & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
'@components': path.resolve(__dirname, './src/components'),
},
},
})

0 comments on commit 432004f

Please sign in to comment.