From 03717a0a2948652c4021c0f04999b674b4c82a2d Mon Sep 17 00:00:00 2001
From: Ryan Jung <ryan.matthew.jung@gmail.com>
Date: Wed, 5 May 2021 17:58:42 -0400
Subject: [PATCH] add required attribute to all required <input> tags

---
 pages/availability/event/[type].tsx | 5 +++--
 pages/availability/index.tsx        | 5 +++--
 pages/settings/password.tsx         | 4 ++--
 pages/settings/profile.tsx          | 4 ++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/pages/availability/event/[type].tsx b/pages/availability/event/[type].tsx
index 89deae62..2c6e4bfd 100644
--- a/pages/availability/event/[type].tsx
+++ b/pages/availability/event/[type].tsx
@@ -74,7 +74,7 @@ export default function EventType(props) {
                                     <div className="mb-4">
                                         <label htmlFor="title" className="block text-sm font-medium text-gray-700">Title</label>
                                         <div className="mt-1">
-                                            <input ref={titleRef} type="text" name="title" id="title" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Quick Chat" defaultValue={props.eventType.title} />
+                                            <input ref={titleRef} type="text" name="title" id="title" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Quick Chat" defaultValue={props.eventType.title} />
                                         </div>
                                     </div>
                                     <div className="mb-4">
@@ -89,6 +89,7 @@ export default function EventType(props) {
                                                     type="text"
                                                     name="slug"
                                                     id="slug"
+                                                    required
                                                     className="flex-1 block w-full focus:ring-blue-500 focus:border-blue-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
                                                     defaultValue={props.eventType.slug}
                                                 />
@@ -104,7 +105,7 @@ export default function EventType(props) {
                                     <div className="mb-4">
                                         <label htmlFor="length" className="block text-sm font-medium text-gray-700">Length</label>
                                         <div className="mt-1 relative rounded-md shadow-sm">
-                                            <input ref={lengthRef} type="number" name="length" id="length" className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" defaultValue={props.eventType.length} />
+                                            <input ref={lengthRef} type="number" name="length" id="length" required className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" defaultValue={props.eventType.length} />
                                             <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 text-sm">
                                                 minutes
                                             </div>
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index 9369a0b0..8f8e6d5a 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -214,7 +214,7 @@ export default function Availability(props) {
                                         <div className="mb-4">
                                             <label htmlFor="title" className="block text-sm font-medium text-gray-700">Title</label>
                                             <div className="mt-1">
-                                                <input ref={titleRef} type="text" name="title" id="title" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Quick Chat" />
+                                                <input ref={titleRef} type="text" name="title" id="title" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Quick Chat" />
                                             </div>
                                         </div>
                                         <div className="mb-4">
@@ -229,6 +229,7 @@ export default function Availability(props) {
                                                         type="text"
                                                         name="slug"
                                                         id="slug"
+                                                        required
                                                         className="flex-1 block w-full focus:ring-blue-500 focus:border-blue-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
                                                     />
                                                 </div>
@@ -243,7 +244,7 @@ export default function Availability(props) {
                                         <div className="mb-4">
                                             <label htmlFor="length" className="block text-sm font-medium text-gray-700">Length</label>
                                             <div className="mt-1 relative rounded-md shadow-sm">
-                                                <input ref={lengthRef} type="number" name="length" id="length" className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" />
+                                                <input ref={lengthRef} type="number" name="length" id="length" required className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" />
                                                 <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 text-sm">
                                                     minutes
                                                 </div>
diff --git a/pages/settings/password.tsx b/pages/settings/password.tsx
index df8ec35a..cb937516 100644
--- a/pages/settings/password.tsx
+++ b/pages/settings/password.tsx
@@ -62,13 +62,13 @@ export default function Settings(props) {
                             <div className="w-1/2 mr-2">
                                 <label htmlFor="current_password" className="block text-sm font-medium text-gray-700">Current Password</label>
                                 <div className="mt-1">
-                                    <input ref={oldPasswordRef} type="password" name="current_password" id="current_password" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Your old password" />
+                                    <input ref={oldPasswordRef} type="password" name="current_password" id="current_password" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Your old password" />
                                 </div>
                             </div>
                             <div className="w-1/2 ml-2">
                                 <label htmlFor="new_password" className="block text-sm font-medium text-gray-700">New Password</label>
                                 <div className="mt-1">
-                                    <input ref={newPasswordRef} type="password" name="new_password" id="new_password" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Your super secure new password" />
+                                    <input ref={newPasswordRef} type="password" name="new_password" id="new_password" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Your super secure new password" />
                                 </div>
                             </div>
                         </div>
diff --git a/pages/settings/profile.tsx b/pages/settings/profile.tsx
index 17b4624c..7974ad40 100644
--- a/pages/settings/profile.tsx
+++ b/pages/settings/profile.tsx
@@ -80,12 +80,12 @@ export default function Settings(props) {
                                             <span className="bg-gray-50 border border-r-0 border-gray-300 rounded-l-md px-3 inline-flex items-center text-gray-500 sm:text-sm">
                                                 {window.location.hostname}/
                                             </span>
-                                            <input ref={usernameRef} type="text" name="username" id="username" autoComplete="username" className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" defaultValue={props.user.username} />
+                                            <input ref={usernameRef} type="text" name="username" id="username" autoComplete="username" required className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" defaultValue={props.user.username} />
                                         </div>
                                     </div>
                                     <div className="w-1/2 ml-2">
                                         <label htmlFor="name" className="block text-sm font-medium text-gray-700">Full name</label>
-                                        <input ref={nameRef} type="text" name="name" id="name" autoComplete="given-name" placeholder="Your name" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" defaultValue={props.user.name} />
+                                        <input ref={nameRef} type="text" name="name" id="name" autoComplete="given-name" placeholder="Your name" required className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" defaultValue={props.user.name} />
                                     </div>
                                 </div>