From 357bbcafc3925b00fc2fa6064346af18077e22bf Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Tue, 7 Oct 2025 16:42:49 -0700
Subject: [PATCH 01/11] Switch Login form to useForm

---
 client/src/Login.jsx | 45 +++++++++++++++++++++++---------------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/client/src/Login.jsx b/client/src/Login.jsx
index 5dce682..32839c1 100644
--- a/client/src/Login.jsx
+++ b/client/src/Login.jsx
@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate, Link, useLocation, useSearchParams } from 'react-router';
 import { StatusCodes } from 'http-status-codes';
 import { Alert, Box, Button, Container, Group, Stack, TextInput, Title } from '@mantine/core';
+import { hasLength, isEmail, useForm } from '@mantine/form';
 import { Head } from '@unhead/react';
 
 import Api from './Api';
@@ -23,21 +24,28 @@ function Login () {
     }
   }, [authContext.user, from, navigate]);
 
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const form = useForm({
+    mode: 'uncontrolled',
+    initialValues: {
+      email: '',
+      password: '',
+    },
+    validate: {
+      email: isEmail('Please enter a valid email address.'),
+      password: hasLength({ min: 8 }, 'Passwords must be at least 8 characters.'),
+    },
+  });
 
-  const [showInvalidError, setShowInvalidError] = useState(false);
-
-  async function onSubmit (event) {
-    event.preventDefault();
-    setShowInvalidError(false);
+  async function onSubmit (values) {
     try {
-      const response = await Api.auth.login(email, password);
+      const response = await Api.auth.login(values.email, values.password);
       authContext.setUser(response.data);
       navigate(from, { replace: true });
     } catch (error) {
       if (error.response?.status === StatusCodes.UNPROCESSABLE_ENTITY || error.response?.status === StatusCodes.NOT_FOUND) {
-        setShowInvalidError(true);
+        form.setErrors({
+          global: 'Invalid email and/or password',
+        });
       } else {
         console.log(error);
       }
@@ -51,25 +59,20 @@ function Login () {
       </Head>
       <Container>
         <Title mb='md'>Log in</Title>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={form.onSubmit(onSubmit)}>
           <Stack w={{ base: '100%', xs: 320 }}>
             {location.state?.flash && <Alert>{location.state?.flash}</Alert>}
-            {showInvalidError && <Alert color='red'>Invalid email and/or password.</Alert>}
+            {form.errors.global && <Alert color='red'>{form.errors.global}</Alert>}
             <TextInput
+              {...form.getInputProps('email')}
+              key={form.key('email')}
               label='Email'
-              type='email'
-              id='email'
-              name='email'
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
             />
             <TextInput
+              {...form.getInputProps('password')}
+              key={form.key('password')}
               label='Password'
               type='password'
-              id='password'
-              name='password'
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
             />
             <Group>
               <Button type='submit'>

From f839eee9f790065f40ba2c92ab41ade41eb680b5 Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Tue, 14 Oct 2025 15:13:09 -0700
Subject: [PATCH 02/11] First pass, register/invite form refactor to Mantine
 useForm

---
 client/src/Invites/Invite.jsx   | 18 +-------
 client/src/Register.jsx         | 18 +-------
 client/src/RegistrationForm.jsx | 73 +++++++++++++++++++--------------
 client/src/ValidationError.js   | 19 ++++-----
 4 files changed, 54 insertions(+), 74 deletions(-)

diff --git a/client/src/Invites/Invite.jsx b/client/src/Invites/Invite.jsx
index 263cfd0..6e57531 100644
--- a/client/src/Invites/Invite.jsx
+++ b/client/src/Invites/Invite.jsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router';
 import { Box, Container, Stack, Title } from '@mantine/core';
 import { useMutation, useQuery } from '@tanstack/react-query';
@@ -22,15 +21,8 @@ function Invite () {
     },
   });
 
-  const [user, setUser] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    password: '',
-  });
-
   const onSubmitMutation = useMutation({
-    mutationFn: () => Api.auth.register({ ...user, inviteId }),
+    mutationFn: (values) => Api.auth.register({ ...values, inviteId }),
     onSuccess: (response) => {
       setAuthUser(response.data);
       navigate('/account', { state: { flash: 'Your account has been created!' } });
@@ -38,12 +30,6 @@ function Invite () {
     onError: () => window.scrollTo(0, 0),
   });
 
-  function onChange (event) {
-    const newUser = { ...user };
-    newUser[event.target.name] = event.target.value;
-    setUser(newUser);
-  }
-
   return (
     <>
       <Head>
@@ -55,7 +41,7 @@ function Invite () {
           {invite?.acceptedAt && <Box>This invite has already been accepted.</Box>}
           {invite?.revokedAt && <Box>This invite is no longer available.</Box>}
           {invite && invite.acceptedAt === null && invite.revokedAt === null && (
-            <RegistrationForm onSubmitMutation={onSubmitMutation} onChange={onChange} user={user} />
+            <RegistrationForm onSubmitMutation={onSubmitMutation} />
           )}
         </Stack>
       </Container>
diff --git a/client/src/Register.jsx b/client/src/Register.jsx
index 08380ca..411b004 100644
--- a/client/src/Register.jsx
+++ b/client/src/Register.jsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useNavigate, Link } from 'react-router';
 import { Box, Container, Stack, Title } from '@mantine/core';
 import { useMutation } from '@tanstack/react-query';
@@ -12,15 +11,8 @@ function Register () {
   const authContext = useAuthContext();
   const navigate = useNavigate();
 
-  const [user, setUser] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    password: '',
-  });
-
   const onSubmitMutation = useMutation({
-    mutationFn: () => Api.auth.register(user),
+    mutationFn: (values) => Api.auth.register(values),
     onSuccess: (response) => {
       authContext.setUser(response.data);
       navigate('/');
@@ -28,12 +20,6 @@ function Register () {
     onError: () => window.scrollTo(0, 0),
   });
 
-  function onChange (event) {
-    const newUser = { ...user };
-    newUser[event.target.name] = event.target.value;
-    setUser(newUser);
-  }
-
   return (
     <>
       <Head>
@@ -42,7 +28,7 @@ function Register () {
       <Container>
         <Title mb='md'>Register</Title>
         <Stack>
-          <RegistrationForm onChange={onChange} onSubmitMutation={onSubmitMutation} user={user} />
+          <RegistrationForm onSubmitMutation={onSubmitMutation} />
           <Box>
             <Link to='/login'>Already have an account?</Link>
           </Box>
diff --git a/client/src/RegistrationForm.jsx b/client/src/RegistrationForm.jsx
index 99abb71..63d15fe 100644
--- a/client/src/RegistrationForm.jsx
+++ b/client/src/RegistrationForm.jsx
@@ -1,51 +1,64 @@
 import { Alert, Button, Fieldset, Group, Stack, TextInput } from '@mantine/core';
+import { isEmail, isNotEmpty, hasLength, useForm } from '@mantine/form';
+import ValidationError from './ValidationError';
 
-function RegistrationForm ({ onChange, onSubmitMutation, user }) {
-  function onSubmit (event) {
-    event.preventDefault();
-    onSubmitMutation.mutate();
+function RegistrationForm ({ onSubmitMutation }) {
+  const form = useForm({
+    mode: 'uncontrolled',
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+    },
+    validate: {
+      firstName: isNotEmpty('First name is required.'),
+      lastName: isNotEmpty('Last name is required.'),
+      email: isEmail('Please enter a valid email address.'),
+      password: hasLength({ min: 8 }, 'Passwords must be at least 8 characters.'),
+    },
+  });
+
+  function onSubmit (values) {
+    onSubmitMutation.mutate(values, {
+      onError: (error) => {
+        if (error instanceof ValidationError) {
+          form.setErrors(error.data);
+        } else {
+          form.setErrors({
+            global: error.toString(),
+          });
+        }
+      },
+    });
   }
 
   return (
-    <form onSubmit={onSubmit}>
+    <form onSubmit={form.onSubmit(onSubmit)}>
       <Fieldset disabled={onSubmitMutation.isPending} variant='unstyled'>
         <Stack w={{ base: '100%', xs: 320 }}>
-          {onSubmitMutation.error && onSubmitMutation.error.message && <Alert color='red'>{onSubmitMutation.error.message}</Alert>}
+          {form.errors.global && <Alert color='red'>{form.errors.global}</Alert>}
           <TextInput
+            {...form.getInputProps('firstName')}
+            key={form.key('firstName')}
             label='First name'
-            type='text'
-            id='firstName'
-            name='firstName'
-            onChange={onChange}
-            value={user.firstName}
-            error={onSubmitMutation.error?.errorMessagesHTMLFor?.('firstName')}
           />
           <TextInput
+            {...form.getInputProps('lastName')}
+            key={form.key('lastName')}
             label='Last name'
-            type='text'
-            id='lastName'
-            name='lastName'
-            onChange={onChange}
-            value={user.lastName}
-            error={onSubmitMutation.error?.errorMessagesHTMLFor?.('lastName')}
           />
           <TextInput
-            label='Email'
+            {...form.getInputProps('email')}
+            key={form.key('email')}
             type='email'
-            id='email'
-            name='email'
-            onChange={onChange}
-            value={user.email}
-            error={onSubmitMutation.error?.errorMessagesHTMLFor?.('email')}
+            label='Email'
           />
           <TextInput
-            label='Password'
+            {...form.getInputProps('password')}
+            key={form.key('password')}
             type='password'
-            id='password'
-            name='password'
-            onChange={onChange}
-            value={user.password}
-            error={onSubmitMutation.error?.errorMessagesHTMLFor?.('password')}
+            label='Password'
           />
           <Group>
             <Button type='submit'>Submit</Button>
diff --git a/client/src/ValidationError.js b/client/src/ValidationError.js
index 601e0f1..a9c4c56 100644
--- a/client/src/ValidationError.js
+++ b/client/src/ValidationError.js
@@ -3,18 +3,13 @@ import { capitalize } from 'inflection';
 class ValidationError extends Error {
   constructor (data) {
     super();
-    this.data = data;
-  }
-
-  errorsFor (name) {
-    const errors = this.data.errors.filter((e) => e.path === name);
-    return errors.length ? errors : null;
-  }
-
-  errorMessagesHTMLFor (name) {
-    const errors = this.errorsFor(name);
-    if (errors) {
-      return `${capitalize([...new Set(errors.map((e) => e.message))].join(', '))}.`;
+    this.data = {};
+    for (const error of data.errors) {
+      this.data[error.path] ||= new Set();
+      this.data[error.path].add(error.message);
+    }
+    for (const key of Object.keys(this.data)) {
+      this.data[key] = capitalize([...this.data[key]].join(', '));
     }
   }
 }

From cd43b7b71faa828f9d1d25f2e8cf3ff32065d8bb Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Tue, 14 Oct 2025 15:27:09 -0700
Subject: [PATCH 03/11] Admin invite form refactor

---
 client/src/Admin/Invites/AdminInviteForm.jsx | 77 +++++++++-----------
 client/src/RegistrationForm.jsx              |  2 +-
 2 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/client/src/Admin/Invites/AdminInviteForm.jsx b/client/src/Admin/Invites/AdminInviteForm.jsx
index eb4df36..872e91d 100644
--- a/client/src/Admin/Invites/AdminInviteForm.jsx
+++ b/client/src/Admin/Invites/AdminInviteForm.jsx
@@ -1,38 +1,43 @@
-import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import { Alert, Button, Container, Fieldset, Group, Stack, Textarea, TextInput, Title } from '@mantine/core';
+import { isEmail, isNotEmpty, useForm } from '@mantine/form';
 import { useMutation } from '@tanstack/react-query';
 import { Head } from '@unhead/react';
 
 import Api from '../../Api';
+import ValidationError from '../../ValidationError';
 
 function AdminInviteForm () {
   const navigate = useNavigate();
 
-  const [invite, setInvite] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    message: '',
+  const form = useForm({
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      message: '',
+    },
+    validate: {
+      firstName: isNotEmpty('First name is required.'),
+      email: isEmail('Please enter a valid email address.'),
+    },
   });
 
   const onSubmitMutation = useMutation({
-    mutationFn: () => Api.invites.create(invite),
+    mutationFn: (values) => Api.invites.create(values),
     onSuccess: () => navigate('/admin/invites', { flash: 'Invite sent!' }),
-    onError: () => window.scrollTo(0, 0),
+    onError: (error) => {
+      if (error instanceof ValidationError) {
+        form.setErrors(error.data);
+      } else {
+        form.setErrors({
+          global: error.toString(),
+        });
+      }
+      window.scrollTo(0, 0);
+    },
   });
 
-  function onChange (event) {
-    const newInvite = { ...invite };
-    newInvite[event.target.name] = event.target.value;
-    setInvite(newInvite);
-  }
-
-  function onSubmit (event) {
-    event.preventDefault();
-    onSubmitMutation.mutate();
-  }
-
   return (
     <>
       <Head>
@@ -40,44 +45,30 @@ function AdminInviteForm () {
       </Head>
       <Container>
         <Title mb='md'>Invite a new User</Title>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
           <Fieldset variant='unstyled' disabled={onSubmitMutation.isPending}>
             <Stack w={{ base: '100%', xs: 320 }}>
-              {onSubmitMutation.error && onSubmitMutation.error.message && <Alert color='red'>{onSubmitMutation.error.message}</Alert>}
+              {form.errors.global && <Alert color='red'>{form.errors.global}</Alert>}
               <TextInput
+                {...form.getInputProps('firstName')}
+                key='firstName'
                 label='First name'
-                type='text'
-                id='firstName'
-                name='firstName'
-                onChange={onChange}
-                value={invite.firstName ?? ''}
-                error={onSubmitMutation.error?.errorMessagesHTMLFor?.('firstName')}
               />
               <TextInput
+                {...form.getInputProps('lastName')}
+                key='lastName'
                 label='Last name'
-                type='text'
-                id='lastName'
-                name='lastName'
-                onChange={onChange}
-                value={invite.lastName ?? ''}
-                error={onSubmitMutation.error?.errorMessagesHTMLFor?.('lastName')}
               />
               <TextInput
+                {...form.getInputProps('email')}
+                key='email'
                 label='Email'
                 type='email'
-                id='email'
-                name='email'
-                onChange={onChange}
-                value={invite.email ?? ''}
-                error={onSubmitMutation.error?.errorMessagesHTMLFor?.('email')}
               />
               <Textarea
+                {...form.getInputProps('message')}
+                key='message'
                 label='Message'
-                id='message'
-                name='message'
-                onChange={onChange}
-                value={invite.message ?? ''}
-                error={onSubmitMutation.error?.errorMessagesHTMLFor?.('message')}
               />
               <Group>
                 <Button type='submit'>
diff --git a/client/src/RegistrationForm.jsx b/client/src/RegistrationForm.jsx
index 63d15fe..021c3a0 100644
--- a/client/src/RegistrationForm.jsx
+++ b/client/src/RegistrationForm.jsx
@@ -20,7 +20,7 @@ function RegistrationForm ({ onSubmitMutation }) {
   });
 
   function onSubmit (values) {
-    onSubmitMutation.mutate(values, {
+    onSubmitMutation.mutateAsync(values, {
       onError: (error) => {
         if (error instanceof ValidationError) {
           form.setErrors(error.data);

From 2ad610979997738f50ede2843e6cdefc9f0ea1d8 Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Tue, 14 Oct 2025 15:36:55 -0700
Subject: [PATCH 04/11] Refactor forgot password form

---
 client/src/Passwords/ForgotPassword.jsx | 51 +++++++++++++++----------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/client/src/Passwords/ForgotPassword.jsx b/client/src/Passwords/ForgotPassword.jsx
index 3729d03..3b65bf4 100644
--- a/client/src/Passwords/ForgotPassword.jsx
+++ b/client/src/Passwords/ForgotPassword.jsx
@@ -1,25 +1,38 @@
-import { useState } from 'react';
 import { useNavigate, Link } from 'react-router';
-import { Box, Button, Container, Group, Stack, TextInput, Title } from '@mantine/core';
+import { Alert, Box, Button, Container, Group, Stack, TextInput, Title } from '@mantine/core';
+import { isEmail, useForm } from '@mantine/form';
+import { useMutation } from '@tanstack/react-query';
 import { Head } from '@unhead/react';
 
 import Api from '../Api';
+import ValidationError from '../ValidationError';
 
 function ForgotPassword () {
   const navigate = useNavigate();
-  const [email, setEmail] = useState('');
-  const [showError, setShowError] = useState(false);
 
-  function onSubmit (event) {
-    event.preventDefault();
-    setShowError(false);
-    Api.passwords
-      .reset(email)
-      .then(() => {
-        navigate('/login', { state: { flash: 'Please check your email in a few minutes for a reset password link.' } });
-      })
-      .catch(() => setShowError(true));
-  }
+  const form = useForm({
+    initialValues: {
+      email: '',
+    },
+    validate: {
+      email: isEmail('Please enter a valid email address.'),
+    },
+  });
+
+  const onSubmitMutation = useMutation({
+    mutationFn: (values) => Api.passwords.reset(values.email),
+    onSuccess: () => navigate('/login', { state: { flash: 'Please check your email in a few minutes for a reset password link.' } }),
+    onError: (error) => {
+      if (error instanceof ValidationError) {
+        form.setErrors(error.data);
+      } else {
+        form.setErrors({
+          email: 'Email not found.',
+        });
+      }
+      window.scrollTo(0, 0);
+    },
+  });
 
   return (
     <>
@@ -28,17 +41,15 @@ function ForgotPassword () {
       </Head>
       <Container>
         <Title mb='md'>Forgot your password?</Title>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
           <Stack w={{ base: '100%', xs: 320 }}>
+            {form.errors.global && <Alert color='red'>{form.errors.global}</Alert>}
             <Box>Enter the email address you registered to receive a reset password link.</Box>
             <TextInput
+              {...form.getInputProps('email')}
+              key='email'
               label='Email'
               type='email'
-              id='email'
-              name='email'
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              error={showError ? 'Email not found.' : ''}
             />
             <Group>
               <Button type='submit'>Submit</Button>

From 32f0f5947bf8e769eaf95867bb46ef0bcc86b584 Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Tue, 14 Oct 2025 15:48:22 -0700
Subject: [PATCH 05/11] Refactor reset password form

---
 client/src/Api.js                      |  5 ++-
 client/src/Passwords/ResetPassword.jsx | 46 ++++++++++++++++----------
 client/src/UnexpectedError.js          |  3 +-
 3 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/client/src/Api.js b/client/src/Api.js
index 7fc2093..d817820 100644
--- a/client/src/Api.js
+++ b/client/src/Api.js
@@ -1,7 +1,6 @@
 import axios from 'axios';
 
 import { StatusCodes } from 'http-status-codes';
-import UnexpectedError from './UnexpectedError';
 import ValidationError from './ValidationError';
 
 const instance = axios.create({
@@ -51,7 +50,7 @@ function handleValidationError (error) {
   if (error.response?.status === StatusCodes.UNPROCESSABLE_ENTITY) {
     throw new ValidationError(error.response.data);
   } else {
-    throw new UnexpectedError();
+    throw error;
   }
 }
 
@@ -105,7 +104,7 @@ const Api = {
       return instance.get(`/api/passwords/${token}`);
     },
     update (token, password) {
-      return instance.patch(`/api/passwords/${token}`, { password });
+      return instance.patch(`/api/passwords/${token}`, { password }).catch(handleValidationError);
     },
   },
   users: {
diff --git a/client/src/Passwords/ResetPassword.jsx b/client/src/Passwords/ResetPassword.jsx
index 1d178c9..12e5372 100644
--- a/client/src/Passwords/ResetPassword.jsx
+++ b/client/src/Passwords/ResetPassword.jsx
@@ -1,27 +1,42 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams, Link } from 'react-router';
 import { Alert, Box, Button, Container, Group, Stack, TextInput, Title } from '@mantine/core';
+import { hasLength, useForm } from '@mantine/form';
+import { useMutation } from '@tanstack/react-query';
 import { Head } from '@unhead/react';
 
 import Api from '../Api';
+import ValidationError from '../ValidationError';
 
 function ResetPassword () {
   const navigate = useNavigate();
   const { token } = useParams();
-  const [password, setPassword] = useState('');
-  const [showError, setShowError] = useState(false);
   const [showExpired, setShowExpired] = useState(false);
   const [showInvalid, setShowInvalid] = useState(false);
 
-  function onSubmit (event) {
-    event.preventDefault();
-    setShowError(false);
-    setShowInvalid(false);
-    Api.passwords
-      .update(token, password)
-      .then(() => navigate('/login', { state: { flash: 'Your new password has been saved.' } }))
-      .catch(() => setShowError(true));
-  }
+  const form = useForm({
+    initialValues: {
+      password: '',
+    },
+    validate: {
+      password: hasLength({ min: 8 }, 'Passwords must be at least 8 characters.'),
+    },
+  });
+
+  const onSubmitMutation = useMutation({
+    mutationFn: (values) => Api.passwords.update(token, values.password),
+    onSuccess: () => navigate('/login', { state: { flash: 'Your new password has been saved.' } }),
+    onError: (error) => {
+      if (error instanceof ValidationError) {
+        form.setErrors(error.data);
+      } else if (error?.response?.status === 404) {
+        setShowInvalid(true);
+      } else if (error?.response?.status === 410) {
+        setShowExpired(true);
+      }
+      window.scrollTo(0, 0);
+    },
+  });
 
   useEffect(
     function () {
@@ -48,7 +63,7 @@ function ResetPassword () {
       </Head>
       <Container>
         <Title mb='md'>Reset your password</Title>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
           <Stack w={{ base: '100%', xs: 320 }}>
             {showInvalid && (
               <Alert color='red'>
@@ -66,13 +81,10 @@ function ResetPassword () {
               <>
                 <Box>Enter a new password for your account.</Box>
                 <TextInput
+                  {...form.getInputProps('password')}
+                  key='password'
                   label='New password'
                   type='password'
-                  id='password'
-                  name='password'
-                  onChange={(e) => setPassword(e.target.value)}
-                  value={password}
-                  error={!!showError && 'Minimum eight characters, at least one letter and one number.'}
                 />
                 <Group>
                   <Button type='submit'>
diff --git a/client/src/UnexpectedError.js b/client/src/UnexpectedError.js
index 3a763c5..146ad5c 100644
--- a/client/src/UnexpectedError.js
+++ b/client/src/UnexpectedError.js
@@ -1,6 +1,7 @@
 class UnexpectedError extends Error {
-  constructor () {
+  constructor (error) {
     super('An unexpected error has occurred. Please try again.');
+    this.error = error;
   }
 }
 

From b5c49d6b8013b8c1c2993818fca01398db02366a Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Tue, 21 Oct 2025 14:48:19 -0700
Subject: [PATCH 06/11] Starting rewrite of user form

---
 client/src/Users/UserForm.jsx | 138 ++---
 package-lock.json             | 995 ++++++++++++++++++++++++++++++++++
 2 files changed, 1055 insertions(+), 78 deletions(-)

diff --git a/client/src/Users/UserForm.jsx b/client/src/Users/UserForm.jsx
index bbde07f..3ae757c 100644
--- a/client/src/Users/UserForm.jsx
+++ b/client/src/Users/UserForm.jsx
@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router';
-import { StatusCodes } from 'http-status-codes';
 import { Alert, Button, Checkbox, Container, Group, Stack, TextInput, Title } from '@mantine/core';
+import { hasLength, isEmail, isNotEmpty, useForm } from '@mantine/form';
+import { useMutation } from '@tanstack/react-query';
 import { Head } from '@unhead/react';
 
 import Api from '../Api';
 import { useAuthContext } from '../AuthContext';
 import PhotoInput from '../Components/PhotoInput';
-import UnexpectedError from '../UnexpectedError';
 import ValidationError from '../ValidationError';
 
 function UserForm () {
@@ -16,60 +16,59 @@ function UserForm () {
   const params = useParams();
   const userId = params.userId ?? authContext.user.id;
 
-  const [user, setUser] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    password: '',
-    picture: '',
-    isAdmin: false,
+  const form = useForm({
+    mode: 'uncontrolled',
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+      picture: '',
+      isAdmin: false,
+    },
+    validate: {
+      firstName: isNotEmpty('First name is required.'),
+      lastName: isNotEmpty('Last name is required.'),
+      email: isEmail('Please enter a valid email address.'),
+      password: (value) => value ? hasLength({ min: 8 }, 'Passwords must be at least 8 characters.') : null,
+    },
+  });
+
+  const onSubmitMutation = useMutation({
+    mutationFn: (values) => Api.users.update(userId, values),
+    onMutate: () => {
+      setSuccess(false);
+    },
+    onSuccess: (response) => {
+      if (userId === authContext.user.id) {
+        authContext.setUser(response.data);
+      }
+      setSuccess(true);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    },
+    onError: (error) => {
+      if (error instanceof ValidationError) {
+        form.setErrors(error.data);
+      } else {
+        form.setErrors({
+          global: error.toString(),
+        });
+      }
+    },
   });
-  const [isUploading, setUploading] = useState(false);
-  const [error, setError] = useState(null);
   const [success, setSuccess] = useState(false);
 
   useEffect(() => {
     if (userId) {
-      Api.users.get(userId).then((response) =>
-        setUser({
+      Api.users.get(userId).then((response) => {
+        form.setValues({
           ...response.data,
           password: '',
-        })
-      );
+        });
+      });
     }
   }, [userId]);
 
-  function onChange (event) {
-    const newUser = { ...user };
-    newUser[event.target.name] = event.target.value;
-    setUser(newUser);
-  }
-
-  function onToggle (event) {
-    const newUser = { ...user };
-    newUser[event.target.name] = event.target.checked;
-    setUser(newUser);
-  }
-
-  async function onSubmit (event) {
-    event.preventDefault();
-    setError(null);
-    setSuccess(false);
-    try {
-      const response = await Api.users.update(user.id, user);
-      if (user.id === authContext.user.id) {
-        authContext.setUser(response.data);
-      }
-      setSuccess(true);
-    } catch (error) {
-      if (error.response?.status === StatusCodes.UNPROCESSABLE_ENTITY) {
-        setError(new ValidationError(error.response.data));
-      } else {
-        setError(new UnexpectedError());
-      }
-    }
-  }
-
   return (
     <>
       <Head>
@@ -77,12 +76,12 @@ function UserForm () {
       </Head>
       <Container>
         <Title mb='md'>My Account</Title>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
           <Stack w={{ base: '100%', xs: 320 }}>
             {location.state?.flash && <Alert>{location.state?.flash}</Alert>}
-            {error && error.message && <Alert color='red'>{error.message}</Alert>}
+            {form.errors?.global && <Alert color='red'>{form.errors.global}</Alert>}
             {success && <Alert>Your account has been updated!</Alert>}
-            <PhotoInput
+            {/* <PhotoInput
               label='Picture'
               id='picture'
               name='picture'
@@ -91,55 +90,38 @@ function UserForm () {
               onChange={onChange}
               onUploading={setUploading}
               error={error?.errorMessagesHTMLFor?.('picture')}
-            />
+            /> */}
             <TextInput
+              {...form.getInputProps('firstName')}
+              key={form.key('firstName')}
               label='First name'
-              type='text'
-              id='firstName'
-              name='firstName'
-              onChange={onChange}
-              value={user.firstName}
-              error={error?.errorMessagesHTMLFor?.('firstName')}
             />
             <TextInput
+              {...form.getInputProps('lastName')}
+              key={form.key('lastName')}
               label='Last name'
-              type='text'
-              id='lastName'
-              name='lastName'
-              onChange={onChange}
-              value={user.lastName}
-              error={error?.errorMessagesHTMLFor?.('lastName')}
             />
             <TextInput
+              {...form.getInputProps('email')}
+              key={form.key('email')}
               label='Email'
               type='email'
-              id='email'
-              name='email'
-              onChange={onChange}
-              value={user.email}
-              error={error?.errorMessagesHTMLFor?.('email')}
             />
             <TextInput
+              {...form.getInputProps('password')}
+              key={form.key('password')}
               label='Password'
               type='password'
-              id='password'
-              name='password'
-              onChange={onChange}
-              value={user.password}
-              error={error?.errorMessagesHTMLFor?.('password')}
             />
             {authContext.user.isAdmin && (
               <Checkbox
+                {...form.getInputProps('isAdmin', { type: 'checkbox' })}
+                key={form.key('isAdmin')}
                 label='Is an Administrator?'
-                id='isAdmin'
-                name='isAdmin'
-                onChange={onToggle}
-                checked={user.isAdmin}
-                error={error?.errorMessagesHTMLFor?.('isAdmin')}
               />
             )}
             <Group>
-              <Button disabled={isUploading} type='submit'>Submit</Button>
+              <Button disabled={onSubmitMutation.isPending} type='submit'>Submit</Button>
             </Group>
           </Stack>
         </form>
diff --git a/package-lock.json b/package-lock.json
index d4d425b..dd23dc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12125,6 +12125,32 @@
         "pm2-sysmonit": "^1.2.8"
       }
     },
+    "node_modules/pm2/node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "extraneous": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/pm2/node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/pm2/node_modules/@pm2/agent": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@pm2/agent/-/agent-2.1.1.tgz",
@@ -12348,6 +12374,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/pm2/node_modules/ansi-regex": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.0.tgz",
+      "integrity": "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
     "node_modules/pm2/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -12408,6 +12446,12 @@
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
       "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA=="
     },
+    "node_modules/pm2/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "extraneous": true
+    },
     "node_modules/pm2/node_modules/basic-ftp": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz",
@@ -12443,6 +12487,15 @@
       "resolved": "https://registry.npmjs.org/bodec/-/bodec-0.1.0.tgz",
       "integrity": "sha512-Ylo+MAo5BDUq1KA3f3R/MFhh+g8cnHmo8bz3YPGhI1znrMaf77ol1sfvYJzsw3nTE+Y2GryfDxBaR+AqpAkEHQ=="
     },
+    "node_modules/pm2/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "extraneous": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/pm2/node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
@@ -12454,11 +12507,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/pm2/node_modules/browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
+      "extraneous": true
+    },
     "node_modules/pm2/node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
+    "node_modules/pm2/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pm2/node_modules/chalk": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
@@ -12510,6 +12581,78 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/pm2/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "extraneous": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/pm2/node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "extraneous": true
+    },
+    "node_modules/pm2/node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "extraneous": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "extraneous": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "extraneous": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/pm2/node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -12536,6 +12679,20 @@
       "resolved": "https://registry.npmjs.org/croner/-/croner-4.1.97.tgz",
       "integrity": "sha512-/f6gpQuxDaqXu+1kwQYSckUglPaOrHdbIlBAu0YuW8/Cdb45XwXYNUBXg3r/9Mo6n540Kn/smKcZWko5x99KrQ=="
     },
+    "node_modules/pm2/node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "extraneous": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/pm2/node_modules/culvert": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/culvert/-/culvert-0.1.2.tgz",
@@ -12570,6 +12727,18 @@
         }
       }
     },
+    "node_modules/pm2/node_modules/decamelize": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz",
+      "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pm2/node_modules/degenerator": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
@@ -12583,6 +12752,27 @@
         "node": ">= 14"
       }
     },
+    "node_modules/pm2/node_modules/diff": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
+      "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/pm2/node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "extraneous": true
+    },
+    "node_modules/pm2/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "extraneous": true
+    },
     "node_modules/pm2/node_modules/enquirer": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
@@ -12594,6 +12784,15 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/pm2/node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pm2/node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -12687,6 +12886,31 @@
         "node": ">=8"
       }
     },
+    "node_modules/pm2/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "extraneous": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pm2/node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "extraneous": true,
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
     "node_modules/pm2/node_modules/follow-redirects": {
       "version": "1.15.11",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
@@ -12706,6 +12930,34 @@
         }
       }
     },
+    "node_modules/pm2/node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "extraneous": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/pm2/node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/pm2/node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -12727,6 +12979,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/pm2/node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "extraneous": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/pm2/node_modules/get-uri": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.5.tgz",
@@ -12750,6 +13011,26 @@
       "resolved": "https://registry.npmjs.org/git-sha1/-/git-sha1-0.1.2.tgz",
       "integrity": "sha512-2e/nZezdVlyCopOCYHeW0onkbZg7xP1Ad6pndPy1rCygeRykefUS6r7oA5cJRGEFvseiaz5a/qUHFVX1dd6Isg=="
     },
+    "node_modules/pm2/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "extraneous": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/pm2/node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -12780,6 +13061,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/pm2/node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "extraneous": true,
+      "bin": {
+        "he": "bin/he"
+      }
+    },
     "node_modules/pm2/node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -12861,6 +13151,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pm2/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pm2/node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -12880,6 +13179,48 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/pm2/node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pm2/node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "extraneous": true
+    },
+    "node_modules/pm2/node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "extraneous": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/pm2/node_modules/js-git": {
       "version": "0.7.8",
       "resolved": "https://registry.npmjs.org/js-git/-/js-git-0.7.8.tgz",
@@ -12908,11 +13249,58 @@
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
       "optional": true
     },
+    "node_modules/pm2/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "extraneous": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pm2/node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/pm2/node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "extraneous": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pm2/node_modules/log-symbols/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "extraneous": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/pm2/node_modules/lru-cache": {
       "version": "7.18.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
@@ -12921,6 +13309,30 @@
         "node": ">=12"
       }
     },
+    "node_modules/pm2/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "extraneous": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/pm2/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/pm2/node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -12932,6 +13344,84 @@
         "node": ">=10"
       }
     },
+    "node_modules/pm2/node_modules/mocha": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-11.7.1.tgz",
+      "integrity": "sha512-5EK+Cty6KheMS/YLPPMJC64g5V61gIR25KsRItHw6x4hEKT6Njp1n9LOlH4gpevuwMVS66SXaBBpg+RWZkza4A==",
+      "extraneous": true,
+      "dependencies": {
+        "browser-stdout": "^1.3.1",
+        "chokidar": "^4.0.1",
+        "debug": "^4.3.5",
+        "diff": "^7.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-up": "^5.0.0",
+        "glob": "^10.4.5",
+        "he": "^1.2.0",
+        "js-yaml": "^4.1.0",
+        "log-symbols": "^4.1.0",
+        "minimatch": "^9.0.5",
+        "ms": "^2.1.3",
+        "picocolors": "^1.1.1",
+        "serialize-javascript": "^6.0.2",
+        "strip-json-comments": "^3.1.1",
+        "supports-color": "^8.1.1",
+        "workerpool": "^9.2.0",
+        "yargs": "^17.7.2",
+        "yargs-parser": "^21.1.1",
+        "yargs-unparser": "^2.0.0"
+      },
+      "bin": {
+        "_mocha": "bin/_mocha",
+        "mocha": "bin/mocha.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/pm2/node_modules/mocha/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "extraneous": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/pm2/node_modules/mocha/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "extraneous": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/pm2/node_modules/mocha/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "extraneous": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/pm2/node_modules/module-details-from-path": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/module-details-from-path/-/module-details-from-path-1.0.4.tgz",
@@ -12987,6 +13477,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pm2/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "extraneous": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pm2/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "extraneous": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pm2/node_modules/pac-proxy-agent": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.2.0.tgz",
@@ -13017,16 +13537,68 @@
         "node": ">= 14"
       }
     },
+    "node_modules/pm2/node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "extraneous": true
+    },
     "node_modules/pm2/node_modules/pako": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
       "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA=="
     },
+    "node_modules/pm2/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pm2/node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
+    "node_modules/pm2/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "extraneous": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/pm2/node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "extraneous": true
+    },
+    "node_modules/pm2/node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "extraneous": true
+    },
     "node_modules/pm2/node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -13150,6 +13722,15 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/pm2/node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "extraneous": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
     "node_modules/pm2/node_modules/read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -13172,6 +13753,15 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/pm2/node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pm2/node_modules/require-in-the-middle": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/require-in-the-middle/-/require-in-the-middle-5.2.0.tgz",
@@ -13263,11 +13853,95 @@
         "node": ">=10"
       }
     },
+    "node_modules/pm2/node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "extraneous": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/pm2/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "extraneous": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pm2/node_modules/shimmer": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/shimmer/-/shimmer-1.2.1.tgz",
       "integrity": "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw=="
     },
