missing auth flow

devsoc24-portal-fe/src/app/forgot/forgot-pass-form.tsx

@@ -0,0 +1,105 @@
+import { forgotSchema } from "@/schemas/password";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { type z } from "zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+// import { toast } from "react-toastify";
+import { useRouter } from "next/navigation";
+import { MailIcon } from "lucide-react";
+import Link from "next/link";
+
+type LoginFormValues = z.infer<typeof forgotSchema>;
+
+export default function ForgotForm() {
+  const router = useRouter();
+
+  const form = useForm<LoginFormValues>({
+    resolver: zodResolver(forgotSchema),
+    defaultValues: {
+      email: "",
+    },
+    mode: "onChange",
+  });
+
+  async function onSubmit(data: LoginFormValues) {
+    console.log(data);
+    // const toastId = toast.loading("Logging in...", { autoClose: false });
+    // const res = await loginUser(data);
+
+    // toast.update(toastId, {
+    //   render:
+    //     res === 200 ? "Login successful!" : res !== 500 ? res : <ServerError />,
+    //   type: res === 200 ? "success" : "error",
+    //   isLoading: false,
+    //   autoClose: 2000,
+    // });
+
+    // if (res === 200) {
+    //   setTimeout(() => {
+    //     void router.push("/overview");
+    //   }, 2000);
+    // }
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-4 py-4"
+      >
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              {/* <FormLabel>Username</FormLabel> */}
+              <FormControl>
+                <div className="relative">
+                  <Input
+                    type="email"
+                    placeholder="Email Address"
+                    autoComplete="email"
+                    {...field}
+                    className={`h-14 bg-gray-100 pl-10 ${
+                      form.getFieldState("email").invalid
+                        ? "border-red-500 focus:border-input focus:!ring-red-500"
+                        : ""
+                    }`}
+                  />
+                  <MailIcon
+                    color="gray"
+                    className="absolute left-2 top-1/2 -translate-y-1/2"
+                  />
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <p className="text-center text-sm text-muted-foreground">
+          Don&apos;t have an account?{" "}
+          <Link href="/signup" className="font-medium text-primary">
+            Sign Up
+          </Link>
+        </p>
+
+        <Button
+          type="submit"
+          disabled={form.formState.isSubmitting}
+          className="mx-auto mt-4 w-fit px-14"
+        >
+          {form.formState.isSubmitting ? "Sending OTP..." : "Send OTP"}
+        </Button>
+      </form>
+    </Form>
+  );
+}

devsoc24-portal-fe/src/app/forgot/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Logo from "@/components/logo";
+import { ModeToggle } from "@/components/theme-toggle";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import Image from "next/image";
+import title from "@/assets/images/title.svg";
+import title2 from "@/assets/images/glitchtitle1.svg";
+import title3 from "@/assets/images/glitchtitle2.svg";
+import title4 from "@/assets/images/glitchtitle3.svg";
+import ForgotForm from "./forgot-pass-form";
+
+export default function Page() {
+  const [currentTitleIndex, setCurrentTitleIndex] = useState(0);
+  const titles = [title, title2, title3, title4];
+
+  useEffect(() => {
+    const intervals = [2000, 400, 600, 400];
+
+    const interval = setInterval(() => {
+      setCurrentTitleIndex((prevIndex) => (prevIndex + 1) % titles.length);
+    }, intervals[currentTitleIndex]);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [currentTitleIndex, titles.length]);
+
+  return (
+    <main className="flex min-h-screen flex-col items-center bg-[url('/images/bg.svg')] bg-cover bg-no-repeat">
+      <div className="flex h-[10%] w-full items-center justify-between bg-background px-6 py-2">
+        <Logo className="h-9/10 w-auto" />
+        <ModeToggle />
+      </div>
+      <div className="flex max-w-[90vw] grow items-center justify-center">
+        <Card className="w-fit">
+          <CardHeader>
+            <Image src={titles[currentTitleIndex] as string} alt="title" />
+          </CardHeader>
+          <div className="mt-3 flex flex-col items-center">
+            <p className="text-2xl font-semibold text-black">Welcome back!</p>
+            <p className="mt-1 text-sm">Login to your account</p>
+          </div>
+          <CardContent className="mt-4">
+            <ForgotForm />
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  );
+}

devsoc24-portal-fe/src/app/login/login-form.tsx

@@ -135,7 +135,7 @@ export default function LoginForm() {
         />
 
         <Link
-          href="/forgotpass"
+          href="/forgot"
           className="-mt-1 text-right text-sm font-medium text-primary"
         >
           Recover password

devsoc24-portal-fe/src/app/reset/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Logo from "@/components/logo";
+import { ModeToggle } from "@/components/theme-toggle";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import Image from "next/image";
+import title from "@/assets/images/title.svg";
+import title2 from "@/assets/images/glitchtitle1.svg";
+import title3 from "@/assets/images/glitchtitle2.svg";
+import title4 from "@/assets/images/glitchtitle3.svg";
+import ResetForm from "./reset-form";
+
+export default function Page() {
+  const [currentTitleIndex, setCurrentTitleIndex] = useState(0);
+  const titles = [title, title2, title3, title4];
+
+  useEffect(() => {
+    const intervals = [2000, 400, 600, 400];
+
+    const interval = setInterval(() => {
+      setCurrentTitleIndex((prevIndex) => (prevIndex + 1) % titles.length);
+    }, intervals[currentTitleIndex]);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [currentTitleIndex, titles.length]);
+
+  return (
+    <main className="flex min-h-screen flex-col items-center bg-[url('/images/bg.svg')] bg-cover bg-no-repeat">
+      <div className="flex h-[10%] w-full items-center justify-between bg-background px-6 py-2">
+        <Logo className="h-9/10 w-auto" />
+        <ModeToggle />
+      </div>
+      <div className="flex max-w-[90vw] grow items-center justify-center">
+        <Card className="w-fit">
+          <CardHeader>
+            <Image src={titles[currentTitleIndex] as string} alt="title" />
+          </CardHeader>
+          <div className="mt-3 flex flex-col items-center">
+            <p className="text-2xl font-semibold text-black">Welcome back!</p>
+            <p className="mt-1 text-sm">Login to your account</p>
+          </div>
+          <CardContent className="mt-4">
+            <ResetForm />
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  );
+}