Merge pull request #208 from nepalcodes/forgot-pwd-fix

Forgot pwd fix
nepalcodes · Aug 9, 2024 · 0194767 · 0194767
2 parents 62cf32c + b8cb38d
commit 0194767
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 42 deletions.
diff --git a/nepalingo-web/src/hooks/Auth.tsx b/nepalingo-web/src/hooks/Auth.tsx
@@ -1,12 +1,11 @@
-import React from "react";
+import React, { useContext, useState, useEffect, createContext } from "react";
 import {
   AuthResponse,
   AuthTokenResponsePassword,
   Session,
   SignUpWithPasswordCredentials,
   User,
 } from "@supabase/supabase-js";
-import { useContext, useState, useEffect, createContext } from "react";
 import { supabaseClient } from "@/config/supabase-client";
 
 type AuthContextProps = {
@@ -18,8 +17,8 @@ type AuthContextProps = {
     data: SignUpWithPasswordCredentials,
   ) => Promise<AuthTokenResponsePassword>;
   resetPasswordEmail: (email: string) => Promise<{ error: Error | null }>;
-  resetPassword: (password: string) => Promise<{ error: Error | null }>;
 };
+
 const AuthContext = createContext<AuthContextProps>({
   session: null,
   user: null,
@@ -30,12 +29,11 @@ const AuthContext = createContext<AuthContextProps>({
     supabaseClient.auth.resetPasswordForEmail(email, {
       redirectTo: "https://www.nepalingo.com/reset-password",
     }),
-  resetPassword: (password) => supabaseClient.auth.updateUser({ password }),
 });
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
-  const [user, setUser] = useState<User>();
-  const [session, setSession] = useState<Session | null>();
+  const [user, setUser] = useState<User | null>(null);
+  const [session, setSession] = useState<Session | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -46,14 +44,14 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       } = await supabaseClient.auth.getSession();
       if (error) throw error;
       setSession(session);
-      setUser(session?.user);
+      setUser(session?.user || null);
       setLoading(false);
     };
 
     const { data: listener } = supabaseClient.auth.onAuthStateChange(
       (_event, session) => {
         setSession(session);
-        setUser(session?.user);
+        setUser(session?.user || null);
         setLoading(false);
       },
     );
@@ -75,7 +73,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       supabaseClient.auth.resetPasswordForEmail(email, {
         redirectTo: "https://www.nepalingo.com/reset-password",
       }),
-    resetPassword: (password) => supabaseClient.auth.updateUser({ password }),
   };
 
   return (

diff --git a/nepalingo-web/src/pages/ResetPassword.tsx b/nepalingo-web/src/pages/ResetPassword.tsx
@@ -1,50 +1,55 @@
 import React, { useState } from "react";
-import { useAuth } from "@/hooks/Auth";
 import { useNavigate } from "react-router-dom";
 import CustomTextInput from "@/components/CustomTextInput";
 import Button from "@/components/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLock, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { supabaseClient } from "@/config/supabase-client";
 
 const ResetPassword: React.FC = () => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [message, setMessage] = useState("");
   const [error, setError] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
-  const { resetPassword } = useAuth();
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const navigate = useNavigate();
 
-  const handlePasswordReset = (event: React.FormEvent) => {
+  const handlePasswordReset = async (event: React.FormEvent) => {
     event.preventDefault();
 
     if (password !== confirmPassword) {
       setError("Passwords do not match");
       return;
     }
 
-    resetPassword(password).then(({ error }) => {
-      if (error) {
-        setError(error.message);
-        setMessage("");
-      } else {
-        setMessage("Password reset successful! Go to ");
-        setError("");
-      }
+    // Update the password using the Supabase client
+    const { error: updateError } = await supabaseClient.auth.updateUser({
+      password,
     });
+
+    if (updateError) {
+      setError(updateError.message);
+    } else {
+      navigate("/login", {
+        state: {
+          message:
+            "Password reset successful! Please log in with your new password.",
+        },
+      });
+    }
   };
 
   return (
     <div className="flex items-center justify-center min-h-screen bg-black">
       <div className="bg-black p-8 rounded shadow-md w-full max-w-md">
         <h2 className="text-4xl text-primary mb-6">Reset Password</h2>
         <form onSubmit={handlePasswordReset} className="space-y-4">
-          <div className="flex flex-col">
+          <div className="flex flex-col relative">
             <CustomTextInput
               label="New Password"
               name="NewPassword"
-              placeholder="eg., @ReallySecure07"
-              type={showPassword ? "text" : "password"}
+              placeholder="e.g., @ReallySecure07"
+              type={showNewPassword ? "text" : "password"}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               iconProps={{
@@ -55,16 +60,17 @@ const ResetPassword: React.FC = () => {
               containerStyle="h-12"
             />
             <FontAwesomeIcon
-              icon={showPassword ? faEyeSlash : faEye}
+              icon={showNewPassword ? faEyeSlash : faEye}
               className="text-white absolute right-3 bottom-4 cursor-pointer"
-              onClick={() => setShowPassword(!showPassword)}
+              onClick={() => setShowNewPassword(!showNewPassword)}
             />
           </div>
-          <div className="flex flex-col">
+
+          <div className="flex flex-col relative">
             <CustomTextInput
               label="Confirm New Password"
               name="confirm password"
-              type={showPassword ? "text" : "password"}
+              type={showConfirmPassword ? "text" : "password"}
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
               iconProps={{
@@ -75,29 +81,19 @@ const ResetPassword: React.FC = () => {
               containerStyle="h-12"
             />
             <FontAwesomeIcon
-              icon={showPassword ? faEyeSlash : faEye}
+              icon={showConfirmPassword ? faEyeSlash : faEye}
               className="text-white absolute right-3 bottom-4 cursor-pointer"
-              onClick={() => setShowPassword(!showPassword)}
+              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
             />
           </div>
+
           <Button
             type="submit"
             className="w-full bg-blue-500 text-white py-2 rounded"
           >
             Reset Password
           </Button>
         </form>
-        {message && (
-          <div className="mt-4 text-green-500">
-            {message}{" "}
-            <button
-              onClick={() => navigate("/login")}
-              className="underline text-white"
-            >
-              Login
-            </button>
-          </div>
-        )}
         {error && <p className="text-red-500 mt-4">{error}</p>}
       </div>
     </div>