diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index bf7b23c0b698adbeda116c4b3ac997948abc9461..b8240403c14e5a6662cd266124dd478740d091ca 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,98 +1,66 @@
<template>
- <div class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16">
- <div class="flex justify-center text-2xl">Logg inn</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
- />
- <!-- error message -->
- <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+ <div class="w-full max-w-sm m-auto overflow-hidden bg-white rounded-lg shadow-md mt-[10%]">
+ <div class="px-6 py-4 mt-4">
+
+ <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Logg på</h3>
+
+ <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="email"
+ placeholder="Skriv inn din e-postadresse *"
+ 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 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
- class="text-red-600 text-sm"
- v-show="showError"
- id="emailErrorId"
+ class="text-red-600 text-sm"
+ v-for="(error, index) of v$.user.password.$errors"
+ :key="index"
>
- {{ error.$message }}
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="passwordErrorId"
+ >
+ {{ error.$message }}
+ </div>
</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"
- 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 class="flex items-center justify-between mt-4">
+ <a href="#" class="text-sm text-gray-600 dark:text-gray-200 hover:text-gray-500">Glemt passord?</a>
+
+ <Button @click="loginClicked" :text="'Logg på'"></Button>
</div>
</div>
</div>
- <div id="buttonsField" class="m-6">
- <div class="align-items: flex-end; mb-6">
- <div class="ml-3 text-sm">
- <router-link
- to="/resetPassword"
- 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 class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700">
+ <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>
+ <div class="flex items-center justify-center text-center bg-gray-50" >
+ <label class="mx-2 text-sm font-bold text-red-500 dark:text-blue-400 hover:underline">{{ message }}</label>
</div>
</div>
</template>
@@ -101,6 +69,7 @@
import useVuelidate from "@vuelidate/core";
import { required, email, helpers } from "@vuelidate/validators";
import { doLogin } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton"
export default {
name: "LoginForm.vue",
@@ -138,9 +107,9 @@ export default {
async loginClicked() {
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...");
return;
}
@@ -167,5 +136,8 @@ export default {
this.$refs.form.validate();
},
},
+ components: {
+ Button,
+ }
};
</script>
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 240895bffbe2fe98be228f19e2d7549f3bc24227..48e2d4880c5aee852ad2d1f153dcc6a5f12ecdc1 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,107 +1,78 @@
<template>
- <section
- class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+ <div
+ 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">
- Opprett ny bruker
- </h2>
+ <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Opprett ny bruker</h3>
<form @submit.prevent>
<div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
<div>
- <label class="text-gray-700 dark:text-gray-200" for="email"
- >E-mail</label
- >
<input
v-model="email"
id="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"
/>
</div>
<div>
- <label class="text-gray-700 dark:text-gray-200" for="password"
- >Passord</label
- >
<input
v-model="password"
id="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"
/>
</div>
<div>
- <label class="text-gray-700 dark:text-gray-200" for="confirmPassword"
- >Bekreft Passord</label
- >
<input
v-model="confirmPassword"
id="confirmPassword"
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"
/>
</div>
<div>
- <label class="text-gray-700 dark:text-gray-200" for="firstName"
- >Fornavn</label
- >
<input
data-test="firstNameTest"
v-model="firstName"
id="firstName"
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"
/>
</div>
<div>
- <label class="text-gray-700 dark:text-gray-200" for="lastName"
- >Etternavn</label
- >
<input
v-model="lastName"
id="lastName"
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"
/>
</div>
<div>
- <label class="text-gray-700 dark:text-gray-200" for="address"
- >Addresse</label
- >
<input
v-model="address"
id="address"
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"
/>
</div>
</div>
<div class="flex justify-end mt-6">
- <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>
+ <Button @click="submit" :text="'Lagre'"></Button>
</div>
</form>
- </section>
+ </div>
<ul data-test="errorMessageList">
<li v-if="errorMessage" data-test="customErrorMsg">{{ errorMessage }}</li>
<li v-for="error of v$.$errors" :key="error.$uid">
@@ -118,11 +89,15 @@
import useVuelidate from "@vuelidate/core";
import { doLogin, registerUser } from "@/utils/apiutil";
import { required, email, minLength, sameAs } from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton"
// const isEmailTaken = (value) =>
// fetch(`/api/unique/${value}`).then((r) => r.json()); // check the email in the server
export default {
+ components: {
+ Button,
+ },
setup: () => ({ v$: useVuelidate() }),
data() {
return {
@@ -182,15 +157,15 @@ export default {
const loginResponse = await doLogin(loginRequest);
- if (loginResponse === "Failed login") {
+ if (loginResponse.isLoggedIn === false) {
this.errorMessage = "Failed to log in with new user";
this.$store.commit("logout");
- this.$router.push("/login");
+ await this.$router.push("/login");
return;
}
- this.$store.commit("saveToken", loginResponse);
- this.$router.push("/");
+ this.$store.commit("saveToken", loginResponse.token);
+ await this.$router.push("/");
},
async sendRegisterRequest() {
const registerInfo = {
@@ -203,48 +178,9 @@ export default {
const response = await registerUser(registerInfo);
- if (response.status === 200) return true;
- return false;
+ return response.status === 200;
+
},
},
};
</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>
diff --git a/src/views/FormViews/LoginView.vue b/src/views/FormViews/LoginView.vue
index 95329c538e3b4796b193048f943bd1be4fee2b88..09d909a1ab309b57dcded51cf99cf8f96d0742c3 100644
--- a/src/views/FormViews/LoginView.vue
+++ b/src/views/FormViews/LoginView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="loginPage">
+ <div class="h-screen grid">
<LoginForm></LoginForm>
</div>
</template>
@@ -12,12 +12,4 @@ export default {
LoginForm,
},
};
-</script>
-
-<style scoped>
-.loginPage {
- background-color: white;
- height: 100%;
- overflow: auto;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/views/FormViews/RegisterView.vue b/src/views/FormViews/RegisterView.vue
index e5d5683596755787a0955be481d1b38d91f4a378..2b431f1d01e0312d4b450f11b18ea78c5a033d70 100644
--- a/src/views/FormViews/RegisterView.vue
+++ b/src/views/FormViews/RegisterView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="h-screen bg-gray-200 content-center grid place-items-center">
+ <div class="h-screen grid">
<RegisterFormComponent />
</div>
</template>