Validating User Input & Outputting Validation Errors

Author: ThomasCode92

frontend/src/components/AuthForm.js

@@ -1,17 +1,34 @@
 import React, { Fragment } from 'react';
-import { Form, Link, useSearchParams } from 'react-router-dom';
+import {
+  Form,
+  Link,
+  useActionData,
+  useNavigation,
+  useSearchParams,
+} from 'react-router-dom';
 
 import classes from './AuthForm.module.css';
 
 function AuthForm() {
   const [searchParams] = useSearchParams();
+  const navigation = useNavigation();
+  const data = useActionData();
 
   const isLogin = searchParams.get('mode') === 'login';
+  const isSubmitting = navigation.state === 'submitting';
 
   return (
     <Fragment>
       <Form method="post" className={classes.form}>
         <h1>{isLogin ? 'Log in' : 'Create a new user'}</h1>
+        {data && data.errors && (
+          <ul>
+            {Object.values(data.errors).map(error => (
+              <li key={error}>{error}</li>
+            ))}
+          </ul>
+        )}
+        {data && data.message && <p>{data.message}</p>}
         <p>
           <label htmlFor="email">Email</label>
           <input id="email" type="email" name="email" required />
@@ -24,7 +41,9 @@ function AuthForm() {
           <Link to={`?mode=${isLogin ? 'signup' : 'login'}`}>
             {isLogin ? 'Create new user' : 'Login'}
           </Link>
-          <button>{isLogin ? 'Login' : 'Save'}</button>
+          <button disabled={isSubmitting}>
+            {isSubmitting ? 'Submitting...' : isLogin ? 'Login' : 'Save'}
+          </button>
         </div>
       </Form>
     </Fragment>