Merge remote-tracking branch 'origin/main'

# Conflicts:
#	src/components/LoginForm.vue

.gitlab-ci.yml

+# This file is a template, and might need editing before it works on your project.
+# To contribute improvements to CI/CD templates, please follow the Development guide at:
+# https://docs.gitlab.com/ee/development/cicd/templates.html
+# This specific template is located at:
+# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Getting-Started.gitlab-ci.yml
+
+# This is a sample GitLab CI/CD configuration file that should run without any modifications.
+# It demonstrates a basic 3 stage CI/CD pipeline. Instead of real tests or scripts,
+# it uses echo commands to simulate the pipeline execution.
+#
+# A pipeline is composed of independent jobs that run scripts, grouped into stages.
+# Stages run in sequential order, but jobs within stages run in parallel.
+#
+# For more information, see: https://docs.gitlab.com/ee/ci/yaml/index.html#stages
+
+stages:          # List of stages for jobs, and their order of execution
+  - build
+  - test
+  - deploy
+
+build-job:       # This job runs in the build stage, which runs first.
+  stage: build
+  script:
+    - echo "Compiling the code..."
+    - echo "Compile complete."
+
+unit-test-job:   # This job runs in the test stage.
+  stage: test    # It only starts when the job in the build stage completes successfully.
+  script:
+    - echo "Running unit tests... This will take about 60 seconds."
+    - sleep 60
+    - echo "Code coverage is 90%"
+
+lint-test-job:   # This job also runs in the test stage.
+  stage: test    # It can run at the same time as unit-test-job (in parallel).
+  script:
+    - echo "Linting code... This will take about 10 seconds."
+    - sleep 10
+    - echo "No lint issues found."
+
+deploy-job:      # This job runs in the deploy stage.
+  stage: deploy  # It only runs when *both* jobs in the test stage complete successfully.
+  script:
+    - echo "Deploying application..."
+    - echo "Application successfully deployed."

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/LoginForm.vue

+<!--suppress HtmlDeprecatedAttribute -->
 <template>
   <div>
-    <v-col
+    <v-col align="center" justify="space-around" class="mt-16">
+      <v-img
+        max-width="45%"
+        :src="require('../assets/logo3.svg')"
         align="center"
-        justify="space-around"
-    >
-        <v-img
-            max-width="45%"
-            :src="require('../assets/logo3.svg')"
-            align="center"
-        ></v-img>
-      </v-col>
+      ></v-img>
+    </v-col>
 
-    <v-form
-        ref="form"
-        v-model="valid"
-        lazy-validation
-    >
+    <v-form ref="form" v-model="valid" lazy-validation>
       <v-col>
         <v-text-field
-            v-model="user.email"
-            :rules="emailRules"
-            label="E-mail"
-            required
+          v-model="user.email"
+          :rules="[rules.email]"
+          label="Epost"
+          required
         ></v-text-field>
       </v-col>
 
-
-      <v-col
-        align="right"
-      >
+      <v-col align="right">
         <v-text-field
-            v-model="user.password"
-            :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-            :rules="[rules.required, rules.min]"
-            :type="showPassword ? 'text' : 'password'"
-            name="input-10-1"
-            label="Password"
-            counter
-            @click:append="showPassword = !showPassword"
+          v-model="user.password"
+          :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+          :rules="[rules.required, rules.min]"
+          :type="showPassword ? 'text' : 'password'"
+          name="input-10-1"
+          label="Passord"
+          counter
+          @click:append="showPassword = !showPassword"
         ></v-text-field>
 
-        <div class="text-decoration-underline mt-n4 mr-10">
-          Glemt passord
-        </div>
+        <div class="text-decoration-underline mt-n4 mr-10">Glemt passord</div>
       </v-col>
 
-
-
-      <v-col
-          align="center"
-          justify="space-around"
-      >
+      <v-col align="center" justify="space-around">
         <v-btn
