From cd34f912c8864aa5d268d8396657def114e66afc Mon Sep 17 00:00:00 2001
From: Seth Vargo <seth@sethvargo.com>
Date: Mon, 5 Apr 2021 19:43:40 -0400
Subject: [PATCH] Update change password javascript and styles

Check password validity on page load to reduce code duplication
---
 assets/assets.go                         |  4 ++
 assets/server/login/_loginscripts.html   | 53 +++++++++--------
 assets/server/login/change-password.html | 75 ++++++++++++------------
 assets/server/static/js/application.js   | 40 ++++++-------
 4 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/assets/assets.go b/assets/assets.go
index 91738eee6..ae03378e8 100644
--- a/assets/assets.go
+++ b/assets/assets.go
@@ -40,6 +40,10 @@ var serverStaticFS, _ = fs.Sub(serverFS, "server/static")
 // ServerStaticFS returns the file system for the server static assets, rooted
 // at static/.
 func ServerStaticFS() fs.FS {
+	if project.DevMode() {
+		return os.DirFS(project.Root("assets", "server", "static"))
+	}
+
 	return serverStaticFS
 }
 
diff --git a/assets/server/login/_loginscripts.html b/assets/server/login/_loginscripts.html
index 525357d35..c7fb10e02 100644
--- a/assets/server/login/_loginscripts.html
+++ b/assets/server/login/_loginscripts.html
@@ -80,41 +80,44 @@
 {{end}}
 
 {{define "login/pwd-validate"}}
-<p class="card-text ml-4">
-  <small class="form-text text-muted">
-    {{if .requirements.HasRequirements}}
-    <span class="row">Password should be:</span>
+<div class="text-secondary mb-3">
+  {{if .requirements.HasRequirements}}
     {{if gt .requirements.Length 0}}
-    <span class="row ml-1" id="length-req">
-      <span id="icon" aria-hidden="true"></span>At least {{.requirements.Length}} characters long
-    </span>
+      <div id="length-req">
+        <span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
+        At least {{.requirements.Length}} characters long
+      </div>
     {{end}}
     {{if gt .requirements.Uppercase 0}}
-    <span class="row ml-1" id="upper-req">
-      <span id="icon" aria-hidden="true"></span>Contain {{.requirements.Uppercase}} uppercase letter
-    </span>
+      <div id="upper-req">
+        <span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
+        Contain {{.requirements.Uppercase}} uppercase letter
+      </div>
     {{end}}
     {{if gt .requirements.Lowercase 0}}
-    <span class="row ml-1" id="lower-req">
-      <span id="icon" aria-hidden="true"></span>Contain {{.requirements.Lowercase}} lowercase letter
-    </span>
+      <div id="lower-req">
+        <span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
+        Contain {{.requirements.Lowercase}} lowercase letter
+      </div>
     {{end}}
     {{if gt .requirements.Number 0}}
-    <span class="row ml-1" id="num-req">
-      <span id="icon" aria-hidden="true"></span>Contain {{.requirements.Number}} number
-    </span>
+      <div id="num-req">
+        <span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
+        Contain {{.requirements.Number}} number
+      </div>
     {{end}}
     {{if gt .requirements.Special 0}}
-    <span class="row ml-1" id="special-req">
-      <span id="icon" aria-hidden="true"></span>Contain {{.requirements.Special}} special character
-    </span>
-    {{end}}
+      <div id="special-req">
+        <span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
+        Contain {{.requirements.Special}} special character
+      </div>
     {{end}}
-    <span class="row ml-1" id="retyped">
-      <span id="icon" aria-hidden="true"></span>Retyped password must match password
-    </span>
-  </small>
-</p>
+  {{end}}
+  <div id="retyped">
+    <span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
+    Retyped password must match password
+  </div>
+</div>
 {{end}}
 
 {{define "login/requirements"}}
diff --git a/assets/server/login/change-password.html b/assets/server/login/change-password.html
index 0a13cffd8..a662b4102 100644
--- a/assets/server/login/change-password.html
+++ b/assets/server/login/change-password.html
@@ -13,49 +13,44 @@
   <main role="main" class="container">
     {{template "flash" .}}
 
