From b488fe24a27bf76e0b777202bf13a68660121305 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu>
Date: Mon, 28 Nov 2022 15:28:56 +0100
Subject: [PATCH] Fix Authenticator remove button

---
 account/template.ftl              |   2 +-
 account/totp.ftl                  | 242 +++++++++++++++---------------
 common/resources/scss/button.scss |  15 +-
 login/template.ftl                |   2 +-
 4 files changed, 133 insertions(+), 128 deletions(-)

diff --git a/account/template.ftl b/account/template.ftl
index 7bedd04..14a948c 100644
--- a/account/template.ftl
+++ b/account/template.ftl
@@ -10,7 +10,7 @@
 
     <link rel="icon" href="${url.resourcesPath}/img/pub.solar.svg" />
 
-    <link href="${url.resourcesPath}/css/index.css?v3" rel="stylesheet" />
+    <link href="${url.resourcesPath}/css/index.css?v4" rel="stylesheet" />
 
     <script defer src="${url.resourcesPath}/js/background.js" type="text/javascript"></script>
     <script defer src="${url.resourcesPath}/js/i18n.js" type="text/javascript"></script>
diff --git a/account/totp.ftl b/account/totp.ftl
index b5ff59b..100d344 100755
--- a/account/totp.ftl
+++ b/account/totp.ftl
@@ -1,131 +1,131 @@
 <#import "template.ftl" as layout>
 <@layout.mainLayout active='totp' bodyClass='totp'; section>
 
-    <div class="row">
-        <div class="col-md-10">
-            <h2>${msg("authenticatorTitle")}</h2>
-        </div>
-        <#if totp.otpCredentials?size == 0>
-            <div class="col-md-2 subtitle">
-                <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
-            </div>
-        </#if>
+  <div class="row">
+    <div class="col-md-10">
+      <h2>${msg("authenticatorTitle")}</h2>
+    </div>
+    <#if totp.otpCredentials?size == 0>
+      <div class="col-md-2 subtitle">
+        <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
+      </div>
+    </#if>
+  </div>
+
+  <#if totp.enabled>
+    <table class="table table-bordered table-striped">
+      <thead>
+      <#if totp.otpCredentials?size gt 1>
+        <tr>
+          <th colspan="4">${msg("configureAuthenticators")}</th>
+        </tr>
+      <#else>
+        <tr>
+          <th colspan="3">${msg("configureAuthenticators")}</th>
+        </tr>
+      </#if>
+      </thead>
+      <tbody>
+      <#list totp.otpCredentials as credential>
+        <tr>
+          <td class="provider">${msg("mobile")}</td>
+          <#if totp.otpCredentials?size gt 1>
+            <td class="provider">${credential.id}</td>
+          </#if>
+          <td class="provider">${credential.userLabel!}</td>
+          <td class="action">
+            <form action="${url.totpUrl}" method="post" class="form-inline">
+              <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
+              <input type="hidden" id="submitAction" name="submitAction" value="Delete">
+              <input type="hidden" id="credentialId" name="credentialId" value="${credential.id}">
+              <button id="remove-mobile" class="ps-button ps-button_small">
+                  ${msg("doRemove")}
+              </button>
+            </form>
+          </td>
+        </tr>
+      </#list>
+      </tbody>
+    </table>
+    <#else>
+
+  <hr/>
+
+  <ol>
+    <li>
+      <p>${msg("totpStep1")}</p>
+
+      <ul>
+        <#list totp.supportedApplications as app>
+          <li>${msg(app)}</li>
+        </#list>
+      </ul>
+    </li>
+
+    <#if mode?? && mode = "manual">
+      <li>
+        <p>${msg("totpManualStep2")}</p>
+        <pre class="ps-mono"><code>${totp.totpSecretEncoded}</code></pre>
+        <p><a href="${totp.qrUrl}" id="mode-barcode">${msg("totpScanBarcode")}</a></p>
+      </li>
+      <li>
+        <p>${msg("totpManualStep3")}</p>
+        <ul>
+          <li id="kc-totp-type">${msg("totpType")}: ${msg("totp." + totp.policy.type)}</li>
+          <li id="kc-totp-algorithm">${msg("totpAlgorithm")}: ${totp.policy.getAlgorithmKey()}</li>
+          <li id="kc-totp-digits">${msg("totpDigits")}: ${totp.policy.digits}</li>
+          <#if totp.policy.type = "totp">
+            <li id="kc-totp-period">${msg("totpInterval")}: ${totp.policy.period}</li>
+          <#elseif totp.policy.type = "hotp">
+            <li id="kc-totp-counter">${msg("totpCounter")}: ${totp.policy.initialCounter}</li>
+          </#if>
+        </ul>
+      </li>
+    <#else>
+      <li>
+        <p>${msg("totpStep2")}</p>
+        <p><img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"></p>
+        <p><a href="${totp.manualUrl}" id="mode-manual">${msg("totpUnableToScan")}</a></p>
+      </li>
+    </#if>
+    <li>
+      <p>${msg("totpStep3")}</p>
+      <p>${msg("totpStep3DeviceName")}</p>
+    </li>
+  </ol>
+
+  <hr/>
+
+  <form action="${url.totpUrl}" class="ps-container" method="post">
+    <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
+    <div class="ps-form-group">
+      <label for="totp" class="ps-form-group--label">${msg("authenticatorCode")} <span class="required">*</span></label>
+
+      <input type="text" class="ps-input" id="totp" name="totp" autocomplete="off" autofocus>
+      <input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}"/>
     </div>
 
