diff --git a/package-lock.json b/package-lock.json
index 448b405646d04ca6f9fc3a0e45d3bc1bd3d115a6..c9794fa2a44dcfbf3d0dae6c384e3d11d8077116 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18773,7 +18773,8 @@
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.4.tgz",
"integrity": "sha512-dBwiD6mT9+V2HTHcwaWE8qFNgTk5I/NUvxYVeUN3Mmmpo4y/1RxXnr7BlKGnaQsTypb2RFk3KowqIJtg7s+E3Q==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"@vue/cli-service": {
"version": "5.0.4",
@@ -19103,7 +19104,8 @@
"version": "2.0.0-rc.20",
"resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-rc.20.tgz",
"integrity": "sha512-aSkOAzM/ZlIyYgN7yj661FTjhFZZy5i9+FUbbDNoMGYA4F1WKwDdcDCPj9B/qzt3wGFkuCP5PO6SBtdSTMEhIA==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.9.8",
@@ -19378,13 +19380,15 @@
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
"integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"acorn-jsx": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"acorn-walk": {
"version": "8.2.0",
@@ -19452,7 +19456,8 @@
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"ansi-colors": {
"version": "4.1.1",
@@ -20516,7 +20521,8 @@
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz",
"integrity": "sha512-Ufadglr88ZLsrvS11gjeu/40Lw74D9Am/Jpr3LlYm5Q4ZP5KdlUhG+6u2EjyXeZcxmZ2h1ebCKngDjolpeLHpg==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"css-loader": {
"version": "6.7.1",
@@ -20701,7 +20707,8 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
"integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"csso": {
"version": "4.2.0",
@@ -21493,7 +21500,8 @@
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
"integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"eslint-plugin-prettier": {
"version": "4.0.0",
@@ -22450,7 +22458,8 @@
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"ieee754": {
"version": "1.2.1",
@@ -23557,7 +23566,8 @@
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
"integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"jest-regex-util": {
"version": "27.5.1",
@@ -25644,25 +25654,29 @@
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.1.tgz",
"integrity": "sha512-5JscyFmvkUxz/5/+TB3QTTT9Gi9jHkcn8dcmmuN68JQcv3aQg4y88yEHHhwFB52l/NkaJ43O0dbksGMAo49nfQ==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"postcss-discard-duplicates": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
"integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"postcss-discard-empty": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
"integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"postcss-discard-overridden": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
"integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"postcss-loader": {
"version": "6.2.1",
@@ -25752,7 +25766,8 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"postcss-modules-local-by-default": {
"version": "4.0.0",
@@ -25787,7 +25802,8 @@
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
"integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"postcss-normalize-display-values": {
"version": "5.1.0",
@@ -27741,7 +27757,8 @@
"vuetify": {
"version": "3.0.0-beta.1",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.1.tgz",
- "integrity": "sha512-698CB/Xlvxku2Tm4AsFrmQ7LzMXOjleX7A5tbyQTnhPyt0NI1OTkf5zJUoXL3TNi2TN7DglN+adI6AE69e6CeQ=="
+ "integrity": "sha512-698CB/Xlvxku2Tm4AsFrmQ7LzMXOjleX7A5tbyQTnhPyt0NI1OTkf5zJUoXL3TNi2TN7DglN+adI6AE69e6CeQ==",
+ "requires": {}
},
"vuetify-loader": {
"version": "2.0.0-alpha.9",
@@ -28117,7 +28134,8 @@
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
"integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
- "dev": true
+ "dev": true,
+ "requires": {}
}
}
},
@@ -28272,7 +28290,8 @@
"version": "7.5.7",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
"integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"xml-name-validator": {
"version": "3.0.0",
diff --git a/src/components/RegisterFormComponent.vue b/src/components/RegisterFormComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61ff4d96aee4f8adb2366718de36507aad5cc555
--- /dev/null
+++ b/src/components/RegisterFormComponent.vue
@@ -0,0 +1,132 @@
+<template>
+ <v-form ref="form" v-model="valid" lazy-validation>
+ <v-text-field
+ v-model="firstName"
+ :counter="32"
+ :rules="firstNameRules"
+ label="Fornavn"
+ required
+ ></v-text-field>
+
+ <v-text-field
+ v-model="lastName"
+ :counter="32"
+ :rules="lastNameRules"
+ label="Etternavn"
+ required
+ ></v-text-field>
+
+ <v-text-field
+ v-model="email"
+ :rules="emailRules"
+ label="E-mail"
+ required
+ ></v-text-field>
+
+ <v-text-field
+ v-model="address"
+ :counter="32"
+ :rules="addressRules"
+ label="Addresse"
+ required
+ ></v-text-field>
+
+ <v-text-field
+ v-model="password"
+ :counter="32"
+ :rules="passwordRules"
+ label="Passord"
+ :append-icon="passwordHidden ? 'mdi-eye' : 'mdi-eye-off'"
+ :type="passwordHidden ? 'text' : 'password'"
+ @click:append="passwordHidden = !passwordHidden"
+ required
+ ></v-text-field>
+
+ <!-- <v-text-field
+ v-model="confirmPassword"
+ :rules="confirmPasswordRules"
+ label="Bekreft passord"
+ :append-icon="confirmPasswordHidden ? 'mdi-eye' : 'mdi-eye-off'"
+ :type="confirmPasswordHidden ? 'text' : 'password'"
+ @click:append="confirmPasswordHidden = !confirmPasswordHidden"
+ required
+ ></v-text-field> -->
+
+ <!-- <v-select
+ v-model="select"
+ :items="items"
+ :rules="[(v) => !!v || 'Item is required']"
+ label="Item"
+ required
+ ></v-select> -->
+
+ <!-- <v-checkbox
+ v-model="checkbox"
+ :rules="[(v) => !!v || 'You must agree to continue!']"
+ label="Do you agree?"
+ required
+ ></v-checkbox> -->
+
+ <v-btn :disabled="!valid" color="success" class="mr-4" @click="submit"
+ >Registrer</v-btn
+ >
+
+ <v-btn color="error" class="mr-4" @click="reset">Tøm alle felter</v-btn>
+ </v-form>
+</template>
+<script>
+export default {
+ data: () => ({
+ passwordHidden: false,
+ // confirmPasswordHidden: false,
+ valid: true,
+ firstName: "",
+ firstNameRules: [
+ (v) => !!v || "Fornavn er påkrevd",
+ (v) => (v && v.length <= 32) || "Fornavn må være mindre enn 32 bokstaver",
+ ],
+ lastName: "",
+ lastNameRules: [
+ (v) => !!v || "Etternavn er påkrevd",
+ (v) =>
+ (v && v.length <= 32) || "Etternavn må være mindre enn 32 bokstaver",
+ ],
+ address: "",
+ addressRules: [
+ (v) => !!v || "Addresse er påkrevd",
+ (v) =>
+ (v && v.length <= 32) || "Addresse må være mindre enn 32 bokstaver",
+ ],
+ password: "",
+ passwordRules: [
+ (v) => !!v || "Passord er påkrevd",
+ (v) => (v && v.length <= 32) || "Passord må være mindre enn 32 bokstaver",
+ ],
+ // confirmPassword: "",
+ // confirmPasswordRules: [
+ // (v) => !!v || "Passord er påkrevd",
+ // (v) => (v && v.length <= 32) || "Passord må være mindre enn 32 bokstaver",
+ // // (v) => v === this.password || "Passordene må være like",
+ // ],
+ email: "",
+ emailRules: [
+ (v) => !!v || "E-mail is required",
+ (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
+ ],
+ // select: null,
+ // items: ["Item 1", "Item 2", "Item 3", "Item 4"],
+ // checkbox: false,
+ }),
+
+ methods: {
+ submit() {
+ // Validate form before using data
+ this.$refs.form.validate();
+ },
+ reset() {
+ this.$refs.form.reset();
+ this.$refs.form.resetValidation();
+ },
+ },
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 76687a1d81cad5e7b347e5de0c5dd4643e98c004..326064302f4251f1b05b8c3466f0dcc8777fccad 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,6 +16,15 @@ const routes = [
component: () =>
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
},
+ {
+ path: "/register",
+ name: "register",
+ // route level code-splitting
+ // this generates a separate chunk (register.[hash].js) for this route
+ // which is lazy-loaded when the route is visited.
+ component: () =>
+ import(/* webpackChunkName: "register" */ "../views/RegisterView.vue"),
+ },
];
const router = createRouter({
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c68716a9d1125795dc4b27b7e8a61ba10e443614
--- /dev/null
+++ b/src/views/RegisterView.vue
@@ -0,0 +1,21 @@
+<template>
+ <register-form-component id="form" />
+</template>
+
+<script>
+import RegisterFormComponent from "../components/RegisterFormComponent.vue";
+
+export default {
+ components: {
+ RegisterFormComponent,
+ },
+};
+</script>
+
+<style scoped>
+#form {
+ max-width: 80%;
+ margin: auto;
+ margin-top: 5%;
+}
+</style>