Skip to content
Snippets Groups Projects
Commit e8a8d9de authored by Erik Borgeteien Hansen's avatar Erik Borgeteien Hansen
Browse files

Merge branch 'main' into register-view

parents 6ac7ec5b 35d96b78
No related branches found
No related tags found
1 merge request!1Register view
Pipeline #174551 passed
Stage: build
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
.gitlab-ci.yml 0 → 100644
+ 45
− 0
View file @ e8a8d9de
# 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."
src/components/LoginForm.vue
+ 162
− 201
View file @ e8a8d9de
<template>
<div class="loginForm">
<v-img :src="require('../assets/logo3.svg')" class="image" contain />
<form @submit.prevent="onSubmit">
<div class="inputFields">
<div :class="{ error: v$.user.email.$errors.length }">
<br /><label class="label" id="emailLabelId">E-post </label><br />
<input
class="loginInputs"
type="email"
v-model="v$.user.email.$model"
/>
<!-- error message -->
<div
class="input-errors"
v-for="(error, index) of v$.user.email.$errors"
:key="index"
>
<div class="error-msg" v-show="showError" id="emailErrorId">
{{ error.$message }}
</div>
</div>
</div>
<!-- password -->
<div :class="{ error: v$.user.password.$errors.length }">
<br /><label class="label" id="passwordLabelId">Passord </label><br />
<input
class="loginInputs"
type="password"
v-model="v$.user.password.$model"
/>
<!-- error message -->
<div
class="input-errors"
v-for="(error, index) of v$.user.password.$errors"
:key="index"
>
<div class="error-msg" v-show="showError" id="passwordErrorId">
{{ error.$message }}
</div>
</div>
<!-- Link to forgot password page will be added here -->
<br /><a href="url" id="forgottenPasswordLink">Glemt passord</a>
</div>
</div>
<div class="buttonLink">
<!-- Submit Button -->
<div class="buttons-w">
<br /><br /><button v-on:click="loginClicked" class="loginButton">
Logg inn
</button>
<!-- Link to register new user page will be added here -->
<br /><a id="newUserLink" href="url">Ny bruker</a>
<p id="messageUser">{{ message }}</p>
</div>
</div>
</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,
}),
data() {
return {
message: "",
user: {
email: "",
password: "",
},
showError: false,
};
},
methods: {
async loginClicked() {
this.showError = true;
const loginRequest = {
email: this.user.email,
password: this.user.password,
};
const loginResponse = await doLogin(loginRequest);
if (loginResponse === "Failed login") {
this.message = "kunne ikke logge inn";
this.$store.commit('logout');
return;
}
this.$store.commit("saveToken", loginResponse);
console.log(loginResponse);
},
},
};
</script>
<style scoped>
.loginForm {
background-color: white;
border-radius: 10px;
margin: auto;
width: 80%;
margin-top: 20%;
justify-content: center;
padding: 10px;
font-size: 18px;
}
.label {
float: left;
margin-left: 5%;
}
.loginInputs {
background-color: #c4c4c4;
border-radius: 5px;
width: 90%;
height: 40px;
padding: 5px;
}
.loginButton {
width: 55%;
height: 50px;
background-color: #1071b8;
color: white;
border-radius: 10px;
justify-content: center;
text-align: center;
margin: auto;
font-size: 25px;
margin-bottom: 20px;
}
.loginButton:disabled {
opacity: 50%;
cursor: not-allowed;
}
.buttonLink {
margin: auto;
text-align: center;
margin-bottom: 40px;
}
.image {
width: 45%;
margin: auto;
margin-top: 20px;
}
#forgottenPasswordLink {
float: right;
margin: 10px 5% 0 0;
}
#newUserLink {
text-decoration: none;
margin-bottom: 40px;
}
.inputFields {
margin: auto;
text-align: center;
}
.input-errors {
color: red;
}
</style>
<template>
<div>
<v-col
align="center"
justify="space-around"
>
<v-img
max-width="45%"
:src="require('../assets/logo3.svg')"
align="center"
></v-img>
</v-col>
<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-text-field>
</v-col>
<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-text-field>
<div class="text-decoration-underline mt-n4 mr-10">
Glemt passord
</div>
</v-col>
<v-col
align="center"
justify="space-around"
>
<v-btn
: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>
</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,
}),
data() {
return {
message: "",
user: {
email: "",
password: "",
},
showPassword: false,
valid : true,
emailRules: [
v => !!v || 'E-mail is required',
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
],
rules: {
required: value => !!value || 'Required.',
min: v => v.length >= 8 || 'Min 8 characters',
},
};
},
methods: {
async loginClicked() {
console.log(this.user.email + " " + this.user.password);
this.showError = true;
const loginRequest = {
email: this.user.email,
password: this.user.password,
};
const loginResponse = await doLogin(loginRequest);
if (loginResponse === "Failed login") {
this.message = "kunne ikke logge inn";
this.$store.commit('logout');
return;
}
this.$store.commit("saveToken", loginResponse);
console.log(loginResponse);
},
validate () {
this.$refs.form.validate()
},
},
};
</script>
src/router/index.js
+ 8
− 6
View file @ e8a8d9de
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import LoginView from "../views/LoginView.vue";
const routes = [
{
......@@ -17,7 +19,6 @@ const routes = [
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
},
{
<<<<<<< HEAD
path: "/register",
name: "register",
// route level code-splitting
......@@ -25,12 +26,13 @@ const routes = [
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "register" */ "../views/RegisterView.vue"),
=======
path: "/",
name: "loginView",
component: () => import("../views/LoginView.vue"),
>>>>>>> main
},
{
path: "/",
name: "login",
component: LoginView,
}
];
const router = createRouter({
......
tests/unit/LoginFormComponentTest.spec.js 0 → 100644
+ 16
− 0
View file @ e8a8d9de
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");
});
});
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