-    <#if totp.enabled>
-        <table class="table table-bordered table-striped">
-            <thead>
-            <#if totp.otpCredentials?size gt 1>
-                <tr>
-                    <th colspan="4">${msg("configureAuthenticators")}</th>
-                </tr>
-            <#else>
-                <tr>
-                    <th colspan="3">${msg("configureAuthenticators")}</th>
-                </tr>
-            </#if>
-            </thead>
-            <tbody>
-            <#list totp.otpCredentials as credential>
-                <tr>
-                    <td class="provider">${msg("mobile")}</td>
-                    <#if totp.otpCredentials?size gt 1>
-                        <td class="provider">${credential.id}</td>
-                    </#if>
-                    <td class="provider">${credential.userLabel!}</td>
-                    <td class="action">
-                        <form action="${url.totpUrl}" method="post" class="form-inline">
-                            <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
-                            <input type="hidden" id="submitAction" name="submitAction" value="Delete">
-                            <input type="hidden" id="credentialId" name="credentialId" value="${credential.id}">
-                            <button id="remove-mobile" class="btn btn-default">
-                                <i class="pficon pficon-delete"></i>
-                            </button>
-                        </form>
-                    </td>
-                </tr>
-            </#list>
-            </tbody>
-        </table>
-        <#else>
+    <div class="ps-form-group" ${messagesPerField.printIfExists('userLabel',properties.kcFormGroupErrorClass!)}">
+      <label for="userLabel" class="ps-form-group--label">${msg("totpDeviceName")} <#if totp.otpCredentials?size gte 1><span class="required">*</span></#if></label>
 
-    <hr/>
+      <input type="text" class="ps-input" id="userLabel" name="userLabel" autocomplete="off">
+    </div>
 
