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

login vuetify

Browse Source
This commit is contained in:
Tim Zieger 2020-05-15 12:40:59 +02:00
parent d66ecc43b7
commit b0b33bfbb3
3 changed files with 196 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/App.vue
View File

@ -45,18 +45,25 @@
<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>
<!-- Menu with account icon --> <!-- Modal -->
<v-menu <v-row justify="center" >
v-model="menu" <v-dialog v-model="dialog" width="70%" persistent>
:close-on-content-click="false"
:nudge-width="200"
offset-y
>
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<v-btn <v-btn color="primary" dark v-on="on">Login</v-btn>
icon </template>
v-on="on" <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 -->
<v-menu v-model="menu" :close-on-content-click="false" :nudge-width="200" offset-y>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-account</v-icon> <v-icon>mdi-account</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -65,7 +72,7 @@
<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>
@ -74,13 +81,7 @@
</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-action>
</v-list-item> </v-list-item>
</v-list> </v-list>
@ -90,7 +91,12 @@
<v-list> <v-list>
<v-list-item> <v-list-item>
<v-list-item-action> <v-list-item-action>
<v-switch v-model="message" color="primary" :input-value="login" @change="login= !login"></v-switch> <v-switch
color="primary"
:input-value="login"
@change="login= !login"
></v-switch>
</v-list-item-action> </v-list-item-action>
<v-list-item-title>View as Guest</v-list-item-title> <v-list-item-title>View as Guest</v-list-item-title>
</v-list-item> </v-list-item>
@ -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",

367
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>
<v-window-item :value="2">
<v-row class="fill-heigth">
<v-col cols="12" md="4" class="main">
<v-card-text class="white--text mt-1">
<h1 class="text-center display-1 primary--text">Welcome Back</h1>
</v-card-text>
<div class="text-center ma-12">
<v-avatar min-width="100" size="230">
<img src="../assets/logo_gt.svg" alt="John" />
</v-avatar>
</div> </div>
<div class="text-center mt-3">
<v-btn class="primary--text" rounded outlined dark @click="step--">Sign In</v-btn>
</div> </div>
</v-col>
<v-col cols="12" md="8" class="main">
<v-card-text class="mt-12">
<h1 class="text-center display-2 logowhite--text">Create Account</h1>
<v-form>
<v-text-field
label="Firstname"
name="FirstnameR"
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> </div>
<form class="sign-up" action="#"> </v-col>
<h2>Create login</h2> </v-row>
</v-window-item>
<input type="text" placeholder="Firstname" v-model="firstname"/> </v-window>
<input type="text" placeholder="Lastname" v-model="lastname"/> </v-card>
<input type="text" placeholder="Username" vmodel="usernamer"/> </v-col>
<input type="password" placeholder="Password" v-model="passwordr"/> </v-row>
<button>Sign Up</button> </v-container>
</form>
<form class="sign-in" action="#">
<h2>Sign In</h2>
<input type="text" placeholder="Username" v-model="usernamel" />
<input type="password" placeholder="Password" v-model="passwordl" />
<button>Sign In</button>
</form>
</div>
</article>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "SignIn", data: () => ({
// data: () => { step: 1,
// return { username: ""
// signUp: false }),
// } props: {
source: String
data() {
return {
signUp: false,
firstname: '',
lastname: '',
usernamer: '',
passwordr: '',
usernamel: '',
passwordl: ''
}
}, },
methods: { methods: {
login(e) { signin() {
e.preventDefault(); console.log(this.username);
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>