fixed login , forgot page
This commit is contained in:
parent
8b11bd952d
commit
bbd137a334
@ -4,20 +4,17 @@ import "./page-auth.css";
|
||||
export const AuthWrapper = ({ children }) => {
|
||||
return (
|
||||
<div className="container-xxl">
|
||||
{/* <div className="authentication-wrapper authentication-basic container-p-y">
|
||||
{/* <div className="authentication-wrapper authentication-basic container-p-y">
|
||||
<div className="authentication-inner">
|
||||
<div className="card"> */}
|
||||
<div className="card"> */}
|
||||
<div className="card-body">
|
||||
<div className="app-brand justify-content-center" >
|
||||
<div className="app-brand justify-content-center" >
|
||||
<Link
|
||||
aria-label="Go to Home Page"
|
||||
to="/"
|
||||
className="app-brand-link gap-2"
|
||||
>
|
||||
<span className="app-brand-logo rounded-circle " >
|
||||
<span className="app-brand-logo rounded-circle " style={{ marginBottom: "625px",marginLeft:"-39px" }}>
|
||||
<img
|
||||
src="/img/brand/marco.png"
|
||||
alt="marco-logo"
|
||||
@ -26,14 +23,11 @@ export const AuthWrapper = ({ children }) => {
|
||||
</span>
|
||||
</Link>
|
||||
{/* </div> */}
|
||||
{/* </div> */}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
);
|
||||
};
|
||||
@ -1,6 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link } from "react-router-dom";
|
||||
import { AuthWrapper } from "./AuthWrapper"
|
||||
import "./page-auth.css";
|
||||
import AuthRepository from "../../repositories/AuthRepository";
|
||||
@ -8,21 +7,16 @@ import showToast from "../../services/toastService";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { z } from "zod";
|
||||
|
||||
|
||||
const forgotPassSceham = z.object({
|
||||
const forgotPassSceham = z.object({
|
||||
email: z.string().email(),
|
||||
})
|
||||
})
|
||||
|
||||
const ForgotPasswordPage = () => {
|
||||
|
||||
const [loding, setLoading] = useState(false)
|
||||
const [loding, setLoading] = useState(false)
|
||||
|
||||
const { register,
|
||||
const { register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
@ -33,28 +27,15 @@ const ForgotPasswordPage = () => {
|
||||
email: ""
|
||||
}
|
||||
})
|
||||
getValues } = useForm({
|
||||
resolver: zodResolver(forgotPassSceham),
|
||||
defaultValues: {
|
||||
email: ""
|
||||
}
|
||||
})
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
try {
|
||||
const onSubmit = async (data) => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await AuthRepository.forgotPassword(data)
|
||||
if (response.data && response.success)
|
||||
showToast("verification email has been sent to your registered email address", "success")
|
||||
const response = await AuthRepository.forgotPassword(data)
|
||||
if (response.data && response.success)
|
||||
showToast("verification email has been sent to your registered email address", "success")
|
||||
reset()
|
||||
setLoading(false)
|
||||
} catch (err) {
|
||||
setLoading(false)
|
||||
} catch (err) {
|
||||
reset()
|
||||
if (err.response.status === 404) {
|
||||
@ -63,12 +44,6 @@ const ForgotPasswordPage = () => {
|
||||
showToast("Something wrong", "error")
|
||||
}
|
||||
|
||||
if (err.response.status === 404) {
|
||||
showToast("verification email has been sent to your registered email address", "success")
|
||||
} else {
|
||||
showToast("Something wrong", "error")
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
@ -122,11 +97,6 @@ const ForgotPasswordPage = () => {
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Text */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import AuthRepository from "../../repositories/AuthRepository";
|
||||
import showToast from "../../services/toastService";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { AuthWrapper } from "./AuthWrapper";
|
||||
import { AuthWrapper } from "./AuthWrapper";
|
||||
|
||||
const LoginPage = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -20,17 +18,11 @@ const LoginPage = () => {
|
||||
? z.object({
|
||||
username: z.string().email({ message: "Valid email required" }),
|
||||
})
|
||||
username: z.string().email({ message: "Valid email required" }),
|
||||
})
|
||||
: z.object({
|
||||
username: z.string().email({ message: "Valid email required" }),
|
||||
password: z.string().min(1, { message: "Password required" }),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
username: z.string().email({ message: "Valid email required" }),
|
||||
password: z.string().min(1, { message: "Password required" }),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -43,24 +35,20 @@ const LoginPage = () => {
|
||||
const onSubmit = async (data) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const username = data.username.trim();
|
||||
const password = data.password?.trim();
|
||||
|
||||
if (!IsLoginWithOTP) {
|
||||
const userCredential = {
|
||||
username,
|
||||
password,
|
||||
username: data.username,
|
||||
password: data.password,
|
||||
};
|
||||
|
||||
const response = await AuthRepository.login(userCredential);
|
||||
localStorage.setItem("jwtToken", response.data.token);
|
||||
localStorage.setItem("refreshToken", response.data.refreshToken);
|
||||
setLoading(false);
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
await AuthRepository.sendOTP({ email: username });
|
||||
await AuthRepository.sendOTP({ email: data.username });
|
||||
showToast("OTP has been sent to your email.", "success");
|
||||
localStorage.setItem("otpUsername", username);
|
||||
localStorage.setItem("otpUsername", data.username);
|
||||
localStorage.setItem("otpSentTime", now.toString());
|
||||
navigate("/auth/login-otp");
|
||||
}
|
||||
@ -70,7 +58,6 @@ const LoginPage = () => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const otpSentTime = localStorage.getItem("otpSentTime");
|
||||
if (
|
||||
@ -82,7 +69,6 @@ const LoginPage = () => {
|
||||
}
|
||||
}, [IsLoginWithOTP]);
|
||||
|
||||
|
||||
return (
|
||||
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
|
||||
<div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
|
||||
@ -102,7 +88,7 @@ const LoginPage = () => {
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
className={`form-control ${errors.username ? "is-invalid" : ""}`}
|
||||
className={`form-control ${errors.username ? "is-invalid" : ""}`}
|
||||
placeholder="Enter your email"
|
||||
{...register("username")}
|
||||
autoFocus
|
||||
@ -128,7 +114,7 @@ const LoginPage = () => {
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
id="password"
|
||||
className={`form-control form-control-sm ${
|
||||
className={`form-control ${
|
||||
errors.password ? "is-invalid" : ""
|
||||
}`}
|
||||
placeholder="••••••••"
|
||||
@ -173,52 +159,20 @@ const LoginPage = () => {
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{/* Remember Me + Forgot Password */}
|
||||
<div className="mb-3 d-flex justify-content-between align-items-center">
|
||||
<div className="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="remember-me"
|
||||
className="form-check-input"
|
||||
{...register("rememberMe")}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="remember-me">
|
||||
Remember Me
|
||||
</label>
|
||||
</div>
|
||||
<Link
|
||||
to="/auth/forgot-password"
|
||||
className="text-decoration-none"
|
||||
>
|
||||
Forgot Password?
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Submit */}
|
||||
{/* Submit */}
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary w-100"
|
||||
disabled={loading}
|
||||
className="btn btn-primary w-100"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading
|
||||
? "Please Wait..."
|
||||
: IsLoginWithOTP
|
||||
? "Send OTP"
|
||||
: "Sign In"}
|
||||
{loading
|
||||
? "Please Wait..."
|
||||
: IsLoginWithOTP
|
||||
? "Send OTP"
|
||||
: "Sign In"}
|
||||
</button>
|
||||
|
||||
{/* Login With OTP Button */}
|
||||
|
||||
{/* Login With OTP Button */}
|
||||
{!IsLoginWithOTP && (
|
||||
<>
|
||||
@ -233,40 +187,9 @@ const LoginPage = () => {
|
||||
Login With OTP
|
||||
</button>
|
||||
</>
|
||||
<>
|
||||
<div className="divider my-4">
|
||||
<div className="divider-text">or</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-secondary w-100"
|
||||
onClick={() => setLoginWithOtp(true)}
|
||||
>
|
||||
Login With OTP
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
</form>
|
||||
|
||||
{/* Footer Text */}
|
||||
{!IsLoginWithOTP ? (
|
||||
<p className="text-center mt-3">
|
||||
<span>New on our platform? </span>
|
||||
<Link to="/auth/reqest/demo" className="btn btn-link p-0">
|
||||
Request a Demo
|
||||
</Link>
|
||||
</p>
|
||||
) : (
|
||||
<div className="text-center mt-3">
|
||||
<button
|
||||
className="btn btn-link p-0"
|
||||
onClick={() => setLoginWithOtp(false)}
|
||||
>
|
||||
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
|
||||
Back to login
|
||||
</button>
|
||||
</div>
|
||||
{/* Footer Text */}
|
||||
{!IsLoginWithOTP ? (
|
||||
<p className="text-center mt-3">
|
||||
@ -288,9 +211,7 @@ const LoginPage = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
export default LoginPage;
|
||||
@ -58,7 +58,6 @@ const RegisterPage = () => {
|
||||
fetchIndustries();
|
||||
}, []);
|
||||
|
||||
useEffect(() => { }, [industries]);
|
||||
useEffect(() => { }, [industries]);
|
||||
|
||||
const fetchIndustries = async () => {
|
||||
@ -73,26 +72,24 @@ const RegisterPage = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
|
||||
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
|
||||
<div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
|
||||
|
||||
<h4 className="mb-2">Adventure starts here</h4>
|
||||
<p className="mb-2">Make your app management easy and fun!</p>
|
||||
<h4 className="mb-2">Adventure starts here 🚀</h4>
|
||||
<p className="mb-3">Make your app management easy and fun!</p>
|
||||
|
||||
<form
|
||||
id="formAuthentication"
|
||||
className="mb-2"
|
||||
className="mb-2"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className="row">
|
||||
<div className="mb-2 col-12 col-sm-6 text-start">
|
||||
<div className="mb-2 text-start">
|
||||
<label htmlFor="organizatioinName" className="form-label">
|
||||
Organization Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control"
|
||||
id="organizatioinName"
|
||||
{...register("organizatioinName")}
|
||||
name="organizatioinName"
|
||||
@ -108,13 +105,13 @@ const RegisterPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-2 col-12 col-sm-6 text-start">
|
||||
<div className="mb-2 text-start">
|
||||
<label htmlFor="email" className="form-label">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Enter your email"
|
||||
@ -129,21 +126,21 @@ const RegisterPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="mb-2 col-12 col-sm-6 form-password-toggle text-start">
|
||||
<div className="mb-2 form-password-toggle text-start">
|
||||
<label className="form-label" htmlFor="contactperson">
|
||||
Contact Person
|
||||
</label>
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
id="contactperson"
|
||||
{...register("contactPerson")}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control"
|
||||
name="contactPerson"
|
||||
placeholder="Contact Person"
|
||||
aria-describedby="contactperson"
|
||||
/>
|
||||
</div>
|
||||
{errors.contactPerson && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
@ -153,19 +150,21 @@ const RegisterPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-2 col-12 col-sm-6 form-password-toggle text-start">
|
||||
<div className="mb-2 form-password-toggle text-start">
|
||||
<label className="form-label" htmlFor="contactnumber">
|
||||
Contact Number
|
||||
</label>
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
id="contactnumber"
|
||||
{...register("contactNumber")}
|
||||
className="form-control form-control-sm "
|
||||
className="form-control"
|
||||
name="contactNumber"
|
||||
placeholder="Contact Number"
|
||||
aria-describedby="contactnumber"
|
||||
/>
|
||||
</div>
|
||||
{errors.contactNumber && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
@ -175,17 +174,15 @@ const RegisterPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-2 form-password-toggle text-start">
|
||||
<label className="form-label" htmlFor="contactnumber">
|
||||
About Organization
|
||||
</label>
|
||||
<div className="input-group">
|
||||
<div className="input-group">
|
||||
<textarea
|
||||
id="about"
|
||||
className="form-control form-control"
|
||||
placeholder="About..."
|
||||
className="form-control"
|
||||
placeholder="about"
|
||||
aria-label="about"
|
||||
aria-describedby="about"
|
||||
{...register("about")}
|
||||
@ -200,13 +197,13 @@ const RegisterPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-2 form-password-toggle text-start">
|
||||
<div className="mb-2 form-password-toggle text-start">
|
||||
<label className="form-label" htmlFor="oragnizationSize">
|
||||
Organization Size
|
||||
</label>
|
||||
<div className="input-group">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
className="form-select"
|
||||
id="oragnizationSize"
|
||||
name="oragnizationSize"
|
||||
{...register("oragnizationSize")}
|
||||
@ -219,6 +216,7 @@ const RegisterPage = () => {
|
||||
<option value="100-200">100-200</option>
|
||||
<option value="more than 200">more than 200</option>
|
||||
</select>
|
||||
</div>
|
||||
{errors.oragnizationSize && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
@ -228,13 +226,13 @@ const RegisterPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-2 form-password-toggle text-start">
|
||||
<div className="mb-2 form-password-toggle text-start">
|
||||
<label className="form-label" htmlFor="industryId">
|
||||
Industry
|
||||
</label>
|
||||
<div className="input-group">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
className="form-select"
|
||||
id="industryId"
|
||||
name="industryId"
|
||||
{...register("industryId")}
|
||||
@ -251,6 +249,7 @@ const RegisterPage = () => {
|
||||
<option disabled>Loading industries...</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
{errors.industryId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
@ -260,7 +259,6 @@ const RegisterPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-2 text-start">
|
||||
<div className="mb-2 text-start">
|
||||
<div className="form-check">
|
||||
<input
|
||||
@ -271,21 +269,16 @@ const RegisterPage = () => {
|
||||
{...register("terms")}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="terms-conditions">
|
||||
I agree to{" "}
|
||||
I agree to{" "}
|
||||
<Link
|
||||
to="/legal-info"
|
||||
aria-label="privacy policy and terms"
|
||||
className="text-decoration-underline"
|
||||
aria-label="privacy policy and terms"
|
||||
className="text-decoration-underline"
|
||||
>
|
||||
privacy policy & terms
|
||||
privacy policy & terms
|
||||
</Link>
|
||||
</label>
|
||||
|
||||
|
||||
</div>
|
||||
{errors.terms && (
|
||||
<div
|
||||
@ -297,7 +290,6 @@ const RegisterPage = () => {
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
aria-label="Click me "
|
||||
aria-label="Click me "
|
||||
className="btn btn-primary d-grid w-100"
|
||||
>
|
||||
@ -306,23 +298,18 @@ const RegisterPage = () => {
|
||||
</form>
|
||||
|
||||
<p className="text-center">
|
||||
<span>Already have an account? </span>
|
||||
<span>Already have an account? </span>
|
||||
<Link
|
||||
aria-label="Go to Login Page"
|
||||
to="/auth/login"
|
||||
className="text-decoration-underline ms-1"
|
||||
className="text-decoration-underline ms-1"
|
||||
>
|
||||
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm me-1"></i>
|
||||
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm me-1"></i>
|
||||
Back to login
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -46,7 +46,6 @@ import MainResetPasswordPage from "../pages/authentication/MainResetPasswordPage
|
||||
|
||||
const router = createBrowserRouter(
|
||||
[
|
||||
{ path: "/", element: <LandingPage /> },
|
||||
{ path: "/", element: <LandingPage /> },
|
||||
{
|
||||
element: <AuthLayout />,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user