Update register user form disable itself when loading

Fix error where a user could click submit multiple times while the form is submitting.
This commit is contained in:
Aaron William Po
2023-04-11 20:24:27 -04:00
parent ea3e8a0023
commit f5abc518a4

View File

@@ -56,6 +56,7 @@ const RegisterUserForm: FC = () => {
</FormInfo> </FormInfo>
<FormSegment> <FormSegment>
<FormTextInput <FormTextInput
disabled={formState.isSubmitting}
id="firstName" id="firstName"
type="text" type="text"
formValidationSchema={register('firstName')} formValidationSchema={register('firstName')}
@@ -72,6 +73,7 @@ const RegisterUserForm: FC = () => {
</FormInfo> </FormInfo>
<FormSegment> <FormSegment>
<FormTextInput <FormTextInput
disabled={formState.isSubmitting}
id="lastName" id="lastName"
type="text" type="text"
formValidationSchema={register('lastName')} formValidationSchema={register('lastName')}
@@ -90,6 +92,7 @@ const RegisterUserForm: FC = () => {
</FormInfo> </FormInfo>
<FormSegment> <FormSegment>
<FormTextInput <FormTextInput
disabled={formState.isSubmitting}
id="email" id="email"
type="email" type="email"
formValidationSchema={register('email')} formValidationSchema={register('email')}
@@ -105,6 +108,7 @@ const RegisterUserForm: FC = () => {
</FormInfo> </FormInfo>
<FormSegment> <FormSegment>
<FormTextInput <FormTextInput
disabled={formState.isSubmitting}
id="username" id="username"
type="text" type="text"
formValidationSchema={register('username')} formValidationSchema={register('username')}
@@ -123,6 +127,7 @@ const RegisterUserForm: FC = () => {
</FormInfo> </FormInfo>
<FormSegment> <FormSegment>
<FormTextInput <FormTextInput
disabled={formState.isSubmitting}
id="password" id="password"
type="password" type="password"
formValidationSchema={register('password')} formValidationSchema={register('password')}
@@ -138,6 +143,7 @@ const RegisterUserForm: FC = () => {
</FormInfo> </FormInfo>
<FormSegment> <FormSegment>
<FormTextInput <FormTextInput
disabled={formState.isSubmitting}
id="confirmPassword" id="confirmPassword"
type="password" type="password"
formValidationSchema={register('confirmPassword')} formValidationSchema={register('confirmPassword')}
@@ -154,6 +160,7 @@ const RegisterUserForm: FC = () => {
<FormSegment> <FormSegment>
<FormTextInput <FormTextInput
id="dateOfBirth" id="dateOfBirth"
disabled={formState.isSubmitting}
type="date" type="date"
formValidationSchema={register('dateOfBirth')} formValidationSchema={register('dateOfBirth')}
error={!!errors.dateOfBirth} error={!!errors.dateOfBirth}
@@ -161,7 +168,9 @@ const RegisterUserForm: FC = () => {
/> />
</FormSegment> </FormSegment>
<div className="mt-6 w-full"> <div className="mt-6 w-full">
<Button type="submit">Register User</Button> <Button type="submit" isSubmitting={formState.isSubmitting}>
Register User
</Button>
</div> </div>
</div> </div>
</form> </form>