-    <ol>
-        <li>
-            <p>${msg("totpStep1")}</p>
-
-            <ul>
-                <#list totp.supportedApplications as app>
-                    <li>${msg(app)}</li>
-                </#list>
-            </ul>
-        </li>
-
-        <#if mode?? && mode = "manual">
-            <li>
-                <p>${msg("totpManualStep2")}</p>
-                <pre class="ps-mono"><code>${totp.totpSecretEncoded}</code></pre>
-                <p><a href="${totp.qrUrl}" id="mode-barcode">${msg("totpScanBarcode")}</a></p>
-            </li>
-            <li>
-                <p>${msg("totpManualStep3")}</p>
-                <ul>
-                    <li id="kc-totp-type">${msg("totpType")}: ${msg("totp." + totp.policy.type)}</li>
-                    <li id="kc-totp-algorithm">${msg("totpAlgorithm")}: ${totp.policy.getAlgorithmKey()}</li>
-                    <li id="kc-totp-digits">${msg("totpDigits")}: ${totp.policy.digits}</li>
-                    <#if totp.policy.type = "totp">
-                        <li id="kc-totp-period">${msg("totpInterval")}: ${totp.policy.period}</li>
-                    <#elseif totp.policy.type = "hotp">
-                        <li id="kc-totp-counter">${msg("totpCounter")}: ${totp.policy.initialCounter}</li>
-                    </#if>
-                </ul>
-            </li>
-        <#else>
-            <li>
-                <p>${msg("totpStep2")}</p>
-                <p><img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"></p>
-                <p><a href="${totp.manualUrl}" id="mode-manual">${msg("totpUnableToScan")}</a></p>
-            </li>
-        </#if>
-        <li>
-            <p>${msg("totpStep3")}</p>
-            <p>${msg("totpStep3DeviceName")}</p>
-        </li>
-    </ol>
-
-    <hr/>
-
-    <form action="${url.totpUrl}" class="ps-container" method="post">
-        <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
-        <div class="ps-form-group">
-            <label for="totp" class="ps-form-group--label">${msg("authenticatorCode")} <span class="required">*</span></label>
-
-            <input type="text" class="ps-input" id="totp" name="totp" autocomplete="off" autofocus>
-            <input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}"/>
+    <div class="ps-form-group">
+      <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
+        <div class="">
+          <button type="submit"
+              class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
+              id="saveTOTPBtn" name="submitAction" value="Save">${msg("doSave")}
+          </button>
+          <button type="submit"
+              class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}"
+              id="cancelTOTPBtn" name="submitAction" value="Cancel">${msg("doCancel")}
+          </button>
         </div>
-
-        <div class="ps-form-group" ${messagesPerField.printIfExists('userLabel',properties.kcFormGroupErrorClass!)}">
-            <label for="userLabel" class="ps-form-group--label">${msg("totpDeviceName")} <#if totp.otpCredentials?size gte 1><span class="required">*</span></#if></label>
-
-            <input type="text" class="ps-input" id="userLabel" name="userLabel" autocomplete="off">
-        </div>
-
-        <div class="ps-form-group">
-            <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
-                <div class="">
-                    <button type="submit"
-                            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
-                            id="saveTOTPBtn" name="submitAction" value="Save">${msg("doSave")}
-                    </button>
-                    <button type="submit"
-                            class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}"
-                            id="cancelTOTPBtn" name="submitAction" value="Cancel">${msg("doCancel")}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </form>
-    </#if>
+      </div>
+    </div>
+  </form>
+  </#if>
 
 </@layout.mainLayout>
diff --git a/common/resources/scss/button.scss b/common/resources/scss/button.scss
index 23ca2a6..96ea290 100644
--- a/common/resources/scss/button.scss
+++ b/common/resources/scss/button.scss
@@ -1,9 +1,9 @@
 .ps-button {
-  padding: 0.5rem 1rem;
   font-size: 1rem;
-  line-height: 1.2rem;
-  border: 2px solid var(--foreground);
-  border-radius: 1.5rem;
+  padding: 0.5em 1em;
+  line-height: 1.2em;
+  border: 0.125em solid var(--foreground);
+  border-radius: 1.5em;
   background-color: var(--background-darker-2); 
   cursor: pointer;
 
@@ -13,7 +13,7 @@
   }
 
   &_primary {
-    border: 4px solid var(--foreground);
+    border: 0.25em solid var(--foreground);
     background-color: var(--background);
     color: var(--foreground);
     font-weight: bold;
@@ -24,4 +24,9 @@
       color: var(--background);
     }
   }
+
+  &_small {
+    font-size: 0.8rem;
+    padding: 0.25em 0.7em;
+  }
 }
diff --git a/login/template.ftl b/login/template.ftl
index 1c58aa2..f8dd10b 100644
--- a/login/template.ftl
+++ b/login/template.ftl
@@ -13,7 +13,7 @@
 
   <link rel="icon" href="${url.resourcesPath}/img/pub.solar.svg" />
 
-  <link href="${url.resourcesPath}/css/index.css?v3" rel="stylesheet" />
+  <link href="${url.resourcesPath}/css/index.css?v4" rel="stylesheet" />
 
   <script defer src="${url.resourcesPath}/js/background.js" type="text/javascript"></script>
   <script defer src="${url.resourcesPath}/js/i18n.js" type="text/javascript"></script>