From e947daff4518fa0f5f1098b4e38815bb9ae769f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Mastrup?= <soren.mastrup@danfoss.com>
Date: Wed, 25 Oct 2023 11:36:17 +0200
Subject: [PATCH] Added password toggle to Umbraco installer form

---
 .../src/installer/steps/user.controller.js    |  7 +++++
 .../src/installer/steps/user.html             | 12 ++++++--
 .../src/less/installer.less                   | 28 +++++++++++++++++++
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js b/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js
index 8b42bdbe27..c7f0bdb1c3 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js
@@ -86,6 +86,13 @@ angular.module("umbraco.install").controller("Umbraco.Install.UserController", f
     }
   };
 
+  $scope.togglePassword = function () {
+    var elem = $("form[name='installerForm'] input[name='installer.current.model.password']");
+    elem.attr("type", (elem.attr("type") === "text" ? "password" : "text"));
+    elem.focus();
+    $(".password-text.show, .password-text.hide").toggle();
+  }
+
   function onChangeConsent(values) {
     const result = Math.round(Number(values[0]) - 1);
 
diff --git a/src/Umbraco.Web.UI.Client/src/installer/steps/user.html b/src/Umbraco.Web.UI.Client/src/installer/steps/user.html
index ea487e046a..d1acf0691b 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/steps/user.html
+++ b/src/Umbraco.Web.UI.Client/src/installer/steps/user.html
@@ -49,9 +49,9 @@
         <div class="control-group">
           <label class="control-label" for="password">Password</label>
           <div class="controls">
-            <!-- why isn't this masked: https://www.nngroup.com/articles/stop-password-masking/ -->
+
             <input
-              type="text"
+              type="password"
               name="installer.current.model.password"
               ng-minlength="{{installer.current.model.minCharLength}}"
               ng-pattern="passwordPattern"
@@ -63,6 +63,14 @@
               id="password"
               spellcheck="false"
             />
+
+            <div class="password-toggle">
+              <button type="button" class="btn-reset" ng-click="togglePassword()">
+                <small class="password-text show">Show password</small>
+                <small class="password-text hide">Hide password</small>
+              </button>
+            </div>
+
             <small class="inline-help"
               >At least {{installer.current.model.minCharLength}} characters
               long</small
diff --git a/src/Umbraco.Web.UI.Client/src/less/installer.less b/src/Umbraco.Web.UI.Client/src/less/installer.less
index 0eb87721ad..af72072f5f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/installer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/installer.less
@@ -312,3 +312,31 @@ select {
 #consentSliderWrapper {
   margin-bottom: 60px;
 }
+
+.password-toggle {
+  float: right;
+  user-select: none;
+
+  button {
+    opacity: .5;
+    display: inline-block;
+    z-index: 1;
+    -webkit-tap-highlight-color: transparent;
+
+    .password-text {
+      background-repeat: no-repeat;
+      background-size: 18px;
+      background-position: 0 1px;
+      padding-left: 24px;
+
+      &.show {
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23444' d='M16 6C9 6 3 10 0 16c3 6 9 10 16 10s13-4 16-10c-3-6-9-10-16-10zm8 5.3c1.8 1.2 3.4 2.8 4.6 4.7-1.2 2-2.8 3.5-4.7 4.7-3 1.5-6 2.3-8 2.3s-6-.8-8-2.3C6 19.5 4 18 3 16c1.5-2 3-3.5 5-4.7l.6-.2C8 12 8 13 8 14c0 4.5 3.5 8 8 8s8-3.5 8-8c0-1-.3-2-.6-2.6l.4.3zM16 13c0 1.7-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.3 3 3z'/%3E%3C/svg%3E");
+      }
+
+      &.hide {
+        display: none;
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23444' d='M29.6.4C29 0 28 0 27.4.4L21 6.8c-1.4-.5-3-.8-5-.8C9 6 3 10 0 16c1.3 2.6 3 4.8 5.4 6.5l-5 5c-.5.5-.5 1.5 0 2 .3.4.7.5 1 .5s1 0 1.2-.4l27-27C30 2 30 1 29.6.4zM13 10c1.3 0 2.4 1 2.8 2L12 15.8c-1-.4-2-1.5-2-2.8 0-1.7 1.3-3 3-3zm-9.6 6c1.2-2 2.8-3.5 4.7-4.7l.7-.2c-.4 1-.6 2-.6 3 0 1.8.6 3.4 1.6 4.7l-2 2c-1.6-1.2-3-2.7-4-4.4zM24 13.8c0-.8 0-1.7-.4-2.4l-10 10c.7.3 1.6.4 2.4.4 4.4 0 8-3.6 8-8z'/%3E%3Cpath fill='%23444' d='M26 9l-2.2 2.2c2 1.3 3.6 3 4.8 4.8-1.2 2-2.8 3.5-4.7 4.7-2.7 1.5-5.4 2.3-8 2.3-1.4 0-2.6 0-3.8-.4L10 25c2 .6 4 1 6 1 7 0 13-4 16-10-1.4-2.8-3.5-5.2-6-7z'/%3E%3C/svg%3E");
+      }
+    }
+  }
+}