Format Sign in and statistics component
This commit is contained in:
parent
6f9e9141b7
commit
cfad59d139
@ -1,4 +1,4 @@
|
||||
<template >
|
||||
<template>
|
||||
<v-container class="fill-height" id="signInListen">
|
||||
<v-row align="center" justify="center">
|
||||
<v-col cols="12">
|
||||
@ -9,8 +9,7 @@
|
||||
<v-col cols="12" md="8" class="main">
|
||||
<v-card-text class="mt-1">
|
||||
<h1 class="text-center display-2 logowhite--text">Sign in</h1>
|
||||
|
||||
<v-form>
|
||||
<v-form>
|
||||
<v-text-field
|
||||
label="Username"
|
||||
v-model="username"
|
||||
@ -32,7 +31,7 @@
|
||||
<p id="missing"></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 v-on:click="signin()">Sign In</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" class="main">
|
||||
@ -40,7 +39,7 @@
|
||||
<h1 class="text-center display-1 primary--text">No account yet?</h1>
|
||||
<div class="text-center ma-12">
|
||||
<v-avatar min-width="100" size="230">
|
||||
<img src="../assets/logo_gt.svg" alt="John" />
|
||||
<img src="../assets/logo_gt.svg" alt="John"/>
|
||||
</v-avatar>
|
||||
</div>
|
||||
|
||||
@ -51,7 +50,8 @@
|
||||
outlined
|
||||
dark
|
||||
@click="step++"
|
||||
>Create Account</v-btn>
|
||||
>Create Account
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
@ -65,7 +65,7 @@
|
||||
</v-card-text>
|
||||
<div class="text-center ma-12">
|
||||
<v-avatar min-width="100" size="230">
|
||||
<img src="../assets/logo_gt.svg" alt="John" />
|
||||
<img src="../assets/logo_gt.svg" alt="John"/>
|
||||
</v-avatar>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
@ -112,7 +112,7 @@
|
||||
<p id="missingR"></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 v-on:click="signup()">Sign Up</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -125,68 +125,62 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
step: 1,
|
||||
username: "",
|
||||
password: "",
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
usernameR: "",
|
||||
passwordR: ""
|
||||
|
||||
}),
|
||||
props: {
|
||||
source: String
|
||||
},
|
||||
methods: {
|
||||
signin() {
|
||||
if (this.username != "" && this.password != "") {
|
||||
document.getElementById("missing").innerHTML= "";
|
||||
const loginData = {
|
||||
username: this.username,
|
||||
password: this. password
|
||||
}
|
||||
this.$emit('signIn', loginData);
|
||||
}else {
|
||||
document.getElementById("missing").innerHTML= "Please fill out all fields";
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
step: 1,
|
||||
username: "",
|
||||
password: "",
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
usernameR: "",
|
||||
passwordR: ""
|
||||
}),
|
||||
props: {
|
||||
source: String
|
||||
},
|
||||
signup(){
|
||||
if (this.usernameR != "" && this.passwordR != "") {
|
||||
document.getElementById("missingR").innerHTML= "";
|
||||
const signupData = {
|
||||
firstname: this.firstname,
|
||||
lastname: this.lastname,
|
||||
username: this.usernameR,
|
||||
password: this. passwordR
|
||||
methods: {
|
||||
signin() {
|
||||
if (this.username != "" && this.password != "") {
|
||||
document.getElementById("missing").innerHTML = "";
|
||||
const loginData = {
|
||||
username: this.username,
|
||||
password: this.password
|
||||
}
|
||||
this.$emit('signIn', loginData);
|
||||
} else {
|
||||
document.getElementById("missing").innerHTML = "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);
|
||||
} else {
|
||||
document.getElementById("missingR").innerHTML = "Please fill out all fields";
|
||||
}
|
||||
this.$emit('signUp', signupData);
|
||||
}else {
|
||||
document.getElementById("missingR").innerHTML= "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();
|
||||
} else {
|
||||
this.signup();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
var listen = document.getElementById('signInListen');
|
||||
listen.addEventListener('keyup', (e) => {
|
||||
if (e.keyCode === 13) {
|
||||
e.preventDefault();
|
||||
if(this.step==1){
|
||||
this.signin();
|
||||
}else{
|
||||
this.signup();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
@ -1,43 +1,41 @@
|
||||
<template>
|
||||
<v-row class="ma-5">
|
||||
<v-col cols="4">
|
||||
<WorkPausePie />
|
||||
<WorkPausePie/>
|
||||
</v-col>
|
||||
<v-col cols="4">
|
||||
<account-pie />
|
||||
<account-pie/>
|
||||
</v-col>
|
||||
<v-col cols="4">
|
||||
<revenue-pie/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<MonthSummary />
|
||||
<MonthSummary/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<WeekSummary />
|
||||
<WeekSummary/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import RevenuePie from "./charts/RevenuePie.vue"
|
||||
import WeekSummary from "./charts/WeekSummary.vue";
|
||||
import MonthSummary from "./charts/MonthSummary.vue";
|
||||
import WorkPausePie from "./charts/WorkPausePie.vue";
|
||||
import AccountPie from "./charts/AccountPie.vue";
|
||||
import RevenuePie from "./charts/RevenuePie.vue"
|
||||
import WeekSummary from "./charts/WeekSummary.vue";
|
||||
import MonthSummary from "./charts/MonthSummary.vue";
|
||||
import WorkPausePie from "./charts/WorkPausePie.vue";
|
||||
import AccountPie from "./charts/AccountPie.vue";
|
||||
|
||||
export default {
|
||||
name: "StatisticOverview",
|
||||
components: {
|
||||
RevenuePie,
|
||||
WeekSummary,
|
||||
MonthSummary,
|
||||
WorkPausePie,
|
||||
AccountPie
|
||||
}
|
||||
};
|
||||
export default {
|
||||
name: "StatisticOverview",
|
||||
components: {
|
||||
RevenuePie,
|
||||
WeekSummary,
|
||||
MonthSummary,
|
||||
WorkPausePie,
|
||||
AccountPie
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user