WrenchBoard/WrenchAgents
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Rearranged Sidebar Menu #2

Merged
ameye merged 3 commits from sidebar-rearrange into master 2024-02-12 17:46:17 +00:00
Conversation 0 Commits 3 Files Changed 3
+192 -195
3 changed files with 192 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/modules/auth/AuthLayout.tsx
+32 -49
View File
@@ -1,29 +1,28 @@
import {useEffect} from 'react'
import {Outlet, Link} from 'react-router-dom'
import {toAbsoluteUrl} from '../../../_metronic/helpers'
import { useEffect } from "react";
import { Outlet, Link } from "react-router-dom";
import { toAbsoluteUrl } from "../../../_metronic/helpers";
const AuthLayout = () => {
useEffect(() => {
const root = document.getElementById('root')
const root = document.getElementById("root");
if (root) {
root.style.height = '100%'
root.style.height = "100%";
}
return () => {
if (root) {
root.style.height = 'auto'
root.style.height = "auto";
}
}
}, [])
};
}, []);
return (
<div className='d-flex flex-column flex-lg-row flex-column-fluid h-100'>
<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'>
<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'>
<div className="d-flex flex-center flex-column flex-lg-row-fluid">
{/* begin::Wrapper */}
<div className='w-lg-500px p-10'>
<div className="w-lg-500px p-10">
<Outlet />
</div>
{/* end::Wrapper */}
@@ -31,18 +30,14 @@ const AuthLayout = () => {
{/* end::Form */}
{/* begin::Footer */}
<div className='d-flex flex-center flex-wrap px-5'>
<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'>
<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'>
<a href="#" className="px-5" target="_blank">
Contact Us
</a>
</div>
@@ -54,51 +49,39 @@ const AuthLayout = () => {
{/* 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')})`}}
className="d-flex flex-lg-row-fluid w-lg-50 bgi-size-cover bgi-position-center order-1 order-lg-2"
>
{/* begin::Content */}
<div className='d-flex flex-column flex-center py-15 px-5 px-md-15 w-100'>
<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 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=''
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 className="text-black fs-2qx fw-bolder text-center mb-7">
Wrenchboard Agents
</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}
export { AuthLayout };
src/app/modules/auth/components/Login.tsx
+105 -101
View File
@@ -1,30 +1,31 @@
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'
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'),
.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'),
})
.min(3, "Minimum 3 symbols")
.max(50, "Maximum 50 symbols")
.required("Password is required"),
});
const initialValues = {
email: 'admin@demo.com',
password: 'demo',
}
email: "",
password: "",
};
// email: "admin@demo.com",
// password: "demo",
/*
Formik+YUP+Typescript:
https://jaredpalmer.com/formik/docs/tutorial#getfieldprops
@@ -32,56 +33,55 @@ const initialValues = {
*/
export function Login() {
const [loading, setLoading] = useState(false)
const {saveAuth, setCurrentUser} = useAuth()
const [loading, setLoading] = useState<Boolean>(false);
const { saveAuth, setCurrentUser } = useAuth();
const formik = useFormik({
initialValues,
validationSchema: loginSchema,
onSubmit: async (values, {setStatus, setSubmitting}) => {
setLoading(true)
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)
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)
console.error(error);
saveAuth(undefined);
setStatus("The login details are incorrect");
setSubmitting(false);
setLoading(false);
}
},
})
});
return (
<form
className='form w-100'
className="form w-100"
onSubmit={formik.handleSubmit}
noValidate
id='kt_login_signin_form'
id="kt_login_signin_form"
>
{/* begin::Heading */}
<div className='text-center mb-11'>
<h1 className='text-gray-900 fw-bolder mb-3'>Sign In</h1>
<div className='text-gray-500 fw-semibold fs-6'>Your Social Campaigns</div>
<div className="text-center mb-11">
<h1 className="text-gray-900 fw-bolder mb-3">Sign In</h1>
</div>
{/* begin::Heading */}
{/* begin::Login options */}
<div className='row g-3 mb-9'>
<div className="row g-3 mb-9">
{/* begin::Col */}
<div className='col-md-6'>
<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'
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'
alt="Logo"
src={toAbsoluteUrl("media/svg/brand-logos/google-icon.svg")}
className="h-15px me-3"
/>
Sign in with Google
</a>
@@ -90,21 +90,21 @@ export function Login() {
{/* end::Col */}
{/* begin::Col */}
<div className='col-md-6'>
<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'
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'
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'
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>
@@ -115,70 +115,74 @@ export function Login() {
{/* 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 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 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'>
Use account <strong>admin@demo.com</strong> and password <strong>demo</strong> to
continue.
</div>
</div>
// <div className="mb-10 bg-light-info p-8 rounded">
// </div>
null
)}
{/* begin::Form group */}
<div className='fv-row mb-8'>
<label className='form-label fs-6 fw-bolder text-gray-900'>Email</label>
<div className="fv-row mb-8">
<label className="form-label fs-6 fw-bolder text-gray-900">Email</label>
<input
placeholder='Email'
{...formik.getFieldProps('email')}
placeholder="Email"
{...formik.getFieldProps("email")}
className={clsx(
'form-control bg-transparent',
{'is-invalid': formik.touched.email && formik.errors.email},
"form-control bg-transparent",
{ "is-invalid": formik.touched.email && formik.errors.email },
{
'is-valid': formik.touched.email && !formik.errors.email,
"is-valid": formik.touched.email && !formik.errors.email,
}
)}
type='email'
name='email'
autoComplete='off'
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 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-gray-900 fs-6 mb-0'>Password</label>
<div className="fv-row mb-3">
<label className="form-label fw-bolder text-gray-900 fs-6 mb-0">
Password
</label>
<input
type='password'
autoComplete='off'
{...formik.getFieldProps('password')}
type="password"
autoComplete="off"
placeholder="Password"
{...formik.getFieldProps("password")}
className={clsx(
'form-control bg-transparent',
"form-control bg-transparent",
{
'is-invalid': formik.touched.password && formik.errors.password,
"is-invalid": formik.touched.password && formik.errors.password,
},
{
'is-valid': 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 className="fv-plugins-message-container">
<div className="fv-help-block">
<span role="alert">{formik.errors.password}</span>
</div>
</div>
)}
@@ -186,11 +190,11 @@ export function Login() {
{/* end::Form group */}
{/* begin::Wrapper */}
<div className='d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8'>
<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'>
<Link to="/auth/forgot-password" className="link-primary">
Forgot Password ?
</Link>
{/* end::Link */}
@@ -198,30 +202,30 @@ export function Login() {
{/* end::Wrapper */}
{/* begin::Action */}
<div className='d-grid mb-10'>
<div className="d-grid mb-10">
<button
type='submit'
id='kt_sign_in_submit'
className='btn btn-primary'
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-label">Continue</span>}
{loading && (
<span className='indicator-progress' style={{display: 'block'}}>
<span className="indicator-progress" style={{ display: "block" }}>
Please wait...
<span className='spinner-border spinner-border-sm align-middle ms-2'></span>
<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'>
<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>
)
);
}
src/app/modules/auth/core/Auth.tsx
+55 -45
View File
@@ -1,18 +1,26 @@
/* eslint-disable react-refresh/only-export-components */
import {FC, useState, useEffect, createContext, useContext, Dispatch, SetStateAction} from 'react'
import {LayoutSplashScreen} from '../../../../_metronic/layout/core'
import {AuthModel, UserModel} from './_models'
import * as authHelper from './AuthHelpers'
import {getUserByToken} from './_requests'
import {WithChildren} from '../../../../_metronic/helpers'
import {
FC,
useState,
useEffect,
createContext,
useContext,
Dispatch,
SetStateAction,
} from "react";
import { LayoutSplashScreen } from "../../../../_metronic/layout/core";
import { AuthModel, UserModel } from "./_models";
import * as authHelper from "./AuthHelpers";
import { getUserByToken } from "./_requests";
import { WithChildren } from "../../../../_metronic/helpers";
type AuthContextProps = {
auth: AuthModel | undefined
saveAuth: (auth: AuthModel | undefined) => void
currentUser: UserModel | undefined
setCurrentUser: Dispatch<SetStateAction<UserModel | undefined>>
logout: () => void
}
auth: AuthModel | undefined;
saveAuth: (auth: AuthModel | undefined) => void;
currentUser: UserModel | undefined;
setCurrentUser: Dispatch<SetStateAction<UserModel | undefined>>;
logout: () => void;
};
const initAuthContextPropsState = {
auth: authHelper.getAuth(),
@@ -20,72 +28,74 @@ const initAuthContextPropsState = {
currentUser: undefined,
setCurrentUser: () => {},
logout: () => {},
}
};
const AuthContext = createContext<AuthContextProps>(initAuthContextPropsState)
const AuthContext = createContext<AuthContextProps>(initAuthContextPropsState);
const useAuth = () => {
return useContext(AuthContext)
}
return useContext(AuthContext);
};
const AuthProvider: FC<WithChildren> = ({children}) => {
const [auth, setAuth] = useState<AuthModel | undefined>(authHelper.getAuth())
const [currentUser, setCurrentUser] = useState<UserModel | undefined>()
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)
setAuth(auth);
if (auth) {
authHelper.setAuth(auth)
authHelper.setAuth(auth);
} else {
authHelper.removeAuth()
authHelper.removeAuth();
}
}
};
const logout = () => {
saveAuth(undefined)
setCurrentUser(undefined)
}
saveAuth(undefined);
setCurrentUser(undefined);
};
return (
<AuthContext.Provider value={{auth, saveAuth, currentUser, setCurrentUser, logout}}>
<AuthContext.Provider
value={{ auth, saveAuth, currentUser, setCurrentUser, logout }}
>
{children}
</AuthContext.Provider>
)
}
);
};
const AuthInit: FC<WithChildren> = ({children}) => {
const {auth, currentUser, logout, setCurrentUser} = useAuth()
const [showSplashScreen, setShowSplashScreen] = useState(true)
const AuthInit: FC<WithChildren> = ({ children }) => {
const { auth, currentUser, logout, setCurrentUser } = useAuth();
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 (!currentUser) {
const {data} = await getUserByToken(apiToken)
const { data } = await getUserByToken(apiToken);
if (data) {
setCurrentUser(data)
setCurrentUser(data);
}
}
} catch (error) {
console.error(error)
console.error(error);
if (currentUser) {
logout()
logout();
}
} finally {
setShowSplashScreen(false)
setShowSplashScreen(false);
}
}
};
if (auth && auth.api_token) {
requestUser(auth.api_token)
requestUser(auth.api_token);
} else {
logout()
setShowSplashScreen(false)
logout();
setShowSplashScreen(false);
}
// eslint-disable-next-line
}, [])
}, []);
return showSplashScreen ? <LayoutSplashScreen /> : <>{children}</>
}
return showSplashScreen ? <LayoutSplashScreen /> : <>{children}</>;
};
export {AuthProvider, AuthInit, useAuth}
export { AuthProvider, AuthInit, useAuth };