+    "node_modules/pm2/node_modules/should": {
+      "version": "13.2.3",
+      "resolved": "https://registry.npmjs.org/should/-/should-13.2.3.tgz",
+      "integrity": "sha512-ggLesLtu2xp+ZxI+ysJTmNjh2U0TsC+rQ/pfED9bUZZ4DKefP27D+7YJVVTvKsmjLpIi9jAa7itwDGkDDmt1GQ==",
+      "extraneous": true,
+      "dependencies": {
+        "should-equal": "^2.0.0",
+        "should-format": "^3.0.3",
+        "should-type": "^1.4.0",
+        "should-type-adaptors": "^1.0.1",
+        "should-util": "^1.0.0"
+      }
+    },
+    "node_modules/pm2/node_modules/should-equal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/should-equal/-/should-equal-2.0.0.tgz",
+      "integrity": "sha512-ZP36TMrK9euEuWQYBig9W55WPC7uo37qzAEmbjHz4gfyuXrEUgF8cUvQVO+w+d3OMfPvSRQJ22lSm8MQJ43LTA==",
+      "extraneous": true,
+      "dependencies": {
+        "should-type": "^1.4.0"
+      }
+    },
+    "node_modules/pm2/node_modules/should-format": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/should-format/-/should-format-3.0.3.tgz",
+      "integrity": "sha512-hZ58adtulAk0gKtua7QxevgUaXTTXxIi8t41L3zo9AHvjXO1/7sdLECuHeIN2SRtYXpNkmhoUP2pdeWgricQ+Q==",
+      "extraneous": true,
+      "dependencies": {
+        "should-type": "^1.3.0",
+        "should-type-adaptors": "^1.0.1"
+      }
+    },
+    "node_modules/pm2/node_modules/should-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/should-type/-/should-type-1.4.0.tgz",
+      "integrity": "sha512-MdAsTu3n25yDbIe1NeN69G4n6mUnJGtSJHygX3+oN0ZbO3DTiATnf7XnYJdGT42JCXurTb1JI0qOBR65shvhPQ==",
+      "extraneous": true
+    },
+    "node_modules/pm2/node_modules/should-type-adaptors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/should-type-adaptors/-/should-type-adaptors-1.1.0.tgz",
+      "integrity": "sha512-JA4hdoLnN+kebEp2Vs8eBe9g7uy0zbRo+RMcU0EsNy+R+k049Ki+N5tT5Jagst2g7EAja+euFuoXFCa8vIklfA==",
+      "extraneous": true,
+      "dependencies": {
+        "should-type": "^1.3.0",
+        "should-util": "^1.0.0"
+      }
+    },
+    "node_modules/pm2/node_modules/should-util": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/should-util/-/should-util-1.0.1.tgz",
+      "integrity": "sha512-oXF8tfxx5cDk8r2kYqlkUJzZpDBqVY/II2WhvU0n9Y3XYvAYRmeaf1PvvIvTgPnv4KJ+ES5M0PyDq5Jp+Ygy2g==",
+      "extraneous": true
+    },
     "node_modules/pm2/node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -13330,6 +14004,114 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
       "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
     },
