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] 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