Add register page "/register"

8953179d · Erik Borgeteien Hansen · c22adbbc · 8953179d · 8953179d · 8953179d
Commit 8953179d authored 3 years ago by Erik Borgeteien Hansen
--- 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",
--- a/src/components/RegisterFormComponent.vue
+++ b/src/components/RegisterFormComponent.vue
+<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>
--- 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({

--- a/src/views/RegisterView.vue
+++ b/src/views/RegisterView.vue
+<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>