Skip to content
Snippets Groups Projects
Commit 1fef180b authored by Titus Netland's avatar Titus Netland
Browse files

Merge branch 'main' of https://gitlab.stud.idi.ntnu.no/idatt2106_2022_02/boco-frontend

parents df08153c 509ea1f9
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
+ 86
− 14
View file @ 1fef180b
......@@ -11,12 +11,16 @@
"@mdi/font": "5.9.55",
"@vuelidate/core": "^2.0.0-alpha.40",
"@vuelidate/validators": "^2.0.0-alpha.28",
"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": {
......@@ -4469,6 +4473,14 @@
"postcss": "^8.1.0"
}
},
"node_modules/axios": {
"version": "0.26.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
"integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
"dependencies": {
"follow-redirects": "^1.14.8"
}
},
"node_modules/babel-jest": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
......@@ -6000,10 +6012,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",
......@@ -6099,7 +6110,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"
}
......@@ -7735,7 +7745,6 @@
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
"dev": true,
"funding": [
{
"type": "individual",
......@@ -10993,6 +11002,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",
......@@ -14078,6 +14093,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",
......@@ -15455,6 +15475,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",
......@@ -15526,6 +15555,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",
......@@ -19685,6 +19727,14 @@
"postcss-value-parser": "^4.2.0"
}
},
"axios": {
"version": "0.26.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
"integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
"requires": {
"follow-redirects": "^1.14.8"
}
},
"babel-jest": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
......@@ -20820,10 +20870,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",
......@@ -20903,8 +20952,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",
......@@ -22127,8 +22175,7 @@
"follow-redirects": {
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
"dev": true
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
},
"form-data": {
"version": "3.0.1",
......@@ -24519,6 +24566,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",
......@@ -26797,6 +26850,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",
......@@ -27854,6 +27912,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",
......@@ -27897,6 +27960,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
+ 4
− 0
View file @ 1fef180b
......@@ -12,12 +12,16 @@
"@mdi/font": "5.9.55",
"@vuelidate/core": "^2.0.0-alpha.40",
"@vuelidate/validators": "^2.0.0-alpha.28",
"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 @ 1fef180b
This diff is collapsed.
src/components/LoginForm.vue
+ 124
− 153
View file @ 1fef180b
<template>
<div class="loginForm" >
<v-img
:src="require('../assets/logo3.svg')"
class="image"
contain
/>
<form @submit.prevent="onSubmit">
<!--
<div class="inputFields">
<br><label class="label">E-post</label><br>
<input class="loginInputs" type="text" v-model="v$.user.email.$model" />
<br><label class="label"><br>Passord</label><br>
<input class="loginInputs" type="password" v-model="v$.user.password.$model" />
<br><a href="url" id="forgottenPasswordLink">Glemt passord</a>
</div>
<br><br>
<div class="buttonLink">
<button class="loginButton" type="submit" @click="loginClicked">LOGG INN</button>
<br><a id="newUserLink" href="url">Ny bruker</a>
<p id="messageUser">{{ message }}</p>
</div> -->
<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">{{ 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">{{ error.$message }}</div>
</div>
<!-- Link to forgot password page will be added here -->
<br><a href="url" id="forgottenPasswordLink">Glemt passord</a>
<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>
</div>
<div class="buttonLink">
<!-- Submit Button -->
<div class="buttons-w">
<br><br><button :disabled="v$.user.$invalid" 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>
</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>
</div>
</form>
</v-form>
</div>
</template>
<script>
import useVuelidate from '@vuelidate/core'
import { required, email, minLength, helpers } from '@vuelidate/validators'
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() }
setup() {
return { v$: useVuelidate() };
},
validations() {
......@@ -99,93 +100,63 @@ export default {
password: {
required,
min: helpers.withMessage(
({$params}) => `Passordet må inneholde minst ${$params.min} tegn`,
minLength(8)
)
({ $params }) => `Passordet må inneholde minst ${$params.min} tegn`,
minLength(8)
),
},
},
}
};
},
data(){
return{
message: '',
computed: mapState({
token: (state) => state.user.token,
}),
data() {
return {
message: "",
user: {
email: '',
password: ''
}
}
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: {
loginClicked: function (){
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>
<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;
}
.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
+ 1
− 1
View file @ 1fef180b
......@@ -5,7 +5,7 @@ import LoginView from "../views/LoginView.vue";
const routes = [
{
path: "/",
path: "/endre", //Endre før push
name: "home",
component: HomeView,
},
......
src/store/index.js
+ 6
− 1
View file @ 1fef180b
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 @ 1fef180b
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 @ 1fef180b
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
+ 23
− 25
View file @ 1fef180b
<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>
<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>
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