From f3687b6e56c80252c760b3a4ec8d0d6090b243e0 Mon Sep 17 00:00:00 2001
From: Arpit Jalan <arpit@techapj.com>
Date: Mon, 4 May 2015 11:58:34 +0530
Subject: [PATCH] UX: show caps lock warning on password reset page

---
 app/views/users/password_reset.html.erb | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/views/users/password_reset.html.erb b/app/views/users/password_reset.html.erb
index 585d2c8dd6b..c1597a5416f 100644
--- a/app/views/users/password_reset.html.erb
+++ b/app/views/users/password_reset.html.erb
@@ -36,9 +36,10 @@
       <%=form_tag({}, method: :put) do %>
         <p>
           <span style="display: none;"><input name="username" type="text" value="<%= @user.username %>"></span>
-          <input id="user_password" name="password" size="30" type="password" maxlength="<%= User.max_password_length %>">
+          <input id="user_password" name="password" size="30" type="password" maxlength="<%= User.max_password_length %>" onkeypress="capsLock(event)">
           <label><%= t('js.user.password.instructions', count: SiteSetting.min_password_length) %></label>
         </p>
+        <div id="capsLockWarning" class="caps-lock-warning" style="visibility:hidden"><i class="fa fa-exclamation-triangle"></i> <%= t 'js.login.caps_lock_warning' %></div>
         <p>
         <%=submit_tag( @user.has_password? ? t('password_reset.update') : t('password_reset.save'), class: 'btn')%>
         </p>
@@ -48,5 +49,11 @@
 </div>
 
 <script type="text/javascript">
-  document.getElementById('user_password').focus()
+  document.getElementById('user_password').focus();
+
+  function capsLock(e) {
+    kc = e.keyCode?e.keyCode:e.which;
+    sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
+    (((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)) ? document.getElementById('capsLockWarning').style.visibility = 'visible' : document.getElementById('capsLockWarning').style.visibility = 'hidden';
+  }
 </script>