first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,104 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import {useEffect} from 'react'
|
||||
import {Outlet, Link} from 'react-router-dom'
|
||||
import {toAbsoluteUrl} from '../../../_res/helpers'
|
||||
|
||||
const AuthLayout = () => {
|
||||
useEffect(() => {
|
||||
const root = document.getElementById('root')
|
||||
if (root) {
|
||||
root.style.height = '100%'
|
||||
}
|
||||
return () => {
|
||||
if (root) {
|
||||
root.style.height = 'auto'
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className='d-flex flex-column flex-lg-row flex-column-fluid h-100'>
|
||||
{/* begin::Body */}
|
||||
<div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
|
||||
{/* begin::Form */}
|
||||
<div className='d-flex flex-center flex-column flex-lg-row-fluid'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='w-lg-500px p-10'>
|
||||
<Outlet />
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
</div>
|
||||
{/* end::Form */}
|
||||
|
||||
{/* begin::Footer */}
|
||||
<div className='d-flex flex-center flex-wrap px-5'>
|
||||
{/* begin::Links */}
|
||||
<div className='d-flex fw-semibold text-primary fs-base'>
|
||||
<a href='#' className='px-5' target='_blank'>
|
||||
Terms
|
||||
</a>
|
||||
|
||||
<a href='#' className='px-5' target='_blank'>
|
||||
Plans
|
||||
</a>
|
||||
|
||||
<a href='#' className='px-5' target='_blank'>
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Links */}
|
||||
</div>
|
||||
{/* end::Footer */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
|
||||
{/* begin::Aside */}
|
||||
<div
|
||||
className='d-flex flex-lg-row-fluid w-lg-50 bgi-size-cover bgi-position-center order-1 order-lg-2'
|
||||
style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/auth-bg.png')})`}}
|
||||
>
|
||||
{/* begin::Content */}
|
||||
<div className='d-flex flex-column flex-center py-15 px-5 px-md-15 w-100'>
|
||||
{/* begin::Logo */}
|
||||
<Link to='/' className='mb-12'>
|
||||
<img alt='Logo' src={toAbsoluteUrl('/media/logos/custom-1.png')} className='h-75px' />
|
||||
</Link>
|
||||
{/* end::Logo */}
|
||||
|
||||
{/* begin::Image */}
|
||||
<img
|
||||
className='mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20'
|
||||
src={toAbsoluteUrl('/media/misc/auth-screens.png')}
|
||||
alt=''
|
||||
/>
|
||||
{/* end::Image */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<h1 className='text-white fs-2qx fw-bolder text-center mb-7'>
|
||||
Fast, Efficient and Productive
|
||||
</h1>
|
||||
{/* end::Title */}
|
||||
|
||||
{/* begin::Text */}
|
||||
<div className='text-white fs-base text-center'>
|
||||
In this kind of post,{' '}
|
||||
<a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
|
||||
the blogger
|
||||
</a>
|
||||
introduces a person they’ve interviewed <br /> and provides some background information
|
||||
about
|
||||
<a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
|
||||
the interviewee
|
||||
</a>
|
||||
and their <br /> work following this is a transcript of the interview.
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Content */}
|
||||
</div>
|
||||
{/* end::Aside */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {AuthLayout}
|
||||
@@ -0,0 +1,18 @@
|
||||
import {Route, Routes} from 'react-router-dom'
|
||||
import {Registration} from './components/Registration'
|
||||
import {ForgotPassword} from './components/ForgotPassword'
|
||||
import {Login} from './components/Login'
|
||||
import {AuthLayout} from './AuthLayout'
|
||||
|
||||
const AuthPage = () => (
|
||||
<Routes>
|
||||
<Route element={<AuthLayout />}>
|
||||
<Route path='login' element={<Login />} />
|
||||
<Route path='registration' element={<Registration />} />
|
||||
<Route path='forgot-password' element={<ForgotPassword />} />
|
||||
<Route index element={<Login />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
)
|
||||
|
||||
export {AuthPage}
|
||||
@@ -0,0 +1,17 @@
|
||||
import {useEffect} from 'react'
|
||||
import {Navigate, Routes} from 'react-router-dom'
|
||||
import {useAuth} from './core/Auth'
|
||||
|
||||
export function Logout() {
|
||||
const {logout} = useAuth()
|
||||
useEffect(() => {
|
||||
logout()
|
||||
document.location.reload()
|
||||
}, [logout])
|
||||
|
||||
return (
|
||||
<Routes>
|
||||
<Navigate to='/auth/login' />
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import {useState} from 'react'
|
||||
import * as Yup from 'yup'
|
||||
import clsx from 'clsx'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {useFormik} from 'formik'
|
||||
import {requestPassword} from '../core/_requests'
|
||||
|
||||
const initialValues = {
|
||||
email: 'admin@demo.com',
|
||||
}
|
||||
|
||||
const forgotPasswordSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.email('Wrong email format')
|
||||
.min(3, 'Minimum 3 symbols')
|
||||
.max(50, 'Maximum 50 symbols')
|
||||
.required('Email is required'),
|
||||
})
|
||||
|
||||
export function ForgotPassword() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasErrors, setHasErrors] = useState<boolean | undefined>(undefined)
|
||||
const formik = useFormik({
|
||||
initialValues,
|
||||
validationSchema: forgotPasswordSchema,
|
||||
onSubmit: (values, {setStatus, setSubmitting}) => {
|
||||
setLoading(true)
|
||||
setHasErrors(undefined)
|
||||
setTimeout(() => {
|
||||
requestPassword(values.email)
|
||||
.then(({data: {result}}) => {
|
||||
setHasErrors(false)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch(() => {
|
||||
setHasErrors(true)
|
||||
setLoading(false)
|
||||
setSubmitting(false)
|
||||
setStatus('The login detail is incorrect')
|
||||
})
|
||||
}, 1000)
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<form
|
||||
className='form w-100 fv-plugins-bootstrap5 fv-plugins-framework'
|
||||
noValidate
|
||||
id='kt_login_password_reset_form'
|
||||
onSubmit={formik.handleSubmit}
|
||||
>
|
||||
<div className='text-center mb-10'>
|
||||
{/* begin::Title */}
|
||||
<h1 className='text-dark fw-bolder mb-3'>Forgot Password ?</h1>
|
||||
{/* end::Title */}
|
||||
|
||||
{/* begin::Link */}
|
||||
<div className='text-gray-500 fw-semibold fs-6'>
|
||||
Enter your email to reset your password.
|
||||
</div>
|
||||
{/* end::Link */}
|
||||
</div>
|
||||
|
||||
{/* begin::Title */}
|
||||
{hasErrors === true && (
|
||||
<div className='mb-lg-15 alert alert-danger'>
|
||||
<div className='alert-text font-weight-bold'>
|
||||
Sorry, looks like there are some errors detected, please try again.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasErrors === false && (
|
||||
<div className='mb-10 bg-light-info p-8 rounded'>
|
||||
<div className='text-info'>Sent password reset. Please check your email</div>
|
||||
</div>
|
||||
)}
|
||||
{/* end::Title */}
|
||||
|
||||
{/* begin::Form group */}
|
||||
<div className='fv-row mb-8'>
|
||||
<label className='form-label fw-bolder text-gray-900 fs-6'>Email</label>
|
||||
<input
|
||||
type='email'
|
||||
placeholder=''
|
||||
autoComplete='off'
|
||||
{...formik.getFieldProps('email')}
|
||||
className={clsx(
|
||||
'form-control bg-transparent',
|
||||
{'is-invalid': formik.touched.email && formik.errors.email},
|
||||
{
|
||||
'is-valid': formik.touched.email && !formik.errors.email,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
{formik.touched.email && formik.errors.email && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<div className='fv-help-block'>
|
||||
<span role='alert'>{formik.errors.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* end::Form group */}
|
||||
|
||||
{/* begin::Form group */}
|
||||
<div className='d-flex flex-wrap justify-content-center pb-lg-0'>
|
||||
<button type='submit' id='kt_password_reset_submit' className='btn btn-primary me-4'>
|
||||
<span className='indicator-label'>Submit</span>
|
||||
{loading && (
|
||||
<span className='indicator-progress'>
|
||||
Please wait...
|
||||
<span className='spinner-border spinner-border-sm align-middle ms-2'></span>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<Link to='/auth/login'>
|
||||
<button
|
||||
type='button'
|
||||
id='kt_login_password_reset_form_cancel_button'
|
||||
className='btn btn-light'
|
||||
disabled={formik.isSubmitting || !formik.isValid}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</Link>{' '}
|
||||
</div>
|
||||
{/* end::Form group */}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import {useState} from 'react'
|
||||
import * as Yup from 'yup'
|
||||
import clsx from 'clsx'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {useFormik} from 'formik'
|
||||
import {getUserByToken, login} from '../core/_requests'
|
||||
import {toAbsoluteUrl} from '../../../../_metronic/helpers'
|
||||
import {useAuth} from '../core/Auth'
|
||||
|
||||
const loginSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.email('Wrong email format')
|
||||
.min(3, 'Minimum 3 symbols')
|
||||
.max(50, 'Maximum 50 symbols')
|
||||
.required('Email is required'),
|
||||
password: Yup.string()
|
||||
.min(3, 'Minimum 3 symbols')
|
||||
.max(50, 'Maximum 50 symbols')
|
||||
.required('Password is required'),
|
||||
})
|
||||
|
||||
const initialValues = {
|
||||
email: 'admin@demo.com',
|
||||
password: 'demo',
|
||||
}
|
||||
|
||||
/*
|
||||
Formik+YUP+Typescript:
|
||||
https://jaredpalmer.com/formik/docs/tutorial#getfieldprops
|
||||
https://medium.com/@maurice.de.beijer/yup-validation-and-typescript-and-formik-6c342578a20e
|
||||
*/
|
||||
|
||||
export function Login() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const {saveAuth, setCurrentUser} = useAuth()
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues,
|
||||
validationSchema: loginSchema,
|
||||
onSubmit: async (values, {setStatus, setSubmitting}) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const {data: auth} = await login(values.email, values.password)
|
||||
saveAuth(auth)
|
||||
const {data: user} = await getUserByToken(auth.api_token)
|
||||
setCurrentUser(user)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
saveAuth(undefined)
|
||||
setStatus('The login details are incorrect')
|
||||
setSubmitting(false)
|
||||
setLoading(false)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<form
|
||||
className='form w-100'
|
||||
onSubmit={formik.handleSubmit}
|
||||
noValidate
|
||||
id='kt_login_signin_form'
|
||||
>
|
||||
{/* begin::Heading */}
|
||||
<div className='text-center mb-11'>
|
||||
<h1 className='text-dark fw-bolder mb-3'>Sign In</h1>
|
||||
<div className='text-gray-500 fw-semibold fs-6'>Your Social Campaigns</div>
|
||||
</div>
|
||||
{/* begin::Heading */}
|
||||
|
||||
{/* begin::Login options */}
|
||||
<div className='row g-3 mb-9'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-md-6'>
|
||||
{/* begin::Google link */}
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100'
|
||||
>
|
||||
<img
|
||||
alt='Logo'
|
||||
src={toAbsoluteUrl('/media/svg/brand-logos/google-icon.svg')}
|
||||
className='h-15px me-3'
|
||||
/>
|
||||
Sign in with Google
|
||||
</a>
|
||||
{/* end::Google link */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-md-6'>
|
||||
{/* begin::Google link */}
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100'
|
||||
>
|
||||
<img
|
||||
alt='Logo'
|
||||
src={toAbsoluteUrl('/media/svg/brand-logos/apple-black.svg')}
|
||||
className='theme-light-show h-15px me-3'
|
||||
/>
|
||||
<img
|
||||
alt='Logo'
|
||||
src={toAbsoluteUrl('/media/svg/brand-logos/apple-black-dark.svg')}
|
||||
className='theme-dark-show h-15px me-3'
|
||||
/>
|
||||
Sign in with Apple
|
||||
</a>
|
||||
{/* end::Google link */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Login options */}
|
||||
|
||||
{/* begin::Separator */}
|
||||
<div className='separator separator-content my-14'>
|
||||
<span className='w-125px text-gray-500 fw-semibold fs-7'>Or with email</span>
|
||||
</div>
|
||||
{/* end::Separator */}
|
||||
|
||||
{formik.status ? (
|
||||
<div className='mb-lg-15 alert alert-danger'>
|
||||
<div className='alert-text font-weight-bold'>{formik.status}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className='mb-10 bg-light-info p-8 rounded'>
|
||||
<div className='text-info'>
|
||||
Any text before login box - please configure
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* begin::Form group */}
|
||||
<div className='fv-row mb-8'>
|
||||
<label className='form-label fs-6 fw-bolder text-dark'>Email</label>
|
||||
<input
|
||||
placeholder='Email'
|
||||
{...formik.getFieldProps('email')}
|
||||
className={clsx(
|
||||
'form-control bg-transparent',
|
||||
{'is-invalid': formik.touched.email && formik.errors.email},
|
||||
{
|
||||
'is-valid': formik.touched.email && !formik.errors.email,
|
||||
}
|
||||
)}
|
||||
type='email'
|
||||
name='email'
|
||||
autoComplete='off'
|
||||
/>
|
||||
{formik.touched.email && formik.errors.email && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<span role='alert'>{formik.errors.email}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* end::Form group */}
|
||||
|
||||
{/* begin::Form group */}
|
||||
<div className='fv-row mb-3'>
|
||||
<label className='form-label fw-bolder text-dark fs-6 mb-0'>Password</label>
|
||||
<input
|
||||
type='password'
|
||||
autoComplete='off'
|
||||
{...formik.getFieldProps('password')}
|
||||
className={clsx(
|
||||
'form-control bg-transparent',
|
||||
{
|
||||
'is-invalid': formik.touched.password && formik.errors.password,
|
||||
},
|
||||
{
|
||||
'is-valid': formik.touched.password && !formik.errors.password,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
{formik.touched.password && formik.errors.password && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<div className='fv-help-block'>
|
||||
<span role='alert'>{formik.errors.password}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* end::Form group */}
|
||||
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8'>
|
||||
<div />
|
||||
|
||||
{/* begin::Link */}
|
||||
<Link to='/auth/forgot-password' className='link-primary'>
|
||||
Forgot Password ?
|
||||
</Link>
|
||||
{/* end::Link */}
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
|
||||
{/* begin::Action */}
|
||||
<div className='d-grid mb-10'>
|
||||
<button
|
||||
type='submit'
|
||||
id='kt_sign_in_submit'
|
||||
className='btn btn-primary'
|
||||
disabled={formik.isSubmitting || !formik.isValid}
|
||||
>
|
||||
{!loading && <span className='indicator-label'>Continue</span>}
|
||||
{loading && (
|
||||
<span className='indicator-progress' style={{display: 'block'}}>
|
||||
Please wait...
|
||||
<span className='spinner-border spinner-border-sm align-middle ms-2'></span>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{/* end::Action */}
|
||||
|
||||
<div className='text-gray-500 text-center fw-semibold fs-6'>
|
||||
Not a Member yet?{' '}
|
||||
<Link to='/auth/registration' className='link-primary'>
|
||||
Sign up
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,369 @@
|
||||
/* eslint-disable react/jsx-no-target-blank */
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import {useState, useEffect} from 'react'
|
||||
import {useFormik} from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import clsx from 'clsx'
|
||||
import {getUserByToken, register} from '../core/_requests'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {toAbsoluteUrl} from '../../../../_metronic/helpers'
|
||||
import {PasswordMeterComponent} from '../../../../_metronic/assets/ts/components'
|
||||
import {useAuth} from '../core/Auth'
|
||||
|
||||
const initialValues = {
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
email: '',
|
||||
password: '',
|
||||
changepassword: '',
|
||||
acceptTerms: false,
|
||||
}
|
||||
|
||||
const registrationSchema = Yup.object().shape({
|
||||
firstname: Yup.string()
|
||||
.min(3, 'Minimum 3 symbols')
|
||||
.max(50, 'Maximum 50 symbols')
|
||||
.required('First name is required'),
|
||||
email: Yup.string()
|
||||
.email('Wrong email format')
|
||||
.min(3, 'Minimum 3 symbols')
|
||||
.max(50, 'Maximum 50 symbols')
|
||||
.required('Email is required'),
|
||||
lastname: Yup.string()
|
||||
.min(3, 'Minimum 3 symbols')
|
||||
.max(50, 'Maximum 50 symbols')
|
||||
.required('Last name is required'),
|
||||
password: Yup.string()
|
||||
.min(3, 'Minimum 3 symbols')
|
||||
.max(50, 'Maximum 50 symbols')
|
||||
.required('Password is required'),
|
||||
changepassword: Yup.string()
|
||||
.required('Password confirmation is required')
|
||||
.when('password', {
|
||||
is: (val: string) => (val && val.length > 0 ? true : false),
|
||||
then: Yup.string().oneOf([Yup.ref('password')], "Password and Confirm Password didn't match"),
|
||||
}),
|
||||
acceptTerms: Yup.bool().required('You must accept the terms and conditions'),
|
||||
})
|
||||
|
||||
export function Registration() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const {saveAuth, setCurrentUser} = useAuth()
|
||||
const formik = useFormik({
|
||||
initialValues,
|
||||
validationSchema: registrationSchema,
|
||||
onSubmit: async (values, {setStatus, setSubmitting}) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const {data: auth} = await register(
|
||||
values.email,
|
||||
values.firstname,
|
||||
values.lastname,
|
||||
values.password,
|
||||
values.changepassword
|
||||
)
|
||||
saveAuth(auth)
|
||||
const {data: user} = await getUserByToken(auth.api_token)
|
||||
setCurrentUser(user)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
saveAuth(undefined)
|
||||
setStatus('The registration details is incorrect')
|
||||
setSubmitting(false)
|
||||
setLoading(false)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
PasswordMeterComponent.bootstrap()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<form
|
||||
className='form w-100 fv-plugins-bootstrap5 fv-plugins-framework'
|
||||
noValidate
|
||||
id='kt_login_signup_form'
|
||||
onSubmit={formik.handleSubmit}
|
||||
>
|
||||
{/* begin::Heading */}
|
||||
<div className='text-center mb-11'>
|
||||
{/* begin::Title */}
|
||||
<h1 className='text-dark fw-bolder mb-3'>Sign Up</h1>
|
||||
{/* end::Title */}
|
||||
|
||||
<div className='text-gray-500 fw-semibold fs-6'>Your Social Campaigns</div>
|
||||
</div>
|
||||
{/* end::Heading */}
|
||||
|
||||
{/* begin::Login options */}
|
||||
<div className='row g-3 mb-9'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-md-6'>
|
||||
{/* begin::Google link */}
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100'
|
||||
>
|
||||
<img
|
||||
alt='Logo'
|
||||
src={toAbsoluteUrl('/media/svg/brand-logos/google-icon.svg')}
|
||||
className='h-15px me-3'
|
||||
/>
|
||||
Sign in with Google
|
||||
</a>
|
||||
{/* end::Google link */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-md-6'>
|
||||
{/* begin::Google link */}
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100'
|
||||
>
|
||||
<img
|
||||
alt='Logo'
|
||||
src={toAbsoluteUrl('/media/svg/brand-logos/apple-black.svg')}
|
||||
className='theme-light-show h-15px me-3'
|
||||
/>
|
||||
<img
|
||||
alt='Logo'
|
||||
src={toAbsoluteUrl('/media/svg/brand-logos/apple-black-dark.svg')}
|
||||
className='theme-dark-show h-15px me-3'
|
||||
/>
|
||||
Sign in with Apple
|
||||
</a>
|
||||
{/* end::Google link */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Login options */}
|
||||
|
||||
<div className='separator separator-content my-14'>
|
||||
<span className='w-125px text-gray-500 fw-semibold fs-7'>Or with email</span>
|
||||
</div>
|
||||
|
||||
{formik.status && (
|
||||
<div className='mb-lg-15 alert alert-danger'>
|
||||
<div className='alert-text font-weight-bold'>{formik.status}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* begin::Form group Firstname */}
|
||||
<div className='fv-row mb-8'>
|
||||
<label className='form-label fw-bolder text-dark fs-6'>First name</label>
|
||||
<input
|
||||
placeholder='First name'
|
||||
type='text'
|
||||
autoComplete='off'
|
||||
{...formik.getFieldProps('firstname')}
|
||||
className={clsx(
|
||||
'form-control bg-transparent',
|
||||
{
|
||||
'is-invalid': formik.touched.firstname && formik.errors.firstname,
|
||||
},
|
||||
{
|
||||
'is-valid': formik.touched.firstname && !formik.errors.firstname,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
{formik.touched.firstname && formik.errors.firstname && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<div className='fv-help-block'>
|
||||
<span role='alert'>{formik.errors.firstname}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* end::Form group */}
|
||||
<div className='fv-row mb-8'>
|
||||
{/* begin::Form group Lastname */}
|
||||
<label className='form-label fw-bolder text-dark fs-6'>Last name</label>
|
||||
<input
|
||||
placeholder='Last name'
|
||||
type='text'
|
||||
autoComplete='off'
|
||||
{...formik.getFieldProps('lastname')}
|
||||
className={clsx(
|
||||
'form-control bg-transparent',
|
||||
{
|
||||
'is-invalid': formik.touched.lastname && formik.errors.lastname,
|
||||
},
|
||||
{
|
||||
'is-valid': formik.touched.lastname && !formik.errors.lastname,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
{formik.touched.lastname && formik.errors.lastname && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<div className='fv-help-block'>
|
||||
<span role='alert'>{formik.errors.lastname}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* end::Form group */}
|
||||
</div>
|
||||
|
||||
{/* begin::Form group Email */}
|
||||
<div className='fv-row mb-8'>
|
||||
<label className='form-label fw-bolder text-dark fs-6'>Email</label>
|
||||
<input
|
||||
placeholder='Email'
|
||||
type='email'
|
||||
autoComplete='off'
|
||||
{...formik.getFieldProps('email')}
|
||||
className={clsx(
|
||||
'form-control bg-transparent',
|
||||
{'is-invalid': formik.touched.email && formik.errors.email},
|
||||
{
|
||||
'is-valid': formik.touched.email && !formik.errors.email,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
{formik.touched.email && formik.errors.email && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<div className='fv-help-block'>
|
||||
<span role='alert'>{formik.errors.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* end::Form group */}
|
||||
|
||||
{/* begin::Form group Password */}
|
||||
<div className='fv-row mb-8' data-kt-password-meter='true'>
|
||||
<div className='mb-1'>
|
||||
<label className='form-label fw-bolder text-dark fs-6'>Password</label>
|
||||
<div className='position-relative mb-3'>
|
||||
<input
|
||||
type='password'
|
||||
placeholder='Password'
|
||||
autoComplete='off'
|
||||
{...formik.getFieldProps('password')}
|
||||
className={clsx(
|
||||
'form-control bg-transparent',
|
||||
{
|
||||
'is-invalid': formik.touched.password && formik.errors.password,
|
||||
},
|
||||
{
|
||||
'is-valid': formik.touched.password && !formik.errors.password,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
{formik.touched.password && formik.errors.password && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<div className='fv-help-block'>
|
||||
<span role='alert'>{formik.errors.password}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* begin::Meter */}
|
||||
<div
|
||||
className='d-flex align-items-center mb-3'
|
||||
data-kt-password-meter-control='highlight'
|
||||
>
|
||||
<div className='flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2'></div>
|
||||
<div className='flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2'></div>
|
||||
<div className='flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2'></div>
|
||||
<div className='flex-grow-1 bg-secondary bg-active-success rounded h-5px'></div>
|
||||
</div>
|
||||
{/* end::Meter */}
|
||||
</div>
|
||||
<div className='text-muted'>
|
||||
Use 8 or more characters with a mix of letters, numbers & symbols.
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Form group */}
|
||||
|
||||
{/* begin::Form group Confirm password */}
|
||||
<div className='fv-row mb-5'>
|
||||
<label className='form-label fw-bolder text-dark fs-6'>Confirm Password</label>
|
||||
<input
|
||||
type='password'
|
||||
placeholder='Password confirmation'
|
||||
autoComplete='off'
|
||||
{...formik.getFieldProps('changepassword')}
|
||||
className={clsx(
|
||||
'form-control bg-transparent',
|
||||
{
|
||||
'is-invalid': formik.touched.changepassword && formik.errors.changepassword,
|
||||
},
|
||||
{
|
||||
'is-valid': formik.touched.changepassword && !formik.errors.changepassword,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
{formik.touched.changepassword && formik.errors.changepassword && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<div className='fv-help-block'>
|
||||
<span role='alert'>{formik.errors.changepassword}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* end::Form group */}
|
||||
|
||||
{/* begin::Form group */}
|
||||
<div className='fv-row mb-8'>
|
||||
<label className='form-check form-check-inline' htmlFor='kt_login_toc_agree'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_login_toc_agree'
|
||||
{...formik.getFieldProps('acceptTerms')}
|
||||
/>
|
||||
<span>
|
||||
I Accept the{' '}
|
||||
<a
|
||||
href='https://keenthemes.com/metronic/?page=faq'
|
||||
target='_blank'
|
||||
className='ms-1 link-primary'
|
||||
>
|
||||
Terms
|
||||
</a>
|
||||
.
|
||||
</span>
|
||||
</label>
|
||||
{formik.touched.acceptTerms && formik.errors.acceptTerms && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<div className='fv-help-block'>
|
||||
<span role='alert'>{formik.errors.acceptTerms}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* end::Form group */}
|
||||
|
||||
{/* begin::Form group */}
|
||||
<div className='text-center'>
|
||||
<button
|
||||
type='submit'
|
||||
id='kt_sign_up_submit'
|
||||
className='btn btn-lg btn-primary w-100 mb-5'
|
||||
disabled={formik.isSubmitting || !formik.isValid || !formik.values.acceptTerms}
|
||||
>
|
||||
{!loading && <span className='indicator-label'>Submit</span>}
|
||||
{loading && (
|
||||
<span className='indicator-progress' style={{display: 'block'}}>
|
||||
Please wait...{' '}
|
||||
<span className='spinner-border spinner-border-sm align-middle ms-2'></span>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<Link to='/auth/login'>
|
||||
<button
|
||||
type='button'
|
||||
id='kt_login_signup_form_cancel_button'
|
||||
className='btn btn-lg btn-light-primary w-100 mb-5'
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
{/* end::Form group */}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import {
|
||||
FC,
|
||||
useState,
|
||||
useEffect,
|
||||
createContext,
|
||||
useContext,
|
||||
useRef,
|
||||
Dispatch,
|
||||
SetStateAction,
|
||||
} from 'react'
|
||||
import {LayoutSplashScreen} from '../../../../_res/layout/core'
|
||||
import {AuthModel, UserModel} from './_models'
|
||||
import * as authHelper from './AuthHelpers'
|
||||
import {getUserByToken} from './_requests'
|
||||
import {WithChildren} from '../../../../_res/helpers'
|
||||
|
||||
type AuthContextProps = {
|
||||
auth: AuthModel | undefined
|
||||
saveAuth: (auth: AuthModel | undefined) => void
|
||||
currentUser: UserModel | undefined
|
||||
setCurrentUser: Dispatch<SetStateAction<UserModel | undefined>>
|
||||
logout: () => void
|
||||
}
|
||||
|
||||
const initAuthContextPropsState = {
|
||||
auth: authHelper.getAuth(),
|
||||
saveAuth: () => {},
|
||||
currentUser: undefined,
|
||||
setCurrentUser: () => {},
|
||||
logout: () => {},
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextProps>(initAuthContextPropsState)
|
||||
|
||||
const useAuth = () => {
|
||||
return useContext(AuthContext)
|
||||
}
|
||||
|
||||
const AuthProvider: FC<WithChildren> = ({children}) => {
|
||||
const [auth, setAuth] = useState<AuthModel | undefined>(authHelper.getAuth())
|
||||
const [currentUser, setCurrentUser] = useState<UserModel | undefined>()
|
||||
const saveAuth = (auth: AuthModel | undefined) => {
|
||||
setAuth(auth)
|
||||
if (auth) {
|
||||
authHelper.setAuth(auth)
|
||||
} else {
|
||||
authHelper.removeAuth()
|
||||
}
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
saveAuth(undefined)
|
||||
setCurrentUser(undefined)
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{auth, saveAuth, currentUser, setCurrentUser, logout}}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const AuthInit: FC<WithChildren> = ({children}) => {
|
||||
const {auth, logout, setCurrentUser} = useAuth()
|
||||
const didRequest = useRef(false)
|
||||
const [showSplashScreen, setShowSplashScreen] = useState(true)
|
||||
// We should request user by authToken (IN OUR EXAMPLE IT'S API_TOKEN) before rendering the application
|
||||
useEffect(() => {
|
||||
const requestUser = async (apiToken: string) => {
|
||||
try {
|
||||
if (!didRequest.current) {
|
||||
const {data} = await getUserByToken(apiToken)
|
||||
if (data) {
|
||||
setCurrentUser(data)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
if (!didRequest.current) {
|
||||
logout()
|
||||
}
|
||||
} finally {
|
||||
setShowSplashScreen(false)
|
||||
}
|
||||
|
||||
return () => (didRequest.current = true)
|
||||
}
|
||||
|
||||
if (auth && auth.api_token) {
|
||||
requestUser(auth.api_token)
|
||||
} else {
|
||||
logout()
|
||||
setShowSplashScreen(false)
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [])
|
||||
|
||||
return showSplashScreen ? <LayoutSplashScreen /> : <>{children}</>
|
||||
}
|
||||
|
||||
export {AuthProvider, AuthInit, useAuth}
|
||||
@@ -0,0 +1,65 @@
|
||||
import {AuthModel} from './_models'
|
||||
|
||||
const AUTH_LOCAL_STORAGE_KEY = 'kt-auth-react-v'
|
||||
const getAuth = (): AuthModel | undefined => {
|
||||
if (!localStorage) {
|
||||
return
|
||||
}
|
||||
|
||||
const lsValue: string | null = localStorage.getItem(AUTH_LOCAL_STORAGE_KEY)
|
||||
if (!lsValue) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const auth: AuthModel = JSON.parse(lsValue) as AuthModel
|
||||
if (auth) {
|
||||
// You can easily check auth_token expiration also
|
||||
return auth
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('AUTH LOCAL STORAGE PARSE ERROR', error)
|
||||
}
|
||||
}
|
||||
|
||||
const setAuth = (auth: AuthModel) => {
|
||||
if (!localStorage) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const lsValue = JSON.stringify(auth)
|
||||
localStorage.setItem(AUTH_LOCAL_STORAGE_KEY, lsValue)
|
||||
} catch (error) {
|
||||
console.error('AUTH LOCAL STORAGE SAVE ERROR', error)
|
||||
}
|
||||
}
|
||||
|
||||
const removeAuth = () => {
|
||||
if (!localStorage) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
localStorage.removeItem(AUTH_LOCAL_STORAGE_KEY)
|
||||
} catch (error) {
|
||||
console.error('AUTH LOCAL STORAGE REMOVE ERROR', error)
|
||||
}
|
||||
}
|
||||
|
||||
export function setupAxios(axios: any) {
|
||||
axios.defaults.headers.Accept = 'application/json'
|
||||
axios.interceptors.request.use(
|
||||
(config: {headers: {Authorization: string}}) => {
|
||||
const auth = getAuth()
|
||||
if (auth && auth.api_token) {
|
||||
config.headers.Authorization = `Bearer ${auth.api_token}`
|
||||
}
|
||||
|
||||
return config
|
||||
},
|
||||
(err: any) => Promise.reject(err)
|
||||
)
|
||||
}
|
||||
|
||||
export {getAuth, setAuth, removeAuth, AUTH_LOCAL_STORAGE_KEY}
|
||||
@@ -0,0 +1,67 @@
|
||||
export interface AuthModel {
|
||||
api_token: string
|
||||
refreshToken?: string
|
||||
}
|
||||
|
||||
export interface UserAddressModel {
|
||||
addressLine: string
|
||||
city: string
|
||||
state: string
|
||||
postCode: string
|
||||
}
|
||||
|
||||
export interface UserCommunicationModel {
|
||||
email: boolean
|
||||
sms: boolean
|
||||
phone: boolean
|
||||
}
|
||||
|
||||
export interface UserEmailSettingsModel {
|
||||
emailNotification?: boolean
|
||||
sendCopyToPersonalEmail?: boolean
|
||||
activityRelatesEmail?: {
|
||||
youHaveNewNotifications?: boolean
|
||||
youAreSentADirectMessage?: boolean
|
||||
someoneAddsYouAsAsAConnection?: boolean
|
||||
uponNewOrder?: boolean
|
||||
newMembershipApproval?: boolean
|
||||
memberRegistration?: boolean
|
||||
}
|
||||
updatesFromKeenthemes?: {
|
||||
newsAboutKeenthemesProductsAndFeatureUpdates?: boolean
|
||||
tipsOnGettingMoreOutOfKeen?: boolean
|
||||
thingsYouMissedSindeYouLastLoggedIntoKeen?: boolean
|
||||
newsAboutStartOnPartnerProductsAndOtherServices?: boolean
|
||||
tipsOnStartBusinessProducts?: boolean
|
||||
}
|
||||
}
|
||||
|
||||
export interface UserSocialNetworksModel {
|
||||
linkedIn: string
|
||||
facebook: string
|
||||
twitter: string
|
||||
instagram: string
|
||||
}
|
||||
|
||||
export interface UserModel {
|
||||
id: number
|
||||
username: string
|
||||
password: string | undefined
|
||||
email: string
|
||||
first_name: string
|
||||
last_name: string
|
||||
fullname?: string
|
||||
occupation?: string
|
||||
companyName?: string
|
||||
phone?: string
|
||||
roles?: Array<number>
|
||||
pic?: string
|
||||
language?: 'en' | 'de' | 'es' | 'fr' | 'ja' | 'zh' | 'ru'
|
||||
timeZone?: string
|
||||
website?: 'https://keenthemes.com'
|
||||
emailSettings?: UserEmailSettingsModel
|
||||
auth?: AuthModel
|
||||
communication?: UserCommunicationModel
|
||||
address?: UserAddressModel
|
||||
socialNetworks?: UserSocialNetworksModel
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import axios from 'axios'
|
||||
import {AuthModel, UserModel} from './_models'
|
||||
|
||||
const API_URL = process.env.REACT_APP_API_URL
|
||||
|
||||
export const GET_USER_BY_ACCESSTOKEN_URL = `${API_URL}/verify_token`
|
||||
export const LOGIN_URL = `${API_URL}/login`
|
||||
export const REGISTER_URL = `${API_URL}/register`
|
||||
export const REQUEST_PASSWORD_URL = `${API_URL}/forgot_password`
|
||||
|
||||
// Server should return AuthModel
|
||||
export function login(email: string, password: string) {
|
||||
return axios.post<AuthModel>(LOGIN_URL, {
|
||||
email,
|
||||
password,
|
||||
})
|
||||
}
|
||||
|
||||
// Server should return AuthModel
|
||||
export function register(
|
||||
email: string,
|
||||
firstname: string,
|
||||
lastname: string,
|
||||
password: string,
|
||||
password_confirmation: string
|
||||
) {
|
||||
return axios.post(REGISTER_URL, {
|
||||
email,
|
||||
first_name: firstname,
|
||||
last_name: lastname,
|
||||
password,
|
||||
password_confirmation,
|
||||
})
|
||||
}
|
||||
|
||||
// Server should return object => { result: boolean } (Is Email in DB)
|
||||
export function requestPassword(email: string) {
|
||||
return axios.post<{result: boolean}>(REQUEST_PASSWORD_URL, {
|
||||
email,
|
||||
})
|
||||
}
|
||||
|
||||
export function getUserByToken(token: string) {
|
||||
return axios.post<UserModel>(GET_USER_BY_ACCESSTOKEN_URL, {
|
||||
api_token: token,
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export * from './core/_models'
|
||||
export * from './core/Auth'
|
||||
export * from './core/AuthHelpers'
|
||||
export * from './AuthPage'
|
||||
export * from './Logout'
|
||||
Reference in New Issue
Block a user