feat: add the forgot password step

web/package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
@@ -42,6 +43,7 @@
     "date-fns": "^3.6.0",
     "formik": "^2.2.9",
     "framer-motion": "^11.3.24",
+    "input-otp": "^1.2.4",
     "js-cookie": "^3.0.5",
     "lenis": "^1.0.45",
     "lodash": "^4.17.21",

web/src/app/auth/forgot-password/page.tsx

@@ -0,0 +1,88 @@
+import { HealthCheckBanner } from "@/components/health/healthcheck";
+import { User } from "@/lib/types";
+import {
+  getCurrentUserSS,
+  getAuthTypeMetadataSS,
+  AuthTypeMetadata,
+} from "@/lib/userSS";
+import { redirect } from "next/navigation";
+import Link from "next/link";
+
+import Logo from "../../../../public/logo-brand.png";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import DefaultUserChart from "../../../../public/default-user-chart.png";
+import LoginImage from "../../../../public/LoginImage.png";
+import GmailIcon from "../../../../public/Gmail.png";
+import MicrosoftIcon from "../../../../public/microsoft.svg";
+import { Separator } from "@/components/ui/separator";
+import { SignupForms } from "../signup/SignupForms";
+import { Fingerprint } from "lucide-react";
+import { TextFormField } from "@/components/admin/connectors/Field";
+import { Form, Formik } from "formik";
+import { Progress } from "@/components/ui/progress";
+import { EnterEmail } from "./steps/enterEmail";
+import { EnterVerification } from "./steps/EmailVerification";
+import { SetNewPassword } from "./steps/SetNewPassword";
+import { SuccessChangePassword } from "./steps/Done";
+
+const Page = async () => {
+  // catch cases where the backend is completely unreachable here
+  // without try / catch, will just raise an exception and the page
+  // will not render
+  let authTypeMetadata: AuthTypeMetadata | null = null;
+  let currentUser: User | null = null;
+  try {
+    [authTypeMetadata, currentUser] = await Promise.all([
+      getAuthTypeMetadataSS(),
+      getCurrentUserSS(),
+    ]);
+  } catch (e) {
+    console.log(`Some fetch failed for the login page - ${e}`);
+  }
+
+  // simply take the user to the home page if Auth is disabled
+  if (authTypeMetadata?.authType === "disabled") {
+    return redirect("/");
+  }
+
+  // if user is already logged in, take them to the main app page
+  if (currentUser && currentUser.is_active) {
+    if (!authTypeMetadata?.requiresVerification || currentUser.is_verified) {
+      return redirect("/");
+    }
+    return redirect("/auth/waiting-on-verification");
+  }
+
+  // only enable this page if basic login is enabled
+  if (authTypeMetadata?.authType !== "basic") {
+    return redirect("/");
+  }
+
+  return (
+    <main className="relative h-full">
+      <HealthCheckBanner />
+      <div className="absolute top-6 left-10">
+        <Image src={Logo} alt="Logo" className="w-28 xl:w-32" />
+      </div>
+
+      <div className="flex justify-center items-center h-full">
+        <div className="w-[500px]">
+          <EnterEmail />
+          {/*   <EnterVerification /> */}
+          {/* <SetNewPassword /> */}
+          {/* <SuccessChangePassword /> */}
+        </div>
+      </div>
+
+      <div className="w-[500px] flex gap-2 absolute bottom-10 left-1/2 -translate-x-1/2">
+        <Progress value={100} />
+        <Progress value={0} />
+        <Progress value={0} />
+        <Progress value={0} />
+      </div>
+    </main>
+  );
+};
+
+export default Page;

web/src/app/auth/forgot-password/steps/Done.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { PartyPopper } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+
+export const SuccessChangePassword = () => {
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-center">
+        <div className="bg-primary p-5 rounded-md">
+          <PartyPopper size={40} stroke="white" />
+        </div>
+      </div>
+
+      <div className="pt-8 text-sm text-subtle">
+        <h1 className="text-2xl xl:text-3xl font-bold text-center text-dark-900">
+          All done!
+        </h1>
+        <p className="text-center pt-2">
+          Your password has been successfully reset.
+        </p>
+        <p className="text-center">Click below to log in.</p>
+      </div>
+
+      <Link href="/auth/login">
+        <Button type="submit" className="w-full mt-6">
+          Continue
+        </Button>
+      </Link>
+    </div>
+  );
+};

web/src/app/auth/forgot-password/steps/EmailVerification.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { MailOpen } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+
+export const EnterVerification = () => {
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-center">
+        <div className="bg-primary p-5 rounded-md">
+          <MailOpen size={40} stroke="white" />
+        </div>
+      </div>
+
+      <div className="pt-8">
+        <h1 className="text-2xl xl:text-3xl font-bold text-center text-dark-900">
+          Email Verification
+        </h1>
+        <p className="text-center pt-2 text-sm text-subtle">
+          We sent a code to johnnydoe@gmail.com
+        </p>
+      </div>
+
+      <div className="pt-8 flex items-center flex-col gap-8 justify-center">
+        <InputOTP maxLength={6}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} className="h-16 w-16 text-3xl font-bold" />
+            <InputOTPSlot index={1} className="h-16 w-16 text-3xl font-bold" />
+            <InputOTPSlot index={2} className="h-16 w-16 text-3xl font-bold" />
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            <InputOTPSlot index={3} className="h-16 w-16 text-3xl font-bold" />
+            <InputOTPSlot index={4} className="h-16 w-16 text-3xl font-bold" />
+            <InputOTPSlot index={5} className="h-16 w-16 text-3xl font-bold" />
+          </InputOTPGroup>
+        </InputOTP>
+
+        <Button className="w-full">Continue</Button>
+
+        <p className="text-center text-sm">
+          Didn’t receive the email?{" "}
+          <Link
+            href=""
+            className="text-sm font-medium text-link hover:underline"
+          >
+            Click to resend
+          </Link>
+        </p>
+      </div>
+
+      <div className="flex pt-6">
+        <Link
+          href="/auth/login"
+          className="text-sm font-medium text-link hover:underline mx-auto"
+        >
+          Back to Sign In
+        </Link>
+      </div>
+    </div>
+  );
+};

web/src/app/auth/forgot-password/steps/EnterEmail.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Fingerprint } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+
+export const EnterEmail = () => {
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-center">
+        <div className="bg-primary p-5 rounded-md">
+          <Fingerprint size={40} stroke="white" />
+        </div>
+      </div>
+
+      <div className="pt-8">
+        <h1 className="text-2xl xl:text-3xl font-bold text-center text-dark-900">
+          Forgot Password?
+        </h1>
+        <p className="pt-2 text-center text-sm text-subtle">
+          Enter your email to reset your password
+        </p>
+      </div>
+
+      <form className="w-full pt-8">
+        <div>
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            placeholder="Enter your email"
+          />
+        </div>
+
+        <Button type="submit" className="w-full mt-6">
+          Continue
+        </Button>
+      </form>
+
+      <div className="flex pt-6">
+        <Link
+          href="/auth/login"
+          className="text-sm font-medium text-link hover:underline mx-auto"
+        >
+          Back to Sign In
+        </Link>
+      </div>
+    </div>
+  );
+};