Merge branch 'Landing_pages' of https://git.marcoaiot.com/admin/marco.pms.web into Landing_pages
This commit is contained in:
commit
8b11bd952d
@ -4,10 +4,13 @@ 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"
|
||||
@ -23,11 +26,14 @@ export const AuthWrapper = ({ children }) => {
|
||||
</span>
|
||||
</Link>
|
||||
{/* </div> */}
|
||||
{/* </div> */}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
);
|
||||
};
|
@ -1,5 +1,6 @@
|
||||
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";
|
||||
@ -7,16 +8,21 @@ 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 },
|
||||
@ -27,15 +33,28 @@ 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) {
|
||||
@ -44,6 +63,12 @@ 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)
|
||||
}
|
||||
}
|
||||
@ -97,6 +122,11 @@ const ForgotPasswordPage = () => {
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Text */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,11 +1,13 @@
|
||||
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();
|
||||
@ -18,11 +20,17 @@ 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,
|
||||
@ -74,6 +82,7 @@ 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" }}>
|
||||
@ -164,20 +173,52 @@ 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 && (
|
||||
<>
|
||||
@ -192,9 +233,40 @@ 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">
|
||||
@ -216,6 +288,8 @@ const LoginPage = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -58,6 +58,7 @@ const RegisterPage = () => {
|
||||
fetchIndustries();
|
||||
}, []);
|
||||
|
||||
useEffect(() => { }, [industries]);
|
||||
useEffect(() => { }, [industries]);
|
||||
|
||||
const fetchIndustries = async () => {
|
||||
@ -81,6 +82,7 @@ const RegisterPage = () => {
|
||||
<form
|
||||
id="formAuthentication"
|
||||
className="mb-2"
|
||||
className="mb-2"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className="row">
|
||||
@ -178,6 +180,7 @@ const RegisterPage = () => {
|
||||
<label className="form-label" htmlFor="contactnumber">
|
||||
About Organization
|
||||
</label>
|
||||
<div className="input-group">
|
||||
<div className="input-group">
|
||||
<textarea
|
||||
id="about"
|
||||
@ -197,6 +200,7 @@ 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
|
||||
@ -224,6 +228,7 @@ 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
|
||||
@ -255,6 +260,7 @@ const RegisterPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-2 text-start">
|
||||
<div className="mb-2 text-start">
|
||||
<div className="form-check">
|
||||
<input
|
||||
@ -265,16 +271,21 @@ 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
|
||||
@ -286,6 +297,7 @@ const RegisterPage = () => {
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
aria-label="Click me "
|
||||
aria-label="Click me "
|
||||
className="btn btn-primary d-grid w-100"
|
||||
>
|
||||
@ -294,18 +306,23 @@ 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,6 +46,7 @@ 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