Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
bd73c88e 1 parent 9425f227

Improved login form and added remember me option

Inline Side-by-side
Showing 6 changed files with 46 additions and 8 deletions
......@@ -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
......
......@@ -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;
}
\ No newline at end of file
......
......@@ -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>
......
<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>
......
<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>
......
......@@ -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>
......