From 4cd02e73ed11ef71bf3215aab90442225deaf6cf Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Mon, 28 Feb 2022 14:57:05 +0100
Subject: [PATCH 1/2] Make type and ou choices required in new role form
Adding a role without selecting either of these makes no sense, and will
be refused by the backend accordingly.
---
frontend/public/locales/en/common.json | 2 +
frontend/public/locales/nb/common.json | 2 +
frontend/public/locales/nn/common.json | 2 +
.../sponsor/guest/newGuestRole/index.tsx | 95 ++++++++++++-------
4 files changed, 67 insertions(+), 34 deletions(-)
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 9a60da89..602eeaf3 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -116,6 +116,8 @@
"invalidEmail": "Invalid e-mail address",
"passportNumberRequired": "Passport number required",
"mobilePhoneRequired": "Mobile phone is required",
+ "typeMustBeChosen": "Role is required",
+ "ouMustBeChosen": "Organisation is required",
"startDateMustBeSet": "Start date must be set",
"startDateMustBeBeforeEndDate": "Start date has to be before end date",
"phoneNumberAndCountryCode": "Both country code and phone number must be set",
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index 75ffadd0..a3ad6176 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -116,6 +116,8 @@
"invalidEmail": "Ugyldig e-postadresse",
"passportNumberRequired": "Passnummer er obligatorisk",
"mobilePhoneRequired": "Mobilnummer er obligatorisk",
+ "typeMustBeChosen": "Gjesterolle er obligatorisk",
+ "ouMustBeChosen": "Organisasjon er obligatorisk",
"startDateMustBeSet": "Startdato må være satt",
"startDateMustBeBeforeEndDate": "Startdato må være før sluttdato",
"phoneNumberAndCountryCode": "Både landkode og telefonnummer må være satt",
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index 4eefad7f..bcbc3bf1 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -116,6 +116,8 @@
"invalidEmail": "Ugyldig e-postadresse",
"passportNumberRequired": "Passnummer er obligatorisk",
"mobilePhoneRequired": "Mobilnummer er obligatorisk",
+ "typeMustBeChosen": "Gjesterolle er obligatorisk",
+ "ouMustBeChosen": "Organisasjon er obligatorisk",
"startDateMustBeSet": "Startdato må vere satt",
"startDateMustBeBeforeEndDate": "Startdato må vere før sluttdato",
"phoneNumberAndCountryCode": "Både landkode og telefonnummer må vere satt",
diff --git a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
index 73fe14f9..64a98c87 100644
--- a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
+++ b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
@@ -190,41 +190,68 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
</Typography>
<form onSubmit={onSubmit}>
<Stack spacing={2}>
- <FormControl>
- <InputLabel id="roletype-select-label">
- {t('input.roleType')}
- </InputLabel>
- <Select
- id="roletype-select"
- defaultValue=""
- value={roleTypeChoice}
- error={!!errors.type}
- label={t('input.roleType')}
- onChange={handleRoleTypeChange}
- >
- {(roleTypes === undefined ? [] : roleTypes)
- .sort(roleTypeSort())
- .map((rt) => rolesToItem(rt))}
- </Select>
- </FormControl>
+ <Controller
+ name="type"
+ control={control}
+ rules={{ required: true }}
+ render={() => (
+ <FormControl>
+ <InputLabel id="roletype-select-label">
+ {t('input.roleType')}
+ </InputLabel>
+ <Select
+ id="roletype-select"
+ defaultValue=""
+ value={roleTypeChoice}
+ error={!!errors.type}
+ label={t('input.roleType')}
+ onChange={handleRoleTypeChange}
+ >
+ {(roleTypes === undefined ? [] : roleTypes)
+ .sort(roleTypeSort())
+ .map((rt) => rolesToItem(rt))}
+ </Select>
+ </FormControl>
+ )}
+ />
+ {errors.type && errors.type.type === 'required' && (
+ <Box sx={{ typography: 'caption', color: 'error.main' }}>
+ {t('validation.typeMustBeChosen')}
+ </Box>
+ )}
+
+ <Controller
+ name="orgunit"
+ control={control}
+ rules={{ required: true }}
+ render={() => (
+ <FormControl>
+ <InputLabel id="ou-select-label-id">
+ {t('common:ou')}
+ </InputLabel>
+ <Select
+ labelId="ou-select-label"
+ id="ou-select-label"
+ defaultValue=""
+ value={ouChoice.toString()}
+ label={t('common:ou')}
+ onChange={handleOuChange}
+ >
+ {ous !== undefined &&
+ ous.length > 0 &&
+ ous
+ .sort(i18n.language === 'en' ? enSort : nbSort)
+ .map((ou) => ouToItem(ou))}
+ </Select>
+ </FormControl>
+ )}
+ />
+ {errors.orgunit && errors.orgunit.type === 'required' && (
+ <Box sx={{ typography: 'caption', color: 'error.main' }}>
+ {t('validation.ouMustBeChosen')}
+ </Box>
+ )}
- <FormControl>
- <InputLabel id="ou-select-label-id">{t('common:ou')}</InputLabel>
- <Select
- labelId="ou-select-label"
- id="ou-select-label"
- defaultValue=""
- value={ouChoice.toString()}
- label={t('common:ou')}
- onChange={handleOuChange}
- >
- {ous !== undefined &&
- ous.length > 0 &&
- ous
- .sort(i18n.language === 'en' ? enSort : nbSort)
- .map((ou) => ouToItem(ou))}
- </Select>
- </FormControl>
<Controller
name="start_date"
control={control}
--
GitLab
From cdc62c2efa1dcac670a5a4a16a03f5b5489ccf5d Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Fri, 4 Mar 2022 11:33:17 +0100
Subject: [PATCH 2/2] Use FormHelperText for error messages
---
.../sponsor/guest/newGuestRole/index.tsx | 22 +++++++++++--------
1 file changed, 13 insertions(+), 9 deletions(-)
diff --git a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
index 64a98c87..819218d1 100644
--- a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
+++ b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
@@ -18,6 +18,7 @@ import {
FormControlLabel,
Box,
Typography,
+ FormHelperText,
} from '@mui/material'
import Page from 'components/page'
import { Guest } from 'interfaces'
@@ -175,7 +176,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
</MenuItem>
)
}
-
+ const hasRoleTypeError =
+ errors && errors.type && errors.type.type === 'required'
+ const hasOuChoiceError =
+ errors && errors.orgunit && errors.orgunit.type === 'required'
return (
<Page>
<SponsorInfoButtons
@@ -195,7 +199,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
control={control}
rules={{ required: true }}
render={() => (
- <FormControl>
+ <FormControl error={hasRoleTypeError}>
<InputLabel id="roletype-select-label">
{t('input.roleType')}
</InputLabel>
@@ -214,10 +218,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
</FormControl>
)}
/>
- {errors.type && errors.type.type === 'required' && (
- <Box sx={{ typography: 'caption', color: 'error.main' }}>
+ {hasRoleTypeError && (
+ <FormHelperText error>
{t('validation.typeMustBeChosen')}
- </Box>
+ </FormHelperText>
)}
<Controller
@@ -225,7 +229,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
control={control}
rules={{ required: true }}
render={() => (
- <FormControl>
+ <FormControl error={hasOuChoiceError}>
<InputLabel id="ou-select-label-id">
{t('common:ou')}
</InputLabel>
@@ -246,10 +250,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
</FormControl>
)}
/>
- {errors.orgunit && errors.orgunit.type === 'required' && (
- <Box sx={{ typography: 'caption', color: 'error.main' }}>
+ {hasOuChoiceError && (
+ <FormHelperText error>
{t('validation.ouMustBeChosen')}
- </Box>
+ </FormHelperText>
)}
<Controller
--
GitLab