🔑 update password frontend complete, minor tweaks to backend

README.md

@@ -14,6 +14,8 @@ ALLOWED_ORIGINS=commaseparated,urls,or,regexes
 DATABASE_URL="postgresql://.../postgres?pgbouncer=true"
 DIRECT_URL="postgresql://.../postgres"
 REDIS_PORT=6379
+EMAIL_KEY="mailgun_api_key"
+OTP_EXPIRES=600
 ```
 
 `NODE_ENV` may be either 'development' or 'production'.

backend/src/index.ts

@@ -231,7 +231,7 @@ app.post('/auth/otp/verify', async (req: Request, res: Response) => {
 
 app.post('/auth/password/forgot', async (req: Request, res: Response) => {
   try {
-    const { email, token, newPassword } = req.body;
+    const { email, token, password } = req.body;
 
     if (!email) {
       throw new Error('Email is expected.');
@@ -241,15 +241,15 @@ app.post('/auth/password/forgot', async (req: Request, res: Response) => {
       throw new Error('One time code required to reset password.');
     }
 
-    if (!newPassword) {
+    if (!password) {
       throw new Error('New password is invalid.');
     }
 
     const otp = await redisClient.get(email);
 
     verifyOTP(token, otp);
 
-    await updateUserPasswordFromEmail(email, newPassword, SALT_ROUNDS);
+    await updateUserPasswordFromEmail(email, password, SALT_ROUNDS);
 
     return res.status(200).json({ message: 'ok' });
   } catch (error) {

frontend/src/VerifyOTP/VerifyOTP.tsx

@@ -4,15 +4,17 @@ import { TextInput, TextOptions } from '../TextInput/TextInput';
 import { useState, FormEvent } from 'react';
 import { KeyIcon, LockClosedIcon } from '@heroicons/react/24/outline';
 import { errorHandler, AuthError } from '../errorHandler';
-import { useLocation } from 'react-router';
+import { useLocation, useNavigate } from 'react-router';
 
 export default function VerifyOTP() {
   const [token, setToken] = useState('');
   const [password, setPassword] = useState('');
   const [confirmedPassword, setConfirmedPassword] = useState('');
   const [error, setError] = useState<AuthError | undefined>(undefined);
+  const [success, setSuccess] = useState<string | undefined>(undefined);
   const { state } = useLocation();
   const { email } = state;
+  const navigate = useNavigate();
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -37,14 +39,15 @@ export default function VerifyOTP() {
       return;
     }
 
-    const res = await fetch('http://localhost:5180/auth/otp/verify', {
+    const res = await fetch('http://localhost:5180/auth/password/forgot', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
         token,
         email,
+        password,
       }),
     });
     const json = await res.json();
@@ -53,6 +56,10 @@ export default function VerifyOTP() {
       setError(errorHandler(json.message));
     } else {
       setError(undefined);
+      setSuccess('Password updated successfully! Redirecting...');
+      setTimeout(() => {
+        navigate('/login');
+      }, 1000);
     }
   }
   return (
@@ -98,6 +105,7 @@ export default function VerifyOTP() {
         buttonText="Submit"
         onSubmit={handleSubmit}
         error={error}
+        success={success}
       ></AuthScreen>
     </main>
   );