From a0c9111a7d4d7bf08d6f2d68f86ab8abe8476d5c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 24 Sep 2024 16:58:51 +0800
Subject: [PATCH] Encapsulate password input field code

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../gateway_modules/input_fragments.html      | 30 ++++++++
 .../main/resources/templates/login_local.html | 31 +-------
 .../src/main/resources/templates/signup.html  | 76 ++-----------------
 3 files changed, 40 insertions(+), 97 deletions(-)
 create mode 100644 application/src/main/resources/templates/gateway_modules/input_fragments.html

diff --git a/application/src/main/resources/templates/gateway_modules/input_fragments.html b/application/src/main/resources/templates/gateway_modules/input_fragments.html
new file mode 100644
index 0000000000..c9bbac1cb1
--- /dev/null
+++ b/application/src/main/resources/templates/gateway_modules/input_fragments.html
@@ -0,0 +1,30 @@
+<div th:remove="tag" th:fragment="password(id,name,required,enableToggle)">
+    <div class="form-input" th:classappend="${enableToggle ? 'form-input-stack toggle-password-display-flag' : ''}">
+        <input
+            th:id="${id}"
+            th:name="${name}"
+            type="password"
+            autocomplete="off"
+            spellcheck="false"
+            autocorrect="off"
+            autocapitalize="off"
+            th:required="${required}"
+        />
+
+        <div th:if="${enableToggle}" class="form-input-stack-icon toggle-password-button">
+            <svg class="password-hidden-icon" style="display: none" viewBox="0 0 24 24" width="1em" height="1em">
+                <path
+                    fill="currentColor"
+                    d="M12 3c5.392 0 9.878 3.88 10.819 9c-.94 5.12-5.427 9-10.819 9c-5.392 0-9.878-3.88-10.818-9C2.122 6.88 6.608 3 12 3Zm0 16a9.005 9.005 0 0 0 8.778-7a9.005 9.005 0 0 0-17.555 0A9.005 9.005 0 0 0 12 19Zm0-2.5a4.5 4.5 0 1 1 0-9a4.5 4.5 0 0 1 0 9Zm0-2a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5Z"
+                ></path>
+            </svg>
+
+            <svg class="password-display-icon" viewBox="0 0 24 24" width="1em" height="1em">
+                <path
+                    fill="currentColor"
+                    d="M17.883 19.297A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.818-9A10.982 10.982 0 0 1 4.52 5.935L1.394 2.808l1.414-1.414l19.799 19.798l-1.414 1.415l-3.31-3.31ZM5.936 7.35A8.965 8.965 0 0 0 3.223 12a9.005 9.005 0 0 0 13.201 5.838l-2.028-2.028A4.5 4.5 0 0 1 8.19 9.604L5.936 7.35Zm6.978 6.978l-3.242-3.241a2.5 2.5 0 0 0 3.241 3.241Zm7.893 2.265l-1.431-1.431A8.935 8.935 0 0 0 20.778 12A9.005 9.005 0 0 0 9.552 5.338L7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.593Zm-9.084-9.084a4.5 4.5 0 0 1 4.769 4.769l-4.77-4.77Z"
+                ></path>
+            </svg>
+        </div>
+    </div>
+</div>
diff --git a/application/src/main/resources/templates/login_local.html b/application/src/main/resources/templates/login_local.html
index 6b25bb0b80..90435ac491 100644
--- a/application/src/main/resources/templates/login_local.html
+++ b/application/src/main/resources/templates/login_local.html
@@ -47,33 +47,8 @@
             </a>
         </div>
 
-        <div class="form-input form-input-stack toggle-password-display-flag">
-            <input
-                id="password"
-                name="password"
-                type="password"
-                autocomplete="off"
-                spellcheck="false"
-                autocorrect="off"
-                autocapitalize="off"
-                required="true"
-            />
-
-            <div class="form-input-stack-icon toggle-password-button">
-                <svg class="password-hidden-icon" style="display: none" viewBox="0 0 24 24" width="1em" height="1em">
-                    <path
-                        fill="currentColor"
-                        d="M12 3c5.392 0 9.878 3.88 10.819 9c-.94 5.12-5.427 9-10.819 9c-5.392 0-9.878-3.88-10.818-9C2.122 6.88 6.608 3 12 3Zm0 16a9.005 9.005 0 0 0 8.778-7a9.005 9.005 0 0 0-17.555 0A9.005 9.005 0 0 0 12 19Zm0-2.5a4.5 4.5 0 1 1 0-9a4.5 4.5 0 0 1 0 9Zm0-2a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5Z"
-                    ></path>
-                </svg>
-
-                <svg class="password-display-icon" viewBox="0 0 24 24" width="1em" height="1em">
-                    <path
-                        fill="currentColor"
-                        d="M17.883 19.297A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.818-9A10.982 10.982 0 0 1 4.52 5.935L1.394 2.808l1.414-1.414l19.799 19.798l-1.414 1.415l-3.31-3.31ZM5.936 7.35A8.965 8.965 0 0 0 3.223 12a9.005 9.005 0 0 0 13.201 5.838l-2.028-2.028A4.5 4.5 0 0 1 8.19 9.604L5.936 7.35Zm6.978 6.978l-3.242-3.241a2.5 2.5 0 0 0 3.241 3.241Zm7.893 2.265l-1.431-1.431A8.935 8.935 0 0 0 20.778 12A9.005 9.005 0 0 0 9.552 5.338L7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.593Zm-9.084-9.084a4.5 4.5 0 0 1 4.769 4.769l-4.77-4.77Z"
-                    ></path>
-                </svg>
-            </div>
-        </div>
+        <th:block
+            th:replace="~{gateway_modules/input_fragments :: password(id = 'password', name = 'password', required = 'true', enableToggle = true)}"
+        ></th:block>
     </div>
 </div>
