Merge branch 'GREG-53_adding_id_validation_error' into 'master'

GREG-53: Adding validation error for national ID number

See merge request !67

frontend/src/components/form/error.tsx

+import styled from 'styled-components/macro'
+
+
+const StyledValidationError = styled.span`
+  color: ${({ theme }) => theme.colors.errorMessage};
+`
+
+export default StyledValidationError
\ No newline at end of file

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))
@@ -58,6 +61,14 @@ export default function Register() {
           placeholder={t('common:lastName')}
         />
         {errors.last_name && <span>{errors.last_name.message}</span>}
+        <StyledInput
+          {...register("national_id_number", {
+            required: t('common: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}

frontend/src/styled.d.ts

@@ -8,6 +8,7 @@ declare module 'styled-components' {
       main: string
       secondary: string
       dropDownMenuBackground: string
+      errorMessage: string
     }
     footer: {
       backgroundColor: string

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',

frontend/src/themes/uib.ts

@@ -2,7 +2,8 @@ const uibTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'black',
-    dropDownMenuBackground: 'grey'
+    dropDownMenuBackground: 'grey',
+    errorMessage: 'red'
   },
 }
 

frontend/src/themes/uio.ts

@@ -2,7 +2,8 @@ const uioTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'white',
-    dropDownMenuBackground: 'grey'
+    dropDownMenuBackground: 'grey',
+    errorMessage: 'red'
   },
 }
 

frontend/src/utils/index.ts

 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()
 }