-            :disabled="!valid"
-            color="success"
-            class="mb-4 mt-4"
-            width="50%"
-            height="40px"
-            @click="loginClicked"
+          :disabled="!valid"
+          color="success"
+          class="mb-4 mt-4"
+          width="50%"
+          height="40px"
+          @click="loginClicked"
         >
           Logg inn
         </v-btn>
 
         <div>
-          <a
-              href="/"
-              class="text-decoration-none"
-          >Ny bruker</a>
+          <a href="/" class="text-decoration-none">Ny bruker</a>
         </div>
       </v-col>
-
-
-
     </v-form>
   </div>
-
 </template>
 
 <script>
-import useVuelidate from "@vuelidate/core";
-import { required, email, minLength, helpers } from "@vuelidate/validators";
 import { doLogin } from "@/utils/apiutil";
 import { mapState } from "vuex";
 
 export default {
   name: "LoginForm.vue",
 
-  setup() {
-    return { v$: useVuelidate() };
-  },
-
-  validations() {
-    return {
-      user: {
-        email: {
-          required,
-          email: helpers.withMessage(`E-posten er ugyldig`, email),
-        },
-        password: {
-          required,
-          min: helpers.withMessage(
-            ({ $params }) => `Passordet må inneholde minst ${$params.min} tegn`,
-            minLength(8)
-          ),
-        },
-      },
-    };
-  },
-
   computed: mapState({
     token: (state) => state.user.token,
   }),
@@ -121,14 +74,11 @@ export default {
       },
 
       showPassword: false,
-      valid : true,
-      emailRules: [
-        v => !!v || 'E-mail is required',
-        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
-      ],
+      valid: true,
       rules: {
-        required: value => !!value || 'Required.',
-        min: v => v.length >= 8 || 'Min 8 characters',
+        required: (value) => !!value || "Feltet er påkrevd",
+        min: (v) => v.length >= 8 || "Minimum 8 tegn",
+        email: (v) => /.+@.+\..+/.test(v) || "Epost adressen må være gyldig",
       },
     };
   },