diff --git a/application/src/main/resources/templates/signup.html b/application/src/main/resources/templates/signup.html
index 0c6cfc5820..cedccc97e2 100644
--- a/application/src/main/resources/templates/signup.html
+++ b/application/src/main/resources/templates/signup.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html
     xmlns:th="https://www.thymeleaf.org"
     th:replace="~{gateway_modules/layout :: layout(title = |注册 - ${site.title}|, head = ~{::head}, body = ~{::body})}"
@@ -89,78 +89,16 @@ <h1 class="form-title">Sign Up</h1>
 
                     <div class="form-item">
                         <label for="password">Password:</label>
-
-                        <div class="form-input form-input-stack toggle-password-display-flag">
-                            <input
-                                id="password"
-                                name="password"
-                                type="password"
-                                autocomplete="new-password"
-                                spellcheck="false"
-                                autocorrect="off"
-                                autocapitalize="off"
-                                required="true"
-                            />
-
-                            <div class="form-input-stack-icon toggle-password-button">
-                                <svg
-                                    class="password-hidden-icon"
-                                    style="display: none"
-                                    viewBox="0 0 24 24"
-                                    width="1em"
-                                    height="1em"
-                                >
-                                    <path
-                                        fill="currentColor"
-                                        d="M12 3c5.392 0 9.878 3.88 10.819 9c-.94 5.12-5.427 9-10.819 9c-5.392 0-9.878-3.88-10.818-9C2.122 6.88 6.608 3 12 3Zm0 16a9.005 9.005 0 0 0 8.778-7a9.005 9.005 0 0 0-17.555 0A9.005 9.005 0 0 0 12 19Zm0-2.5a4.5 4.5 0 1 1 0-9a4.5 4.5 0 0 1 0 9Zm0-2a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5Z"
-                                    ></path>
-                                </svg>
-
-                                <svg class="password-display-icon" viewBox="0 0 24 24" width="1em" height="1em">
-                                    <path
-                                        fill="currentColor"
-                                        d="M17.883 19.297A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.818-9A10.982 10.982 0 0 1 4.52 5.935L1.394 2.808l1.414-1.414l19.799 19.798l-1.414 1.415l-3.31-3.31ZM5.936 7.35A8.965 8.965 0 0 0 3.223 12a9.005 9.005 0 0 0 13.201 5.838l-2.028-2.028A4.5 4.5 0 0 1 8.19 9.604L5.936 7.35Zm6.978 6.978l-3.242-3.241a2.5 2.5 0 0 0 3.241 3.241Zm7.893 2.265l-1.431-1.431A8.935 8.935 0 0 0 20.778 12A9.005 9.005 0 0 0 9.552 5.338L7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.593Zm-9.084-9.084a4.5 4.5 0 0 1 4.769 4.769l-4.77-4.77Z"
-                                    ></path>
-                                </svg>
-                            </div>
-                        </div>
+                        <th:block
+                            th:replace="~{gateway_modules/input_fragments :: password(id = 'password', name = 'password', required = 'true', enableToggle = true)}"
+                        ></th:block>
                     </div>
 
                     <div class="form-item">
                         <label for="confirmPassword">Confirm Password:</label>
-                        <div class="form-input form-input-stack toggle-password-display-flag">
-                            <input
-                                id="confirmPassword"
-                                type="password"
-                                autocomplete="off"
-                                spellcheck="false"
-                                autocorrect="off"
-                                autocapitalize="off"
-                                required="true"
-                            />
-
-                            <div class="form-input-stack-icon toggle-password-button">
-                                <svg
-                                    class="password-hidden-icon"
-                                    style="display: none"
-                                    viewBox="0 0 24 24"
-                                    width="1em"
-                                    height="1em"
-                                >
-                                    <path
-                                        fill="currentColor"
-                                        d="M12 3c5.392 0 9.878 3.88 10.819 9c-.94 5.12-5.427 9-10.819 9c-5.392 0-9.878-3.88-10.818-9C2.122 6.88 6.608 3 12 3Zm0 16a9.005 9.005 0 0 0 8.778-7a9.005 9.005 0 0 0-17.555 0A9.005 9.005 0 0 0 12 19Zm0-2.5a4.5 4.5 0 1 1 0-9a4.5 4.5 0 0 1 0 9Zm0-2a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5Z"
-                                    ></path>
-                                </svg>
-
-                                <svg class="password-display-icon" viewBox="0 0 24 24" width="1em" height="1em">
-                                    <path
-                                        fill="currentColor"
-                                        d="M17.883 19.297A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.818-9A10.982 10.982 0 0 1 4.52 5.935L1.394 2.808l1.414-1.414l19.799 19.798l-1.414 1.415l-3.31-3.31ZM5.936 7.35A8.965 8.965 0 0 0 3.223 12a9.005 9.005 0 0 0 13.201 5.838l-2.028-2.028A4.5 4.5 0 0 1 8.19 9.604L5.936 7.35Zm6.978 6.978l-3.242-3.241a2.5 2.5 0 0 0 3.241 3.241Zm7.893 2.265l-1.431-1.431A8.935 8.935 0 0 0 20.778 12A9.005 9.005 0 0 0 9.552 5.338L7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.593Zm-9.084-9.084a4.5 4.5 0 0 1 4.769 4.769l-4.77-4.77Z"
-                                    ></path>
-                                </svg>
-                            </div>
-                        </div>
+                        <th:block
+                            th:replace="~{gateway_modules/input_fragments :: password(id = 'confirmPassword', name = null, required = 'true', enableToggle = true)}"
+                        ></th:block>
                     </div>
 
                     <div class="form-item">