feat: 允许重置密码

app/[lng]/login/page.tsx

@@ -127,13 +127,17 @@ export default async function Login({
           required
         />
         <button className="bg-green-700 rounded-md px-4 py-2 text-foreground mb-2">
-          Sign In
+          Sign In（登录）
         </button>
         <button
           formAction={signUp}
           className="border border-foreground/20 rounded-md px-4 py-2 text-foreground mb-2"
         >
-          Sign Up
+          Sign Up（注册）
+        </button>
+        {/* 重置密码 */}
+        <button className="border border-foreground/20 rounded-md px-4 py-2 text-foreground mb-2">
+          <Link href="/request-reset">Reset Password（重置密码）</Link>
         </button>
         {searchParams?.message && (
           <p className="mt-4 p-4 bg-foreground/10 text-foreground text-center">

app/[lng]/request-reset/page.tsx

@@ -11,7 +11,7 @@ const RequestResetPassword = () => {
     const { data, error } = await supabase.auth.resetPasswordForEmail(email, {
       redirectTo: `${window.location.origin}/reset-password`, // 确保这个URL是你重置密码页面的地址
     });
-
+    console.log("当前链接", `${window.location.origin}/reset-password`);
     if (error) {
       alert("Error sending password reset email: " + error.message);
     } else {
@@ -20,14 +20,20 @@ const RequestResetPassword = () => {
   };
 
   return (
-    <div>
+    <div className="flex flex-col items-center justify-center p-4">
       <input
         type="email"
         placeholder="Your email"
         value={email}
         onChange={(e) => setEmail(e.target.value)}
+        className="px-4 py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500 shadow-sm"
       />
-      <button onClick={handleResetPassword}>Reset Password</button>
+      <button
+        onClick={handleResetPassword}
+        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+      >
+        Reset Password（重置密码）
+      </button>
     </div>
   );
 };

app/[lng]/reset-password/page.tsx

@@ -1,22 +1,16 @@
 "use client";
 import { useState } from "react";
 import { createClient } from "@/utils/supabase/client";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 
 const ResetPassword = () => {
   const supabase = createClient();
 
   const [newPassword, setNewPassword] = useState("");
   const router = useRouter();
-  const { access_token } = router.query; // 获取URL中的access_token参数
 
   const handleNewPassword = async () => {
-    if (!access_token) {
-      alert("Token is not provided or invalid");
-      return;
-    }
-
-    const { error } = await supabase.auth.updateUser(access_token, {
+    const { error } = await supabase.auth.updateUser({
       password: newPassword,
     });
 
@@ -29,14 +23,20 @@ const ResetPassword = () => {
   };
 
   return (
-    <div>
+    <div className="flex flex-col items-center justify-center space-y-4 bg-gray-50 p-6 rounded-lg shadow-md">
       <input
         type="password"
         placeholder="New password"
         value={newPassword}
         onChange={(e) => setNewPassword(e.target.value)}
+        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
-      <button onClick={handleNewPassword}>Update Password</button>
+      <button
+        onClick={handleNewPassword}
+        className="px-4 py-2 w-full text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors"
+      >
+        Update Password（更新密码）
+      </button>
     </div>
   );
 };