Validating User Input & Outputting Validation Errors

Author: zntb

backend/events.json

@@ -1 +1 @@
-{"events":[{"title":"A new event","image":"https://cdn.muenchen-p.de/fl_progressive,q_65/.imaging/stk/responsive/teaser300/dms/va-2016/muenchner-christkindlmarkt/christkindlmarkt-marienplat-logo-hp/document/christkindlmarkt-marienplat-logo-hp.jpg","date":"2022-10-01","description":"Some awesome event!","id":"2a42fcc4-ea21-4bdd-abf6-c40006dc66a9"}],"users":[{"email":"[email protected]","password":"$2a$12$DpO//Ez6vBSVTwqTCDVQpOsrJPEMZ1GphoJMTy8.g7TWHiBP97dQ.","id":"0eb4897f-2f6d-4b30-bd04-9ce763f96697"}]}
+{"events":[{"title":"A new event","image":"https://cdn.muenchen-p.de/fl_progressive,q_65/.imaging/stk/responsive/teaser300/dms/va-2016/muenchner-christkindlmarkt/christkindlmarkt-marienplat-logo-hp/document/christkindlmarkt-marienplat-logo-hp.jpg","date":"2022-10-01","description":"Some awesome event!","id":"2a42fcc4-ea21-4bdd-abf6-c40006dc66a9"}],"users":[{"email":"[email protected]","password":"$2a$12$DpO//Ez6vBSVTwqTCDVQpOsrJPEMZ1GphoJMTy8.g7TWHiBP97dQ.","id":"0eb4897f-2f6d-4b30-bd04-9ce763f96697"},{"email":"[email protected]","password":"$2a$12$3m6KUOiNwanEyfkY61rBkeADcW2rW3FSIAd9bS4M5grlHMQkMDV/S","id":"e54095a1-a14c-46d6-b7dc-b316c3a6ccfd"},{"email":"[email protected]","password":"$2a$12$J9lpeDvXxDB3onD8FpMcGu2srQyzCpiMrFPdp/BezkQCSjXCZQlfC","id":"538c7b46-8b5c-482d-a4ab-106cd9e63b75"}]}

frontend/src/components/AuthForm.js

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