fix: auth pages

.github/workflows/preview.yaml

@@ -0,0 +1,21 @@
+name: Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches-ignore:
+      - main
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

apps/core/app/(landing)/become-auther/_components/auther-form.tsx

@@ -32,7 +32,6 @@ const AutherForm = () => {
   });
 
   const onSubmit = (data: PostRequestAuthorRequest) => {
-    console.log("Sign Up Data:", data);
 
     mutation.mutate(data);
   };

apps/core/app/auth/_components/auth-card.tsx

@@ -8,7 +8,7 @@ import { ReactNode } from "react";
 
 const AuthCard = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="flex items-center relative z-10 flex-col gap-4 bg-[#262626] w-[calc(100% - 32px)] sm:w-[450px] rounded-xl mx-4">
+    <div className="flex items-center relative z-10 flex-col gap-4 bg-card w-[calc(100% - 32px)] sm:w-[450px] rounded-xl mx-4">
       {/* logo */}
       <div className="w-full px-3 sm:p-7 py-7 flex flex-col items-center gap-4">
         <div>

apps/core/app/auth/forget-password/_components/form/forgetPasswordForm.tsx

@@ -4,11 +4,11 @@ import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { postForgetPasswordSchema } from "@repo/apis/core/forgot-password/post/post-forget-password.schema";
-import { PostForgetPasswordRequest } from "@repo/apis/core/forgot-password/post/post-forget-password.types";
-import { UsePostForgetPassword } from "@repo/apis/core/forgot-password/post/use-post-forget-password";
 import { Button } from "@repo/ui/components/button";
 import { Input } from "@repo/ui/components/input";