@@ -136,7 +86,6 @@ export default {
   methods: {
     async loginClicked() {
       console.log(this.user.email + " " + this.user.password);
-      this.showError = true;
       const loginRequest = {
         email: this.user.email,
         password: this.user.password,
@@ -144,8 +93,8 @@ export default {
       const loginResponse = await doLogin(loginRequest);
 
       if (loginResponse === "Failed login") {
-        this.message = "kunne ikke logge inn";
-        this.$store.commit('logout');
+        this.message = "Feil brukernavn/passord";
+        this.$store.commit("logout");
         return;
       }
 
@@ -153,9 +102,8 @@ export default {
       console.log(loginResponse);
     },
 
-
-    validate () {
-      this.$refs.form.validate()
+    validate() {
+      this.$refs.form.validate();
     },
   },
 };

src/components/NewPasswordForm.vue

+<template>
+  <div>
+    <v-col align="center" justify="space-around" class="mt-16">
+      <v-img
+        max-width="45%"
+        :src="require('../assets/logo3.svg')"
+        align="center"
+      />
+    </v-col>
+
+    <v-form ref="form" v-model="valid" lazy-validation class="mt-8">
+      <v-text-field
+        v-model="user.password"
+        :rules="[rules.required, rules.min]"
+        :type="'password'"
+        name="input-10-1"
+        label="Passord"
+        counter
+      ></v-text-field>
+
+      <v-text-field
+        v-model="user.rePassword"
+        :rules="[rules.required, rules.min, rules.passwordConfirmation]"
+        :type="'password'"
+        name="input-10-1"
+        label="Confirm Password"
+        counter
+      ></v-text-field>
+
+      <v-col justify="space-around" align="center">
+        <v-btn
+          :disabled="!valid"
+          color="success"
+          class="mb-4 mt-4"
+          width="50%"
+          height="40px"
+          @click="setNewPassword"
+        >
+          Endre passord
+        </v-btn>
+      </v-col>
+    </v-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NewPasswordForm.vue",
+
+  data() {
+    return {
+      user: {
+        password: "",
+        rePassword: "",
+      },
+
+      valid: true,
+      rules: {
+        required: (value) => !!value || "Feltet er påkrevd",
+        min: (v) => v.length >= 8 || "Minimum 8 tegn",
+        passwordConfirmation: (v) => v === this.user.password || "Passordene må være like"
+      },
+    };
+  },
+
+  methods: {
+    async setNewPassword() {
+
+    },
+    validate() {
+      this.$refs.form.validate();
+    },
+  },
+};
+</script>

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

 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import LoginView from "../views/LoginView.vue";
-
+import NewPasswordView from "../views/NewPasswordView";
 
 const routes = [
   {
@@ -19,10 +19,24 @@ const routes = [
       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   },
   {
-    path: "/login",
+    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,
-  }
+  },
+  {
+    path: "/newPassword",
+    name: "newPassword",
+    component: NewPasswordView,
+  },
 ];
 
 const router = createRouter({

src/utils/apiutil.js

@@ -2,7 +2,7 @@ import axios from "axios";
 
 export function doLogin(loginRequest) {
   return axios
-    .post(`http://localhost:8080/api/login/authentication`, loginRequest)
+    .post(`http://65.108.62.223:3000/api/login/authentication`, loginRequest)
     .then((response) => {
       return response.data;
     });

src/views/NewPasswordView.vue

+<template>
+  <div class="newPasswordPage">
+    <NewPasswordForm></NewPasswordForm>
+  </div>
+</template>
+
+<script>
+import NewPasswordForm from "@/components/NewPasswordForm";
+export default {
+  name: "NewPasswordView.vue",
+  components: {
+    NewPasswordForm,
+  },
+};
+</script>
+
+<style scoped>
+.newPasswordPage {
+  background-color: white;
+  height: 100%;
+  overflow: auto;
+}
+</style>

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>

tests/unit/LoginFormComponentTest.spec.js

-import { shallowMount } from "@vue/test-utils";
-import LoginForm from "@/components/LoginForm";
-
-describe("Tests labels in LoginForm component", () => {
-    it("checks the E-post label", () => {
-        const wrapper = shallowMount(LoginForm);
-
-        expect(wrapper.find('#emailLabelId').text()).toMatch("E-post");
-    });
-
-    it("checks the password label", () => {
-        const wrapper = shallowMount(LoginForm);
-
-        expect(wrapper.find('#passwordLabelId').text()).toMatch("Passord");
-    });
-});

tests/unit/apiutil-login-mock.spec.js

+import { doLogin } from '@/utils/apiutil'
+import axios from 'axios';
+
+jest.mock('axios')
+
+describe('testing mocking of apiutil.js', () => {
+  it('check that login fails with wrong credentials - against mock', async () => {
+
+    // mock api response on POST call (once)
+    const expectedLoginResponse = {response: 'Login failed'};
+    axios.post.mockImplementation(() => Promise.resolve({data: expectedLoginResponse}));
+
+    // do the call
+    const loginRequest = {email: "wrong@email.com", password: "thisiswrong123"};
+    const loginResponse = await doLogin(loginRequest);
+
+    //  check response
+    //  note that even if wrong username and password are used, mock is configured to return Success
+    expect(loginResponse).toEqual(expectedLoginResponse);
+  });
+  it('check that login succeeds when correct credentials - against mock', async () => {
+
+    // mock api response on POST call (once)
+    const apiResponse = {response: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'};
+    const expectedLoginResponse = {response: 'Login failed'};
+    axios.post.mockImplementation(() => Promise.resolve({data: apiResponse}));
+
+    // do the call
+    const loginRequest = {email: "correct@email.com", password: "thisiscorrect123"};
+    const loginResponse = await doLogin(loginRequest);
+
+    //  check response
+    //  note that even if wrong username and password are used, mock is configured to return Success
+    expect(loginResponse).not.toEqual(expectedLoginResponse);
+  })})
+
+