Skip to content

Commit

Permalink
finishing password reset
Browse files Browse the repository at this point in the history 
finishing a rebase
  • Loading branch information
@JeanIrad
JeanIrad committed Jun 24, 2024
1 parent 54ea615 commit e309dcf
Show file tree
Hide file tree
Showing 10 changed files with 520 additions and 283 deletions.
15 changes: 14 additions & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import Login from './pages/Login';
import LandingPage from './pages/LandingPage';
import GoogleAuthSuccess from './components/authentication/GoogleAuthSucces';
import { ToastContainer } from 'react-toastify';
import { cn } from './utils';

import ResetPassword from './pages/ResetPassword';
import NewPassword from './pages/NewPassword';
const App = () => {
const router = createBrowserRouter([
{
Expand All @@ -24,6 +27,16 @@ const App = () => {
path: 'auth/success/:token',
element: <GoogleAuthSuccess />,
},
{
path: '/reset-password',
children: [
{ path: '', element: <ResetPassword /> },
{
path: ':token',
element: <NewPassword />,
},
],
},
],
},
{
Expand All @@ -41,7 +54,7 @@ const App = () => {
return (
<>
<RouterProvider router={router} />
<ToastContainer />
<ToastContainer position='top-center' className={cn('w-full xl:w-4/5 sm:w-3/4 ')} />
</>
);
};
Expand Down
6 changes: 4 additions & 2 deletions src/components/authentication/LoginComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import GoogleIcon from '../../assets/googleIcon.svg';
import Button from '../common/Button';
import Input from '../common/Input';
import { loginSchema, LoginData } from '../../utils/schemas';
import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
import { useNavigate, useLocation, useSearchParams, Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { setToken, setUser } from '../../redux/slices/userSlice';
import { useLoginUserMutation } from '../../services/authAPI';
Expand Down Expand Up @@ -106,7 +106,9 @@ const LoginComponent = () => {
{...register('password')}
error={errors.password && errors.password.message}
/>
<p className='text-sm text-end hover:cursor-pointer hover:underline'>Forget password</p>
<Link to={'/reset-password'}>
<p className='text-sm text-end hover:cursor-pointer hover:underline'>Forget password</p>
</Link>
<button
type='submit'
className='p-2 rounded-lg bg-greenColor hover:bg-darkGreen transition-all text-whiteColor font-bold'
Expand Down
7 changes: 5 additions & 2 deletions src/components/common/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { cn } from "../../utils";
import { cn } from '../../utils';

interface ButtonProps {
text: string;
Expand All @@ -11,7 +11,10 @@ const Button = ({ text, type, className, onClick }: ButtonProps) => {
return (
<button
type={type}
className={cn('p-2 rounded-lg bg-greenColor hover:bg-darkGreen transition-all text-whiteColor font-bold', className)}
className={cn(
'p-2 rounded-lg bg-greenColor hover:bg-darkGreen transition-all text-whiteColor font-bold',
className
)}
onClick={onClick}
>
{text}
Expand Down
149 changes: 75 additions & 74 deletions src/components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,80 @@
import FooterTitle from "../../containers/footer/FooterTitle"
import SocialIcon from "../../containers/footer/SocialIcon"
import FooterLink from "../../containers/footer/FooterLink"
import FooterTitle from '../../containers/footer/FooterTitle';
import SocialIcon from '../../containers/footer/SocialIcon';
import FooterLink from '../../containers/footer/FooterLink';

function Footer() {
return (
<>
<div className="w-full flex flex-col gap-2 bg-grayColor font-roboto 2xl:items-center ">
<div className="p-3 md:p-4 xl:px-10 2xl:w-[1440px] grid grid-cols-2 md:grid-cols-5 xl:grid-cols-6 gap-x-20 gap-y-5 sm:gap-5 md:gap-2">
<div className="flex flex-col md:row-span-1 md:col-start-1 md:col-end-3 gap-3">
<FooterTitle title={"mavericks"} />
<div className="leading-none text-xs md:text-base break-words flex flex-col gap-3 font-light flex-grow">
<p>
K309 St , Makuza plaza, Nyarugenge ,
Kigali, Rwanda
</p>
<p>
[email protected]
</p>
<p>+250 788888888</p>
</div>
<div className="flex gap-2">
<a href="#" target="_blank">
<SocialIcon name="instagram" />
</a>
<a href="#" target="_blank">
<SocialIcon name="facebook" />
</a>
<a href="#" target="_blank">
<SocialIcon name="twitter" />
</a>
</div>
</div>
<div className="flex flex-col gap-3">
<FooterTitle title={"company"} />
<div className="flex flex-col gap-1 font-light">
<FooterLink name={"about us"} />
<FooterLink name={"contact us"} />
</div>
</div>
<div className="flex flex-col gap-3">
<FooterTitle title={"shop"} />
<div className="flex flex-col gap-1 font-light">
<FooterLink name={"new arrival"} />
<FooterLink name={"all products"} />
<FooterLink name={"babies"} />
<FooterLink name={"father"} />
<FooterLink name={"electronics"} />
</div>
</div>
<div className="flex flex-col gap-3">
<FooterTitle title={"help"} />
<div className="flex flex-col gap-2 md:gap-1 font-light">
<FooterLink name={"customer services"} />
<FooterLink name={"my account"} />
<FooterLink name={"find store"} />
<FooterLink name={"legal & privacy"} />
</div>
</div>
<div className="flex flex-col items-center gap-3 row-span-1 md:row-span-1 col-span-2 md:col-start-3 md:col-end-6 lg:col-start-4 xl:col-start-6 xl:auto-cols-max">
<FooterTitle title={"subscribe"} />
<p className="hidden xl:flex leading-none text-base font-light">Be the first to get latest news about trends,Promotions and many more.</p>
<form className="w-full flex flex-col">
<div className=" w-full flex">
<label htmlFor="email"></label>
<input type="text" id="email" placeholder="Email address" className="p-2 flex-grow xl:w-3/4" />
<button type="submit" className="leading-none bg-greenColor text-whiteColor w-20">Join</button>
</div>
<span className="text-xs text-redColor text-left">Email is not valid</span>
</form>
</div>
</div>
<p className="p-3 md:p-4 xl:px-10 2xl:w-[1440px] text-xs text-center xl:text-left ">&copy; 2024 Mavericks Shop. All rights reserved.</p>
return (
<>
<div className='w-full flex flex-col gap-2 bg-grayColor font-roboto 2xl:items-center'>
<div className='p-3 md:p-4 xl:px-10 2xl:w-[1440px] grid grid-cols-2 md:grid-cols-5 xl:grid-cols-6 gap-x-20 gap-y-5 sm:gap-5 md:gap-2'>
<div className='flex flex-col md:row-span-1 md:col-start-1 md:col-end-3 gap-3'>
<FooterTitle title={'mavericks'} />
<div className='leading-none text-xs md:text-base break-words flex flex-col gap-3 font-light flex-grow'>
<p>K309 St , Makuza plaza, Nyarugenge , Kigali, Rwanda</p>
<p>[email protected]</p>
<p>+250 788888888</p>
</div>
</>
)
<div className='flex gap-2'>
<a href='#' target='_blank'>
<SocialIcon name='instagram' />
</a>
<a href='#' target='_blank'>
<SocialIcon name='facebook' />
</a>
<a href='#' target='_blank'>
<SocialIcon name='twitter' />
</a>
</div>
</div>
<div className='flex flex-col gap-3'>
<FooterTitle title={'company'} />
<div className='flex flex-col gap-1 font-light'>
<FooterLink name={'about us'} />
<FooterLink name={'contact us'} />
</div>
</div>
<div className='flex flex-col gap-3'>
<FooterTitle title={'shop'} />
<div className='flex flex-col gap-1 font-light'>
<FooterLink name={'new arrival'} />
<FooterLink name={'all products'} />
<FooterLink name={'babies'} />
<FooterLink name={'father'} />
<FooterLink name={'electronics'} />
</div>
</div>
<div className='flex flex-col gap-3'>
<FooterTitle title={'help'} />
<div className='flex flex-col gap-2 md:gap-1 font-light'>
<FooterLink name={'customer services'} />
<FooterLink name={'my account'} />
<FooterLink name={'find store'} />
<FooterLink name={'legal & privacy'} />
</div>
</div>
<div className='flex flex-col items-center gap-3 row-span-1 md:row-span-1 col-span-2 md:col-start-3 md:col-end-6 lg:col-start-4 xl:col-start-6 xl:auto-cols-max'>
<FooterTitle title={'subscribe'} />
<p className='hidden xl:flex leading-none text-base font-light'>
Be the first to get latest news about trends,Promotions and many more.
</p>
<form className='w-full flex flex-col'>
<div className=' w-full flex'>
<label htmlFor='email'></label>
<input type='text' id='email' placeholder='Email address' className='p-2 flex-grow xl:w-3/4' />
<button type='submit' className='leading-none bg-greenColor text-whiteColor w-20'>
Join
</button>
</div>
<span className='text-xs text-redColor text-left'>Email is not valid</span>
</form>
</div>
</div>
<p className='p-3 md:p-4 xl:px-10 2xl:w-[1440px] text-xs text-center xl:text-left '>
&copy; 2024 Mavericks Shop. All rights reserved.
</p>
</div>
</>
);
}

export default Footer
export default Footer;
Loading

0 comments on commit e309dcf

Please sign in to comment.