+import { postForgetPasswordSchema } from "@repo/apis/core/accounts/users/forgot-password/post/post-forget-password.schema";
+import type { PostForgetPasswordRequest } from "@repo/apis/core/accounts/users/forgot-password/post/post-forget-password.types";
+import { UsePostForgetPassword } from "@repo/apis/core/accounts/users/forgot-password/post/use-post-forget-password";
 
 const ForgetPasswordForm = () => {
   const router = useRouter();
@@ -26,12 +26,11 @@ const ForgetPasswordForm = () => {
   const mutation = UsePostForgetPassword({
     onSuccess: (res, context) => {
       toast.info(res.data.message);
-      router.push(`/auth/set-password?username=${context.username}`);
+      router.replace(`/auth/set-password?username=${context.username}`);
     },
   });
 
   const onSubmit = (data: PostForgetPasswordRequest) => {
-    console.log("Sign Up Data:", data);
     mutation.mutate(data);
   };
 

apps/core/app/auth/layout.tsx

@@ -1,5 +1,6 @@
 import "@repo/ui/globals.scss";
 import type { Metadata } from "next";
+import Image from "next/image";
 
 export const metadata: Metadata = {
   title: "Docs",
@@ -8,16 +9,17 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}): JSX.Element {
+}>): JSX.Element {
   return (
     <div className="flex justify-center items-center relative min-h-screen w-full">
       <div className="absolute inset-0">
-        <img
+        <Image
           src="/images/test1.webp"
           alt="background"
           className="w-full h-full object-cover"
+          fill
         />
       </div>
       <div className="w-full flex justify-center">{children}</div>

apps/core/app/auth/login/_components/form/loginForm.tsx

@@ -30,13 +30,11 @@ const LoginForm = () => {
 
   const loginMutation = usePostLogin({
     onSuccess: (res) => {
-      console.log(res);
       toast.success("Logged in successfully");
       setAuthTokens(res.data.data.token);
       router.push("/");
     },
     onError: (res) => {
-      console.log(res);
       toast.error(res.response?.data.message ?? "Something went wrong");
     },
   });
@@ -67,7 +65,7 @@ const LoginForm = () => {
           helperText={
             <Link
               href="/auth/forget-password"
-              className="block mb-3 text-sm font-light text-gray-500 hover:text-gray-700 cursor-pointer"
+              className="block mb-3 text-sm font-light text-muted-foreground hover:text-muted cursor-pointer"
             >
               Forgot password?
             </Link>

apps/core/app/auth/login/page.tsx

@@ -26,15 +26,15 @@ const LoginPage = () => {
       {/* login with google and linkedin */}
       {/* <div className="w-full flex flex-col items-center gap-3">
         <Button
-          className="w-full text-lg bg-[#181818]"
+          className="w-full text-lg bg-background"
           variant="secondary"
           size={"lg"}
         >
           <GoogleIcon size={24} className="mr-2" />
           Log in with Google
         </Button>
         <Button
-          className="w-full text-lg bg-[#181818]"
+          className="w-full text-lg bg-background"
           variant="secondary"
           size={"lg"}
         >

apps/core/app/auth/set-password/page.tsx

@@ -1,37 +1,35 @@
 // import components
 "use client";
-import { PostForgetPasswordRequest } from "@repo/apis/core/forgot-password/post/post-forget-password.types";
-import { UsePostForgetPassword } from "@repo/apis/core/forgot-password/post/use-post-forget-password";
 import { Button } from "@repo/ui/components/button";
 import {
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
 } from "@repo/ui/components/input-otp";
 import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 
 // import icons
 import { zodResolver } from "@hookform/resolvers/zod";
-import { postForgetPasswordSchema } from "@repo/apis/core/forgot-password/post/post-forget-password.schema";
 import { Input } from "@repo/ui/components/input";
 import { Suspense, useEffect } from "react";
 import AuthCard from "../_components/auth-card";
 
+import { postResetPasswordSchema } from "@repo/apis/core/accounts/users/reset-password/post/post-reset-password.schema";
+import { usePostResetPassword } from "@repo/apis/core/accounts/users/reset-password/post/use-post-reset-password";
+import type { PostResetPasswordRequest } from "@repo/apis/core/accounts/users/reset-password/post/post-reset-password.types";
+
 const Setpasswordpage = () => {
   const router = useRouter();
-  // TODO: Fix this
-  // const params = useSearchParams();
-  // const username = params.get("username");
-
-  const username = "[email protected]";
+  const params = useSearchParams();
+  const username = params.get("username");
 
   if (!username) router.replace("/auth/forget-password");
 
-  const form = useForm<PostForgetPasswordRequest>({
-    resolver: zodResolver(postForgetPasswordSchema.request),
+  const form = useForm<PostResetPasswordRequest>({
+    resolver: zodResolver(postResetPasswordSchema.request),
   });
 
   const {
@@ -41,22 +39,23 @@ const Setpasswordpage = () => {
     formState: { errors },
   } = form;
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     setValue("username", username as string);
-  }, []);
+  }, [username]);
 
-  const mutation = UsePostForgetPassword({
+  const mutation = usePostResetPassword({
     onSuccess: (res) => {
       toast.info(res.data.message);
-      router.push(`/auth/login`);
+      router.push("/auth/login");
     },
 
     onError: (err) => {
-      toast.error(err.response?.data.message || "Something went wrong");
+      toast.error(err.response?.data.message ?? "Something went wrong");
     },
   });
 
-  const handleSubmitForm = (data: PostForgetPasswordRequest) => {
+  const handleSubmitForm = (data: PostResetPasswordRequest) => {
     mutation.mutate(data);
   };
 
@@ -70,16 +69,14 @@ const Setpasswordpage = () => {
           <p className="text-2xl font-bold">Set your Password</p>
           <p className="text-center text-sm font-normal">
             We've sent the code to{" "}
-            <span className="underline text-sm font-normal">
-              [email protected]
-            </span>
+            <span className="underline text-sm font-normal">{username}</span>
           </p>
           <p className="text-sm font-normal">check your email</p>
         </div>
       </div>
       {/* otp input */}
       <form
-        className="w-full flex flex-col items-center "
+        className="w-full flex flex-col items-center gap-4"
         onSubmit={handleSubmit(handleSubmitForm)}
       >
         <div className="pb-4">
@@ -104,33 +101,31 @@ const Setpasswordpage = () => {
         </div>
 
         {/* input */}
-        <div className="w-full flex flex-col gap-5">
-          <Input
-            label="Password"
-            type="password"
-            className="font-normal text-xs text-gray-500"
-            placeholder="********"
-            {...register("newPassword")}
-            error={errors.newPassword?.message}
-          />
-          <Input
-            label="Confirm Password"
-            type="password"
-            className="font-normal text-xs text-gray-500"
-            placeholder="********"
-            {...register("confirmPassword")}
-            error={errors.confirmPassword?.message}
-          />
-          {/* button reset */}
-          <div className="pb-7 w-full">
-            <Button
-              isLoading={mutation.isPending}
-              className="w-full text-sm font-bold bg-primary text-foreground"
-              variant="primary"
-            >
-              Reset
-            </Button>
-          </div>
+        <Input
+          label="Password"
+          type="password"
+          className="font-normal text-xs text-muted-foreground"
+          placeholder="********"
+          {...register("new_password")}
+          error={errors.new_password?.message}
+        />
+        <Input
+          label="Confirm Password"
+          type="password"
+          className="font-normal text-xs text-muted-foreground"
+          placeholder="********"
+          {...register("confirm_password")}
+          error={errors.confirm_password?.message}
+        />
+        {/* button reset */}
+        <div className="pb-7 w-full">
+          <Button
+            isLoading={mutation.isPending}
+            className="w-full text-lg font-bold"
+            variant="primary"
+          >
+            Reset
+          </Button>
         </div>
       </form>
     </AuthCard>