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

LoginForm Tailwinded and .env added

parent 77863299
No related branches found
No related tags found
1 merge request!11LoginForm Tailwinded and .env added
Pipeline #175495 passed
.env 0 → 100644
VUE_APP_BASEURL="http://65.108.62.223:3000/api/"
<!--suppress HtmlDeprecatedAttribute -->
<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-img>
</v-col>
<v-form ref="form" v-model="valid" lazy-validation>
<v-col>
<v-text-field
v-model="user.email"
:rules="[rules.email]"
label="Epost"
<div class="App">
<div id="logoField" class="flex justify-center m-6">
<img src="../assets/logo3.svg" alt="BoCo logo" />
</div>
<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
></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="Passord"
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"
/>
<!-- 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
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
>
<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
/>
<!-- error message -->
<div
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"
>
Logg inn
</v-btn>
{{ error.$message }}
</div>
</div>
</div>
<div>
<a href="/" class="text-decoration-none">Ny bruker</a>
<div id="buttonsField" class="m-6">
<div class="align-items: flex-end; mb-6">
<div class="ml-3 text-sm">
<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="flex justify-center 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>
</v-col>
</v-form>
<label>{{ message }}</label>
</div>
<div class="flex flex-row min-h-screen justify-center items-center">
<label>{{ message }}</label>
</div>
</div>
</div>
</template>
<script>
import useVuelidate from "@vuelidate/core";
import { required, email, helpers } from "@vuelidate/validators";
import { doLogin } from "@/utils/apiutil";
import { mapState } from "vuex";
export default {
name: "LoginForm.vue",
computed: mapState({
token: (state) => state.user.token,
}),
setup() {
return { v$: useVuelidate() };
},
validations() {
return {
user: {
email: {
required,
email: helpers.withMessage(`E-posten er ugyldig`, email),
},
password: {
required,
},
},
};
},
data() {
return {
......@@ -74,33 +131,34 @@ export default {
password: "",
},
showPassword: false,
valid: true,
rules: {
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",
},
showError: false,
};
},
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("Ugyldig, avslutter...");
return;
}
const loginRequest = {
email: this.user.email,
password: this.user.password,
};
const loginResponse = await doLogin(loginRequest);
if (loginResponse === "Failed login") {
this.message = "Feil brukernavn/passord";
if (loginResponse.data === "Login failed") {
this.message = "Feil e-post/passord";
this.$store.commit("logout");
return;
} else {
this.$store.commit("saveToken", loginResponse);
}
this.$store.commit("saveToken", loginResponse);
console.log(loginResponse);
},
validate() {
......
......@@ -2,8 +2,12 @@ import axios from "axios";
export function doLogin(loginRequest) {
return axios
.post(`http://65.108.62.223:3000/api/login/authentication`, loginRequest)
.post(process.env.VUE_APP_BASEURL + "login/authentication", loginRequest)
.then((response) => {
return response.data;
})
.catch((error) => {
console.log(error.response);
return error.response;
});
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment