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

Resolve "Vuetify login"

Closes #69

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!40

frontend/src/App.vue

@@ -45,18 +45,25 @@
         <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>
-        <!-- 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 }">
-        <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-btn>
           </template>
@@ -65,7 +72,7 @@
             <v-list>
               <v-list-item>
                 <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-content>
@@ -74,13 +81,7 @@
                 </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>
@@ -90,7 +91,12 @@
             <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-switch
+                    
+                    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>
@@ -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;
+  font-family: "Montserrat", sans-serif;
   background-color: var(--v-background-base) !important;
 }
 </style>

frontend/src/router/index.js

@@ -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",

frontend/src/views/SignIn.vue

@@ -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 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 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>
-      <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>
 
 <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: {
-      login(e) {
+    signin() {
-        e.preventDefault();
+      console.log(this.username);
-        console.log(this.usernamel);
     }
   }
-
+};
-  }
 </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>