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

Merge branch 'main' into register-view

parents 44363019 4cc09266
No related branches found
No related tags found
1 merge request!1Register view
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 443 additions and 25 deletions
package-lock.json
+ 171
− 11
View file @ 6ac7ec5b
......@@ -9,13 +9,21 @@
"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",
"roboto-fontface": "*",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuelidate": "^0.7.7",
"vuetify": "^3.0.0-beta.0",
"vuex": "^4.0.0",
"vuex-persistedstate": "^4.1.0",
"webfontloader": "^1.0.0"
},
"devDependencies": {
......@@ -3853,6 +3861,72 @@
"integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
"dev": true
},
"node_modules/@vuelidate/core": {
"version": "2.0.0-alpha.40",
"resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0-alpha.40.tgz",
"integrity": "sha512-f4Uo0yV2BHDi5+MXWDXRcqBv0u1Cqc/RudJLGqke3wLnIcH2r8sXEqRyuVoaN2KEPqbZiTFw/Uo50wx1J+ZDFQ==",
"dependencies": {
"vue-demi": "^0.12.0"
}
},
"node_modules/@vuelidate/core/node_modules/vue-demi": {
"version": "0.12.5",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
"integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vuelidate/validators": {
"version": "2.0.0-alpha.28",
"resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0-alpha.28.tgz",
"integrity": "sha512-FLI4D6SfYas5gkRxc2Q8RU1Jv3mhO2wdNgYpnOEWdKB2S6vhy8ABFMXiyr4P764xY9zBmNg6OwceRfq8vYy6vA==",
"dependencies": {
"vue-demi": "^0.12.0"
}
},
"node_modules/@vuelidate/validators/node_modules/vue-demi": {
"version": "0.12.5",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
"integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vuetify/loader-shared": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.3.0.tgz",
......@@ -5941,10 +6015,9 @@
}
},
"node_modules/cssom": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
"integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
"dev": true
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
"integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw=="
},
"node_modules/cssstyle": {
"version": "2.3.0",
......@@ -6040,7 +6113,6 @@
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
......@@ -10933,6 +11005,12 @@
}
}
},
"node_modules/jsdom/node_modules/cssom": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
"integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
"dev": true
},
"node_modules/jsdom/node_modules/parse5": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
......@@ -14018,6 +14096,11 @@
"node": ">=4"
}
},
"node_modules/shvl": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz",
"integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw=="
},
"node_modules/sigmund": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
......@@ -15395,6 +15478,15 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"node_modules/vuelidate": {
"version": "0.7.7",
"resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.7.tgz",
"integrity": "sha512-pT/U2lDI67wkIqI4tum7cMSIfGcAMfB+Phtqh2ttdXURwvHRBJEAQ0tVbUsW9Upg83Q5QH59bnCoXI7A9JDGnA==",
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
},
"node_modules/vuetify": {
"version": "3.0.0-beta.1",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.1.tgz",
......@@ -15466,6 +15558,19 @@
"vue": "^3.0.2"
}
},
"node_modules/vuex-persistedstate": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
"integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
"dependencies": {
"deepmerge": "^4.2.2",
"shvl": "^2.0.3"
},
"peerDependencies": {
"vuex": "^3.0 || ^4.0.0-rc"
}
},
"node_modules/w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
......@@ -19164,6 +19269,38 @@
"integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
"dev": true
},
"@vuelidate/core": {
"version": "2.0.0-alpha.40",
"resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0-alpha.40.tgz",
"integrity": "sha512-f4Uo0yV2BHDi5+MXWDXRcqBv0u1Cqc/RudJLGqke3wLnIcH2r8sXEqRyuVoaN2KEPqbZiTFw/Uo50wx1J+ZDFQ==",
"requires": {
"vue-demi": "^0.12.0"
},
"dependencies": {
"vue-demi": {
"version": "0.12.5",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
"integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
"requires": {}
}
}
},
"@vuelidate/validators": {
"version": "2.0.0-alpha.28",
"resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0-alpha.28.tgz",
"integrity": "sha512-FLI4D6SfYas5gkRxc2Q8RU1Jv3mhO2wdNgYpnOEWdKB2S6vhy8ABFMXiyr4P764xY9zBmNg6OwceRfq8vYy6vA==",
"requires": {
"vue-demi": "^0.12.0"
},
"dependencies": {
"vue-demi": {
"version": "0.12.5",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
"integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
"requires": {}
}
}
},
"@vuetify/loader-shared": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.3.0.tgz",
......@@ -20736,10 +20873,9 @@
}
},
"cssom": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
"integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
"dev": true
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
"integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw=="
},
"cssstyle": {
"version": "2.3.0",
......@@ -20819,8 +20955,7 @@
"deepmerge": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
"dev": true
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
},
"default-gateway": {
"version": "6.0.3",
......@@ -24434,6 +24569,12 @@
"xml-name-validator": "^3.0.0"
},
"dependencies": {
"cssom": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
"integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
"dev": true
},
"parse5": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
......@@ -26712,6 +26853,11 @@
"rechoir": "^0.6.2"
}
},
"shvl": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz",
"integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw=="
},
"sigmund": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
......@@ -27769,6 +27915,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vuelidate": {
"version": "0.7.7",
"resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.7.tgz",
"integrity": "sha512-pT/U2lDI67wkIqI4tum7cMSIfGcAMfB+Phtqh2ttdXURwvHRBJEAQ0tVbUsW9Upg83Q5QH59bnCoXI7A9JDGnA=="
},
"vuetify": {
"version": "3.0.0-beta.1",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.1.tgz",
......@@ -27812,6 +27963,15 @@
"@vue/devtools-api": "^6.0.0-beta.11"
}
},
"vuex-persistedstate": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
"integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
"requires": {
"deepmerge": "^4.2.2",
"shvl": "^2.0.3"
}
},
"w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
package.json
+ 8
− 0
View file @ 6ac7ec5b
......@@ -10,13 +10,21 @@
},
"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",
"roboto-fontface": "*",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuelidate": "^0.7.7",
"vuetify": "^3.0.0-beta.0",
"vuex": "^4.0.0",
"vuex-persistedstate": "^4.1.0",
"webfontloader": "^1.0.0"
},
"devDependencies": {
......
src/assets/logo3.svg 0 → 100644
+ 1
− 0
View file @ 6ac7ec5b
This diff is collapsed.
src/components/LoginForm.vue 0 → 100644
+ 201
− 0
View file @ 6ac7ec5b
<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>
src/router/index.js
+ 7
− 1
View file @ 6ac7ec5b
......@@ -3,7 +3,7 @@ import HomeView from "../views/HomeView.vue";
const routes = [
{
path: "/",
path: "/endre", //Endre før push
name: "home",
component: HomeView,
},
......@@ -17,6 +17,7 @@ const routes = [
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
},
{
<<<<<<< HEAD
path: "/register",
name: "register",
// route level code-splitting
......@@ -24,6 +25,11 @@ 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
},
];
......
src/store/index.js
+ 6
− 1
View file @ 6ac7ec5b
import { createStore } from "vuex";
import user from "./modules/user";
import createPersistedState from "vuex-persistedstate";
export default createStore({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {},
modules: {
user,
},
plugins: [createPersistedState()],
});
src/store/modules/user.js 0 → 100644
+ 17
− 0
View file @ 6ac7ec5b
const state = {
token: null,
};
const mutations = {
logout(state) {
state.token = null;
},
saveToken(state, token) {
state.token = token;
},
};
export default {
state,
mutations,
};
src/utils/apiutil.js 0 → 100644
+ 9
− 0
View file @ 6ac7ec5b
import axios from "axios";
export function doLogin(loginRequest) {
return axios
.post(`http://localhost:8080/api/login/authentication`, loginRequest)
.then((response) => {
return response.data;
});
}
src/views/LoginView.vue 0 → 100644
+ 23
− 0
View file @ 6ac7ec5b
<template>
<div class="loginPage">
<LoginForm></LoginForm>
</div>
</template>
<script>
import LoginForm from "@/components/LoginForm";
export default {
name: "LoginView.vue",
components: {
LoginForm,
},
};
</script>
<style scoped>
.loginPage {
background-color: white;
height: 100%;
overflow: auto;
}
</style>
tests/unit/example.spec.js deleted 100644 → 0
+ 0
− 12
View file @ 44363019
import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
describe("HelloWorld.vue", () => {
it("renders props.msg when passed", () => {
const msg = "new message";
const wrapper = shallowMount(HelloWorld, {
props: { msg },
});
expect(wrapper.text()).toMatch(msg);
});
});
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