login vuetify
This commit is contained in:
Tim Zieger
parent
d66ecc43b7
commit
b0b33bfbb3
@ -45,65 +45,71 @@
|
||||
<v-img src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img>
|
||||
<v-toolbar-title>Geo Timetracking</v-toolbar-title>
|
||||
<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 -->
|
||||
<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-btn>
|
||||
</template>
|
||||
<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-btn>
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar>
|
||||
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John">
|
||||
</v-list-item-avatar>
|
||||
<v-card>
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar>
|
||||
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>John Doe</v-list-item-title>
|
||||
<v-list-item-subtitle>Admin</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>John Doe</v-list-item-title>
|
||||
<v-list-item-subtitle>Admin</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<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-list-item-action>
|
||||
|
||||
<v-divider></v-divider>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
||||
<v-list>
|
||||
<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-divider></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-action>
|
||||
<v-switch
|
||||
|
||||
<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>
|
||||
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-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>
|
||||
|
||||
<!-- Routed pages are inserted here -->
|
||||
@ -120,13 +126,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SignIn from "./views/SignIn.vue";
|
||||
export default {
|
||||
components: {
|
||||
SignIn
|
||||
},
|
||||
props: {
|
||||
source: String
|
||||
},
|
||||
data: () => ({
|
||||
drawer: null,
|
||||
login: true
|
||||
login: true,
|
||||
dialog: false,
|
||||
menu: false
|
||||
}),
|
||||
created() {
|
||||
this.$vuetify.theme.dark = true;
|
||||
@ -141,7 +153,7 @@ export default {
|
||||
text-decoration: none;
|
||||
}
|
||||
.v-application {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background-color: var(--v-background-base) !important;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
background-color: var(--v-background-base) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,7 +9,7 @@ import About from "../views/About.vue";
|
||||
import Login from "../views/Login.vue";
|
||||
import Register from "../views/Register.vue";
|
||||
import WeekSummary from "../views/WeekSummary.vue";
|
||||
import SignIn from "../views/SignIn.vue";
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
@ -23,11 +23,6 @@ const routes = [
|
||||
name: "TimeRecords",
|
||||
component: TimeRecords
|
||||
},
|
||||
{
|
||||
path: "/signin",
|
||||
name: "SignIn",
|
||||
component: SignIn
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "Login",
|
||||
|
||||
@ -1,261 +1,138 @@
|
||||
<template>
|
||||
<div class="test" >
|
||||
<template >
|
||||
<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="container" :class="{'sign-up-active' : signUp}">
|
||||
<div class="overlay-container">
|
||||
<div class="overlay">
|
||||
<div class="overlay-left">
|
||||
<h2>Welcome Back!</h2>
|
||||
<img src="../assets/logo_gt.svg" height="100vh">
|
||||
<button class="invert" id="signIn" @click="signUp = !signUp">Sign In</button>
|
||||
</div>
|
||||
<div class="overlay-right">
|
||||
<h2>Create a new account</h2>
|
||||
<img src="../assets/logo_gt.svg" height="100vh">
|
||||
<button class="invert" id="signUp" @click="signUp = !signUp">Sign Up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sign-up" action="#">
|
||||
<h2>Create login</h2>
|
||||
|
||||
<input type="text" placeholder="Firstname" v-model="firstname"/>
|
||||
<input type="text" placeholder="Lastname" v-model="lastname"/>
|
||||
<input type="text" placeholder="Username" vmodel="usernamer"/>
|
||||
<input type="password" placeholder="Password" v-model="passwordr"/>
|
||||
<button>Sign Up</button>
|
||||
</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>
|
||||
<div class="text-center mt-10">
|
||||
<v-btn
|
||||
class="primary--text"
|
||||
rounded
|
||||
outlined
|
||||
dark
|
||||
@click="step++"
|
||||
>Create Account</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</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 class="text-center mt-3">
|
||||
<v-btn class="primary--text" rounded outlined dark @click="step--">Sign In</v-btn>
|
||||
</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>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SignIn",
|
||||
// data: () => {
|
||||
// return {
|
||||
// signUp: false
|
||||
// }
|
||||
|
||||
data() {
|
||||
return {
|
||||
signUp: false,
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
usernamer: '',
|
||||
passwordr: '',
|
||||
usernamel: '',
|
||||
passwordl: ''
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
login(e) {
|
||||
e.preventDefault();
|
||||
console.log(this.usernamel);
|
||||
}
|
||||
export default {
|
||||
data: () => ({
|
||||
step: 1,
|
||||
username: ""
|
||||
}),
|
||||
props: {
|
||||
source: String
|
||||
},
|
||||
methods: {
|
||||
signin() {
|
||||
console.log(this.username);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" 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 lang="css" scoped>
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user