diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 6d4e03f390ef77d41231ee8ceaf485a84b44bc8c..0dbe62d87c8f7a7e2123f0bd6729dd2a76df155c 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -21,7 +21,9 @@
"roleStartDate": "From",
"roleEndDate": "To",
"comment": "Comment",
- "email": "E-mail"
+ "email": "E-mail",
+ "fullName": "Full name",
+ "mobilePhone": "Mobile phone"
},
"loading": "Loading...",
"termsHeader": "Terms",
@@ -44,7 +46,8 @@
"details": "Details",
"nationalIdNumber": "National ID number",
"validation": {
- "lastNameRequired": "Last name required",
+ "firstNameRequired": "First name is required",
+ "lastNameRequired": "Last name is required",
"dateOfBirthRequired": "Date of birth is required",
"invalidIdNumber": "Invalid national ID number",
"nationalIdNumberRequired": "National ID number required",
@@ -62,6 +65,12 @@
},
"registerWizardText": {
"registerPage": "Enter the contact information for the guest below. All fields are mandatory.",
- "summaryPage": "Check that the values are correct before saving."
+ "summaryPage": "Check that the values are correct before saving.",
+ "registerContactInfo": "Register contact info",
+ "registerPeriod": "Register period",
+ "registerPeriodText": "Enter role and duration.",
+ "summaryContactInformation": "Summary contact information",
+ "summaryPeriod": "Summary period",
+ "contactInformation": "Contact information"
}
}
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index 11e3ddd99807f382ab3090c28913d2406e19e40a..174eb7b84e561a0a7f5ca188ad2354906cf2b6ef 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -21,7 +21,9 @@
"roleStartDate": "Fra",
"roleEndDate": "Til",
"comment": "Kommentar",
- "email": "E-post"
+ "email": "E-post",
+ "fullName": "Full navn",
+ "mobilePhone": "Mobilnummer"
},
"loading": "Laster...",
"termsHeader": "Vilkår",
@@ -44,12 +46,13 @@
"details": "Detaljer",
"nationalIdNumber": "Fødselsnummer",
"validation": {
- "lastNameRequired": "Etternavn er påkrevd",
- "dateOfBirthRequired": "Fødselsdato er påkrevd",
+ "firstNameRequired": "Fornavn er obligatorisk",
+ "lastNameRequired": "Etternavn er obligatorisk",
+ "dateOfBirthRequired": "Fødselsdato er obligatorisk",
"invalidIdNumber": "Ugyldig fødselsnummer",
- "nationalIdNumberRequired": "Fødselsnummer er påkrevd",
- "roleTypeRequired": "Rolletype er påkrevd",
- "roleEndRequired": "Sluttdato for rolle er påkrevd",
+ "nationalIdNumberRequired": "Fødselsnummer er obligatorisk",
+ "roleTypeRequired": "Rolletype er obligatorisk",
+ "roleEndRequired": "Sluttdato for rolle er obligatorisk",
"emailRequired": "E-post er obligatorisk",
"invalidMobilePhoneNumber": "Ugyldig telefonnummer",
"invalidEmail": "Ugyldig e-postadresse"
@@ -62,6 +65,12 @@
},
"registerWizardText": {
"registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
- "summaryPage": "Sjekk at alt stemmer før lagring."
+ "summaryPage": "Sjekk at alt stemmer før lagring.",
+ "registerContactInfo": "Registrere kontaktinfo",
+ "registerPeriod": "Registrere periode",
+ "registerPeriodText": "Fyll inn rolle og periode.",
+ "summaryContactInformation": "Summary contact information",
+ "summaryPeriod": "Summary period",
+ "contactInformation": "Kontaktinformasjon"
}
}
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index 73c02bfb4c818f584e1eef30540ef8eac05b9846..aa879393012187623f11369292630308f44055d6 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -22,7 +22,9 @@
"roleStartDate": "Frå",
"roleEndDate": "Til",
"comment": "Kommentar",
- "email": "E-post"
+ "email": "E-post",
+ "fullName": "Fullt namn",
+ "mobilePhone": "Mobilnummer"
},
"loading": "Lastar...",
"termsHeader": "Vilkår",
@@ -30,7 +32,7 @@
"firstName": "Fornamn",
"lastName": "Etternamn",
"dateOfBirth": "Fødselsdato",
- "name": "Navn",
+ "name": "Namn",
"role": "Gjesterolle",
"period": "Periode",
"ou": "Organisasjon",
@@ -45,12 +47,13 @@
"details": "Detaljer",
"nationalIdNumber": "Fødselsnummer",
"validation": {
- "lastNameRequired": "Etternamn er påkrevd",
- "dateOfBirthRequired": "Fødselsdato er påkrevd",
+ "firstNameRequired": "Fornamn er obligatorisk",
+ "lastNameRequired": "Etternamn er obligatorisk",
+ "dateOfBirthRequired": "Fødselsdato er obligatorisk",
"invalidIdNumber": "Ugyldig fødselsnummer",
- "nationalIdNumberRequired": "Fødselsnummer er påkrevd",
- "roleTypeRequired": "Rolletype er påkrevd",
- "roleEndRequired": "Sluttdato for rolle er påkrevd",
+ "nationalIdNumberRequired": "Fødselsnummer er obligatorisk",
+ "roleTypeRequired": "Rolletype er obligatorisk",
+ "roleEndRequired": "Sluttdato for rolle er obligatorisk",
"emailRequired": "E-post er obligatorisk",
"invalidMobilePhoneNumber": "Ugyldig telefonnummer",
"invalidEmail": "Ugyldig e-postadresse"
@@ -63,6 +66,12 @@
},
"registerWizardText": {
"registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
- "summaryPage": "Sjekk at alt stemmer før lagring."
+ "summaryPage": "Sjekk at alt stemmer før lagring.",
+ "registerContactInfo": "Registrere kontaktinfo",
+ "registerPeriod": "Registrere periode",
+ "registerPeriodText": "Fyll inn rolle og periode.",
+ "summaryContactInformation": "Summary contact information",
+ "summaryPeriod": "Summary period",
+ "contactInformation": "Kontaktinformasjon"
}
}
diff --git a/frontend/src/routes/register/formData.ts b/frontend/src/routes/register/formData.ts
index b36b16dd44613af4debcc3c383cf9d80b2bb0d1d..5e518b30d580c96186d66215ae12c4c6a77d3cda 100644
--- a/frontend/src/routes/register/formData.ts
+++ b/frontend/src/routes/register/formData.ts
@@ -7,4 +7,4 @@ export type RegisterFormData = {
comment?: string
ou_id?: number
email?: string
-}
\ No newline at end of file
+}
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index 1efa3145dcf41dc642aee0e2c1c7a56eb8e188ff..d0833f039a6e354e993ebbe64ce752abf7825e91 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -75,9 +75,10 @@ export default function StepRegistration() {
}
return (
- <Page header="Register as a guest">
+ <Page>
{/* Stepper at top of wizard */}
- <Stepper activeStep={activeStep}>
+ <Stepper sx={{ paddingTop: '2rem' }}
+ activeStep={activeStep}>
{/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
{steps.map((label, index) => {
const stepProps = {}
@@ -109,16 +110,11 @@ export default function StepRegistration() {
)}
</Box>
- <Box
- sx={{
- display: 'flex',
- flexDirection: 'row',
- pt: 2,
- color: 'primary.main',
- }}
- >
+ <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, color: 'primary.main', paddingBottom: '1rem'}}>
{activeStep === REGISTER_STEP && (
- <Button data-testid="button-next" onClick={handleNext}>
+ <Button data-testid='button-next'
+ sx={{ color: 'theme.palette.secondary', mr: 1 }}
+ onClick={handleNext}>
{t('button.next')}
</Button>
)}
diff --git a/frontend/src/routes/register/personFormMethods.ts b/frontend/src/routes/register/personFormMethods.ts
index 489a0b511c68e278fb358a8c9f4c4489e58f02c7..6dc1bf8a45790fbec3f9d379d9614ba8b5c6c9e4 100644
--- a/frontend/src/routes/register/personFormMethods.ts
+++ b/frontend/src/routes/register/personFormMethods.ts
@@ -1,3 +1,3 @@
export interface PersonFormMethods {
- doSubmit: () => Promise<void>
+ doSubmit: () => void
}
diff --git a/frontend/src/routes/register/stepPersonForm.tsx b/frontend/src/routes/register/stepPersonForm.tsx
index b4e1b4e68bd3d784bb80e743b236aa2c953f22b9..9d0622b08e8f12bd0644a816f2738dfeda482ec4 100644
--- a/frontend/src/routes/register/stepPersonForm.tsx
+++ b/frontend/src/routes/register/stepPersonForm.tsx
@@ -1,4 +1,14 @@
-import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@mui/material'
+import {
+ Box,
+ FormControl,
+ InputLabel,
+ MenuItem,
+ Select,
+ SelectChangeEvent,
+ Stack,
+ TextField,
+ Typography,
+} from '@mui/material'
import { Controller, SubmitHandler, useForm } from 'react-hook-form'
import { DatePicker } from '@mui/lab'
import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
@@ -81,7 +91,7 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
}
register('role_type', {
- required: t('validation.roleTypeRequired').toString(),
+ required: t<string>('validation.roleTypeRequired'),
})
const handleRoleTypeChange = (event: any) => {
@@ -97,16 +107,22 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
return (
<>
- <Box sx={{ typography: 'subtitle2' }}>
- {t('registerWizardText.registerPage')}
- </Box>
+ <Typography variant='h5' sx={{
+ paddingTop: '1rem',
+ paddingBottom: '1rem',
+ }}>{t('registerWizardText.registerContactInfo')}</Typography>
+ <Typography sx={{ paddingBottom: '2rem' }}>{t('registerWizardText.registerPage')}</Typography>
<Box sx={{ maxWidth: '30rem' }}>
<form onSubmit={onSubmit}>
<Stack spacing={2}>
<TextField
id='firstName'
label={t('input.firstName')}
- {...register(`first_name`)}
+ error={!!errors.first_name}
+ helperText={errors.first_name && errors.first_name.message}
+ {...register(`first_name`, {
+ required: t<string>('validation.firstNameRequired'),
+ })}
/>
<TextField
id='lastName'
@@ -114,7 +130,7 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
error={!!errors.last_name}
helperText={errors.last_name && errors.last_name.message}
{...register(`last_name`, {
- required: t('validation.lastNameRequired').toString(),
+ required: t<string>('validation.lastNameRequired'),
})}
/>
<TextField
@@ -126,6 +142,9 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
validate: isValidEmail,
})}
/>
+
+ <Typography variant='h5' sx={{ paddingTop: '1rem' }}>{t('registerWizardText.registerPeriod')}</Typography>
+ <Typography sx={{ paddingBottom: '1rem' }}>{t('registerWizardText.registerPeriodText')}</Typography>
<FormControl fullWidth>
<InputLabel id='ou-select-label'>{t('common:ou')}</InputLabel>
<Select
diff --git a/frontend/src/routes/register/stepSummary.tsx b/frontend/src/routes/register/stepSummary.tsx
index c09177ed8ce0e7520e3093c9cd9fbcecc4f611d1..17caef6cd599942eb9ed4e16aead769638bb2e66 100644
--- a/frontend/src/routes/register/stepSummary.tsx
+++ b/frontend/src/routes/register/stepSummary.tsx
@@ -1,11 +1,19 @@
-import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
+import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { Controller, SubmitHandler, useForm } from 'react-hook-form'
-import { Box, Stack, TextField } from '@mui/material'
+import {
+ Box,
+ Grid,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Typography,
+} from '@mui/material'
import format from 'date-fns/format'
-import { DatePicker } from '@mui/lab'
+import i18n from 'i18next'
import { RegisterFormData } from './formData'
import { postJsonOpts } from '../../utils'
import { PersonFormMethods } from './personFormMethods'
@@ -21,23 +29,23 @@ interface StepSummaryProperties {
}
const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFormMethods>) => {
- const { i18n, t } = useTranslation(['common'])
+ const { t } = useTranslation(['common'])
const { formData, onSubmitSuccess, onSubmitFailure } = props
const ous = useOus()
const roleTypes = useRoleTypes()
const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
- const submit: SubmitHandler<RegisterFormData> = (data) => {
+ const submit = () => {
const payload = {
- first_name: data.first_name,
- last_name: data.last_name,
- email: data.email,
+ first_name: formData.first_name,
+ last_name: formData.last_name,
+ email: formData.email,
role: {
- type: data.role_type,
- start_date: data.role_start === null ? null : format(data.role_start as Date, 'yyyy-MM-dd'),
- end_date: data.role_end === null ? null : format(data.role_end as Date, 'yyyy-MM-dd'),
- comments: data.comment,
- orgunit_id: data.ou_id,
+ type: formData.role_type,
+ start_date: formData.role_start === null ? null : format(formData.role_start as Date, 'yyyy-MM-dd'),
+ end_date: formData.role_end === null ? null : format(formData.role_end as Date, 'yyyy-MM-dd'),
+ comments: formData.comment,
+ orgunit_id: formData.ou_id,
},
}
@@ -65,141 +73,73 @@ const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFor
})
}
- const getSelectedOrganisationalUnit = () => {
- if (formData?.ou_id) {
- const ousArray = ous.filter(((value) => value.id === formData.ou_id))
-
- if (ousArray.length === 0) {
- return ''
- }
-
- if (i18n.language === 'en') {
- return ousArray[0].en
- }
- return ousArray[0].nb
- }
- return ''
- }
-
- const getSelectedRoleType = () => {
- if (formData?.role_type) {
- const roleTypeArray = roleTypes.filter(((value) => value.identifier === formData.role_type))
-
- if (roleTypeArray.length === 0) {
- return ''
- }
-
- if (i18n.language === 'en') {
- return roleTypeArray[0].name_en
- }
- return roleTypeArray[0].name_nb
- }
- return ''
- }
-
- const {
- reset,
- register,
- handleSubmit,
- control,
- } = useForm<RegisterFormData>()
- const onSubmit = handleSubmit(submit)
-
- useEffect(() => {
- reset(formData)
- }, [])
-
function doSubmit() {
- return onSubmit()
+ return submit()
}
useImperativeHandle(ref, () => ({ doSubmit }))
+ const selectedOus = ous.find((value) => value.id === formData.ou_id)
+ const ousName = selectedOus === undefined ? '' : (`${i18n.language === 'en' ? selectedOus.en : selectedOus.nb} (${selectedOus.id})`)
+
+ // TODO Fix this confusing mix between use of id and identifier
+ const selectedRoleType = roleTypes.find((value) => value.id === (formData.role_type === undefined ? -1 : parseInt(formData.role_type, 10)))
+ const roleTypeName = selectedRoleType === undefined ? '' : `${i18n.language === 'en' ? selectedRoleType.name_en : selectedRoleType.name_nb}`
+
return (
<>
+ <Typography variant='h5' sx={{
+ paddingTop: '1rem',
+ paddingBottom: '1rem',
+ }}>{t('registerWizardText.summaryContactInformation')}</Typography>
<Box sx={{ typography: 'subtitle2' }}>
{t('registerWizardText.summaryPage')}
</Box>
<Box sx={{ maxWidth: '30rem' }}>
- <form onSubmit={onSubmit}>
- <Stack spacing={2}>
- <TextField
- id='firstName'
- label={t('input.firstName')}
- disabled
- {...register('first_name')}
- />
- <TextField
- id='lastName'
- label={t('input.lastName')}
- disabled
- {...register('last_name')}
- />
-
- <TextField
- id='email'
- label={t('input.email')}
- disabled
- {...register('email')}
- />
-
- <TextField
- id='ou'
- value={getSelectedOrganisationalUnit()}
- label={t('ou')}
- disabled
- />
-
- <TextField
- id='roletype-select'
- value={getSelectedRoleType()}
- label={t('input.roleType')}
- disabled
- />
-
- <Controller name='role_start'
- control={control}
- render={({ field }) => (
- <DatePicker
- mask='____-__-__'
- label={t('input.roleStartDate')}
- disabled
- value={field.value}
- inputFormat='yyyy-MM-dd'
- onChange={(value) => {
- field.onChange(value)
- }}
- renderInput={(params) => <TextField {...params} />}
- />)}
- />
-
- <Controller name='role_end'
- control={control}
- render={({ field }) => (
- <DatePicker
- mask='____-__-__'
- label={t('input.roleEndDate')}
- disabled
- value={field.value}
- inputFormat='yyyy-MM-dd'
- onChange={(value) => {
- field.onChange(value)
- }}
- renderInput={(params) => <TextField {...params} />}
- />)}
- />
-
- <TextField
- id='comment'
- label={t('input.comment')}
- disabled
- multiline
- rows={5}
- {...register(`comment`)}
- />
-
- </Stack>
- </form>
+ <Box sx={{ padding: '1rem', bgcolor: 'primary.dark' }}>{t('registerWizardText.contactInformation')}</Box>
+
+ <Grid container>
+ <Grid item xs={4}>
+ {t('input.fullName')}
+ </Grid>
+ <Grid item xs={8}>
+ {formData.first_name} {formData.last_name}
+ </Grid>
+ <Grid item xs={4}>
+ {t('input.email')}
+ </Grid>
+ <Grid item xs={8}>
+ {formData.email}
+ </Grid>
+ </Grid>
+
+ <Typography variant='h5' sx={{
+ paddingTop: '1rem',
+ paddingBottom: '1rem',
+ }}>{t('registerWizardText.summaryPeriod')}</Typography>
+
+ <Table>
+ <TableHead sx={{
+ padding: '1rem',
+ bgcolor: 'primary.dark',
+ }}>
+
+ <TableRow>
+ <TableCell>Guest role</TableCell>
+ <TableCell>Period</TableCell>
+ <TableCell>Department</TableCell>
+ <TableCell>Comment</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ <TableRow>
+ <TableCell>{roleTypeName}</TableCell>
+ <TableCell>{formData.role_start === null ? null : format(formData.role_start as Date, 'yyyy-MM-dd')}-{formData.role_end === null ? null : format(formData.role_end as Date, 'yyyy-MM-dd')}</TableCell>
+ <TableCell>{ousName}</TableCell>
+ <TableCell>{formData.comment}</TableCell>
+ </TableRow>
+ </TableBody>
+ </Table>
{/* TODO For now just showing a heading to give the user some feedback */}
{submitState === SubmitState.SubmitSuccess && (
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index 70d898fcd78e5c6c54b40201bc79fccee3b2b524..e07e4ce55617aa862c5b99274a6288bb084bad9c 100644
--- a/frontend/src/themes/main.ts
+++ b/frontend/src/themes/main.ts
@@ -15,6 +15,7 @@ const mainTheme: ThemeOptions = {
palette: {
primary: {
main: '#3293ED',
+ dark: '#1565c0'
},
},
components: {
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
index b1c29bbed025a17695ec7ad3af48dff0827a905a..a659679ec6cb1c1135c9a915772ce9d5cb16475e 100644
--- a/frontend/src/themes/uib.ts
+++ b/frontend/src/themes/uib.ts
@@ -4,6 +4,7 @@ const uibTheme: ThemeOptions = {
palette: {
primary: {
main: '#ba000d',
+ dark: '#1565c0'
},
},
}
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
index 6cc692871b3c3e2ca4051563be09a701b636fb56..c5f908ec246ee55b957079f81d4559b7b459ec7a 100644
--- a/frontend/src/themes/uio.ts
+++ b/frontend/src/themes/uio.ts
@@ -3,7 +3,8 @@ import { ThemeOptions } from "@mui/material"
const uioTheme: ThemeOptions = {
palette: {
primary: {
- main: "#4977af"
+ main: "#4977af",
+ dark: '#1565c0'
}
},
}