Skip to content
Snippets Groups Projects
Commit d9cf3ef5 authored by Erik Borgeteien Hansen's avatar Erik Borgeteien Hansen
Browse files

refactor to tailwindcss

parent 39eac24d
No related branches found
No related tags found
2 merge requests!10Register view tailwind,!9Register view tailwind
Pipeline #175454 passed
Stage: build
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/components/RegisterFormComponent.vue
+ 230
− 145
View file @ d9cf3ef5
<template> <template>
<v-form ref="form" v-model="valid" lazy-validation> <section
<v-text-field class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
v-model="email" >
:rules="emailRules" <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">
label="E-mail" Opprett ny bruker
required </h2>
></v-text-field>
<form @submit.prevent>
<v-text-field <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
v-model="password" <div>
:counter="32" <label class="text-gray-700 dark:text-gray-200" for="email"
:rules="passwordRules" >E-mail</label
label="Passord" >
:append-icon="passwordHidden ? 'mdi-eye' : 'mdi-eye-off'" <input
:type="passwordHidden ? 'text' : 'password'" v-model="email"
@click:append="passwordHidden = !passwordHidden" id="email"
required type="email"
></v-text-field> 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"
/>
<v-container class="grey lighten-5"> </div>
<v-row>
<v-text-field <div>
class="pr-2" <label class="text-gray-700 dark:text-gray-200" for="pword"
v-model="firstName" >Passord</label
:counter="32" >
:rules="firstNameRules" <input
label="Fornavn" v-model="pword"
required id="pword"
></v-text-field> type="password"
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"
<v-text-field />
class="pl-2" </div>
v-model="lastName"
:counter="32" <div>
:rules="lastNameRules" <label class="text-gray-700 dark:text-gray-200" for="cpword"
label="Etternavn" >Bekreft Passord</label
required >
></v-text-field> <input
</v-row> v-model="cpword"
</v-container> id="cpword"
type="password"
<v-text-field 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"
v-model="address" />
:counter="32" </div>
:rules="addressRules"
label="Addresse" <div>
required <label class="text-gray-700 dark:text-gray-200" for="fname"
></v-text-field> >Fornavn</label
>
<!-- <v-text-field <input
v-model="confirmPassword" v-model="fname"
:rules="confirmPasswordRules" id="fname"
label="Bekreft passord" type="text"
:append-icon="confirmPasswordHidden ? 'mdi-eye' : 'mdi-eye-off'" 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"
:type="confirmPasswordHidden ? 'text' : 'password'" />
@click:append="confirmPasswordHidden = !confirmPasswordHidden" </div>
required
></v-text-field> --> <div>
<label class="text-gray-700 dark:text-gray-200" for="lname"
<!-- <v-select >Etternavn</label
v-model="select" >
:items="items" <input
:rules="[(v) => !!v || 'Item is required']" v-model="lname"
label="Item" id="lname"
required type="text"
></v-select> --> 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"
/>
<!-- <v-checkbox </div>
v-model="checkbox"
:rules="[(v) => !!v || 'You must agree to continue!']" <div>
label="Do you agree?" <label class="text-gray-700 dark:text-gray-200" for="address"
required >Addresse</label
></v-checkbox> --> >
<input
<v-btn :disabled="!valid" color="success" class="mr-4" @click="submit()" v-model="address"
>Registrer</v-btn id="address"
> type="text"
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"
<v-btn color="error" class="mr-4" @click="reset()">Tøm felter</v-btn> />
</v-form> </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>
</div>
</form>
<p v-for="error of v$.$errors" :key="error.$uid">
<strong>{{ error.$validator }}</strong>
<small> on property</small>
<strong>{{ error.$property }}</strong>
<small> says:</small>
<strong>{{ error.$message }}</strong>
</p>
</section>
</template> </template>
<script> <script>
import axios from "axios"; import useVuelidate from "@vuelidate/core";
import { doLogin, registerUser } from "@/utils/apiutil";
import { required, email, minLength, sameAs } from "@vuelidate/validators";
export default { // const isEmailTaken = (value) =>
data: () => ({ // fetch(`/api/unique/${value}`).then((r) => r.json()); // check the email in the server
passwordHidden: false,
// confirmPasswordHidden: false,
valid: true,
firstName: "",
firstNameRules: [
(v) => !!v || "Fornavn er påkrevd",
(v) => (v && v.length <= 32) || "Fornavn må være mindre enn 32 bokstaver",
],
lastName: "",
lastNameRules: [
(v) => !!v || "Etternavn er påkrevd",
(v) =>
(v && v.length <= 32) || "Etternavn må være mindre enn 32 bokstaver",
],
address: "",
addressRules: [
(v) => !!v || "Addresse er påkrevd",
(v) =>
(v && v.length <= 32) || "Addresse må være mindre enn 32 bokstaver",
],
password: "",
passwordRules: [
(v) => !!v || "Passord er påkrevd",
(v) => (v && v.length <= 32) || "Passord må være mindre enn 32 tegn",
(v) => (v && v.length >= 8) || "Passord må være større enn 8 tegn",
],
// confirmPassword: "",
// confirmPasswordRules: [
// (v) => !!v || "Passord er påkrevd",
// (v) => (v && v.length <= 32) || "Passord må være mindre enn 32 bokstaver",
// // (v) => v === this.password || "Passordene må være like",
// ],
email: "",
emailRules: [
(v) => !!v || "E-mail is required",
(v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
],
// select: null,
// items: ["Item 1", "Item 2", "Item 3", "Item 4"],
// checkbox: false,
}),
export default {
setup: () => ({ v$: useVuelidate() }),
data() {
return {
userCreated: false,
loading: false,
email: "",
pword: "",
cpword: "",
fname: "",
lname: "",
address: "",
};
},
validations() {
return {
email: {
required,
email,
// isUnique: helpers.withAsync(isEmailTaken),
},
pword: {
required,
minLength: minLength(8),
},
cpword: { sameAs: sameAs(this.pword) },
fname: { required },
lname: { required },
address: { required },
};
},
methods: { methods: {
submit() { async submit() {
console.log("Attempting to register user"); console.log(this.$data);
this.valid = this.$refs.form.validate();
if (!this.valid) return; this.loading = true;
this.valid = false; const result = await this.v$.$validate();
console.log("User is validated");
axios if (!result) {
.post("http://localhost:3000/api/register", { //Invalid form
email: this.email, console.log("Form not submitted");
firstName: this.firstName, this.loading = false;
lastname: this.lastName, return;
password: this.password, }
address: this.address,
}) const registerInfo = {
.then(console.log("Sent")) email: this.email,
.catch((e) => console.log(e)); firstName: this.fname,
}, lastname: this.lname,
reset() { password: this.pword,
this.$refs.form.reset(); address: this.address,
this.$refs.form.resetValidation(); };
this.valid = true;
let response = await registerUser(registerInfo);
if (response.status === 200) this.userCreated = true;
//If a user is created succsessfully, try to login
if (this.userCreated) {
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");
this.$router.push("/login");
return;
}
this.$router.push("/");
this.$store.commit("saveToken", loginResponse);
console.log(loginResponse);
}
this.loading = 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/utils/apiutil.js
+ 18
− 1
View file @ d9cf3ef5
import axios from "axios"; import axios from "axios";
const API_URL = "http://65.108.62.223:3000/api/";
export function doLogin(loginRequest) { export function doLogin(loginRequest) {
return axios return axios
.post(`http://65.108.62.223:3000/api/login/authentication`, loginRequest) .post(API_URL + "login/authentication", loginRequest)
.then((response) => { .then((response) => {
return response.data; return response.data;
}); });
} }
export function registerUser(registerInfo) {
return axios
.post(API_URL + "register", {
email: registerInfo.email,
firstName: registerInfo.fname,
lastname: registerInfo.lname,
password: registerInfo.pword,
address: registerInfo.address,
})
.then((response) => {
return response;
})
.catch((err) => console.log(err));
}
src/views/RegisterView.vue
+ 3
− 8
View file @ d9cf3ef5
<template> <template>
<register-form-component id="form" class="pa-8" /> <div class="h-screen bg-gray-200 content-center grid place-items-center">
<RegisterFormComponent />
</div>
</template> </template>
<script> <script>
...@@ -11,10 +13,3 @@ export default { ...@@ -11,10 +13,3 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
#form {
max-width: 600px;
margin: 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