+    "node_modules/pm2/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "extraneous": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pm2/node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "extraneous": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "extraneous": true
+    },
+    "node_modules/pm2/node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "extraneous": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "extraneous": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/pm2/node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "extraneous": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pm2/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -13433,6 +14215,115 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/pm2/node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "extraneous": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/pm2/node_modules/workerpool": {
+      "version": "9.3.3",
+      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-9.3.3.tgz",
+      "integrity": "sha512-slxCaKbYjEdFT/o2rH9xS1hf4uRDch1w7Uo+apxhZ+sf/1d9e0ZVkn42kPNGP2dgjIx6YFvSevj0zHvbWe2jdw==",
+      "extraneous": true
+    },
+    "node_modules/pm2/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "extraneous": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/pm2/node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "extraneous": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/pm2/node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "extraneous": true
+    },
+    "node_modules/pm2/node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "extraneous": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "extraneous": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/pm2/node_modules/ws": {
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
@@ -13453,11 +14344,115 @@
         }
       }
     },
+    "node_modules/pm2/node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/pm2/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/pm2/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "extraneous": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/pm2/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/pm2/node_modules/yargs-unparser": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz",
+      "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==",
+      "extraneous": true,
+      "dependencies": {
+        "camelcase": "^6.0.0",
+        "decamelize": "^4.0.0",
+        "flat": "^5.0.2",
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/pm2/node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "extraneous": true
+    },
+    "node_modules/pm2/node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "extraneous": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "extraneous": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pm2/node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "extraneous": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",

