Skip to content
Snippets Groups Projects
Commit b431460d authored by Tore.Brede's avatar Tore.Brede
Browse files

GREG-60: Adding Material UI date picker. Adding select for org. unit

parent 18383bc4
No related branches found
No related tags found
1 merge request!74GREG-60: Org unit and material UI date picker
Hide whitespace changes
Inline Side-by-side
frontend/package-lock.json
+ 273
− 38
View file @ b431460d
......@@ -11,6 +11,7 @@
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.0.1",
"@mui/lab": "^5.0.0-alpha.49",
"@mui/material": "^5.0.1",
"@mui/system": "^5.0.1",
"@mui/utils": "^5.0.1",
......@@ -1802,6 +1803,75 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
"node_modules/@date-io/core": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.11.0.tgz",
"integrity": "sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw=="
},
"node_modules/@date-io/date-fns": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.11.0.tgz",
"integrity": "sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==",
"dependencies": {
"@date-io/core": "^2.11.0"
},
"peerDependencies": {
"date-fns": "^2.0.0"
},
"peerDependenciesMeta": {
"date-fns": {
"optional": true
}
}
},
"node_modules/@date-io/dayjs": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.11.0.tgz",
"integrity": "sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==",
"dependencies": {
"@date-io/core": "^2.11.0"
},
"peerDependencies": {
"dayjs": "^1.8.17"
},
"peerDependenciesMeta": {
"dayjs": {
"optional": true
}
}
},
"node_modules/@date-io/luxon": {
"version": "2.11.1",
"resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.11.1.tgz",
"integrity": "sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==",
"dependencies": {
"@date-io/core": "^2.11.0"
},
"peerDependencies": {
"luxon": "^1.21.3 || ^2.x"
},
"peerDependenciesMeta": {
"luxon": {
"optional": true
}
}
},
"node_modules/@date-io/moment": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.11.0.tgz",
"integrity": "sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==",
"dependencies": {
"@date-io/core": "^2.11.0"
},
"peerDependencies": {
"moment": "^2.24.0"
},
"peerDependenciesMeta": {
"moment": {
"optional": true
}
}
},
"node_modules/@emotion/babel-plugin": {
"version": "11.3.0",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz",
......@@ -1868,6 +1938,14 @@
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
},
"node_modules/@emotion/is-prop-valid": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
"integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
"dependencies": {
"@emotion/memoize": "^0.7.4"
}
},
"node_modules/@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
......@@ -1963,14 +2041,6 @@
"node": ">=6.9.0"
}
},
"node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
"integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
"dependencies": {
"@emotion/memoize": "^0.7.4"
}
},
"node_modules/@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
......@@ -2848,14 +2918,6 @@
"node": ">=6.9.0"
}
},
"node_modules/@mui/core/node_modules/@emotion/is-prop-valid": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
"integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
"dependencies": {
"@emotion/memoize": "^0.7.4"
}
},
"node_modules/@mui/icons-material": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.0.1.tgz",
......@@ -2888,6 +2950,93 @@
"node": ">=6.9.0"
}
},
"node_modules/@mui/lab": {
"version": "5.0.0-alpha.49",
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.49.tgz",
"integrity": "sha512-AKTh3gAsP5GaveAoBAjEvyuuyFMYzyfUAwo7wvz9A/EiTnkc+2QXsSO7W4ykTIjNoIGBrTd9bTV/YQNK6FpPMw==",
"dependencies": {
"@babel/runtime": "^7.15.4",
"@date-io/date-fns": "^2.10.6",
"@date-io/dayjs": "^2.10.6",
"@date-io/luxon": "^2.10.6",
"@date-io/moment": "^2.10.6",
"@mui/core": "5.0.0-alpha.49",
"@mui/system": "^5.0.2",
"@mui/utils": "^5.0.1",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
"react-is": "^17.0.2",
"react-transition-group": "^4.4.2",
"rifm": "^0.12.0"
},
"engines": {
"node": ">=12.0.0"
},
"peerDependencies": {
"@mui/material": "^5.0.0-rc.0",
"@types/react": "^16.8.6 || ^17.0.0",
"date-fns": "^2.24.0",
"dayjs": "^1.10.7",
"luxon": "^1.28.0",
"moment": "^2.29.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"date-fns": {
"optional": true
},
"dayjs": {
"optional": true
},
"luxon": {
"optional": true
},
"moment": {
"optional": true
}
}
},
"node_modules/@mui/lab/node_modules/@babel/runtime": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
"integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@mui/lab/node_modules/@mui/core": {
"version": "5.0.0-alpha.49",
"resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.49.tgz",
"integrity": "sha512-bZ7UgH84AuKf/IT0U+knHEelDxLV0lNVFg7rKkkDfXEwUpTtAZEtZPFJjNngapSB/4MuFjaFsttex+0DGC5Z1Q==",
"dependencies": {
"@babel/runtime": "^7.15.4",
"@emotion/is-prop-valid": "^1.1.0",
"@mui/utils": "^5.0.1",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
},
"engines": {
"node": ">=12.0.0"
},
"peerDependencies": {
"@types/react": "^16.8.6 || ^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/material": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.1.tgz",
......@@ -3023,9 +3172,9 @@
}
},
"node_modules/@mui/system": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.1.tgz",
"integrity": "sha512-pGNKUpjK5hm4apZAUZu7LugemBPoZnNvNNCI2miI/BXxqyx41mL9+iT9p6Qe9uDOh8Z6GUbLIzvOjSTP+ECRZw==",
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.2.tgz",
"integrity": "sha512-K6wMbiSEYSMeYUw7zmZ2/50JFthqtuTz4OADyKc4ic2RP8ubAf/duH/nkJ4gtsKcewU4RIub0HQHl5F77WVp4Q==",
"dependencies": {
"@babel/runtime": "^7.15.4",
"@mui/private-theming": "^5.0.1",
......@@ -17992,6 +18141,14 @@
"resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
"integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
},
"node_modules/rifm": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.0.tgz",
"integrity": "sha512-PqOl+Mo2lyqrKiD34FPlnQ+ksD3F+a62TQlphiZshgriyHdfjn6jGyqUZhd+s3nsMYXwXYDdjrrv8wX7QsOG3g==",
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
......@@ -23802,6 +23959,43 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
"@date-io/core": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.11.0.tgz",
"integrity": "sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw=="
},
"@date-io/date-fns": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.11.0.tgz",
"integrity": "sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==",
"requires": {
"@date-io/core": "^2.11.0"
}
},
"@date-io/dayjs": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.11.0.tgz",
"integrity": "sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==",
"requires": {
"@date-io/core": "^2.11.0"
}
},
"@date-io/luxon": {
"version": "2.11.1",
"resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.11.1.tgz",
"integrity": "sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==",
"requires": {
"@date-io/core": "^2.11.0"
}
},
"@date-io/moment": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.11.0.tgz",
"integrity": "sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==",
"requires": {
"@date-io/core": "^2.11.0"
}
},
"@emotion/babel-plugin": {
"version": "11.3.0",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz",
......@@ -23858,6 +24052,14 @@
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
},
"@emotion/is-prop-valid": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
"integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
"requires": {
"@emotion/memoize": "^0.7.4"
}
},
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
......@@ -23923,14 +24125,6 @@
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"@emotion/is-prop-valid": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
"integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
"requires": {
"@emotion/memoize": "^0.7.4"
}
}
}
},
......@@ -24597,14 +24791,6 @@
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"@emotion/is-prop-valid": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
"integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
"requires": {
"@emotion/memoize": "^0.7.4"
}
}
}
},
......@@ -24626,6 +24812,49 @@
}
}
},
"@mui/lab": {
"version": "5.0.0-alpha.49",
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.49.tgz",
"integrity": "sha512-AKTh3gAsP5GaveAoBAjEvyuuyFMYzyfUAwo7wvz9A/EiTnkc+2QXsSO7W4ykTIjNoIGBrTd9bTV/YQNK6FpPMw==",
"requires": {
"@babel/runtime": "^7.15.4",
"@date-io/date-fns": "^2.10.6",
"@date-io/dayjs": "^2.10.6",
"@date-io/luxon": "^2.10.6",
"@date-io/moment": "^2.10.6",
"@mui/core": "5.0.0-alpha.49",
"@mui/system": "^5.0.2",
"@mui/utils": "^5.0.1",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
"react-is": "^17.0.2",
"react-transition-group": "^4.4.2",
"rifm": "^0.12.0"
},
"dependencies": {
"@babel/runtime": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
"integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"@mui/core": {
"version": "5.0.0-alpha.49",
"resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.49.tgz",
"integrity": "sha512-bZ7UgH84AuKf/IT0U+knHEelDxLV0lNVFg7rKkkDfXEwUpTtAZEtZPFJjNngapSB/4MuFjaFsttex+0DGC5Z1Q==",
"requires": {
"@babel/runtime": "^7.15.4",
"@emotion/is-prop-valid": "^1.1.0",
"@mui/utils": "^5.0.1",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
}
}
}
},
"@mui/material": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.1.tgz",
......@@ -24697,9 +24926,9 @@
}
},
"@mui/system": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.1.tgz",
"integrity": "sha512-pGNKUpjK5hm4apZAUZu7LugemBPoZnNvNNCI2miI/BXxqyx41mL9+iT9p6Qe9uDOh8Z6GUbLIzvOjSTP+ECRZw==",
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.2.tgz",
"integrity": "sha512-K6wMbiSEYSMeYUw7zmZ2/50JFthqtuTz4OADyKc4ic2RP8ubAf/duH/nkJ4gtsKcewU4RIub0HQHl5F77WVp4Q==",
"requires": {
"@babel/runtime": "^7.15.4",
"@mui/private-theming": "^5.0.1",
......@@ -36210,6 +36439,12 @@
"resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
"integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
},
"rifm": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.0.tgz",
"integrity": "sha512-PqOl+Mo2lyqrKiD34FPlnQ+ksD3F+a62TQlphiZshgriyHdfjn6jGyqUZhd+s3nsMYXwXYDdjrrv8wX7QsOG3g==",
"requires": {}
},
"rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
frontend/package.json
+ 1
− 0
View file @ b431460d
......@@ -6,6 +6,7 @@
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.0.1",
"@mui/lab": "^5.0.0-alpha.49",
"@mui/material": "^5.0.1",
"@mui/system": "^5.0.1",
"@mui/utils": "^5.0.1",
......
frontend/public/locales/en/common.json
+ 9
− 5
View file @ b431460d
......@@ -12,16 +12,20 @@
"applicationDescription": "Registration service for guests",
"selectLanguage": "Select language"
},
"input": {
"firstName": "First name",
"lastName": "Last name",
"dateOfBirth": "Date of birth",
"nationalIdNumber": "National ID number",
"roleType": "Role"
},
"loading": "Loading...",
"termsHeader": "Terms",
"staging": "Staging",
"firstName": "First name",
"lastName": "Last name",
"dateOfBirth": "Date of birth",
"nationalIdNumber": "National ID number",
"validation": {
"lastNameRequired": "Last name required",
"invalidIdNumber": "Invalid national ID number",
"nationalIdNumberRequired": "National ID number required"
"nationalIdNumberRequired": "National ID number required",
"roleTypeRequired": "Role type is required"
}
}
frontend/public/locales/nb/common.json
+ 9
− 5
View file @ b431460d
......@@ -12,16 +12,20 @@
"applicationDescription": "Registreringstjeneste for gjester",
"selectLanguage": "Velg språk"
},
"input": {
"firstName": "Fornavn",
"lastName": "Etternavn",
"dateOfBirth": "Fødselsdato",
"nationalIdNumber": "Fødselsnummer",
"roleType": "Rolle"
},
"loading": "Laster...",
"termsHeader": "Vilkår",
"staging": "Staging",
"firstName": "Fornavn",
"lastName": "Etternavn",
"dateOfBirth": "Fødselsdato",
"nationalIdNumber": "Fødselsnummer",
"validation": {
"lastNameRequired": "Etternavn er påkrevd",
"invalidIdNumber": "Ugyldig fødselsnummer",
"nationalIdNumberRequired": "Fødselsnummer er påkrevd"
"nationalIdNumberRequired": "Fødselsnummer er påkrevd",
"roleTypeRequired": "Rolletype er påkrevd"
}
}
frontend/public/locales/nn/common.json
+ 9
− 5
View file @ b431460d
......@@ -13,16 +13,20 @@
"applicationDescription": "Registreringsteneste for gjester",
"selectLanguage": "Velg språk"
},
"input": {
"firstName": "Fornamn",
"lastName": "Etternamn",
"dateOfBirth": "Fødselsdato",
"nationalIdNumber": "Fødselsnummer",
"roleType": "Rolle"
},
"loading": "Lastar...",
"termsHeader": "Vilkår",
"staging": "Staging",
"firstName": "Fornamn",
"lastName": "Etternamn",
"dateOfBirth": "Fødselsdato",
"nationalIdNumber": "Fødselsnummer",
"validation": {
"lastNameRequired": "Etternamn er påkrevd",
"invalidIdNumber": "Ugyldig fødselsnummer",
"nationalIdNumberRequired": "Fødselsnummer er påkrevd"
"nationalIdNumberRequired": "Fødselsnummer er påkrevd",
"roleTypeRequired": "Rolletype er påkrevd"
}
}
frontend/src/routes/register/index.test.tsx
+ 1
− 1
View file @ b431460d
......@@ -23,7 +23,7 @@ i18n.use(initReactI18next).init({
test('Validation message showing if last name is missing', async () => {
render(<Register />)
const firstNameLabel = i18n.t('common:firstName').toString()
const firstNameLabel = i18n.t('input.firstName').toString()
const firstNameComponent = screen.getByLabelText(firstNameLabel)
expect(firstNameComponent).toBeInTheDocument()
......
frontend/src/routes/register/index.tsx
+ 115
− 67
View file @ b431460d
import React from 'react'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useForm, Controller, SubmitHandler } from 'react-hook-form'
import { Box, Button, Stack, TextField } from '@mui/material'
import DateInput from 'components/dateinput'
import { Box, Button, MenuItem, Select, Stack, TextField } from '@mui/material'
import Page from 'components/page'
import AdapterDateFns from '@mui/lab/AdapterDateFns'
import LocalizationProvider from '@mui/lab/LocalizationProvider'
import format from 'date-fns/format'
import { isValidFnr, postJsonOpts } from 'utils'
import { DatePicker } from '@mui/lab'
type RegisterFormData = {
first_name: string
last_name: string
date_of_birth: Date
national_id_number: string
role_type: string
}
export default function Register() {
const { t } = useTranslation(['common'])
const [roletypes, setRoletypes] = useState<any[]>([])
useEffect(() => {
async function fetchRoletypes() {
fetch(`http://localhost:3000/api/ui/v1/roletypes/`)
.then(data => data.text())
.then((result => {
// The response is a JSON-array
setRoletypes(JSON.parse(result))
}))
.catch(error => {
console.error(`Error: ${error}`)
})
}
fetchRoletypes()
// Having an empty dependency array causes the role types only to be loaded once
}, [])
const submit: SubmitHandler<RegisterFormData> = (data) => {
const payload = {
......@@ -25,6 +48,7 @@ export default function Register() {
last_name: data.last_name,
date_of_birth: format(data.date_of_birth, 'yyyy-MM-dd'),
national_id_number: data.national_id_number,
role_type: data.role_type,
}
console.log('submitting', JSON.stringify(payload))
fetch('http://localhost:3000/api/ui/v1/register/', postJsonOpts(payload))
......@@ -41,78 +65,102 @@ export default function Register() {
register,
control,
handleSubmit,
// setValue,
formState: { errors },
} = useForm<RegisterFormData>()
const onSubmit = handleSubmit(submit)
return (
<Page header="Register as a guest">
<Box sx={{ maxWidth: '30rem' }}>
<form onSubmit={onSubmit}>
<Stack spacing={2}>
<TextField
id="firstName"
label={t('common:firstName')}
{...register(`first_name`)}
/>
<TextField
id="lastName"
label={t('common:lastName')}
error={!!errors.last_name}
helperText={errors.last_name && errors.last_name.message}
{...register(`last_name`, {
required: t('common:validation.lastNameRequired').toString(),
})}
/>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Page header='Register as a guest'>
<Box sx={{ maxWidth: '30rem' }}>
<form onSubmit={onSubmit}>
<Stack spacing={2}>
<TextField
id='firstName'
label={t('input.firstName')}
{...register(`first_name`)}
/>
<TextField
id='lastName'
label={t('input.lastName')}
error={!!errors.last_name}
helperText={errors.last_name && errors.last_name.message}
{...register(`last_name`, {
required: t('validation.lastNameRequired').toString(),
})}
/>
{/* TODO: replace with MUI datepicker? */}
<Controller
name="date_of_birth"
control={control}
render={({ field }) => (
<DateInput
id="dateOfBirth"
customInput={
<TextField
label={t('common:dateOfBirth')}
sx={{ display: 'flex' }}
/>
}
onChange={(date) => field.onChange(date)}
selected={field.value}
/>
)}
/>
<Controller
name='date_of_birth'
control={control}
render={({ field }) => (
<DatePicker
mask='____-__-__'
label={t('input.dateOfBirth')}
value={field.value}
inputFormat='yyyy-MM-dd'
onChange={(value) => {
field.onChange(value)
}}
renderInput={(params) => <TextField {...params} />}
/>
)}
/>
<TextField
id="nationalIdNumber"
label={t('nationalIdNumber')}
error={!!errors.national_id_number}
helperText={
errors.national_id_number && errors.national_id_number.message
}
{...register('national_id_number', {
required: t(
'common:validation.nationalIdNumberRequired'
).toString(),
validate: isValidFnr,
})}
/>
<TextField
id='nationalIdNumber'
label={t('input.nationalIdNumber')}
error={!!errors.national_id_number}
helperText={
errors.national_id_number && errors.national_id_number.message
}
{...register('national_id_number', {
required: t(
'validation.nationalIdNumberRequired',
).toString(),
validate: isValidFnr,
})}
/>
{/* <Select name="gender" options={['female', 'male', 'other']} />
<Fnr name={t('common:fnr')} /> */}
<Controller name='role_type'
control={control}
rules={{
required: t(
'validation.roleTypeRequired').toString(),
}}
render={({ field }) => (
<Select
labelId='roletype-select-label'
id='roletype-select'
error={!!errors.role_type}
label={t('input.roleType')}
onChange={(role) => {
const {
target: { value },
} = role
field.onChange(value)
}}
>
{
roletypes.map((roletype) => (
<MenuItem value={roletype.identifier}>{roletype.name_nb}</MenuItem>
))
}
</Select>
)
} />
<Button
type="submit"
data-testid="register-submit"
variant="outlined"
>
Submit
</Button>
</Stack>
</form>
</Box>
</Page>
<Button
type='submit'
data-testid='register-submit'
variant='outlined'
>
Submit
</Button>
</Stack>
</form>
</Box>
</Page>
</LocalizationProvider>
)
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment