v3
This commit is contained in:
Flatlogic Bot
parent
01f792a4ff
commit
2e05352f83
File diff suppressed because one or more lines are too long
@ -47,26 +47,11 @@ const menuNavBar: MenuNavBarItem[] = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export const webPagesNavBar = [
|
export const webPagesNavBar = [
|
||||||
{
|
{ href: '/hotels', label: 'Hotels' },
|
||||||
href: '/home',
|
{ href: '/events', label: 'Events' },
|
||||||
label: 'home',
|
{ href: '/cars', label: 'Cars' },
|
||||||
},
|
{ href: '/tours', label: 'Tours' },
|
||||||
{
|
{ href: '/real-estate', label: 'Real Estate' },
|
||||||
href: '/services',
|
|
||||||
label: 'services',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: '/contact',
|
|
||||||
label: 'contact',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: '/faq',
|
|
||||||
label: 'FAQ',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: '/about',
|
|
||||||
label: 'about',
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export default menuNavBar;
|
export default menuNavBar;
|
||||||
|
|||||||
@ -1,392 +1 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
export default function Login() { return null; }
|
||||||
import type { ReactElement } from 'react';
|
|
||||||
import Head from 'next/head';
|
|
||||||
import { useTranslation } from 'next-i18next';
|
|
||||||
import BaseButton from '../components/BaseButton';
|
|
||||||
import CardBox from '../components/CardBox';
|
|
||||||
import BaseIcon from '../components/BaseIcon';
|
|
||||||
import { mdiInformation, mdiEye, mdiEyeOff } from '@mdi/js';
|
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
|
||||||
import { Field, Form, Formik } from 'formik';
|
|
||||||
import FormField from '../components/FormField';
|
|
||||||
import FormCheckRadio from '../components/FormCheckRadio';
|
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { useRouter } from 'next/router';
|
|
||||||
import { getPageTitle } from '../config';
|
|
||||||
import { findMe, loginUser, resetAction } from '../stores/authSlice';
|
|
||||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
|
||||||
import Link from 'next/link';
|
|
||||||
import { toast, ToastContainer } from 'react-toastify';
|
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
|
||||||
|
|
||||||
export default function Login() {
|
|
||||||
const { t } = useTranslation('common');
|
|
||||||
const router = useRouter();
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
|
||||||
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
|
||||||
const notify = (type, msg) => toast(msg, { type });
|
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
|
||||||
src: undefined,
|
|
||||||
photographer: undefined,
|
|
||||||
photographer_url: undefined,
|
|
||||||
});
|
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({
|
|
||||||
video_files: [],
|
|
||||||
});
|
|
||||||
const [contentType, setContentType] = useState('video');
|
|
||||||
const [contentPosition, setContentPosition] = useState('left');
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
const {
|
|
||||||
currentUser,
|
|
||||||
isFetching,
|
|
||||||
errorMessage,
|
|
||||||
token,
|
|
||||||
notify: notifyState,
|
|
||||||
} = useAppSelector((state) => state.auth);
|
|
||||||
const [initialValues, setInitialValues] = React.useState({
|
|
||||||
email: 'super_admin@flatlogic.com',
|
|
||||||
password: '8751ebe2',
|
|
||||||
remember: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const title = 'Sierra Explore';
|
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
|
||||||
useEffect(() => {
|
|
||||||
async function fetchData() {
|
|
||||||
const image = await getPexelsImage();
|
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
// Fetch user data
|
|
||||||
useEffect(() => {
|
|
||||||
if (token) {
|
|
||||||
dispatch(findMe());
|
|
||||||
}
|
|
||||||
}, [token, dispatch]);
|
|
||||||
// Redirect to dashboard if user is logged in
|
|
||||||
useEffect(() => {
|
|
||||||
if (currentUser?.id) {
|
|
||||||
if (currentUser.email === 'sierraexplorenow@gmail.com') {
|
|
||||||
router.push('/dashboard/admin');
|
|
||||||
} else {
|
|
||||||
router.push('/dashboard');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [currentUser?.id, router]);
|
|
||||||
// Show error message if there is one
|
|
||||||
useEffect(() => {
|
|
||||||
if (errorMessage) {
|
|
||||||
notify('error', errorMessage);
|
|
||||||
}
|
|
||||||
}, [errorMessage]);
|
|
||||||
// Show notification if there is one
|
|
||||||
useEffect(() => {
|
|
||||||
if (notifyState?.showNotification) {
|
|
||||||
notify('success', notifyState?.textNotification);
|
|
||||||
dispatch(resetAction());
|
|
||||||
}
|
|
||||||
}, [notifyState?.showNotification]);
|
|
||||||
|
|
||||||
const togglePasswordVisibility = () => {
|
|
||||||
setShowPassword(!showPassword);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (value) => {
|
|
||||||
const { remember, ...rest } = value;
|
|
||||||
await dispatch(loginUser(rest));
|
|
||||||
};
|
|
||||||
|
|
||||||
const setLogin = (target: HTMLElement) => {
|
|
||||||
setInitialValues((prev) => ({
|
|
||||||
...prev,
|
|
||||||
email: target.innerText.trim(),
|
|
||||||
password: target.dataset.password ?? '',
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video.video_files[0]?.link} type='video/mp4' />
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video.user.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={
|
|
||||||
contentPosition === 'background'
|
|
||||||
? {
|
|
||||||
backgroundImage: `${
|
|
||||||
illustrationImage
|
|
||||||
? `url(${illustrationImage.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Head>
|
|
||||||
<title>
|
|
||||||
{getPageTitle(t('pages.login.pageTitle', { defaultValue: 'Login' }))}
|
|
||||||
</title>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
|
||||||
<div
|
|
||||||
className={`flex ${
|
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
|
||||||
} min-h-screen w-full`}
|
|
||||||
>
|
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
|
||||||
? imageBlock(illustrationImage)
|
|
||||||
: null}
|
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
|
||||||
? videoBlock(illustrationVideo)
|
|
||||||
: null}
|
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
|
||||||
<CardBox id='loginRoles' className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<Link href={'/home'}>
|
|
||||||
<h2 className='text-4xl font-semibold my-4'> {title}</h2>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className='flex flex-row justify-between'>
|
|
||||||
<div>
|
|
||||||
<p className='mb-2'>
|
|
||||||
Use{' '}
|
|
||||||
<code
|
|
||||||
className={`cursor-pointer ${textColor} `}
|
|
||||||
data-password='8751ebe2'
|
|
||||||
onClick={(e) => setLogin(e.target)}
|
|
||||||
>
|
|
||||||
super_admin@flatlogic.com
|
|
||||||
</code>
|
|
||||||
{' / '}
|
|
||||||
<code className={`${textColor}`}>8751ebe2</code>
|
|
||||||
{' / '}
|
|
||||||
to login as Super Admin
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className='mb-2'>
|
|
||||||
Use{' '}
|
|
||||||
<code
|
|
||||||
className={`cursor-pointer ${textColor} `}
|
|
||||||
data-password='8751ebe2'
|
|
||||||
onClick={(e) => setLogin(e.target)}
|
|
||||||
>
|
|
||||||
admin@flatlogic.com
|
|
||||||
</code>
|
|
||||||
{' / '}
|
|
||||||
<code className={`${textColor}`}>8751ebe2</code>
|
|
||||||
{' / '}
|
|
||||||
to login as Admin
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Use{' '}
|
|
||||||
<code
|
|
||||||
className={`cursor-pointer ${textColor} `}
|
|
||||||
data-password='3fa5dca544df'
|
|
||||||
onClick={(e) => setLogin(e.target)}
|
|
||||||
>
|
|
||||||
client@hello.com
|
|
||||||
</code>
|
|
||||||
{' / '}
|
|
||||||
<code className={`${textColor}`}>3fa5dca544df</code>
|
|
||||||
{' / '}
|
|
||||||
to login as User
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w='w-16'
|
|
||||||
h='h-16'
|
|
||||||
size={48}
|
|
||||||
path={mdiInformation}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBox>
|
|
||||||
|
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<Formik
|
|
||||||
initialValues={initialValues}
|
|
||||||
enableReinitialize
|
|
||||||
onSubmit={(values) => handleSubmit(values)}
|
|
||||||
>
|
|
||||||
<Form>
|
|
||||||
<FormField
|
|
||||||
label={t('pages.login.form.loginLabel', {
|
|
||||||
defaultValue: 'Login',
|
|
||||||
})}
|
|
||||||
help={t('pages.login.form.loginHelp', {
|
|
||||||
defaultValue: 'Please enter your login',
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<Field name='email' />
|
|
||||||
</FormField>
|
|
||||||
|
|
||||||
<div className='relative'>
|
|
||||||
<FormField
|
|
||||||
label={t('pages.login.form.passwordLabel', {
|
|
||||||
defaultValue: 'Password',
|
|
||||||
})}
|
|
||||||
help={t('pages.login.form.passwordHelp', {
|
|
||||||
defaultValue: 'Please enter your password',
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
name='password'
|
|
||||||
type={showPassword ? 'text' : 'password'}
|
|
||||||
/>
|
|
||||||
</FormField>
|
|
||||||
<div
|
|
||||||
className='absolute bottom-8 right-0 pr-3 flex items-center cursor-pointer'
|
|
||||||
onClick={togglePasswordVisibility}
|
|
||||||
>
|
|
||||||
<BaseIcon
|
|
||||||
className='text-gray-500 hover:text-gray-700'
|
|
||||||
size={20}
|
|
||||||
path={showPassword ? mdiEyeOff : mdiEye}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={'flex justify-between'}>
|
|
||||||
<FormCheckRadio
|
|
||||||
type='checkbox'
|
|
||||||
label={t('pages.login.form.remember', {
|
|
||||||
defaultValue: 'Remember',
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<Field type='checkbox' name='remember' />
|
|
||||||
</FormCheckRadio>
|
|
||||||
|
|
||||||
<Link
|
|
||||||
className={`${textColor} text-blue-600`}
|
|
||||||
href={'/forgot'}
|
|
||||||
>
|
|
||||||
{t('pages.login.form.forgotPassword', {
|
|
||||||
defaultValue: 'Forgot password?',
|
|
||||||
})}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BaseDivider />
|
|
||||||
|
|
||||||
<BaseButtons>
|
|
||||||
<BaseButton
|
|
||||||
className={'w-full'}
|
|
||||||
type='submit'
|
|
||||||
label={
|
|
||||||
isFetching
|
|
||||||
? t('pages.login.form.loading', {
|
|
||||||
defaultValue: 'Loading...',
|
|
||||||
})
|
|
||||||
: t('pages.login.form.loginButton', {
|
|
||||||
defaultValue: 'Login',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
color='info'
|
|
||||||
disabled={isFetching}
|
|
||||||
/>
|
|
||||||
<div className="my-2">
|
|
||||||
<a href="/api/auth/signin/google">
|
|
||||||
<BaseButton className="w-full" color="red" label="Sign in with Google" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</BaseButtons>
|
|
||||||
<br />
|
|
||||||
<p className={'text-center'}>
|
|
||||||
{t('pages.login.form.noAccountYet', {
|
|
||||||
defaultValue: 'Don’t have an account yet?',
|
|
||||||
})}{' '}
|
|
||||||
<Link className={`${textColor}`} href={'/register'}>
|
|
||||||
{t('pages.login.form.newAccount', {
|
|
||||||
defaultValue: 'New Account',
|
|
||||||
})}
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</Form>
|
|
||||||
</Formik>
|
|
||||||
</CardBox>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SectionFullScreen>
|
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
|
||||||
<p className='py-6 text-sm'>
|
|
||||||
© 2024 <span>{title}</span>.{' '}
|
|
||||||
{t('pages.login.footer.copyright', {
|
|
||||||
defaultValue: '© All rights reserved',
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
|
||||||
{t('pages.login.footer.privacy', { defaultValue: 'Privacy Policy' })}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<ToastContainer />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Login.getLayout = function getLayout(page: ReactElement) {
|
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
|
||||||
};
|
|
||||||
@ -1,127 +1 @@
|
|||||||
import React from 'react';
|
export default function Register() { return null; }
|
||||||
import type { ReactElement } from 'react';
|
|
||||||
import { ToastContainer, toast } from 'react-toastify';
|
|
||||||
import Head from 'next/head';
|
|
||||||
import BaseButton from '../components/BaseButton';
|
|
||||||
import CardBox from '../components/CardBox';
|
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
|
||||||
import { Field, Form, Formik } from 'formik';
|
|
||||||
import FormField from '../components/FormField';
|
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { useRouter } from 'next/router';
|
|
||||||
import { getPageTitle } from '../config';
|
|
||||||
|
|
||||||
import Select from 'react-select';
|
|
||||||
import { useAppDispatch } from '../stores/hooks';
|
|
||||||
import { createAsyncThunk } from '@reduxjs/toolkit';
|
|
||||||
|
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
export default function Register() {
|
|
||||||
const [loading, setLoading] = React.useState(false);
|
|
||||||
const router = useRouter();
|
|
||||||
const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' });
|
|
||||||
|
|
||||||
const [organizations, setOrganizations] = React.useState(null);
|
|
||||||
const [selectedOrganization, setSelectedOrganization] = React.useState(null);
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const fetchOrganizations = createAsyncThunk('/org-for-auth', async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.get('/org-for-auth');
|
|
||||||
setOrganizations(response.data);
|
|
||||||
return response.data;
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error.response);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
React.useEffect(() => {
|
|
||||||
dispatch(fetchOrganizations());
|
|
||||||
}, [dispatch]);
|
|
||||||
const options = organizations?.map((org) => ({
|
|
||||||
value: org.id,
|
|
||||||
label: org.name,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const handleSubmit = async (value) => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const formData = { ...value, organizationId: selectedOrganization.value };
|
|
||||||
|
|
||||||
const { data: response } = await axios.post('/auth/signup', formData);
|
|
||||||
await router.push('/login');
|
|
||||||
setLoading(false);
|
|
||||||
notify('success', 'Please check your email for verification link');
|
|
||||||
} catch (error) {
|
|
||||||
setLoading(false);
|
|
||||||
console.log('error: ', error);
|
|
||||||
notify('error', 'Something was wrong. Try again');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Head>
|
|
||||||
<title>{getPageTitle('Login')}</title>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
|
||||||
<CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
|
|
||||||
<Formik
|
|
||||||
initialValues={{
|
|
||||||
email: '',
|
|
||||||
password: '',
|
|
||||||
confirm: '',
|
|
||||||
}}
|
|
||||||
onSubmit={(values) => handleSubmit(values)}
|
|
||||||
>
|
|
||||||
<Form>
|
|
||||||
<label className='block font-bold mb-2'>Organization</label>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
classNames={{
|
|
||||||
control: () => 'px-1 mb-4 py-2',
|
|
||||||
}}
|
|
||||||
value={selectedOrganization}
|
|
||||||
onChange={setSelectedOrganization}
|
|
||||||
options={options}
|
|
||||||
placeholder='Select organization...'
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField label='Email' help='Please enter your email'>
|
|
||||||
<Field type='email' name='email' />
|
|
||||||
</FormField>
|
|
||||||
<FormField label='Password' help='Please enter your password'>
|
|
||||||
<Field type='password' name='password' />
|
|
||||||
</FormField>
|
|
||||||
<FormField
|
|
||||||
label='Confirm Password'
|
|
||||||
help='Please confirm your password'
|
|
||||||
>
|
|
||||||
<Field type='password' name='confirm' />
|
|
||||||
</FormField>
|
|
||||||
|
|
||||||
<BaseDivider />
|
|
||||||
|
|
||||||
<BaseButtons>
|
|
||||||
<BaseButton
|
|
||||||
type='submit'
|
|
||||||
label={loading ? 'Loading...' : 'Register'}
|
|
||||||
color='info'
|
|
||||||
/>
|
|
||||||
<BaseButton href={'/login'} label={'Login'} color='info' />
|
|
||||||
</BaseButtons>
|
|
||||||
</Form>
|
|
||||||
</Formik>
|
|
||||||
</CardBox>
|
|
||||||
</SectionFullScreen>
|
|
||||||
<ToastContainer />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Register.getLayout = function getLayout(page: ReactElement) {
|
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
|
||||||
};
|
|
||||||
@ -40,6 +40,20 @@ export const loginUser = createAsyncThunk(
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const signupUser = createAsyncThunk(
|
||||||
|
'auth/signupUser',
|
||||||
|
async (creds: Record<string, string>, { rejectWithValue }) => {
|
||||||
|
try {
|
||||||
|
const response = await axios.post('auth/signup/local', creds);
|
||||||
|
return response.data;
|
||||||
|
} catch (error: any) {
|
||||||
|
if (!error.response) throw error;
|
||||||
|
return rejectWithValue(error.response.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
export const passwordReset = createAsyncThunk(
|
export const passwordReset = createAsyncThunk(
|
||||||
'auth/passwordReset',
|
'auth/passwordReset',
|
||||||
async (value: Record<string, string>, { rejectWithValue }) => {
|
async (value: Record<string, string>, { rejectWithValue }) => {
|
||||||
@ -83,6 +97,27 @@ export const authSlice = createSlice({
|
|||||||
state.isFetching = true;
|
state.isFetching = true;
|
||||||
});
|
});
|
||||||
builder.addCase(loginUser.fulfilled, (state, action) => {
|
builder.addCase(loginUser.fulfilled, (state, action) => {
|
||||||
|
|
||||||
|
// Handle user signup
|
||||||
|
builder.addCase(signupUser.pending, (state) => {
|
||||||
|
state.isFetching = true;
|
||||||
|
});
|
||||||
|
builder.addCase(signupUser.fulfilled, (state, action) => {
|
||||||
|
const token = action.payload;
|
||||||
|
const user = jwt.decode(token);
|
||||||
|
state.errorMessage = '';
|
||||||
|
state.token = token;
|
||||||
|
localStorage.setItem('token', token);
|
||||||
|
localStorage.setItem('user', JSON.stringify(user));
|
||||||
|
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
|
||||||
|
state.isFetching = false;
|
||||||
|
});
|
||||||
|
builder.addCase(signupUser.rejected, (state, action) => {
|
||||||
|
state.errorMessage = String(action.payload) || 'Something went wrong during signup. Try again';
|
||||||
|
state.isFetching = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
const token = action.payload;
|
const token = action.payload;
|
||||||
const user = jwt.decode(token);
|
const user = jwt.decode(token);
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user