hft-informatik/ubiquitous-computing-geo-timetracking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework signIn dialog

Browse Source
This commit is contained in:
Marcel Schwarz 2020-07-26 01:59:36 +02:00
parent 8c62028cc4
commit bd9eae2dff
1 changed files with 41 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/views/SignIn.vue
View File

@ -1,9 +1,9 @@
<template>
<v-container class="fill-height" id="signInListen">
<v-container class="fill-height" @keyup.enter="handleEnter">
<v-row align="center" justify="center">
<v-col cols="12">
<v-card elevation="0">
<v-window v-model="step">
<v-window v-model="visiblePane">
<v-window-item :value="1">
<v-row>
<v-col cols="12" md="8" class="main">
@ -12,7 +12,7 @@
<v-form>
<v-text-field
label="Username"
v-model="username"
v-model="signInData.username"
name="Username"
prepend-icon="mdi-account"
type="text"
@ -21,17 +21,17 @@
<v-text-field
id="password"
label="Password"
v-model="password"
v-model="signInData.password"
name="Password"
prepend-icon="mdi-key"
type="password"
color="primary"
/>
</v-form>
<p id="missing"></p>
<p>{{errorMessage}}</p>
</v-card-text>
<div class="text-center mt-3">
<v-btn rounded color="logowhite" outlined dark v-on:click="signin()">Sign In</v-btn>
<v-btn rounded color="logowhite" outlined dark @click="signin">Sign In</v-btn>
</div>
</v-col>
<v-col cols="12" md="4" class="main">
@ -42,9 +42,8 @@
<img src="../assets/logo_gt.svg" alt="John"/>
</v-avatar>
</div>
<div class="text-center mt-10">
<v-btn class="primary--text" rounded outlined dark @click="step++">Create Account</v-btn>
<v-btn class="primary--text" rounded outlined dark @click="switchPane(2)">Create Account</v-btn>
</div>
</v-card-text>
</v-col>
@ -62,7 +61,7 @@
</v-avatar>
</div>
<div class="text-center mt-3">
<v-btn class="primary--text" rounded outlined dark @click="step--">Sign In</v-btn>
<v-btn class="primary--text" rounded outlined dark @click="switchPane(1)">Sign In</v-btn>
</div>
</v-col>
<v-col cols="12" md="8" class="main">
@ -72,7 +71,7 @@
<v-text-field
label="Firstname"
name="FirstnameR"
v-model="firstname"
v-model="signUpData.firstname"
prepend-icon="mdi-account-box"
type="text"
color="primary "
@ -80,7 +79,7 @@
<v-text-field
label="Lastname"
name="LastnameR"
v-model="lastname"
v-model="signUpData.lastname"
prepend-icon="mdi-account-box"
type="text"
color="primary"
@ -88,7 +87,7 @@
<v-text-field
label="Username"
name="UsernameR"
v-model="usernameR"
v-model="signUpData.username"
prepend-icon="mdi-account"
type="text"
color="primary"
@ -96,16 +95,16 @@
<v-text-field
label="Password"
name="PasswordR"
v-model="passwordR"
v-model="signUpData.password"
prepend-icon="mdi-key"
type="password"
color="primary"
/>
</v-form>
<p id="missingR"></p>
<p>{{errorMessage}}</p>
</v-card-text>
<div class="text-center mt-n5">
<v-btn color="logowhite" rounded outlined v-on:click="signup()">Sign Up</v-btn>
<v-btn color="logowhite" rounded outlined @click="signup">Sign Up</v-btn>
</div>
</v-col>
</v-row>
@ -119,58 +118,45 @@
<script>
export default {
data: () => ({
step: 1,
username: "",
password: "",
firstname: "",
lastname: "",
usernameR: "",
passwordR: ""
}),
props: {
source: String
},
data() {
return {
errorMessage: "",
visiblePane: 1,
signInData: {username: "", password: ""},
signUpData: {firstname: "", lastname: "", username: "", password: ""}
}
},
methods: {
signin() {
if (this.username != "" && this.password != "") {
document.getElementById("missing").innerHTML = "";
const loginData = {
username: this.username,
password: this.password
}
this.$emit('signIn', loginData);
if (Object.values(this.signInData).every(item => item)) {
this.errorMessage = ""
this.$emit("signIn", this.signInData)
} else {
document.getElementById("missing").innerHTML = "Please fill out all fields";
this.errorMessage = "Please fill out all fields"
}
},
signup() {
if (this.usernameR != "" && this.passwordR != "") {
document.getElementById("missingR").innerHTML = "";
const signupData = {
firstname: this.firstname,
lastname: this.lastname,
username: this.usernameR,
password: this.passwordR
}
this.$emit('signUp', signupData);
if (Object.values(this.signUpData).every(item => item)) {
this.errorMessage = ""
this.$emit("signUp", this.signUpData)
} else {
document.getElementById("missingR").innerHTML = "Please fill out all fields";
}
this.errorMessage = "Please fill out all fields"
}
},
mounted() {
var listen = document.getElementById('signInListen');
listen.addEventListener('keyup', (e) => {
if (e.keyCode === 13) {
e.preventDefault();
if (this.step == 1) {
this.signin();
switchPane(num) {
this.errorMessage = ""
this.visiblePane = num
},
handleEnter() {
if (this.visiblePane === 1) {
this.signin()
} else {
this.signup();
this.signup()
}
}
});
}
};
</script>