From 286b6916af66bcc659d70a71c4453da95d1e67f7 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 3 May 2021 09:22:33 +0200
Subject: [PATCH] UX: refactor security modals (#12870)

- better form
- uses d-footer
- ensure buttons have the same height

Note that to achieve same height for btn without text, I made the choice to go for a minimum height which should work in most cases.
---
 .../modal/second-factor-edit-security-key.hbs | 19 +++++++++++--------
 .../templates/modal/second-factor-edit.hbs    | 19 +++++++++++--------
 .../common/components/buttons.scss            |  1 +
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
index d0d1207d751..e93efb1105d 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
@@ -1,10 +1,13 @@
 {{#d-modal-body}}
-  <div class="form-horizontal">
-    {{input type="text" value=model.name}}
-  </div>
-  <div class="second-factor instructions">
-    {{i18n "user.second_factor.security_key.edit_description"}}
-  </div>
+  <form class="form-horizontal">
+    <div class="input-group">
+      <label for="security-key-name">{{i18n "user.second_factor.security_key.edit_description"}}</label>
+      {{input name="security-key-name" type="text" value=model.name}}
+    </div>
+  </form>
+{{/d-modal-body}}
+
+<div class="modal-footer">
   {{d-button
     action=(action "editSecurityKey")
     class="btn-primary"
@@ -12,9 +15,9 @@
   }}
   {{d-button
     action=(action "disableSecurityKey")
-    class="btn-danger"
+    class="btn-danger no-text"
     icon="trash-alt"
     aria-label="user.second_factor.disable"
     title="user.second_factor.disable"
   }}
-{{/d-modal-body}}
+</div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
index a7a4f60a294..a5fa63f5863 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
@@ -1,10 +1,13 @@
 {{#d-modal-body}}
-  <div class="form-horizontal">
-    {{input type="text" value=model.name}}
-  </div>
-  <div class="second-factor instructions">
-    {{i18n "user.second_factor.edit_description"}}
-  </div>
+  <form class="form-horizontal">
+    <div class="input-group">
+      <label for="authenticator-name">{{i18n "user.second_factor.edit_description"}}</label>
+      {{input name="authenticator-name" type="text" value=model.name}}
+    </div>
+  </form>
+{{/d-modal-body}}
+
+<div class="modal-footer">
   {{d-button
     action=(action "editSecondFactor")
     class="btn-primary"
@@ -12,9 +15,9 @@
   }}
   {{d-button
     action=(action "disableSecondFactor")
-    class="btn-danger"
+    class="btn-danger no-text"
     icon="trash-alt"
     aria-label="user.second_factor.disable"
     title="user.second_factor.disable"
   }}
-{{/d-modal-body}}
+</div>
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 65293c45893..0c6fd078938 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -35,6 +35,7 @@
   &.no-text {
     .d-icon {
       margin-right: 0;
+      min-height: 17px;
     }
   }
   @include hover {