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

Merge branch '69-vuetify-login' into 'master'

Browse Source 
Resolve "Vuetify login"

Closes #69

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!40
This commit is contained in:
Tim Zieger 2020-05-15 10:54:31 +00:00
commit 8d3d820286
3 changed files with 196 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
frontend/src/App.vue
View File

@ -45,65 +45,71 @@
<v-img src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img> <v-img src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img>
<v-toolbar-title>Geo Timetracking</v-toolbar-title> <v-toolbar-title>Geo Timetracking</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<!-- Modal -->
<v-row justify="center" >
<v-dialog v-model="dialog" width="70%" persistent>
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Login</v-btn>
</template>
<v-card class="main">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn icon @click="dialog = false"><v-icon>mdi-window-close</v-icon></v-btn>
</v-card-actions>
<SignIn />
</v-card>
</v-dialog>
</v-row>
<!-- Menu with account icon --> <!-- Menu with account icon -->
<v-menu <v-menu v-model="menu" :close-on-content-click="false" :nudge-width="200" offset-y>
v-model="menu" <template v-slot:activator="{ on }">
:close-on-content-click="false" <v-btn icon v-on="on">
:nudge-width="200" <v-icon>mdi-account</v-icon>
offset-y </v-btn>
> </template>
<template v-slot:activator="{ on }">
<v-btn
icon
v-on="on"
>
<v-icon>mdi-account</v-icon>
</v-btn>
</template>
<v-card> <v-card>
<v-list> <v-list>
<v-list-item> <v-list-item>
<v-list-item-avatar> <v-list-item-avatar>
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John"> <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>John Doe</v-list-item-title> <v-list-item-title>John Doe</v-list-item-title>
<v-list-item-subtitle>Admin</v-list-item-subtitle> <v-list-item-subtitle>Admin</v-list-item-subtitle>
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>
<v-btn
:class="fav ? 'red--text' : ''"
icon
@click="fav = !fav"
>
<v-icon>mdi-heart</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
<v-divider></v-divider> </v-list-item-action>
</v-list-item>
</v-list>
<v-list> <v-divider></v-divider>
<v-list-item>
<v-list-item-action>
<v-switch v-model="message" color="primary" :input-value="login" @change="login= !login"></v-switch>
</v-list-item-action>
<v-list-item-title>View as Guest</v-list-item-title>
</v-list-item>
</v-list>
<v-card-actions> <v-list>
<v-spacer></v-spacer> <v-list-item>
<v-list-item-action>
<v-switch
<v-btn text @click="menu = false">Cancel</v-btn> color="primary"
<v-btn color="primary" text @click="menu = false">Save</v-btn> :input-value="login"
</v-card-actions> @change="login= !login"
</v-card> ></v-switch>
</v-menu> </v-list-item-action>
<v-list-item-title>View as Guest</v-list-item-title>
</v-list-item>
</v-list>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text @click="menu = false">Cancel</v-btn>
<v-btn color="primary" text @click="menu = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</v-app-bar> </v-app-bar>
<!-- Routed pages are inserted here --> <!-- Routed pages are inserted here -->
@ -120,13 +126,19 @@
</template> </template>
<script> <script>
import SignIn from "./views/SignIn.vue";
export default { export default {
components: {
SignIn
},
props: { props: {
source: String source: String
}, },
data: () => ({ data: () => ({
drawer: null, drawer: null,
login: true login: true,
dialog: false,
menu: false
}), }),
created() { created() {
this.$vuetify.theme.dark = true; this.$vuetify.theme.dark = true;
@ -141,7 +153,7 @@ export default {
text-decoration: none; text-decoration: none;
} }
.v-application { .v-application {
font-family: 'Montserrat', sans-serif; font-family: "Montserrat", sans-serif;
background-color: var(--v-background-base) !important; background-color: var(--v-background-base) !important;
} }
</style> </style>

7
frontend/src/router/index.js
View File

@ -9,7 +9,7 @@ import About from "../views/About.vue";
import Login from "../views/Login.vue"; import Login from "../views/Login.vue";
import Register from "../views/Register.vue"; import Register from "../views/Register.vue";
import WeekSummary from "../views/WeekSummary.vue"; import WeekSummary from "../views/WeekSummary.vue";
import SignIn from "../views/SignIn.vue";
Vue.use(VueRouter); Vue.use(VueRouter);
const routes = [ const routes = [
@ -23,11 +23,6 @@ const routes = [
name: "TimeRecords", name: "TimeRecords",
component: TimeRecords component: TimeRecords
}, },
{
path: "/signin",
name: "SignIn",
component: SignIn
},
{ {
path: "/login", path: "/login",
name: "Login", name: "Login",

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

@ -1,261 +1,138 @@
<template> <template >
<div class="test" > <v-container class="fill-height">
<v-row align="center" justify="center">
<v-col cols="12">
<v-card elevation="0">
<v-window v-model="step">
<v-window-item :value="1">
<v-row>
<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-text-field
label="Username"
v-model="username"
name="Username"
prepend-icon="mdi-account"
type="text"
color="primary"
/>
<v-text-field
id="password"
label="Password"
name="Password"
prepend-icon="mdi-key"
type="password"
color="primary"
/>
</v-form>
</v-card-text>
<div class="text-center mt-3">
<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">
<v-card-text class="white--text mt-1">
<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" />
</v-avatar>
</div>
<article> <div class="text-center mt-10">
<div class="container" :class="{'sign-up-active' : signUp}"> <v-btn
<div class="overlay-container"> class="primary--text"
<div class="overlay"> rounded
<div class="overlay-left"> outlined
<h2>Welcome Back!</h2> dark
<img src="../assets/logo_gt.svg" height="100vh"> @click="step++"
<button class="invert" id="signIn" @click="signUp = !signUp">Sign In</button> >Create Account</v-btn>
</div> </div>
<div class="overlay-right"> </v-card-text>
<h2>Create a new account</h2> </v-col>
<img src="../assets/logo_gt.svg" height="100vh"> </v-row>
<button class="invert" id="signUp" @click="signUp = !signUp">Sign Up</button> </v-window-item>
</div> <v-window-item :value="2">
</div> <v-row class="fill-heigth">
</div> <v-col cols="12" md="4" class="main">
<form class="sign-up" action="#"> <v-card-text class="white--text mt-1">
<h2>Create login</h2> <h1 class="text-center display-1 primary--text">Welcome Back</h1>
</v-card-text>
<input type="text" placeholder="Firstname" v-model="firstname"/> <div class="text-center ma-12">
<input type="text" placeholder="Lastname" v-model="lastname"/> <v-avatar min-width="100" size="230">
<input type="text" placeholder="Username" vmodel="usernamer"/> <img src="../assets/logo_gt.svg" alt="John" />
<input type="password" placeholder="Password" v-model="passwordr"/> </v-avatar>
<button>Sign Up</button> </div>
</form> <div class="text-center mt-3">
<form class="sign-in" action="#"> <v-btn class="primary--text" rounded outlined dark @click="step--">Sign In</v-btn>
<h2>Sign In</h2> </div>
<input type="text" placeholder="Username" v-model="usernamel" /> </v-col>
<input type="password" placeholder="Password" v-model="passwordl" /> <v-col cols="12" md="8" class="main">
<button>Sign In</button> <v-card-text class="mt-12">
</form> <h1 class="text-center display-2 logowhite--text">Create Account</h1>
</div> <v-form>
</article> <v-text-field
label="Firstname"
name="FirstnameR"
</div> prepend-icon="mdi-account-box"
type="text"
color="primary "
/>
<v-text-field
label="Lastname"
name="LastnameR"
prepend-icon="mdi-account-box"
type="text"
color="primary"
/>
<v-text-field
label="Username"
name="UsernameR"
prepend-icon="mdi-account"
type="text"
color="primary"
/>
<v-text-field
label="Password"
name="PasswordR"
prepend-icon="mdi-key"
type="password"
color="primary"
/>
</v-form>
</v-card-text>
<div class="text-center mt-n5">
<v-btn color="logowhite" rounded outlined >Sign Up</v-btn>
</div>
</v-col>
</v-row>
</v-window-item>
</v-window>
</v-card>
</v-col>
</v-row>
</v-container>
</template> </template>
<script> <script>
export default { export default {
name: "SignIn", data: () => ({
// data: () => { step: 1,
// return { username: ""
// signUp: false }),
// } props: {
source: String
data() { },
return { methods: {
signUp: false, signin() {
firstname: '', console.log(this.username);
lastname: '',
usernamer: '',
passwordr: '',
usernamel: '',
passwordl: ''
}
},
methods: {
login(e) {
e.preventDefault();
console.log(this.usernamel);
}
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="css" scoped>
.test {
height: 70vh;
// box-sizing: content-box;
display: flex;
//flex-direction: column;
align-items: center;
justify-content: space-around;
// padding-top: %;
// padding-bottom: 0%;
}
.container {
// flex:1;
height: 70vh;
position: relative;
width: 50vw;
height: 50vh;
border-radius: 10px;
overflow: hidden;
// box-shadow: 0 15px 30px rgba(0, 0, 0, .2),
// 0 10px 10px rgba(0, 0, 0, .2);
// background: linear-gradient(to bottom, #efefef, #ccc);
background-color: #131313;
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform .5s ease-in-out;
z-index: 100;
}
.overlay {
position: relative;
left: -100%;
height: 100%;
width: 200%;
// background: linear-gradient(to bottom right, #7FD625, #009345);
background-color: #0096ff;
color: #fff;
transform: translateX(0);
transition: transform .5s ease-in-out;
}
@mixin overlays($property) {
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
padding: 70px 40px;
width: calc(50% - 80px);
height: calc(100% - 140px);
text-align: center;
transform: translateX($property);
transition: transform .5s ease-in-out;
}
.overlay-left {
@include overlays(-20%);
}
.overlay-right {
@include overlays(0);
right: 0;
}
}
h2 {
margin: 0;
}
p {
margin: 20px 0 30px;
}
a {
color: #222;
text-decoration: none;
margin: 15px 0;
font-size: 1rem;
}
button {
border-radius: 20px;
border: 1px solid #0096ff;
background-color: #0096ff;
color: #EBE7D9;
font-size: 1rem;
font-weight: bold;
padding: 10px 40px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: transform .1s ease-in;
&:active {
transform: scale(.9);
}
&:focus {
outline: none;
}
}
button.invert {
background-color: #272727;
border-color: #272727;
}
form {
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
padding: 90px 60px;
width: calc(50% - 120px);
height: calc(100% - 180px);
text-align: center;
// background: linear-gradient(to bottom, #efefef, #ccc);
background-color: #272727;
transition: all .5s ease-in-out;
div {
font-size: 1rem;
}
input {
background-color: #EBE7D9;
border: none;
padding: 8px 15px;
margin: 6px 0;
width: calc(100% - 30px);
border-radius: 15px;
border-bottom: 1px solid #ddd;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4),
0 -1px 1px #fff,
0 1px 0 #fff;
overflow: hidden;
&:focus {
outline: none;
background-color: #fff;
}
}
}
.sign-in {
left: 0;
z-index: 2;
}
.sign-up {
left: 0;
z-index: 1;
opacity: 0;
}
.sign-up-active {
.sign-in {
transform: translateX(100%);
}
.sign-up {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show .5s;
}
.overlay-container {
transform: translateX(-100%);
}
.overlay {
transform: translateX(50%);
}
.overlay-left {
transform: translateX(0);
}
.overlay-right {
transform: translateX(20%);
}
}
@keyframes show {
0% {
opacity: 0;
z-index: 1;
}
49% {
opacity: 0;
z-index: 1;
}
50% {
opacity: 1;
z-index: 10;
}
}
</style> </style>