Improved login form and added remember me option

resources/assets/sass/_buttons.scss

@@ -11,6 +11,12 @@
   &:active {
     background-color: darken($backgroundColor, 8%);
   }
+  &:focus {
+    background-color: lighten($backgroundColor, 4%);
+    box-shadow: $bs-light;
+    text-decoration: none;
+    color: $textColor;
+  }
 }
 
 // Button Specific Variables

resources/assets/sass/_forms.scss

@@ -30,6 +30,9 @@ label {
   color: #666;
   padding-bottom: 2px;
   margin-bottom: 0.2em;
+  &.inline {
+    display: inline-block;
+  }
 }
 
 label.radio, label.checkbox {
@@ -57,7 +60,8 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
   transition: all ease-in-out 120ms;
   cursor: pointer;
   user-select: none;
-  .switch-handle {
+  &:after {
+    content: '';
     display: block;
     position: relative;
     left: 0;
@@ -72,13 +76,24 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
   }
   &.active {
     background-color: rgba($positive, 0.4);
-    .switch-handle {
+    &:after {
       left: 16px;
       background-color: $positive;
       border: darken($positive, 20%);
     }
   }
 }
+.toggle-switch-checkbox {
+  display: none;
+}
+input:checked + .toggle-switch {
+  background-color: rgba($positive, 0.4);
+  &:after {
+    left: 16px;
+    background-color: $positive;
+    border: darken($positive, 20%);
+  }
+}
 
 .form-group {
   margin-bottom: $-s;
@@ -161,4 +176,11 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
     width: 300px;
     max-width: 100%;
   }
+}
+
+#login-form label[for="remember"] {
+  margin: 0;
+}
+#login-form label.toggle-switch {
+  margin-left: $-xl;
 }

resources/views/auth/login.blade.php

@@ -12,22 +12,29 @@
         <div class="center-box">
             <h1>Log In</h1>
 
-            <form action="/login" method="POST">
+            <form action="/login" method="POST" id="login-form">
                 {!! csrf_field() !!}
 
                 <div class="form-group">
                     <label for="email">Email</label>
-                    @include('form/text', ['name' => 'email'])
+                    @include('form/text', ['name' => 'email', 'tabindex' => 1])
                 </div>
 
                 <div class="form-group">
                     <label for="password">Password</label>
-                    @include('form/password', ['name' => 'password'])
+                    @include('form/password', ['name' => 'password', 'tabindex' => 2])
                     <span class="block small"><a href="/password/email">Forgot Password?</a></span>
                 </div>
 
+                <div class="form-group">
+                    <label for="remember" class="inline">Remember Me</label>
+                    <input type="checkbox" id="remember" name="remember"  class="toggle-switch-checkbox">
+                    <label for="remember" class="toggle-switch"></label>
+                </div>
+
+
                 <div class="from-group">
-                    <button class="button block pos">Sign In</button>
+                    <button class="button block pos" tabindex="3">Sign In</button>
                 </div>
             </form>
 

resources/views/form/password.blade.php

@@ -1,6 +1,7 @@
 <input type="password" id="{{ $name }}" name="{{ $name }}"
        @if($errors->has($name)) class="neg" @endif
        @if(isset($placeholder)) placeholder="{{$placeholder}}" @endif
+       @if(isset($tabindex)) tabindex="{{$tabindex}}" @endif
        @if(old($name)) value="{{ old($name)}}" @endif>
 @if($errors->has($name))
     <div class="text-neg text-small">{{ $errors->first($name) }}</div>

resources/views/form/text.blade.php

@@ -1,6 +1,7 @@
 <input type="text" id="{{ $name }}" name="{{ $name }}"
        @if($errors->has($name)) class="neg" @endif
        @if(isset($placeholder)) placeholder="{{$placeholder}}" @endif
+       @if(isset($tabindex)) tabindex="{{$tabindex}}" @endif
        @if(isset($model) || old($name)) value="{{ old($name) ? old($name) : $model->$name}}" @endif>
 @if($errors->has($name))
     <div class="text-neg text-small">{{ $errors->first($name) }}</div>

resources/views/public.blade.php

@@ -3,14 +3,14 @@
 <head>
     <title>BookStack</title>
     <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="/css/styles.css">
+    <link rel="stylesheet" href="{{ elixir('css/styles.css') }}">
     <link href='//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,300italic,100,300' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="/bower/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
 
     <!-- Scripts -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 </head>
-<body class="@yield('body-class')">
+<body class="@yield('body-class')" id="app">
 
 @if(Session::has('success'))
     <div class="notification anim pos">
@@ -62,5 +62,6 @@
     @yield('content')
 </section>
 
+<script src="{{ elixir('js/common.js') }}"></script>
 </body>
 </html>