Merge branch '56-change-login-style' into 'master'

Resolve "Change login style"

Closes #56

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

frontend/package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "apexcharts": "^3.19.0",
     "core-js": "^3.6.4",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^8.0.2",
     "vue": "^2.6.11",
     "vue-apexcharts": "^1.5.3",
     "vue-router": "^3.1.6"

frontend/src/components/layout/Footer.vue

@@ -20,6 +20,12 @@ name: "Footer"
 
 <style scoped>
 .footer {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  flex-wrap: wrap;
+  height: 10vh;
   background: #272727;
   color: #f1f1f1f1;
   text-align: center;

frontend/src/components/layout/Header.vue

@@ -4,7 +4,7 @@
         <u><router-link to="/"><img alt="Vue logo" src="../../assets/logo.svg"></router-link></u>
       </div>
       <div>
-        <u><router-link to="/login">Login</router-link></u>
+        <u><router-link to="/signin">Sign In</router-link></u>
       </div>
     </div>
 </template>
@@ -18,6 +18,7 @@
 <style scoped>
 .header {
   display: flex;
+  height: 10vh;
   justify-content: space-between;
   background: #272727;
   color: #f1f1f1f1;
@@ -33,9 +34,9 @@
 
 .header img {
   float: left;
-  height: 60px;
+  height: 7vh;
   width: auto;
-  padding: 5px;
+  /* padding: 5px; */
 
 }
 

frontend/src/router/index.js

@@ -9,6 +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 = [
@@ -22,6 +23,11 @@ const routes = [
     name: "TimeRecords",
     component: TimeRecords
   },
+  {
+    path: "/signin",
+    name: "SignIn",
+    component: SignIn
+  },
   {
     path: "/login",
     name: "Login",

frontend/src/views/SignIn.vue

@@ -0,0 +1,261 @@
+<template>
+<div class="test" >
+
+
+  <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>
+</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);
+      }
+    }
+
+  }
+</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>