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

Login and signup component update

parent b69572ee
No related branches found
No related tags found
2 merge requests!70Component update 2,!68Component update
Pipeline #178429 failed
Stage: test
Hide whitespace changes
Inline Side-by-side
src/components/FormComponents/LoginForm.vue
+ 59
− 87
View file @ 1b403328
<template> <template>
<div class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16"> <div class="w-full max-w-sm m-auto overflow-hidden bg-white rounded-lg shadow-md mt-[10%]">
<div class="flex justify-center text-2xl">Logg inn</div> <div class="px-6 py-4 mt-4">
<div
id="emailField" <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Logg på</h3>
class="m-6"
:class="{ error: v$.user.email.$errors.length }" <div>
> <div class="w-full mt-6" :class="{ error: v$.user.password.$errors.length }">
<div class="mb-6"> <input class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
<label type="email"
for="email" placeholder="Skriv inn din e-postadresse *"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" v-model="v$.user.email.$model"
>E-post</label required
> />
<input <!-- error message -->
type="email" <div v-for="(error, index) of v$.user.email.$errors" :key="index">
id="email" <div
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" class="text-red-600 text-sm"
placeholder="eksempel@eksempel.no" v-show="showError"
v-model="v$.user.email.$model" id="emailErrorId"
required >
/> {{ error.$message }}
<!-- error message --> </div>
<div v-for="(error, index) of v$.user.email.$errors" :key="index"> </div>
</div>
<div class="w-full mt-6" :class="{ error: v$.user.password.$errors.length }">
<input class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
type="password"
placeholder="Vennligst oppgi passordet ditt *"
v-model="v$.user.password.$model"
@keyup.enter="loginClicked"
required
/>
<!-- error message -->
<div <div
class="text-red-600 text-sm" class="text-red-600 text-sm"
v-show="showError" v-for="(error, index) of v$.user.password.$errors"
id="emailErrorId" :key="index"
> >
{{ error.$message }} <div
class="text-red-600 text-sm"
v-show="showError"
id="passwordErrorId"
>
{{ error.$message }}
</div>
</div> </div>
</div> </div>
</div>
</div>
<div <div class="flex items-center justify-between mt-4">
id="passwordField" <a href="#" class="text-sm text-gray-600 dark:text-gray-200 hover:text-gray-500">Glemt passord?</a>
class="m-6"
:class="{ error: v$.user.password.$errors.length }" <Button @click="loginClicked" :text="'Logg på'"></Button>
>
<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"
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"
>
<div
class="text-red-600 text-sm"
v-show="showError"
id="passwordErrorId"
>
{{ error.$message }}
</div> </div>
</div> </div>
</div> </div>
<div id="buttonsField" class="m-6"> <div class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700">
<div class="align-items: flex-end; mb-6"> <router-link to="/register" class="mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 hover:underline">Opprette ny konto</router-link>
<div class="ml-3 text-sm"> </div>
<router-link <div class="flex items-center justify-center text-center bg-gray-50" >
to="/resetPassword" <label class="mx-2 text-sm font-bold text-red-500 dark:text-blue-400 hover:underline">{{ message }}</label>
class="text-blue-600 flex justify-end"
>Glemt passord</router-link
>
</div>
</div>
<button
@click="loginClicked"
class="w-full 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 px-5 py-2.5"
>
Logg inn
</button>
<div class="align-items: flex-end; mb-6 mt-12">
<div class="text-sm">
<router-link to="register" class="text-blue-600 flex justify-center"
>Ny bruker</router-link
>
</div>
</div>
<div class="flex justify-center">
<label>{{ message }}</label>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -101,6 +69,7 @@ ...@@ -101,6 +69,7 @@
import useVuelidate from "@vuelidate/core"; import useVuelidate from "@vuelidate/core";
import { required, email, helpers } from "@vuelidate/validators"; import { required, email, helpers } from "@vuelidate/validators";
import { doLogin } from "@/utils/apiutil"; import { doLogin } from "@/utils/apiutil";
import Button from "@/components/BaseComponents/ColoredButton"
export default { export default {
name: "LoginForm.vue", name: "LoginForm.vue",
...@@ -138,9 +107,9 @@ export default { ...@@ -138,9 +107,9 @@ export default {
async loginClicked() { async loginClicked() {
this.showError = true; this.showError = true;
this.v$.user.email.$touch(); this.v$.user.$touch();
if (this.v$.user.email.$invalid) { if (this.v$.user.$invalid) {
console.log("Ugyldig, avslutter..."); console.log("Ugyldig, avslutter...");
return; return;
} }
...@@ -167,5 +136,8 @@ export default { ...@@ -167,5 +136,8 @@ export default {
this.$refs.form.validate(); this.$refs.form.validate();
}, },
}, },
components: {
Button,
}
}; };
</script> </script>
src/components/FormComponents/RegisterForm.vue
+ 21
− 85
View file @ 1b403328
<template> <template>
<section <div
class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800" class="max-w-sm p-6 m-auto bg-white overflow-hidden rounded-md shadow-md mt-[10%]"
> >
<h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white"> <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Opprett ny bruker</h3>
Opprett ny bruker
</h2>
<form @submit.prevent> <form @submit.prevent>
<div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2"> <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
<div> <div>
<label class="text-gray-700 dark:text-gray-200" for="email"
>E-mail</label
>
<input <input
v-model="email" v-model="email"
id="email" id="email"
type="email" type="email"
placeholder="E-post adresse"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
/> />
</div> </div>
<div> <div>
<label class="text-gray-700 dark:text-gray-200" for="password"
>Passord</label
>
<input <input
v-model="password" v-model="password"
id="password" id="password"
type="password" type="password"
placeholder="Passord"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
/> />
</div> </div>
<div> <div>
<label class="text-gray-700 dark:text-gray-200" for="confirmPassword"
>Bekreft Passord</label
>
<input <input
v-model="confirmPassword" v-model="confirmPassword"
id="confirmPassword" id="confirmPassword"
type="password" type="password"
placeholder="Bekreft passord"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
/> />
</div> </div>
<div> <div>
<label class="text-gray-700 dark:text-gray-200" for="firstName"
>Fornavn</label
>
<input <input
data-test="firstNameTest" data-test="firstNameTest"
v-model="firstName" v-model="firstName"
id="firstName" id="firstName"
type="text" type="text"
placeholder="Fornavn"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
/> />
</div> </div>
<div> <div>
<label class="text-gray-700 dark:text-gray-200" for="lastName"
>Etternavn</label
>
<input <input
v-model="lastName" v-model="lastName"
id="lastName" id="lastName"
type="text" type="text"
placeholder="Etternavn"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
/> />
</div> </div>
<div> <div>
<label class="text-gray-700 dark:text-gray-200" for="address"
>Addresse</label
>
<input <input
v-model="address" v-model="address"
id="address" id="address"
type="text" type="text"
placeholder="Adresse"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
/> />
</div> </div>
</div> </div>
<div class="flex justify-end mt-6"> <div class="flex justify-end mt-6">
<button <Button @click="submit" :text="'Lagre'"></Button>
class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
@click="submit()"
type="submit"
:disabled="loading"
>
<div v-if="loading">
<div v-if="loading" class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div v-else>Lagre</div>
</button>
</div> </div>
</form> </form>
</section> </div>
<ul data-test="errorMessageList"> <ul data-test="errorMessageList">
<li v-if="errorMessage" data-test="customErrorMsg">{{ errorMessage }}</li> <li v-if="errorMessage" data-test="customErrorMsg">{{ errorMessage }}</li>
<li v-for="error of v$.$errors" :key="error.$uid"> <li v-for="error of v$.$errors" :key="error.$uid">
...@@ -118,11 +89,15 @@ ...@@ -118,11 +89,15 @@
import useVuelidate from "@vuelidate/core"; import useVuelidate from "@vuelidate/core";
import { doLogin, registerUser } from "@/utils/apiutil"; import { doLogin, registerUser } from "@/utils/apiutil";
import { required, email, minLength, sameAs } from "@vuelidate/validators"; import { required, email, minLength, sameAs } from "@vuelidate/validators";
import Button from "@/components/BaseComponents/ColoredButton"
// const isEmailTaken = (value) => // const isEmailTaken = (value) =>
// fetch(`/api/unique/${value}`).then((r) => r.json()); // check the email in the server // fetch(`/api/unique/${value}`).then((r) => r.json()); // check the email in the server
export default { export default {
components: {
Button,
},
setup: () => ({ v$: useVuelidate() }), setup: () => ({ v$: useVuelidate() }),
data() { data() {
return { return {
...@@ -182,15 +157,15 @@ export default { ...@@ -182,15 +157,15 @@ export default {
const loginResponse = await doLogin(loginRequest); const loginResponse = await doLogin(loginRequest);
if (loginResponse === "Failed login") { if (loginResponse.isLoggedIn === false) {
this.errorMessage = "Failed to log in with new user"; this.errorMessage = "Failed to log in with new user";
this.$store.commit("logout"); this.$store.commit("logout");
this.$router.push("/login"); await this.$router.push("/login");
return; return;
} }
this.$store.commit("saveToken", loginResponse); this.$store.commit("saveToken", loginResponse.token);
this.$router.push("/"); await this.$router.push("/");
}, },
async sendRegisterRequest() { async sendRegisterRequest() {
const registerInfo = { const registerInfo = {
...@@ -203,48 +178,9 @@ export default { ...@@ -203,48 +178,9 @@ export default {
const response = await registerUser(registerInfo); const response = await registerUser(registerInfo);
if (response.status === 200) return true; return response.status === 200;
return false;
}, },
}, },
}; };
</script> </script>
<style scoped>
/* https://loading.io/css/ */
.lds-ring {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 16px;
height: 16px;
margin: 2px;
border: 2px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
src/views/FormViews/LoginView.vue
+ 2
− 10
View file @ 1b403328
<template> <template>
<div class="loginPage"> <div class="h-screen grid">
<LoginForm></LoginForm> <LoginForm></LoginForm>
</div> </div>
</template> </template>
...@@ -12,12 +12,4 @@ export default { ...@@ -12,12 +12,4 @@ export default {
LoginForm, LoginForm,
}, },
}; };
</script> </script>
\ No newline at end of file
<style scoped>
.loginPage {
background-color: white;
height: 100%;
overflow: auto;
}
</style>
src/views/FormViews/RegisterView.vue
+ 1
− 1
View file @ 1b403328
<template> <template>
<div class="h-screen bg-gray-200 content-center grid place-items-center"> <div class="h-screen grid">
<RegisterFormComponent /> <RegisterFormComponent />
</div> </div>
</template> </template>
......
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