From c00f2bb5ce5e3114e092701c44627ccff9f5da13 Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Thu, 23 Sep 2021 09:17:15 +0200
Subject: [PATCH] GREG-53: Adding validation error for national ID number
---
frontend/public/locales/en/common.json | 7 ++++++-
frontend/public/locales/nb/common.json | 7 ++++++-
frontend/public/locales/nn/common.json | 6 +++++-
frontend/src/components/form/error.tsx | 8 ++++++++
frontend/src/routes/register/index.tsx | 16 ++++++++++++++--
frontend/src/styled.d.ts | 1 +
frontend/src/themes/main.ts | 3 ++-
frontend/src/themes/uib.ts | 3 ++-
frontend/src/themes/uio.ts | 3 ++-
frontend/src/utils/index.ts | 10 ++++++++--
10 files changed, 54 insertions(+), 10 deletions(-)
create mode 100644 frontend/src/components/form/error.tsx
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 4c2ab711..1b77253e 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -17,5 +17,10 @@
"staging": "Staging",
"firstName": "First name",
"lastName": "Last name",
- "dateOfBirth": "Date of birth"
+ "dateOfBirth": "Date of birth",
+ "nationalIdNumber": "Fødselsnummer",
+ "validation": {
+ "invalidIdNumber": "Invalid national ID number",
+ "nationalIdNumberRequired": "National ID number required"
+ }
}
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index 11a25642..9222ecb8 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -17,5 +17,10 @@
"staging": "Staging",
"firstName": "Fornavn",
"lastName": "Etternavn",
- "dateOfBirth": "Fødselsdato"
+ "dateOfBirth": "Fødselsdato",
+ "nationalIdNumber": "Fødselsnummer",
+ "validation": {
+ "invalidIdNumber": "Ugyldig fødselsnummer",
+ "nationalIdNumberRequired": "Fødselsnummer er påkrevd"
+ }
}
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index 21039b90..35f9fbc3 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -18,5 +18,9 @@
"staging": "Staging",
"firstName": "Fornamn",
"lastName": "Etternamn",
- "dateOfBirth": "Fødselsdato"
+ "dateOfBirth": "Fødselsdato",
+ "validation": {
+ "invalidIdNumber": "Ugyldig fødselsnummer",
+ "nationalIdNumberRequired": "Fødselsnummer er påkrevd"
+ }
}
diff --git a/frontend/src/components/form/error.tsx b/frontend/src/components/form/error.tsx
new file mode 100644
index 00000000..9e9d4a96
--- /dev/null
+++ b/frontend/src/components/form/error.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components/macro'
+
+
+const StyledValidationError = styled.span`
+ color: ${({ theme }) => theme.colors.errorMessage};
+`
+
+export default StyledValidationError
\ No newline at end of file
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index 629080bd..57d0e3ce 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -7,12 +7,14 @@ import Button from 'components/button'
import Page from 'components/page'
import { useForm, Controller, SubmitHandler } from 'react-hook-form'
import format from 'date-fns/format'
-import { postJsonOpts } from 'utils'
+import { isValidFnr, postJsonOpts } from 'utils'
+import StyledValidationError from '../../components/form/error'
type RegisterFormData = {
first_name: string
last_name: string
date_of_birth: Date
+ national_id_number: string
}
export default function Register() {
@@ -23,6 +25,7 @@ export default function Register() {
first_name: data.first_name,
last_name: data.last_name,
date_of_birth: format(data.date_of_birth, 'yyyy-MM-dd'),
+ national_id_number: data.national_id_number
}
console.log('submitting', JSON.stringify(payload))
fetch('http://localhost:3000/api/ui/v1/register/', postJsonOpts(payload))
@@ -40,7 +43,7 @@ export default function Register() {
control,
handleSubmit,
// setValue,
- // formState: { errors },
+ formState : {errors}
} = useForm<RegisterFormData>()
const onSubmit = handleSubmit(submit)
@@ -55,6 +58,14 @@ export default function Register() {
{...register(`last_name`)}
placeholder={t('common:lastName')}
/>
+ <StyledInput
+ {...register("national_id_number", {
+ required: t('validation:nationalIdNumberRequired').toString(),
+ validate: isValidFnr
+ })}
+ placeholder={t('nationalIdNumber')}
+ />
+ {errors.national_id_number && <StyledValidationError>{errors.national_id_number.message}</StyledValidationError>}
<Controller
name="date_of_birth"
control={control}
@@ -72,6 +83,7 @@ export default function Register() {
<Button as="button" type="submit">
Submit
</Button>
+
</form>
</Page>
)
diff --git a/frontend/src/styled.d.ts b/frontend/src/styled.d.ts
index 7031296a..48495b58 100644
--- a/frontend/src/styled.d.ts
+++ b/frontend/src/styled.d.ts
@@ -8,6 +8,7 @@ declare module 'styled-components' {
main: string
secondary: string
dropDownMenuBackground: string
+ errorMessage: string
}
footer: {
backgroundColor: string
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index 8af960ea..a825157f 100644
--- a/frontend/src/themes/main.ts
+++ b/frontend/src/themes/main.ts
@@ -6,7 +6,8 @@ const mainTheme: DefaultTheme = {
colors: {
main: 'hotPink',
secondary: 'white',
- dropDownMenuBackground: 'grey'
+ dropDownMenuBackground: 'grey',
+ errorMessage: 'red'
},
footer: {
backgroundColor: 'black',
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
index 2d272789..d65b7e97 100644
--- a/frontend/src/themes/uib.ts
+++ b/frontend/src/themes/uib.ts
@@ -2,7 +2,8 @@ const uibTheme = {
colors: {
main: 'hotPink',
secondary: 'black',
- dropDownMenuBackground: 'grey'
+ dropDownMenuBackground: 'grey',
+ errorMessage: 'red'
},
}
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
index 6f0f9a1c..8b1543fa 100644
--- a/frontend/src/themes/uio.ts
+++ b/frontend/src/themes/uio.ts
@@ -2,7 +2,8 @@ const uioTheme = {
colors: {
main: 'hotPink',
secondary: 'white',
- dropDownMenuBackground: 'grey'
+ dropDownMenuBackground: 'grey',
+ errorMessage: 'red'
},
}
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 80e6cd18..b7dbae6b 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -1,4 +1,5 @@
import validator from '@navikt/fnrvalidator'
+import i18n from 'i18next'
export function getCookie(name: string) {
if (!document.cookie) {
@@ -38,6 +39,11 @@ export function postJsonOpts(data: object): RequestInit {
}
}
-export function isValidFnr(data: string): boolean {
- return validator.idnr(data).status === 'valid'
+export function isValidFnr(data: string): boolean | string {
+ const valid = validator.idnr(data).status === 'valid'
+ if (valid) {
+ return true
+ }
+ // TypeScript complains if toString is not used on the function result
+ return i18n.t('common:validation.invalidIdNumber').toString()
}
--
GitLab