Improved login form and added remember me option

diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss
index 72fa33cfedfc1f3a76244cb929f53d844d8c16c2..9b5a498f6c8edec2f0980d73c9cb8b2cdf8d668a 100644 (file)
--- a/resources/assets/sass/_buttons.scss
+++ b/resources/assets/sass/_buttons.scss
@@ -11,6 +11,12 @@
   &:active {
     background-color: darken($backgroundColor, 8%);
   }
   &:active {
     background-color: darken($backgroundColor, 8%);
   }

+  &:focus {
+    background-color: lighten($backgroundColor, 4%);
+    box-shadow: $bs-light;
+    text-decoration: none;
+    color: $textColor;
+  }

 }
 
 // Button Specific Variables
 }
 
 // Button Specific Variables

diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 9f73fc272a073200bfc8e9949f34eb7f683dbe7b..98df40bf3d9cbe8c19c3aef151449bb8b5cdfc08 100644 (file)
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -30,6 +30,9 @@ label {
   color: #666;
   padding-bottom: 2px;
   margin-bottom: 0.2em;
   color: #666;
   padding-bottom: 2px;
   margin-bottom: 0.2em;

+  &.inline {
+    display: inline-block;
+  }

 }
 
 label.radio, label.checkbox {
 }
 
 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;
   transition: all ease-in-out 120ms;
   cursor: pointer;
   user-select: none;

-  .switch-handle {
+  &:after {
+    content: '';

     display: block;
     position: relative;
     left: 0;
     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);
   }
   &.active {
     background-color: rgba($positive, 0.4);

-    .switch-handle {
+    &:after {

       left: 16px;
       background-color: $positive;
       border: darken($positive, 20%);
     }
   }
 }
       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;
 
 .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%;
   }
     width: 300px;
     max-width: 100%;
   }

+}
+
+#login-form label[for="remember"] {
+  margin: 0;
+}
+#login-form label.toggle-switch {
+  margin-left: $-xl;

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 2bbf859d66df5adce273365560129e665967c8bb..eb9fdb44d273511f6f409927c66982f141c938ca 100644 (file)
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -12,22 +12,29 @@
         <div class="center-box">
             <h1>Log In</h1>
 
         <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>
                 {!! 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>
                 </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>
 
                     <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">
                 <div class="from-group">

-                    <button class="button block pos">Sign In</button>
+                    <button class="button block pos" tabindex="3">Sign In</button>

                 </div>
             </form>
 
                 </div>
             </form>
 

diff --git a/resources/views/form/password.blade.php b/resources/views/form/password.blade.php
index ca981a20ab29182dc446555f23d70f4c61d80e6c..0b6a5e04382b0f5df79435f289a81a95ccd73485 100644 (file)
--- a/resources/views/form/password.blade.php
+++ b/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
 <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>
        @if(old($name)) value="{{ old($name)}}" @endif>
 @if($errors->has($name))
     <div class="text-neg text-small">{{ $errors->first($name) }}</div>

diff --git a/resources/views/form/text.blade.php b/resources/views/form/text.blade.php
index 400d4fea4040df16ac030ab4c0f4bc9ff59ab765..3379b69b7f2fcb1bf89cb75962b7e03d99199ae6 100644 (file)
--- a/resources/views/form/text.blade.php
+++ b/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
 <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>
        @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>

diff --git a/resources/views/public.blade.php b/resources/views/public.blade.php
index 39bdab1ef1ee4d55f73523687dccb7d15210c12e..ae087cee994b07c046469cc41df322905efa9956 100644 (file)
--- a/resources/views/public.blade.php
+++ b/resources/views/public.blade.php
@@ -3,14 +3,14 @@
 <head>
     <title>BookStack</title>
     <meta name="viewport" content="width=device-width">
 <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>
     <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">
 
 @if(Session::has('success'))
     <div class="notification anim pos">


@@ -62,5 +62,6 @@
     @yield('content')
 </section>
 
     @yield('content')
 </section>
 

+<script src="{{ elixir('js/common.js') }}"></script>

 </body>
 </html>
 </body>
 </html>