revisi 1

app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,24 @@
+import ForgotPasswordForm from "@/components/ForgotPasswordForm";
+import Image from "next/image";
+import PnpLogo from "../../../public/logo-pnp.webp";
+import Link from "next/link";
+
+export default function ForgotPasswordPage() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <div className="w-10/12 rounded-md border p-5 text-center shadow-md sm:w-8/12 md:w-6/12 lg:w-4/12 xl:w-3/12 2xl:w-3/12">
+        <div className="flex justify-center py-5">
+          <Image src={PnpLogo} width={120} height={120} alt="Logo Politeknik Negeri Padang" />
+        </div>
+        <h1 className="pb-3 text-xl font-semibold">Lupa Password</h1>
+        <p className="mb-5 text-sm">Masukkan email Anda untuk menerima tautan reset password.</p>
+        <ForgotPasswordForm />
+        <div className="mt-4 text-xs">
+          <Link href="/login" className="text-blue-600 hover:underline">
+            Kembali ke Login
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(auth)/reset-password/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import PnpLogo from "../../../public/logo-pnp.webp";
+import ResetPasswordForm from "@/components/ResetPasswordForm";
+import { createClient } from "@/utils/supabase/client";
+
+export default function ResetPasswordPage() {
+  const supabase = createClient();
+  const [ready, setReady] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  useEffect(() => {
+    // When redirected from the email link, Supabase puts tokens in the hash.
+    // Exchange for a session so we can call updateUser.
+    const run = async () => {
+      try {
+        if (typeof window !== "undefined" && window.location.hash) {
+          const { error } = await supabase.auth.exchangeCodeForSession(window.location.hash);
+          if (error) {
+            setErrorMsg("Tautan tidak valid atau sudah kedaluwarsa.");
+          }
+        }
+      } catch (e) {
+        setErrorMsg("Gagal memproses tautan reset.");
+      } finally {
+        setReady(true);
+      }
+    };
+    run();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <div className="w-10/12 rounded-md border p-5 text-center shadow-md sm:w-8/12 md:w-6/12 lg:w-4/12 xl:w-3/12 2xl:w-3/12">
+        <div className="flex justify-center py-5">
+          <Image src={PnpLogo} width={120} height={120} alt="Logo Politeknik Negeri Padang" />
+        </div>
+        <h1 className="pb-3 text-xl font-semibold">Reset Password</h1>
+        {!ready ? (
+          <p className="text-sm">Menyiapkan formulir...</p>
+        ) : errorMsg ? (
+          <p className="text-sm text-red-600">{errorMsg}</p>
+        ) : (
+          <>
+            <p className="mb-5 text-sm">Masukkan password baru Anda.</p>
+            <ResetPasswordForm />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

components/ForgotPasswordForm.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { z } from "zod";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { Label } from "./ui/label";
+import { sendResetEmail } from "@/utils/forgotPassword";
+import { useState } from "react";
+
+const schema = z.object({
+  email: z.string().email("Email tidak valid"),
+});
+
+type FormFields = z.infer<typeof schema>;
+
+export default function ForgotPasswordForm() {
+  const [successMsg, setSuccessMsg] = useState<string | null>(null);
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<FormFields>({ resolver: zodResolver(schema) });
+
+  const onSubmit: SubmitHandler<FormFields> = async ({ email }) => {
+    setSuccessMsg(null);
+    const res = await sendResetEmail(email);
+    if (!res.ok) {
+      setError("root", { message: res.message });
+      return;
+    }
+    setSuccessMsg(res.message);
+  };
+
+  return (
+    <form className="flex flex-col gap-2" onSubmit={handleSubmit(onSubmit)}>
+      <Label htmlFor="email" className="text-left">
+        Email
+      </Label>
+      <Input id="email" type="email" placeholder="Email" {...register("email")} />
+      {errors.email && (
+        <div className="text-left text-xs text-red-500">{errors.email.message}</div>
+      )}
+      <Button disabled={isSubmitting} type="submit" className="mt-4 bg-orange-600 hover:bg-orange-800">
+        {isSubmitting ? "Mengirim..." : "Kirim tautan reset"}
+      </Button>
+      {errors.root && (
+        <div className="text-xs text-red-500">{errors.root.message}</div>
+      )}
+      {successMsg && (
+        <div className="text-xs text-green-600">{successMsg}</div>
+      )}
+    </form>
+  );
+}

components/ResetPasswordForm.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { z } from "zod";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { Label } from "./ui/label";
+import { useState } from "react";
+import { createClient } from "@/utils/supabase/client";
+
+const schema = z
+  .object({
+    password: z.string().min(8, "Password minimal 8 karakter"),
+    confirm: z.string().min(8, "Konfirmasi minimal 8 karakter"),
+  })
+  .refine((data) => data.password === data.confirm, {
+    message: "Password dan konfirmasi tidak sama",
+    path: ["confirm"],
+  });
+
+type FormFields = z.infer<typeof schema>;
+
+export default function ResetPasswordForm() {
+  const supabase = createClient();
+  const [successMsg, setSuccessMsg] = useState<string | null>(null);
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<FormFields>({ resolver: zodResolver(schema) });
+
+  const onSubmit: SubmitHandler<FormFields> = async ({ password }) => {
+    setSuccessMsg(null);
+    const { error } = await supabase.auth.updateUser({ password });
+    if (error) {
+      setError("root", { message: "Gagal mengubah password. Coba lagi." });
+      return;
+    }
+    setSuccessMsg("Password berhasil diubah. Silakan login kembali.");
+  };
+
+  return (
+    <form className="flex flex-col gap-2" onSubmit={handleSubmit(onSubmit)}>
+      <Label htmlFor="password" className="text-left">
+        Password Baru
+      </Label>
+      <Input id="password" type="password" placeholder="Password baru" {...register("password")} />
+      {errors.password && (
+        <div className="text-left text-xs text-red-500">{errors.password.message}</div>
+      )}
+
+      <Label htmlFor="confirm" className="text-left">
+        Konfirmasi Password
+      </Label>
+      <Input id="confirm" type="password" placeholder="Konfirmasi password" {...register("confirm")} />
+      {errors.confirm && (
+        <div className="text-left text-xs text-red-500">{errors.confirm.message}</div>
+      )}
+
+      <Button disabled={isSubmitting} type="submit" className="mt-4 bg-orange-600 hover:bg-orange-800">
+        {isSubmitting ? "Menyimpan..." : "Simpan Password"}
+      </Button>
+      {errors.root && (
+        <div className="text-xs text-red-500">{errors.root.message}</div>
+      )}
+      {successMsg && (
+        <div className="text-xs text-green-600">{successMsg}</div>
+      )}
+    </form>
+  );
+}

components/SignInForm.tsx

@@ -8,6 +8,7 @@ import { login } from "@/utils/signIn";
 import { Label } from "./ui/label";
 import { useState } from "react";
 import { Eye, EyeOff, Loader2 } from "lucide-react";
+import Link from "next/link";
 
 const schema = z.object({
   email: z.string().email(),
@@ -31,11 +32,13 @@ const SignInForm = () => {
 
   const onSubmit: SubmitHandler<FormFields> = async (data) => {
     try {
-      await login(data.email, data.password);
+      const res = await login(data.email, data.password);
+      if (res && "ok" in res && !res.ok) {
+        setError("root", { message: res.message || "Gagal login" });
+      }
+      // On success, server action will redirect to "/".
     } catch (error) {
-      setError("root", {
-        message: "Invalid email or password",
-      });
+      setError("root", { message: "Terjadi kesalahan. Coba lagi." });
     }
   };
 
@@ -99,6 +102,14 @@ const SignInForm = () => {
         {errors.root && (
           <div className="text-xs text-red-500">{errors.root.message}</div>
         )}
+        <div className="mt-3 text-center text-xs">
+          <Link
+            href="/forgot-password"
+            className="text-blue-600 hover:underline"
+          >
+            Lupa password?
+          </Link>
+        </div>
       </form>
     </>
   );

utils/forgotPassword.ts

@@ -0,0 +1,27 @@
+"use server";
+import { createClient } from "@/utils/supabase/server";
+
+export type ForgotResult = { ok: true; message: string } | { ok: false; message: string };
+
+export async function sendResetEmail(email: string): Promise<ForgotResult> {
+  const supabase = createClient();
+
+  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return { ok: false, message: "Email tidak valid" };
+  }
+
+  // Determine redirect URL for the password reset flow
+  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL?.replace(/\/$/, "") ||
+    (process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000");
+  const redirectTo = `${siteUrl}/reset-password`;
+
+  const { error } = await supabase.auth.resetPasswordForEmail(email, {
+    redirectTo,
+  });
+
+  if (error) {
+    return { ok: false, message: "Gagal mengirim email reset. Coba lagi." };
+  }
+
+  return { ok: true, message: "Email reset telah dikirim. Periksa kotak masuk Anda." };
+}

utils/resetPassword.ts

@@ -0,0 +1,18 @@
+"use server";
+// Server action kept minimal; reset is better done on client using the recovery session token.
+// Provided for completeness if needed by API routes in future.
+import { createClient } from "@/utils/supabase/server";
+
+export type ResetResult = { ok: true; message: string } | { ok: false; message: string };
+
+export async function resetPasswordServer(password: string): Promise<ResetResult> {
+  if (!password || password.length < 8) {
+    return { ok: false, message: "Password minimal 8 karakter" };
+  }
+  const supabase = createClient();
+  const { error } = await supabase.auth.updateUser({ password });
+  if (error) {
+    return { ok: false, message: "Gagal memperbarui password." };
+  }
+  return { ok: true, message: "Password berhasil diubah." };
+}

utils/signIn.ts

@@ -4,21 +4,32 @@ import { redirect } from "next/navigation";
 
 import { createClient } from "@/utils/supabase/server";
 
-export async function login(email: string, password: string) {
+type LoginResult = { ok: true } | { ok: false; message: string };
+
+export async function login(email: string, password: string): Promise<LoginResult> {
   const supabase = createClient();
 
-  //TODO validating input
-  const data = {
-    email: email,
-    password: password,
-  };
+  // Basic validation (server-side safeguard)
+  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return { ok: false, message: "Email tidak valid" };
+  }
+  if (!password || password.length < 8) {
+    return { ok: false, message: "Password minimal 8 karakter" };
+  }
 
-  const { error } = await supabase.auth.signInWithPassword(data);
+  const { error } = await supabase.auth.signInWithPassword({ email, password });
 
   if (error) {
-    return;
+    // Surface concise message
+    const msg =
+      error.message?.toLowerCase().includes("invalid") ||
+      error.status === 400
+        ? "Email atau password salah"
+        : "Gagal login. Coba lagi.";
+    return { ok: false, message: msg };
   }
 
+  // Success: revalidate and redirect
   revalidatePath("/", "layout");
   redirect("/");
 }