Merge branch 'register-view' into 'main'

Register view

See merge request !1

docker-compose.yml

+version: '3'
+
+services:
+  boco-frontend:
+    build: .
+    container_name: boco-frontend
+    ports:
+      - 8080:8080
\ No newline at end of file

package-lock.json

@@ -9,8 +9,11 @@
       "version": "0.1.0",
       "dependencies": {
         "@mdi/font": "5.9.55",
+<<<<<<< HEAD
+=======
         "@vuelidate/core": "^2.0.0-alpha.40",
         "@vuelidate/validators": "^2.0.0-alpha.28",
+>>>>>>> main
         "axios": "^0.26.1",
         "core-js": "^3.8.3",
         "cssom": "^0.5.0",

package.json

@@ -10,8 +10,11 @@
   },
   "dependencies": {
     "@mdi/font": "5.9.55",
+<<<<<<< HEAD
+=======
     "@vuelidate/core": "^2.0.0-alpha.40",
     "@vuelidate/validators": "^2.0.0-alpha.28",
+>>>>>>> main
     "axios": "^0.26.1",
     "core-js": "^3.8.3",
     "cssom": "^0.5.0",

src/components/RegisterFormComponent.vue

+<template>
+  <v-form ref="form" v-model="valid" lazy-validation>
+    <v-text-field
+      v-model="email"
+      :rules="emailRules"
+      label="E-mail"
+      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-container class="grey lighten-5">
+      <v-row>
+        <v-text-field
+          class="pr-2"
+          v-model="firstName"
+          :counter="32"
+          :rules="firstNameRules"
+          label="Fornavn"
+          required
+        ></v-text-field>
+
+        <v-text-field
+          class="pl-2"
+          v-model="lastName"
+          :counter="32"
+          :rules="lastNameRules"
+          label="Etternavn"
+          required
+        ></v-text-field>
+      </v-row>
+    </v-container>
+
+    <v-text-field
+      v-model="address"
+      :counter="32"
+      :rules="addressRules"
+      label="Addresse"
+      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 felter</v-btn>
+  </v-form>
+</template>
+<script>
+import axios from "axios";
+
+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 tegn",
+      (v) => (v && v.length >= 8) || "Passord må være større enn 8 tegn",
+    ],
+    // 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() {
+      console.log("Attempting to register user");
+      this.valid = this.$refs.form.validate();
+      if (!this.valid) return;
+      this.valid = false;
+      console.log("User is validated");
+      axios
+        .post("http://localhost:3000/api/register", {
+          email: this.email,
+          firstName: this.firstName,
+          lastname: this.lastName,
+          password: this.password,
+          address: this.address,
+        })
+        .then(console.log("Sent"))
+        .catch((e) => console.log(e));
+    },
+    reset() {
+      this.$refs.form.reset();
+      this.$refs.form.resetValidation();
+      this.valid = true;
+    },
+  },
+};
+</script>

src/router/index.js

@@ -18,11 +18,21 @@ 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"),
+  },
   {
     path: "/",
     name: "login",
     component: LoginView,
   }
+
 ];
 
 const router = createRouter({

src/views/RegisterView.vue

+<template>
+  <register-form-component id="form" class="pa-8" />
+</template>
+
+<script>
+import RegisterFormComponent from "../components/RegisterFormComponent.vue";
+
+export default {
+  components: {
+    RegisterFormComponent,
+  },
+};
+</script>
+
+<style scoped>
+#form {
+  max-width: 600px;
+  margin: auto;
+}
+</style>