Merge pull request #673 from M4ttoF/621

#621 Show caps lock on sign in

Author: joshi1983

app/public/js/password_caps.js

@@ -0,0 +1,8 @@
+document.addEventListener( 'keydown', function( event ) {
+	var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
+	if(caps) {
+  		$("#capsLock").show();
+  	} else {
+  		$("#capsLock").hide();
+  	}
+});

app/resources/assets/sass/_sign_in.scss

@@ -23,6 +23,18 @@
 			padding-top: 15px;
 		}
 	}
+	.capsLock{
+		font-style: italic;
+		margin-bottom: 0px;
+		margin-top: 3px;
+		padding-top: 5px;
+		padding-bottom: 5px;
+		padding-right: 0px;
+		display: none;
+	}
+	.fa-exclamation-circle {
+		margin-left: 10px;
+	}
 
 	.remember-password {
 		padding-top: 10px;

app/resources/views/pages/signin.blade.php

@@ -1,6 +1,7 @@
 @extends('layouts.default', ['body_class' => 'nav-profile'])
 @section('content')
-
+	<script src="/js/jquery-3.1.1.js"></script>
+	<script src="/js/password_caps.js" type="text/javascript"></script>
 <div class="sign-in">
 	<div class="text-center header">
 		<h1>Sign In</h1>
@@ -29,6 +30,9 @@ class="clean" name="email"
 						</div>
 						<div class="col-xs-12">
 							<input class="clean" name="password" type="password" placeholder="Password" value="{{ old('password') }}">
+							<div id="capsLock" class="capsLock text-right alert alert-warning">CapsLock is on!
+								<span class="fa fa-exclamation-circle"></span>
+							</div>
 						</div>
 
                         <div class="col-xs-12">