116 lines
5.0 KiB
JavaScript
116 lines
5.0 KiB
JavaScript
"use client";
|
||
import Layout from "@/components/layout/Layout";
|
||
import Link from "next/link";
|
||
import { useState } from "react";
|
||
|
||
export default function ForgotPassword() {
|
||
const [identify, setIdentifier] = useState("");
|
||
const [error, setError] = useState("");
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [wrongCred, setWrongCred] = useState(false);
|
||
const [success, setSuccess] = useState(false);
|
||
|
||
const handleForgotPassword = async (e) => {
|
||
e.preventDefault();
|
||
setError("");
|
||
setIsLoading(true);
|
||
|
||
// Simulate handling of forgot password logic (without supabase or nocodb)
|
||
const emailIdentifier = identify;
|
||
|
||
// Dummy logic for demonstration purposes
|
||
if (!emailIdentifier.includes("@")) {
|
||
setError("Please enter a valid email address.");
|
||
setIsLoading(false);
|
||
return;
|
||
}
|
||
|
||
// Simulate API call success
|
||
setTimeout(() => {
|
||
setSuccess(true);
|
||
setIsLoading(false);
|
||
}, 1000);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Layout headerStyle={6} footerStyle={3} transparent={false}>
|
||
<section className="forgot__area-one">
|
||
<div className="container">
|
||
<div className="text-center mb-55">
|
||
<h1 className="text-48-bold">Forgot Password?</h1>
|
||
</div>
|
||
<div className="box-form-login">
|
||
<div className="head-login">
|
||
<p className="text-16-semibold">
|
||
No worries, we’ll send you reset instructions
|
||
</p>
|
||
<div className="form-login form-forgot">
|
||
<form onSubmit={handleForgotPassword}>
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
className="form-control account"
|
||
placeholder="Email Address"
|
||
value={identify}
|
||
onChange={(e) => setIdentifier(e.target.value)}
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="alert alert-warning" hidden={!wrongCred}>
|
||
<p className="text-infos">
|
||
We can’t seem to find the right account. Please try with
|
||
a different account.
|
||
</p>
|
||
</div>
|
||
<div className="alert alert-accept" hidden={!success}>
|
||
<p className="text-infos">
|
||
Kindly check your email and click on the link to reset
|
||
your password.
|
||
</p>
|
||
</div>
|
||
<div className="form-group">
|
||
<input
|
||
type="submit"
|
||
className="btn btn-login"
|
||
defaultValue="Reset password"
|
||
/>
|
||
</div>
|
||
</form>
|
||
<div className="form-group">
|
||
<button className="btn border-btn btn-login">
|
||
<svg
|
||
width={16}
|
||
height={14}
|
||
viewBox="0 0 16 14"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M15 6.07209H3.14L6.77 2.02388C6.93974 1.83427 7.0214 1.58982 6.99702 1.3443C6.97264 1.09878 6.84422 0.872315 6.64 0.714715C6.43578 0.557115 6.1725 0.481293 5.90808 0.503929C5.64365 0.526565 5.39974 0.645806 5.23 0.835419L0.23 6.40635C0.196361 6.45066 0.166279 6.49721 0.14 6.54562C0.14 6.59205 0.14 6.6199 0.0700002 6.66633C0.0246737 6.77278 0.000941121 6.88611 0 7.00058C0.000941121 7.11505 0.0246737 7.22838 0.0700002 7.33484C0.0700002 7.38126 0.0699999 7.40911 0.14 7.45554C0.166279 7.50395 0.196361 7.5505 0.23 7.59481L5.23 13.1657C5.32402 13.2706 5.44176 13.3548 5.57485 13.4126C5.70793 13.4704 5.85309 13.5002 6 13.5C6.23365 13.5004 6.46009 13.4249 6.64 13.2864C6.74126 13.2085 6.82496 13.1128 6.88631 13.0047C6.94766 12.8967 6.98546 12.7785 6.99754 12.6569C7.00961 12.5353 6.99573 12.4127 6.95669 12.296C6.91764 12.1794 6.8542 12.0711 6.77 11.9773L3.14 7.92907H15C15.2652 7.92907 15.5196 7.83125 15.7071 7.65712C15.8946 7.483 16 7.24683 16 7.00058C16 6.75433 15.8946 6.51817 15.7071 6.34404C15.5196 6.16991 15.2652 6.07209 15 6.07209Z"
|
||
fill
|
||
/>
|
||
</svg>
|
||
<Link href="/login">Back to Login</Link>
|
||
</button>
|
||
</div>
|
||
<p className="text-center">
|
||
Don’t have an account?{" "}
|
||
<Link href="/register" className="link-bold">
|
||
Register
|
||
</Link>{" "}
|
||
now, or{" "}
|
||
<Link href="/contact" className="link-bold">
|
||
Contact Us
|
||
</Link>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Layout>
|
||
</>
|
||
);
|
||
}
|