Get fnr text from translations

frontend/public/locales/en/common.json

@@ -6,5 +6,6 @@
   "language": {
     "change": "Change language to {{lang}}"
   },
+  "fnr": "National identity number",
   "loading": "Loading..."
 }

frontend/public/locales/nb/common.json

@@ -6,5 +6,6 @@
   "language": {
     "change": "Bytt språk til {{lang}}"
   },
+  "fnr": "Fødselsnummer",
   "loading": "Laster..."
 }

frontend/public/locales/nn/common.json

@@ -6,5 +6,6 @@
   "language": {
     "change": "Bytt språk til {{lang}}"
   },
+  "fnr": "National identity number",
   "loading": "Lastar..."
 }

frontend/src/components/form/fnr.tsx

@@ -21,7 +21,11 @@ export default function Fnr(props: FnrProps) {
     }
 
     return <>
-        <input type="text" placeholder="fnr" {...register(name, { required: "Fnr is required", validate: isValidIdnr })} id="fnr" />
+        <input type="text"
+          placeholder={name}
+          {...register(name, { required: "Fnr is required", validate: isValidIdnr })}
+          id="fnr"
+        />
         {errors.fnr && errors.fnr.message}
         {errors.fnr && errors.fnr.type === "validate" && 'Invalid fnr'}
     </>

frontend/src/routes/frontpage/index.tsx

@@ -3,11 +3,12 @@ import React, { useState } from 'react'
 import { Page } from 'components/page'
 import { appTimezone, appVersion, appTheme } from 'appConfig'
 import { Fnr, Form, Select, Input } from 'components/form'
-
+import { useTranslation } from 'react-i18next'
 
 export default function FrontPage() {
   const [apiHealth, setApiHealth] = useState('not yet')
   const [didContactApi, setDidContactApi] = useState(false)
+  const { i18n, t } = useTranslation(['common', 'footer'])
 
   if (!didContactApi) {
     setDidContactApi(true)
@@ -34,9 +35,19 @@ export default function FrontPage() {
         <Input name="firstName" />
         <Input name="lastName" />
         <Select name="gender" options={["female", "male", "other"]} />
-        <Fnr name="fnr" />
+        <Fnr name={t("common:fnr")}/>
         <button>Submit</button>
       </Form>
+      
+      <button onClick={() => i18n.changeLanguage('nb')}>
+        Norwegian bokmål
+      </button>
+      <button onClick={() => i18n.changeLanguage('en')}>
+        English
+      </button>
+      <button onClick={() => i18n.changeLanguage('nn')}>
+        Norwegian nynorsk
+      </button>
       <br />
       Version {appVersion}
       <br />
@@ -44,6 +55,7 @@ export default function FrontPage() {
       <br />
       Theme {appTheme}
       <br />
-    </Page>
+      API reachable? {apiHealth}
+   </Page>
   )
 }