diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 78824a80b8682129dcda2375d419766b7ff9a22f..cdf84d8c431ca77ceee48b16b433c8813f559274 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -1,81 +1,108 @@
<template>
- <div class="m-6" :class="{ error: v$.user.email.$errors.length }">
- <div class="mb-6">
- <label
- for="email"
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- >E-post</label
- >
- <input
- type="email"
- id="email"
- class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
- placeholder="eksempel@eksempel.com"
- v-model="v$.user.email.$model"
- required
- />
+ <div class="App">
+ <div id="logoField" class="flex justify-center m-6">
+ <img src="../assets/logo3.svg" alt="BoCo logo" />
+ </div>
- <!-- error message -->
- <div v-for="(error, index) of v$.user.email.$errors" :key="index">
- <div class="text-red-600 text-sm" v-show="showError" id="emailErrorId">
- {{ error.$message }}
+ <div
+ id="emailField"
+ class="m-6"
+ :class="{ error: v$.user.email.$errors.length }"
+ >
+ <div class="mb-6">
+ <label
+ for="email"
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ >E-post</label
+ >
+ <input
+ type="email"
+ id="email"
+ class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+ placeholder="eksempel@eksempel.no"
+ v-model="v$.user.email.$model"
+ required
+ />
+ <!-- error message -->
+ <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="emailErrorId"
+ >
+ {{ error.$message }}
+ </div>
</div>
</div>
</div>
- <div class="mb-6" :class="{ error: v$.user.password.$errors.length }">
+
+ <div
+ id="passwordField"
+ class="m-6"
+ :class="{ error: v$.user.password.$errors.length }"
+ >
<label
- for="password"
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- >Passord</label
+ for="password"
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ >Passord</label
>
<input
- type="password"
- id="password"
- class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
- v-model="v$.user.password.$model"
- required
+ type="password"
+ id="password"
+ class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+ v-model="v$.user.password.$model"
+ required
+ @keyup.enter="loginClicked"
/>
-
<!-- error message -->
<div
- class="text-red"
- v-for="(error, index) of v$.user.password.$errors"
- :key="index"
+ class="text-red"
+ v-for="(error, index) of v$.user.password.$errors"
+ :key="index"
>
<div
- class="text-red-600 text-sm"
- v-show="showError"
- id="passwordErrorId"
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="passwordErrorId"
>
{{ error.$message }}
</div>
</div>
+ </div>
+ <div id="buttonsField" class="m-6">
<div class="align-items: flex-end; mb-6">
<div class="ml-3 text-sm">
- <a href="/" class="text-blue-600">Glemt passord</a>
+ <router-link to="about" class="text-blue-600"
+ >Glemt passord</router-link
+ >
</div>
</div>
+ <button
+ @click="loginClicked"
+ class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+ >
+ Logg inn
+ </button>
+ <div class="align-items: flex-end; mb-6 mt-6">
+ <div class="ml-3 text-sm">
+ <router-link to="register" class="text-blue-600"
+ >Ny bruker</router-link
+ >
+ </div>
+ </div>
+ <div class="flex justify-center">
+ <label>{{ message }}</label>
+ </div>
</div>
-
- <button
- @click="loginClicked"
- class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
- >
- Logg inn
- </button>
- </div>
-
- <div>
- <label>{{ response }}</label>
</div>
</template>
<script>
import useVuelidate from "@vuelidate/core";
-import { required, email, minLength, helpers } from "@vuelidate/validators";
+import { required, email, helpers } from "@vuelidate/validators";
import { doLogin } from "@/utils/apiutil";
-import { mapState } from "vuex";
+//import { parseUserFromToken } from "@/utils/token-utils";
export default {
name: "LoginForm.vue",
@@ -93,19 +120,11 @@ export default {
},
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: "",
@@ -114,59 +133,39 @@ export default {
password: "",
},
- response: '',
-
- showPassword: false,
- valid: true,
showError: false,
- emailRules: [
- (v) => !!v || "E-mail is required",
- (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
- ],
- rules: {
- required: (value) => !!value || "Required.",
- min: (v) => v.length >= 0 || "Min 8 characters",
- },
};
},
methods: {
async loginClicked() {
- console.log(this.user.email + " " + this.user.password);
this.showError = true;
this.v$.user.email.$touch();
+
if (this.v$.user.email.$invalid) {
- console.log("Invalid, avslutter...");
+ console.log("Ugyldig, avslutter...");
return;
}
- console.log("videre!");
-
const loginRequest = {
email: this.user.email,
password: this.user.password,
};
- console.log("før");
-
- console.log("env: " + process.env.VUE_APP_BASEURL);
-
const loginResponse = await doLogin(loginRequest);
-
- console.log("respons" + loginResponse);
-
- this.response = loginResponse.data;
-
- if (loginResponse === "Failed login") {
- this.message = "kunne ikke logge inn";
+ if (loginResponse.isLoggedIn === false) {
+ this.message = "Feil e-post/passord";
this.$store.commit("logout");
- return;
}
-
- this.$store.commit("saveToken", loginResponse);
- console.log(loginResponse);
+ else if (loginResponse.isLoggedIn === true) {
+ this.$store.commit("saveToken", loginResponse.token);
+ await this.$router.push("/");
+ }
+ else {
+ console.log("Something went wrong");
+ }
},
validate() {
@@ -175,3 +174,4 @@ export default {
},
};
</script>
+
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 392cdac50790000e21b7f405fd5be4b8a80a939e..76fb9a8f5940aa102f2a02648ab5644667c69495 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -1,13 +1,73 @@
import axios from "axios";
+import { tokenHeader } from "./token-utils";
+
+const API_URL = process.env.VUE_APP_BASEURL;
export function doLogin(loginRequest) {
+ const auth = {isLoggedIn: false, token: ""};
+ return axios
+ .post(API_URL + "login/authentication", loginRequest)
+ .then((response) => {
+ auth.isLoggedIn = true;
+ auth.token = response.data;
+ return auth;
+ })
+ .catch((error) => {
+ console.log(error.response);
+ return auth;
+ });
+}
+
+export function registerUser(registerInfo) {
+ return axios
+ .post(API_URL + "register", {
+ email: registerInfo.email,
+ firstName: registerInfo.firstName,
+ lastname: registerInfo.lastname,
+ password: registerInfo.password,
+ address: registerInfo.address,
+ })
+ .then((response) => {
+ return response;
+ })
+ .catch((err) => console.log(err));
+}
+
+export async function getUser(userid) {
+ return axios
+ .get(API_URL + "users/" + userid + "/profile", {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+}
+
+export function getRenterRating(userid) {
+ return axios
+ .get(API_URL + "users/" + userid + "", {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+}
+
+export function getOwnerRating(userid) {
return axios
- .post(process.env.VUE_APP_BASEURL + 'login/authentication', loginRequest)
- .then((response) => {
- return response.data;
- })
+ .get(API_URL + "users/" + userid + "", {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
.catch((error) => {
- console.log(error.response);
- return error.response;
+ console.error(error);
});
}