-    <div class="d-flex vh-100">
-      <div class="d-flex w-100 justify-content-center align-self-center">
-        <div class="col-sm-6">
-          <div class="card shadow-sm" id="login-div">
-            <div class="card-header">Change password</div>
-            <div class="card-body">
-              <form id="password-form" class="floating-form" action="/login/change-password" method="POST">
-                {{.csrfField}}
-                <div class="form-label-group">
-                  <input type="email" id="email" name="email" class="form-control" placeholder="Email address"
-                  value="{{.currentUser.Email}}" required autofocus disabled/>
-                  <label for="email">Email address</label>
-                </div>
-                <div class="form-label-group mb-2">
-                  <input type="password" id="password" class="form-control" placeholder="Old password"
-                    autocomplete="password" required />
-                  <label for="password">Old password</label>
-                </div>
-                <div class="form-label-group mb-2">
-                  <input type="password" id="new-password" class="form-control" placeholder="New password"
-                    autocomplete="new-password" required />
-                  <label for="password">New password</label>
-                </div>
-                <div class="form-label-group">
-                  <input type="password" id="retype" class="form-control" placeholder="Retype new password"
-                    autocomplete="new-password" required />
-                  <label for="retype">Retype new password</label>
-                </div>
-
-                {{template "login/pwd-validate" .}}
-              </form>
-              <form class="floating-form">
-                <button type="submit" id="submit" class="btn btn-primary btn-block" disabled>Set password</button>
-              </form>
-              <a class="float-right mt-3 card-link" href="/account">Account settings</a>
-            </div>
+    <div class="card shadow-sm" id="login-div">
+      <div class="card-header">Change password</div>
+      <div class="card-body">
+        <form id="password-form" class="floating-form" action="/login/change-password" method="POST">
+          {{.csrfField}}
+          <div class="form-label-group">
+            <input type="email" id="email" name="email" class="form-control" placeholder="Email address"
+              value="{{.currentUser.Email}}" required autofocus disabled />
+            <label for="email">Email address</label>
+          </div>
+          <div class="form-label-group">
+            <input type="password" id="password" class="form-control" placeholder="Old password"
+              autocomplete="password" required />
+            <label for="password">Old password</label>
+          </div>
+
+          <hr>
+
+          {{template "login/pwd-validate" .}}
+
+          <div class="form-label-group mb-2">
+            <input type="password" id="new-password" class="form-control" placeholder="New password"
+              autocomplete="new-password" required />
+            <label for="password">New password</label>
+          </div>
+          <div class="form-label-group">
+            <input type="password" id="retype" class="form-control" placeholder="Retype new password"
+              autocomplete="new-password" required />
+            <label for="retype">Retype new password</label>
           </div>
 
-          {{template "login/pindiv" .}}
-          {{template "login/factorsdiv" .}}
-        </div>
+          <button type="submit" id="submit" class="btn btn-primary btn-block" disabled>Set password</button>
+        </form>
       </div>
     </div>
+
+    {{template "login/pindiv" .}}
+    {{template "login/factorsdiv" .}}
   </main>
 
 {{template "loginscripts" .}}
@@ -77,6 +72,8 @@
         $submit.prop('disabled', !checkPasswordValid($newPassword.val(), $retype.val(), requirements));
       });
 
+      checkPasswordValid('', '', requirements);
+
       let fn = function doChangePassword() {
         let email = $email.val().trim();
         let pwd = $newPassword.val();
diff --git a/assets/server/static/js/application.js b/assets/server/static/js/application.js
index e3509aaf1..0f89ec60a 100644
--- a/assets/server/static/js/application.js
+++ b/assets/server/static/js/application.js
@@ -314,11 +314,11 @@ async function uploadWithRetries(uploadFn) {
 function checkPasswordValid(pwd, retype, requirements) {
   let valid = true;
 
-  if (pwd != retype) {
+  if (pwd && pwd.length > 0 && pwd == retype) {
     decorateValid($('#retyped'));
-    valid = false;
   } else {
     decorateInvalid($('#retyped'));
+    valid = false;
   }
 
   if (requirements) {
@@ -341,57 +341,53 @@ function checkPasswordValid(pwd, retype, requirements) {
     }
 
     if (pwd.length < requirements.Length) {
-      decorateValid($('#length-req'));
+      decorateInvalid($('#length-req'));
       valid = false;
     } else {
-      decorateInvalid($('#length-req'));
+      decorateValid($('#length-req'));
     }
 
     if (upper < requirements.Uppercase) {
-      decorateValid($('#upper-req'));
+      decorateInvalid($('#upper-req'));
       valid = false;
     } else {
-      decorateInvalid($('#upper-req'));
+      decorateValid($('#upper-req'));
     }
 
     if (lower < requirements.Lowercase) {
-      decorateValid($('#lower-req'));
+      decorateInvalid($('#lower-req'));
       valid = false;
     } else {
-      decorateInvalid($('#lower-req'));
+      decorateValid($('#lower-req'));
     }
 
     if (digit < requirements.Number) {
-      decorateValid($('#num-req'));
+      decorateInvalid($('#num-req'));
       valid = false;
     } else {
-      decorateInvalid($('#num-req'));
+      decorateValid($('#num-req'));
     }
 
     if (special < requirements.Special) {
-      decorateValid($('#special-req'));
+      decorateInvalid($('#special-req'));
       valid = false;
     } else {
-      decorateInvalid($('#special-req'));
+      decorateValid($('#special-req'));
     }
   }
 
   return valid;
 }
 
-const errClass = "oi oi-circle-x pr-1";
-const checkClass = "oi oi-circle-check pr-1";
+const errClass = "oi-circle-x text-danger";
+const checkClass = "oi-circle-check text-success";
 
-function decorateValid($element) {
-  $element.find("#icon").attr("class", errClass);
-  $element.addClass("text-danger");
-  $element.removeClass("text-muted");
+function decorateInvalid($element) {
+  $element.find(".oi").removeClass(checkClass).addClass(errClass);
 }
 
-function decorateInvalid($element) {
-  $element.find("#icon").attr("class", checkClass);
-  $element.addClass("text-muted");
-  $element.removeClass("text-danger");
+function decorateValid($element) {
+  $element.find(".oi").removeClass(errClass).addClass(checkClass);
 }
 
 function loginScripts(hasCurrentUser, onLoginSuccess) {