diff --git a/src/app/modules/auth/AuthLayout.tsx b/src/app/modules/auth/AuthLayout.tsx index 96df4e9..b89e631 100644 --- a/src/app/modules/auth/AuthLayout.tsx +++ b/src/app/modules/auth/AuthLayout.tsx @@ -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 ( -
+
{/* begin::Body */} -
+
{/* begin::Form */} -
+
{/* begin::Wrapper */} -
+
{/* end::Wrapper */} @@ -31,18 +30,14 @@ const AuthLayout = () => { {/* end::Form */} {/* begin::Footer */} -
+
{/* begin::Links */} -
- + @@ -54,51 +49,39 @@ const AuthLayout = () => { {/* begin::Aside */}
{/* begin::Content */} -
+
{/* begin::Logo */} - - Logo + + Logo {/* end::Logo */} {/* begin::Image */} {/* end::Image */} {/* begin::Title */} -

- Fast, Efficient and Productive +

+ Wrenchboard Agents

{/* end::Title */} - - {/* begin::Text */} -
- In this kind of post,{' '} - - the blogger - - introduces a person they’ve interviewed
and provides some background information - about - - the interviewee - - and their
work following this is a transcript of the interview. -
- {/* end::Text */}
{/* end::Content */}
{/* end::Aside */}
- ) -} + ); +}; -export {AuthLayout} +export { AuthLayout }; diff --git a/src/app/modules/auth/components/Login.tsx b/src/app/modules/auth/components/Login.tsx index 715fcbc..5055aab 100644 --- a/src/app/modules/auth/components/Login.tsx +++ b/src/app/modules/auth/components/Login.tsx @@ -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(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 (
{/* begin::Heading */} -
-

Sign In

-
Your Social Campaigns
+
+

Sign In

{/* begin::Heading */} {/* begin::Login options */} -
+
{/* begin::Col */} -
+
{/* begin::Google link */} Logo Sign in with Google @@ -90,21 +90,21 @@ export function Login() { {/* end::Col */} {/* begin::Col */} -
+
{/* begin::Google link */} Logo Logo Sign in with Apple @@ -115,70 +115,74 @@ export function Login() { {/* end::Login options */} {/* begin::Separator */} -
- Or with email +
+ + Or with email +
{/* end::Separator */} {formik.status ? ( -
-
{formik.status}
+
+
{formik.status}
) : ( -
-
- Use account admin@demo.com and password demo to - continue. -
-
+ //
+ + //
+ + null )} {/* begin::Form group */} -
- +
+ {formik.touched.email && formik.errors.email && ( -
- {formik.errors.email} +
+ {formik.errors.email}
)}
{/* end::Form group */} {/* begin::Form group */} -
- +
+ {formik.touched.password && formik.errors.password && ( -
-
- {formik.errors.password} +
+
+ {formik.errors.password}
)} @@ -186,11 +190,11 @@ export function Login() { {/* end::Form group */} {/* begin::Wrapper */} -
+
{/* begin::Link */} - + Forgot Password ? {/* end::Link */} @@ -198,30 +202,30 @@ export function Login() { {/* end::Wrapper */} {/* begin::Action */} -
+
{/* end::Action */} -
- Not a Member yet?{' '} - +
+ Not a Member yet?{" "} + Sign up
- ) + ); } diff --git a/src/app/modules/auth/core/Auth.tsx b/src/app/modules/auth/core/Auth.tsx index 5ea5fa5..2f7ee6e 100644 --- a/src/app/modules/auth/core/Auth.tsx +++ b/src/app/modules/auth/core/Auth.tsx @@ -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> - logout: () => void -} + auth: AuthModel | undefined; + saveAuth: (auth: AuthModel | undefined) => void; + currentUser: UserModel | undefined; + setCurrentUser: Dispatch>; + logout: () => void; +}; const initAuthContextPropsState = { auth: authHelper.getAuth(), @@ -20,72 +28,74 @@ const initAuthContextPropsState = { currentUser: undefined, setCurrentUser: () => {}, logout: () => {}, -} +}; -const AuthContext = createContext(initAuthContextPropsState) +const AuthContext = createContext(initAuthContextPropsState); const useAuth = () => { - return useContext(AuthContext) -} + return useContext(AuthContext); +}; -const AuthProvider: FC = ({children}) => { - const [auth, setAuth] = useState(authHelper.getAuth()) - const [currentUser, setCurrentUser] = useState() +const AuthProvider: FC = ({ children }) => { + const [auth, setAuth] = useState(authHelper.getAuth()); + const [currentUser, setCurrentUser] = useState(); 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 ( - + {children} - ) -} + ); +}; -const AuthInit: FC = ({children}) => { - const {auth, currentUser, logout, setCurrentUser} = useAuth() - const [showSplashScreen, setShowSplashScreen] = useState(true) +const AuthInit: FC = ({ 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 ? : <>{children} -} + return showSplashScreen ? : <>{children}; +}; -export {AuthProvider, AuthInit, useAuth} +export { AuthProvider, AuthInit, useAuth };