From c38716d43517117bd98b00021053c464360a70fc Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Thu, 23 Oct 2025 12:11:23 -0700
Subject: [PATCH 07/11] Support uncontrolled mode on PhotoInput

---
 client/src/Components/PhotoInput.jsx | 31 +++++++++++++++++++---------
 client/src/Users/UserForm.jsx        | 16 ++++++--------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/client/src/Components/PhotoInput.jsx b/client/src/Components/PhotoInput.jsx
index 6098cda..6a8a9f7 100644
--- a/client/src/Components/PhotoInput.jsx
+++ b/client/src/Components/PhotoInput.jsx
@@ -1,20 +1,31 @@
+import { useEffect } from 'react';
 import { Box, CloseButton, Image, Input, Loader, Text } from '@mantine/core';
+import { useUncontrolled } from '@mantine/hooks';
 import classNames from 'classnames';
 
 import DropzoneUploader from './DropzoneUploader';
 import classes from './PhotoInput.module.css';
 
-function PhotoInput ({ children, description, error, id, label, name, onChange, value, valueUrl }) {
-  function onRemoved () {
-    if (onChange) {
-      onChange({ target: { name, value: '' } });
+function PhotoInput ({ children, description, error, id, label, name, onChange, defaultValue, value, valueUrl }) {
+  const [_value, handleChange] = useUncontrolled({
+    value,
+    defaultValue,
+    finalValue: '',
+    onChange,
+  });
+
+  useEffect(() => {
+    if (!_value) {
+      handleChange(defaultValue);
     }
+  }, [defaultValue]);
+
+  function onRemoved () {
+    handleChange('');
   }
 
   function onUploaded (status) {
-    if (onChange) {
-      onChange({ target: { name, value: status.filename } });
-    }
+    handleChange(status.filename);
   }
 
   return (
@@ -24,7 +35,7 @@ function PhotoInput ({ children, description, error, id, label, name, onChange,
           <DropzoneUploader
             id={id}
             multiple={false}
-            disabled={!!value && value !== ''}
+            disabled={!!_value && _value !== ''}
             onRemoved={onRemoved}
             onUploaded={onUploaded}
           >
@@ -42,14 +53,14 @@ function PhotoInput ({ children, description, error, id, label, name, onChange,
                     <Loader className={classes.spinner} />
                   </Box>
                 ));
-              } else if (statuses.length === 0 && value) {
+              } else if (statuses.length === 0 && _value) {
                 return (
                   <Box className={classes.preview}>
                     <Image src={valueUrl} alt='' />
                     <CloseButton className={classes.remove} onClick={onRemoved} />
                   </Box>
                 );
-              } else if (statuses.length === 0 && !value) {
+              } else if (statuses.length === 0 && !_value) {
                 return children || <Text className='clickable' inherit={false} fz='sm' my='sm'>Drag-and-drop a photo file here, or click here to browse and select a file.</Text>;
               }
             }}
diff --git a/client/src/Users/UserForm.jsx b/client/src/Users/UserForm.jsx
index 3ae757c..d41377c 100644
--- a/client/src/Users/UserForm.jsx
+++ b/client/src/Users/UserForm.jsx
@@ -24,6 +24,7 @@ function UserForm () {
       email: '',
       password: '',
       picture: '',
+      pictureUrl: '',
       isAdmin: false,
     },
     validate: {
@@ -61,7 +62,7 @@ function UserForm () {
   useEffect(() => {
     if (userId) {
       Api.users.get(userId).then((response) => {
-        form.setValues({
+        form.initialize({
           ...response.data,
           password: '',
         });
@@ -81,16 +82,11 @@ function UserForm () {
             {location.state?.flash && <Alert>{location.state?.flash}</Alert>}
             {form.errors?.global && <Alert color='red'>{form.errors.global}</Alert>}
             {success && <Alert>Your account has been updated!</Alert>}
-            {/* <PhotoInput
+            <PhotoInput
+              {...form.getInputProps('picture')}
               label='Picture'
-              id='picture'
-              name='picture'
-              value={user.picture}
-              valueUrl={user.pictureUrl}
-              onChange={onChange}
-              onUploading={setUploading}
-              error={error?.errorMessagesHTMLFor?.('picture')}
-            /> */}
+              valueUrl={form.getValues().pictureUrl}
+            />
             <TextInput
               {...form.getInputProps('firstName')}
               key={form.key('firstName')}

From fc21421255fb34120c045056c74971b63fc0f285 Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Thu, 23 Oct 2025 21:49:13 -0700
Subject: [PATCH 08/11] More form handling refactor, more Mantine and React
 Query

---
 client/.gitignore                            |   1 +
 client/src/Admin/Invites/AdminInviteForm.jsx |  15 +--
 client/src/Api.js                            |  48 +++++--
 client/src/Login.jsx                         |  87 ++++++-------
 client/src/Passwords/ForgotPassword.jsx      |  49 +++----
 client/src/Passwords/ResetPassword.jsx       |  77 +++++------
 client/src/RegistrationForm.jsx              |  14 +-
 client/src/UnexpectedError.js                |   8 --
 client/src/Users/UserForm.jsx                | 127 +++++++++----------
 client/src/ValidationError.js                |  17 ---
 server/routes/api/auth/login.js              |   5 +-
 11 files changed, 204 insertions(+), 244 deletions(-)
 delete mode 100644 client/src/UnexpectedError.js
 delete mode 100644 client/src/ValidationError.js

diff --git a/client/.gitignore b/client/.gitignore
index a547bf3..f03d78c 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+.vite
 node_modules
 dist
 dist-ssr
diff --git a/client/src/Admin/Invites/AdminInviteForm.jsx b/client/src/Admin/Invites/AdminInviteForm.jsx
index 872e91d..12f106d 100644
--- a/client/src/Admin/Invites/AdminInviteForm.jsx
+++ b/client/src/Admin/Invites/AdminInviteForm.jsx
@@ -5,7 +5,6 @@ import { useMutation } from '@tanstack/react-query';
 import { Head } from '@unhead/react';
 
 import Api from '../../Api';
-import ValidationError from '../../ValidationError';
 
 function AdminInviteForm () {
   const navigate = useNavigate();
@@ -26,16 +25,8 @@ function AdminInviteForm () {
   const onSubmitMutation = useMutation({
     mutationFn: (values) => Api.invites.create(values),
     onSuccess: () => navigate('/admin/invites', { flash: 'Invite sent!' }),
-    onError: (error) => {
-      if (error instanceof ValidationError) {
-        form.setErrors(error.data);
-      } else {
-        form.setErrors({
-          global: error.toString(),
-        });
-      }
-      window.scrollTo(0, 0);
-    },
+    onError: (errors) => form.setErrors(errors),
+    onSettled: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
   });
 
   return (
@@ -48,7 +39,7 @@ function AdminInviteForm () {
         <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
           <Fieldset variant='unstyled' disabled={onSubmitMutation.isPending}>
             <Stack w={{ base: '100%', xs: 320 }}>
-              {form.errors.global && <Alert color='red'>{form.errors.global}</Alert>}
+              {form.errors._form && <Alert color='red'>{form.errors._form}</Alert>}
               <TextInput
                 {...form.getInputProps('firstName')}
                 key='firstName'
diff --git a/client/src/Api.js b/client/src/Api.js
index d817820..eaf99fd 100644
--- a/client/src/Api.js
+++ b/client/src/Api.js
@@ -1,7 +1,9 @@
+/* eslint-disable no-throw-literal */
+
 import axios from 'axios';
 
 import { StatusCodes } from 'http-status-codes';
-import ValidationError from './ValidationError';
+import { capitalize } from 'inflection';
 
 const instance = axios.create({
   headers: {
@@ -46,12 +48,20 @@ function calculateLastPage (response, page) {
   return newLastPage;
 }
 
-function handleValidationError (error) {
+function handleError (error) {
+  const errors = {};
   if (error.response?.status === StatusCodes.UNPROCESSABLE_ENTITY) {
-    throw new ValidationError(error.response.data);
+    for (const err of error.response.data.errors) {
+      errors[err.path] ||= new Set();
+      errors[err.path].add(err.message);
+    }
+    for (const key of Object.keys(errors)) {
+      errors[key] = capitalize([...errors[key]].join(', '));
+    }
   } else {
-    throw error;
+    errors._form = error.message;
   }
+  throw errors;
 }
 
 const Api = {
@@ -67,13 +77,24 @@ const Api = {
   },
   auth: {
     login (email, password) {
-      return instance.post('/api/auth/login', { email, password });
+      return instance.post('/api/auth/login', { email, password })
+        .catch((error) => {
+          switch (error.response?.status) {
+            case StatusCodes.NOT_FOUND:
+            case StatusCodes.UNPROCESSABLE_ENTITY:
+              throw { _form: 'Invalid email and/or password' };
+            case StatusCodes.FORBIDDEN:
+              throw { _form: 'Your account has been deactivated.' };
+            default:
+              throw { _form: error.message };
+          }
+        });
     },
     logout () {
       return instance.delete('/api/auth/logout');
     },
     register (data) {
-      return instance.post('/api/auth/register', data).catch(handleValidationError);
+      return instance.post('/api/auth/register', data).catch(handleError);
     },
   },
   invites: {
@@ -81,7 +102,7 @@ const Api = {
       return instance.get('/api/invites', { params: { page } });
     },
     create (data) {
-      return instance.post('/api/invites', data).catch(handleValidationError);
+      return instance.post('/api/invites', data).catch(handleError);
     },
     get (id) {
       return instance.get(`/api/invites/${id}`);
@@ -98,13 +119,20 @@ const Api = {
   },
   passwords: {
     reset (email) {
-      return instance.post('/api/passwords', { email });
+      return instance.post('/api/passwords', { email }).catch((error) => {
+        switch (error.response?.status) {
+          case StatusCodes.NOT_FOUND:
+            throw { email: 'Email not found.' };
+          default:
+            throw { _form: error.message };
+        }
+      });
     },
     get (token) {
       return instance.get(`/api/passwords/${token}`);
     },
     update (token, password) {
-      return instance.patch(`/api/passwords/${token}`, { password }).catch(handleValidationError);
+      return instance.patch(`/api/passwords/${token}`, { password }).catch(handleError);
     },
   },
   users: {
@@ -118,7 +146,7 @@ const Api = {
       return instance.get(`/api/users/${id}`);
     },
     update (id, data) {
-      return instance.patch(`/api/users/${id}`, data);
+      return instance.patch(`/api/users/${id}`, data).catch(handleError);
     },
   },
 };
diff --git a/client/src/Login.jsx b/client/src/Login.jsx
index 32839c1..13521dd 100644
--- a/client/src/Login.jsx
+++ b/client/src/Login.jsx
@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { useNavigate, Link, useLocation, useSearchParams } from 'react-router';
-import { StatusCodes } from 'http-status-codes';
-import { Alert, Box, Button, Container, Group, Stack, TextInput, Title } from '@mantine/core';
+import { Alert, Box, Button, Container, Fieldset, Group, Stack, TextInput, Title } from '@mantine/core';
 import { hasLength, isEmail, useForm } from '@mantine/form';
+import { useMutation } from '@tanstack/react-query';
 import { Head } from '@unhead/react';
 
 import Api from './Api';
@@ -36,21 +36,12 @@ function Login () {
     },
   });
 
-  async function onSubmit (values) {
-    try {
-      const response = await Api.auth.login(values.email, values.password);
-      authContext.setUser(response.data);
-      navigate(from, { replace: true });
-    } catch (error) {
-      if (error.response?.status === StatusCodes.UNPROCESSABLE_ENTITY || error.response?.status === StatusCodes.NOT_FOUND) {
-        form.setErrors({
-          global: 'Invalid email and/or password',
-        });
-      } else {
-        console.log(error);
-      }
-    }
-  }
+  const onSubmitMutation = useMutation({
+    mutationFn: ({ email, password }) => Api.auth.login(email, password),
+    onSuccess: () => navigate(from, { replace: true }),
+    onError: (errors) => form.setErrors(errors),
+    onSettled: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
+  });
 
   return (
     <>
@@ -59,36 +50,38 @@ function Login () {
       </Head>
       <Container>
         <Title mb='md'>Log in</Title>
-        <form onSubmit={form.onSubmit(onSubmit)}>
-          <Stack w={{ base: '100%', xs: 320 }}>
-            {location.state?.flash && <Alert>{location.state?.flash}</Alert>}
-            {form.errors.global && <Alert color='red'>{form.errors.global}</Alert>}
-            <TextInput
-              {...form.getInputProps('email')}
-              key={form.key('email')}
-              label='Email'
-            />
-            <TextInput
-              {...form.getInputProps('password')}
-              key={form.key('password')}
-              label='Password'
-              type='password'
-            />
-            <Group>
-              <Button type='submit'>
-                Submit
-              </Button>
-            </Group>
-            <Box>
-              <Link to='/passwords/forgot'>Forgot your password?</Link>
-              {staticContext?.env?.VITE_FEATURE_REGISTRATION === 'true' && (
-                <>
-                  <br />
-                  <Link to='/register'>Need an account?</Link>
-                </>
-              )}
-            </Box>
-          </Stack>
+        <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
+          <Fieldset disabled={onSubmitMutation.isPending} variant='unstyled'>
+            <Stack w={{ base: '100%', xs: 320 }}>
+              {location.state?.flash && <Alert>{location.state?.flash}</Alert>}
+              {form.errors._form && <Alert color='red'>{form.errors._form}</Alert>}
+              <TextInput
+                {...form.getInputProps('email')}
+                key={form.key('email')}
+                label='Email'
+              />
+              <TextInput
+                {...form.getInputProps('password')}
+                key={form.key('password')}
+                label='Password'
+                type='password'
+              />
+              <Group>
+                <Button type='submit'>
+                  Submit
+                </Button>
+              </Group>
+              <Box>
+                <Link to='/passwords/forgot'>Forgot your password?</Link>
+                {staticContext?.env?.VITE_FEATURE_REGISTRATION === 'true' && (
+                  <>
+                    <br />
+                    <Link to='/register'>Need an account?</Link>
+                  </>
+                )}
+              </Box>
+            </Stack>
+          </Fieldset>
         </form>
       </Container>
     </>
diff --git a/client/src/Passwords/ForgotPassword.jsx b/client/src/Passwords/ForgotPassword.jsx
index 3b65bf4..6fc28b0 100644
--- a/client/src/Passwords/ForgotPassword.jsx
+++ b/client/src/Passwords/ForgotPassword.jsx
@@ -1,11 +1,10 @@
 import { useNavigate, Link } from 'react-router';
-import { Alert, Box, Button, Container, Group, Stack, TextInput, Title } from '@mantine/core';
+import { Alert, Box, Button, Container, Fieldset, Group, Stack, TextInput, Title } from '@mantine/core';
 import { isEmail, useForm } from '@mantine/form';
 import { useMutation } from '@tanstack/react-query';
 import { Head } from '@unhead/react';
 
 import Api from '../Api';
-import ValidationError from '../ValidationError';
 
 function ForgotPassword () {
   const navigate = useNavigate();
@@ -22,16 +21,8 @@ function ForgotPassword () {
   const onSubmitMutation = useMutation({
     mutationFn: (values) => Api.passwords.reset(values.email),
     onSuccess: () => navigate('/login', { state: { flash: 'Please check your email in a few minutes for a reset password link.' } }),
-    onError: (error) => {
-      if (error instanceof ValidationError) {
-        form.setErrors(error.data);
-      } else {
-        form.setErrors({
-          email: 'Email not found.',
-        });
-      }
-      window.scrollTo(0, 0);
-    },
+    onError: (errors) => form.setErrors(errors),
+    onSettled: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
   });
 
   return (
@@ -42,22 +33,24 @@ function ForgotPassword () {
       <Container>
         <Title mb='md'>Forgot your password?</Title>
         <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
-          <Stack w={{ base: '100%', xs: 320 }}>
-            {form.errors.global && <Alert color='red'>{form.errors.global}</Alert>}
-            <Box>Enter the email address you registered to receive a reset password link.</Box>
-            <TextInput
-              {...form.getInputProps('email')}
-              key='email'
-              label='Email'
-              type='email'
-            />
-            <Group>
-              <Button type='submit'>Submit</Button>
-            </Group>
-            <Box>
-              <Link to='/login'>Back to login...</Link>
-            </Box>
-          </Stack>
+          <Fieldset disabled={onSubmitMutation.isPending} variant='unstyled'>
+            <Stack w={{ base: '100%', xs: 320 }}>
+              {form.errors._form && <Alert color='red'>{form.errors._form}</Alert>}
+              <Box>Enter the email address you registered to receive a reset password link.</Box>
+              <TextInput
+                {...form.getInputProps('email')}
+                key='email'
+                label='Email'
+                type='email'
+              />
+              <Group>
+                <Button type='submit'>Submit</Button>
+              </Group>
+              <Box>
+                <Link to='/login'>Back to login...</Link>
+              </Box>
+            </Stack>
+          </Fieldset>
         </form>
       </Container>
     </>
diff --git a/client/src/Passwords/ResetPassword.jsx b/client/src/Passwords/ResetPassword.jsx
index 12e5372..9afb9bb 100644
--- a/client/src/Passwords/ResetPassword.jsx
+++ b/client/src/Passwords/ResetPassword.jsx
@@ -1,12 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams, Link } from 'react-router';
-import { Alert, Box, Button, Container, Group, Stack, TextInput, Title } from '@mantine/core';
+import { Alert, Box, Button, Container, Fieldset, Group, Stack, TextInput, Title } from '@mantine/core';
 import { hasLength, useForm } from '@mantine/form';
 import { useMutation } from '@tanstack/react-query';
 import { Head } from '@unhead/react';
 
 import Api from '../Api';
-import ValidationError from '../ValidationError';
 
 function ResetPassword () {
   const navigate = useNavigate();
@@ -26,16 +25,8 @@ function ResetPassword () {
   const onSubmitMutation = useMutation({
     mutationFn: (values) => Api.passwords.update(token, values.password),
     onSuccess: () => navigate('/login', { state: { flash: 'Your new password has been saved.' } }),
-    onError: (error) => {
-      if (error instanceof ValidationError) {
-        form.setErrors(error.data);
-      } else if (error?.response?.status === 404) {
-        setShowInvalid(true);
-      } else if (error?.response?.status === 410) {
-        setShowExpired(true);
-      }
-      window.scrollTo(0, 0);
-    },
+    onError: (errors) => form.setErrors(errors),
+    onSettled: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
   });
 
   useEffect(
@@ -64,36 +55,38 @@ function ResetPassword () {
       <Container>
         <Title mb='md'>Reset your password</Title>
         <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
-          <Stack w={{ base: '100%', xs: 320 }}>
-            {showInvalid && (
-              <Alert color='red'>
-                Sorry, this password reset link is invalid.<br />
-                <Link to='/passwords/forgot'>Request another?</Link>
-              </Alert>
-            )}
-            {showExpired && (
-              <Alert color='red'>
-                Sorry, this password reset link has expired.<br />
-                <Link to='/passwords/forgot'>Request another?</Link>
-              </Alert>
-            )}
-            {!showExpired && !showInvalid && (
-              <>
-                <Box>Enter a new password for your account.</Box>
-                <TextInput
-                  {...form.getInputProps('password')}
-                  key='password'
-                  label='New password'
-                  type='password'
-                />
-                <Group>
-                  <Button type='submit'>
-                    Submit
-                  </Button>
-                </Group>
-              </>
-            )}
-          </Stack>
+          <Fieldset disabled={onSubmitMutation.isPending} variant='unstyled'>
+            <Stack w={{ base: '100%', xs: 320 }}>
+              {showInvalid && (
+                <Alert color='red'>
+                  Sorry, this password reset link is invalid.<br />
+                  <Link to='/passwords/forgot'>Request another?</Link>
+                </Alert>
+              )}
+              {showExpired && (
+                <Alert color='red'>
+                  Sorry, this password reset link has expired.<br />
+                  <Link to='/passwords/forgot'>Request another?</Link>
+                </Alert>
+              )}
+              {!showExpired && !showInvalid && (
+                <>
+                  <Box>Enter a new password for your account.</Box>
+                  <TextInput
+                    {...form.getInputProps('password')}
+                    key='password'
+                    label='New password'
+                    type='password'
+                  />
+                  <Group>
+                    <Button type='submit'>
+                      Submit
+                    </Button>
+                  </Group>
+                </>
+              )}
+            </Stack>
+          </Fieldset>
         </form>
       </Container>
     </>
diff --git a/client/src/RegistrationForm.jsx b/client/src/RegistrationForm.jsx
index 021c3a0..05f2376 100644
--- a/client/src/RegistrationForm.jsx
+++ b/client/src/RegistrationForm.jsx
@@ -1,6 +1,5 @@
 import { Alert, Button, Fieldset, Group, Stack, TextInput } from '@mantine/core';
 import { isEmail, isNotEmpty, hasLength, useForm } from '@mantine/form';
-import ValidationError from './ValidationError';
 
 function RegistrationForm ({ onSubmitMutation }) {
   const form = useForm({
@@ -21,15 +20,8 @@ function RegistrationForm ({ onSubmitMutation }) {
 
   function onSubmit (values) {
     onSubmitMutation.mutateAsync(values, {
-      onError: (error) => {
-        if (error instanceof ValidationError) {
-          form.setErrors(error.data);
-        } else {
-          form.setErrors({
-            global: error.toString(),
-          });
-        }
-      },
+      onError: (errors) => form.setErrors(errors),
+      onSettled: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
     });
   }
 
@@ -37,7 +29,7 @@ function RegistrationForm ({ onSubmitMutation }) {
     <form onSubmit={form.onSubmit(onSubmit)}>
       <Fieldset disabled={onSubmitMutation.isPending} variant='unstyled'>
         <Stack w={{ base: '100%', xs: 320 }}>
-          {form.errors.global && <Alert color='red'>{form.errors.global}</Alert>}
+          {form.errors._form && <Alert color='red'>{form.errors._form}</Alert>}
           <TextInput
             {...form.getInputProps('firstName')}
             key={form.key('firstName')}
diff --git a/client/src/UnexpectedError.js b/client/src/UnexpectedError.js
deleted file mode 100644
index 146ad5c..0000000
--- a/client/src/UnexpectedError.js
+++ /dev/null
@@ -1,8 +0,0 @@
-class UnexpectedError extends Error {
-  constructor (error) {
-    super('An unexpected error has occurred. Please try again.');
-    this.error = error;
-  }
-}
-
-export default UnexpectedError;
diff --git a/client/src/Users/UserForm.jsx b/client/src/Users/UserForm.jsx
index d41377c..aca4fac 100644
--- a/client/src/Users/UserForm.jsx
+++ b/client/src/Users/UserForm.jsx
@@ -1,14 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router';
-import { Alert, Button, Checkbox, Container, Group, Stack, TextInput, Title } from '@mantine/core';
+import { Alert, Button, Checkbox, Container, Fieldset, Group, Stack, TextInput, Title } from '@mantine/core';
 import { hasLength, isEmail, isNotEmpty, useForm } from '@mantine/form';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { Head } from '@unhead/react';
 
 import Api from '../Api';
 import { useAuthContext } from '../AuthContext';
 import PhotoInput from '../Components/PhotoInput';
-import ValidationError from '../ValidationError';
 
 function UserForm () {
   const authContext = useAuthContext();
@@ -35,6 +34,21 @@ function UserForm () {
     },
   });
 
+  const { data: response, isLoading } = useQuery({
+    queryKey: ['users', userId],
+    queryFn: () => Api.users.get(userId),
+    enabled: !!userId,
+  });
+
+  useEffect(() => {
+    if (response) {
+      form.initialize({
+        ...response.data,
+        password: '',
+      });
+    }
+  }, [response]);
+
   const onSubmitMutation = useMutation({
     mutationFn: (values) => Api.users.update(userId, values),
     onMutate: () => {
@@ -45,31 +59,12 @@ function UserForm () {
         authContext.setUser(response.data);
       }
       setSuccess(true);
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    },
-    onError: (error) => {
-      if (error instanceof ValidationError) {
-        form.setErrors(error.data);
-      } else {
-        form.setErrors({
-          global: error.toString(),
-        });
-      }
     },
+    onError: (errors) => form.setErrors(errors),
+    onSettled: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
   });
   const [success, setSuccess] = useState(false);
 
-  useEffect(() => {
-    if (userId) {
-      Api.users.get(userId).then((response) => {
-        form.initialize({
-          ...response.data,
-          password: '',
-        });
-      });
-    }
-  }, [userId]);
-
   return (
     <>
       <Head>
@@ -78,48 +73,50 @@ function UserForm () {
       <Container>
         <Title mb='md'>My Account</Title>
         <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
-          <Stack w={{ base: '100%', xs: 320 }}>
-            {location.state?.flash && <Alert>{location.state?.flash}</Alert>}
-            {form.errors?.global && <Alert color='red'>{form.errors.global}</Alert>}
-            {success && <Alert>Your account has been updated!</Alert>}
-            <PhotoInput
-              {...form.getInputProps('picture')}
-              label='Picture'
-              valueUrl={form.getValues().pictureUrl}
-            />
-            <TextInput
-              {...form.getInputProps('firstName')}
-              key={form.key('firstName')}
-              label='First name'
-            />
-            <TextInput
-              {...form.getInputProps('lastName')}
-              key={form.key('lastName')}
-              label='Last name'
-            />
-            <TextInput
-              {...form.getInputProps('email')}
-              key={form.key('email')}
-              label='Email'
-              type='email'
-            />
-            <TextInput
-              {...form.getInputProps('password')}
-              key={form.key('password')}
-              label='Password'
-              type='password'
-            />
-            {authContext.user.isAdmin && (
-              <Checkbox
-                {...form.getInputProps('isAdmin', { type: 'checkbox' })}
-                key={form.key('isAdmin')}
-                label='Is an Administrator?'
+          <Fieldset disabled={isLoading} variant='unstyled'>
+            <Stack w={{ base: '100%', xs: 320 }}>
+              {location.state?.flash && <Alert>{location.state?.flash}</Alert>}
+              {form.errors?._form && <Alert color='red'>{form.errors._form}</Alert>}
+              {success && <Alert>Your account has been updated!</Alert>}
+              <PhotoInput
+                {...form.getInputProps('picture')}
+                label='Picture'
+                valueUrl={form.getValues().pictureUrl}
+              />
+              <TextInput
+                {...form.getInputProps('firstName')}
+                key={form.key('firstName')}
+                label='First name'
+              />
+              <TextInput
+                {...form.getInputProps('lastName')}
+                key={form.key('lastName')}
+                label='Last name'
+              />
+              <TextInput
+                {...form.getInputProps('email')}
+                key={form.key('email')}
+                label='Email'
+                type='email'
+              />
+              <TextInput
+                {...form.getInputProps('password')}
+                key={form.key('password')}
+                label='Password'
+                type='password'
               />
-            )}
-            <Group>
-              <Button disabled={onSubmitMutation.isPending} type='submit'>Submit</Button>
-            </Group>
-          </Stack>
+              {authContext.user.isAdmin && (
+                <Checkbox
+                  {...form.getInputProps('isAdmin', { type: 'checkbox' })}
+                  key={form.key('isAdmin')}
+                  label='Is an Administrator?'
+                />
+              )}
+              <Group>
+                <Button disabled={onSubmitMutation.isPending} type='submit'>Submit</Button>
+              </Group>
+            </Stack>
+          </Fieldset>
         </form>
       </Container>
     </>
diff --git a/client/src/ValidationError.js b/client/src/ValidationError.js
deleted file mode 100644
index a9c4c56..0000000
--- a/client/src/ValidationError.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { capitalize } from 'inflection';
-
-class ValidationError extends Error {
-  constructor (data) {
-    super();
-    this.data = {};
-    for (const error of data.errors) {
-      this.data[error.path] ||= new Set();
-      this.data[error.path].add(error.message);
-    }
-    for (const key of Object.keys(this.data)) {
-      this.data[key] = capitalize([...this.data[key]].join(', '));
-    }
-  }
-}
-
-export default ValidationError;
diff --git a/server/routes/api/auth/login.js b/server/routes/api/auth/login.js
index 14bcc23..a0e67c5 100644
--- a/server/routes/api/auth/login.js
+++ b/server/routes/api/auth/login.js
@@ -39,10 +39,7 @@ export default async function (fastify, opts) {
         return reply.code(StatusCodes.UNPROCESSABLE_ENTITY).send();
       }
       if (!user.isActive) {
-        return reply.status(StatusCodes.FORBIDDEN).send({
-          message:
-          'Your account has been deactivated.',
-        });
+        return reply.code(StatusCodes.FORBIDDEN).send();
       }
       request.session.set('userId', user.id);
       reply.send(user);

From 16a80e7ba1bedfb3bd252f1d93f1620610634434 Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Thu, 23 Oct 2025 21:56:18 -0700
Subject: [PATCH 09/11] More useQuery

---
 client/src/Passwords/ResetPassword.jsx | 35 ++++++++------------------
 1 file changed, 11 insertions(+), 24 deletions(-)

diff --git a/client/src/Passwords/ResetPassword.jsx b/client/src/Passwords/ResetPassword.jsx
index 9afb9bb..b764edc 100644
--- a/client/src/Passwords/ResetPassword.jsx
+++ b/client/src/Passwords/ResetPassword.jsx
@@ -1,17 +1,15 @@
-import { useEffect, useState } from 'react';
 import { useNavigate, useParams, Link } from 'react-router';
 import { Alert, Box, Button, Container, Fieldset, Group, Stack, TextInput, Title } from '@mantine/core';
 import { hasLength, useForm } from '@mantine/form';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { Head } from '@unhead/react';
+import { StatusCodes } from 'http-status-codes';
 
 import Api from '../Api';
 
 function ResetPassword () {
   const navigate = useNavigate();
   const { token } = useParams();
-  const [showExpired, setShowExpired] = useState(false);
-  const [showInvalid, setShowInvalid] = useState(false);
 
   const form = useForm({
     initialValues: {
@@ -29,23 +27,12 @@ function ResetPassword () {
     onSettled: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
   });
 
-  useEffect(
-    function () {
-      if (token) {
-        Api.passwords
-          .get(token)
-          .then(() => {})
-          .catch((error) => {
-            if (error && error.response && error.response.status === 404) {
-              setShowInvalid(true);
-            } else if (error && error.response && error.response.status === 410) {
-              setShowExpired(true);
-            }
-          });
-      }
-    },
-    [token]
-  );
+  const { error, isLoading } = useQuery({
+    queryKey: ['passwords', token],
+    queryFn: () => Api.passwords.get(token),
+    enabled: !!token,
+    retry: false,
+  });
 
   return (
     <>
@@ -57,19 +44,19 @@ function ResetPassword () {
         <form onSubmit={form.onSubmit(onSubmitMutation.mutateAsync)}>
           <Fieldset disabled={onSubmitMutation.isPending} variant='unstyled'>
             <Stack w={{ base: '100%', xs: 320 }}>
-              {showInvalid && (
+              {error?.response?.status === StatusCodes.NOT_FOUND && (
                 <Alert color='red'>
                   Sorry, this password reset link is invalid.<br />
                   <Link to='/passwords/forgot'>Request another?</Link>
                 </Alert>
               )}
-              {showExpired && (
+              {error?.response?.status === StatusCodes.GONE && (
                 <Alert color='red'>
                   Sorry, this password reset link has expired.<br />
                   <Link to='/passwords/forgot'>Request another?</Link>
                 </Alert>
               )}
-              {!showExpired && !showInvalid && (
+              {!isLoading && !error && (
                 <>
                   <Box>Enter a new password for your account.</Box>
                   <TextInput

From 24f5aba1d393b73c689b7b6f144b947d6da8b946 Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Thu, 23 Oct 2025 21:58:37 -0700
Subject: [PATCH 10/11] Tweak

---
 client/src/Users/UserForm.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/Users/UserForm.jsx b/client/src/Users/UserForm.jsx
index aca4fac..c6f1e7d 100644
--- a/client/src/Users/UserForm.jsx
+++ b/client/src/Users/UserForm.jsx
@@ -51,9 +51,7 @@ function UserForm () {
 
   const onSubmitMutation = useMutation({
     mutationFn: (values) => Api.users.update(userId, values),
-    onMutate: () => {
-      setSuccess(false);
-    },
+    onMutate: () => setSuccess(false),
     onSuccess: (response) => {
       if (userId === authContext.user.id) {
         authContext.setUser(response.data);

From 802d31bd2351440f1b8dc76584a5697809242d92 Mon Sep 17 00:00:00 2001
From: Francis Li <mail@francisli.com>
Date: Fri, 24 Oct 2025 09:49:27 -0700
Subject: [PATCH 11/11] Fix test

---
 docs/dokku.md                       | 11 +++++++++++
 server/test/routes/api/auth.test.js |  5 -----
 2 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 docs/dokku.md

diff --git a/docs/dokku.md b/docs/dokku.md
new file mode 100644
index 0000000..5bc39f4
--- /dev/null
+++ b/docs/dokku.md
@@ -0,0 +1,11 @@
+```
+$ dokku apps:create <name of app>
+$ dokku postgres:create <name of app db>
+$ dokku postgres:link <name of app db> <name of app>
+$ dokku config:set <name of app> ENV_VAR=VALUE ...
+$ dokku git:from-image <name of app> <name of image>
+$ dokku enter <name of app> web
+# cd server
+# npx prisma migrate deploy
+$ dokku letsencrypt:enable <name of app>
+```
diff --git a/server/test/routes/api/auth.test.js b/server/test/routes/api/auth.test.js
index d0a7cc4..838635e 100644
--- a/server/test/routes/api/auth.test.js
+++ b/server/test/routes/api/auth.test.js
@@ -141,11 +141,6 @@ test('/api/auth', async (t) => {
         password: 'test',
       });
       assert.deepStrictEqual(response.statusCode, StatusCodes.FORBIDDEN);
-      const { message } = JSON.parse(response.body);
-      assert.deepStrictEqual(
-        message,
-        'Your account has been deactivated.'
-      );
     });
 
     await t.test('returns ok and a secure session cookie for valid credentials and valid user', async (t) => {