diff --git a/src/components/GetStarted/EmployerValidation.tsx b/src/components/GetStarted/EmployerValidation.tsx index 7107149..530a213 100644 --- a/src/components/GetStarted/EmployerValidation.tsx +++ b/src/components/GetStarted/EmployerValidation.tsx @@ -6,50 +6,44 @@ import {Formik, Form} from 'formik' import * as Yup from "yup"; const initialValues = { - title: "", - marital_status: "", - agent_id: "", - bvn: "", - first_name: "", - phone: "", - email: "", - surname: "", - dob: "", - second_name: "", - spouse_bvn: "", + salary_acct: "", + confirm_salary_acct: false, + qualification: "", + doe: "", + gl: "", + ippis: "", + employer_name: "", + designation: "", checked: false }; // To get the validation schema const validationSchema = Yup.object().shape({ - title: Yup.string() - .required("Required"), - marital_status: Yup.string() - .required("Required"), - agent_id: Yup.string() - .required("Required"), - bvn: Yup.string() - .required("BVN is required") + salary_acct: Yup.string() + .required("Required") .test("no-e", "Invalid number", (value:any) => { if (value && /^[0-9]*$/.test(value) == false) { return false; } return true; }) - .min(11, "must be 11 digits") - .max(11, "must be 11 digits"), - first_name: Yup.string() + .min(10, "must be 10 digits") + .max(10, "must be 10 digits"), + confirm_salary_acct: Yup.bool() // use bool instead of boolean + .oneOf([true], "You must check the box"), + qualification: Yup.string() .required("Required"), - phone: Yup.string() + doe: Yup.string() + .required("BVN is required"), + gl: Yup.string() .required("Required"), - email: Yup.string() - .required("Required") - .email("Wrong email format"), - surname: Yup.string() + ippis: Yup.string(), + employer_name: Yup.string() .required("Required"), - dob: Yup.string() + designation: Yup.string() .required("Required"), - checked: Yup.bool(), + checked: Yup.bool() // use bool instead of boolean + .oneOf([true], "You must accept that the information here is correct"), }); @@ -103,27 +97,30 @@ const EmployerValidation: React.FC= () => {

-

Confirms Employee's salary account number

+

Confirms Employee's salary account number + {(props.errors.salary_acct && props.touched.salary_acct) && {props.errors.salary_acct} } +

+ {(props.errors.confirm_salary_acct && props.touched.confirm_salary_acct) && {props.errors.confirm_salary_acct} }
@@ -146,7 +143,7 @@ const EmployerValidation: React.FC= () => { { select={true} selectClass="w-full h-[36px] rounded-[6px]" selectOptions={titleOptions} - selectValue={props.values.title} + selectValue={props.values.qualification} onChange={props.handleChange} - error={(props.errors.title && props.touched.title) ? props.errors.title : ''} + error={(props.errors.qualification && props.touched.qualification) ? props.errors.qualification : ''} />
@@ -178,26 +175,26 @@ const EmployerValidation: React.FC= () => { @@ -219,30 +216,30 @@ const EmployerValidation: React.FC= () => { diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx index d1b5cf4..c1c60e0 100644 --- a/src/components/auth/Login.tsx +++ b/src/components/auth/Login.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { Button, CustomSpinner, FloatLabelInput } from ".."; import CustomModal from "../modal/CustomModal"; import { useNavigate, useLocation } from "react-router-dom"; @@ -23,6 +23,7 @@ export default function Login() { const {state} = useLocation() const [modal, setModal] = useState(false) + const [expiredLinkModal, setExpiredLinkModal] = useState(false) const [requestStatus, setRequestStatus] = useState({loading:false, status:null, message:'', data:{}}) @@ -66,6 +67,12 @@ export default function Login() { }) } + useEffect(()=>{ + if(!state?.application_uid){ + setExpiredLinkModal(true) + } + },[]) + return ( <>
@@ -73,55 +80,62 @@ export default function Login() {
-
-

- Welcome! -

-

- Please login with your email and default password provided to you + {expiredLinkModal && +

+ Invalid Link, Please proceed to your email and click on the link to continue

-
- -
- {/* INPUTS */} -
-
- -
-
- -
+ } +
+
+

+ Welcome! +

+

+ Please login with your email and default password provided to you +

-
-
diff --git a/src/components/auth/OTP.tsx b/src/components/auth/OTP.tsx index a853dc8..76cb937 100644 --- a/src/components/auth/OTP.tsx +++ b/src/components/auth/OTP.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { Button, CustomSpinner } from ".."; import { useLocation, useNavigate } from "react-router-dom"; import { RouteHandler } from "../../router/routes"; @@ -38,6 +38,23 @@ export default function Login() { setValues((prev:FormType) => ({ ...prev, [name]: value })); }; + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Backspace") { + const { name } = e.target as HTMLInputElement; + if(values[name]){ + setValues((prev: FormType) => ({ ...prev, [name]: "" })); + }else{ + const keys = Object.keys(values) + for(let i=keys.length-1; i>=0; i--){ + if(values[keys[i]]){ + setValues((prev: FormType) => ({ ...prev, [keys[i]]: "" })); + break + } + } + } + } + }; + const handleSubmit = () => { let reqData = { verify_uid: state?.verify_uid, @@ -110,6 +127,7 @@ export default function Login() { value={values.otp1} onChange={handleChange} maxLength={1} + onKeyDown={handleKeyDown} />
diff --git a/src/components/shared/CustomSpinner.tsx b/src/components/shared/CustomSpinner.tsx index 3d2ac44..94d4468 100644 --- a/src/components/shared/CustomSpinner.tsx +++ b/src/components/shared/CustomSpinner.tsx @@ -1,5 +1,3 @@ -import React from 'react' - type Props = { size?: string } diff --git a/src/layouts/DashboardLayout/DashboardAuth.tsx b/src/layouts/DashboardLayout/DashboardAuth.tsx index ddfe27c..ef27c00 100644 --- a/src/layouts/DashboardLayout/DashboardAuth.tsx +++ b/src/layouts/DashboardLayout/DashboardAuth.tsx @@ -45,6 +45,10 @@ export default function DashboardAuth() { navigate(RouteHandler.loginpage, {state:{application_uid}, replace:true}) return } + if(!application_uid){ // IF NO TOKEN || UID RETURN TO LOGIN PAGE + navigate(RouteHandler.loginpage, {replace:true}) + return + } const getUser = () => { // FUNCTION TO GET USER BY ID let data = {firstname:'firstname', lastname:'lastname', uid:'28273737646466464'} setLoading(false) diff --git a/src/router/Router.tsx b/src/router/Router.tsx index faf94a6..30bda77 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -1,4 +1,4 @@ -import { Route, Routes } from "react-router-dom"; +import { Route, Routes, Navigate } from "react-router-dom"; import { RouteHandler } from "./routes"; import { DashboardAuth, Layout } from "../layouts"; @@ -12,7 +12,8 @@ import { const Routers = () => { return ( - }> + }> + } /> } /> } /> @@ -22,7 +23,7 @@ const Routers = () => { }> } /> - Error Page} /> + } /> ); };