Improve 2fa and captcha login sections

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
phpmyadmin · Apr 23, 2021 · 2c22ff1 · 2c22ff1
1 parent e0c1dea
commit 2c22ff1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/templates/login/form.twig b/templates/login/form.twig
@@ -109,8 +109,14 @@
       {% if has_captcha %}
         <script src="{{ captcha_api }}?hl={{ lang }}" async defer></script>
         {% if use_captcha_checkbox %}
-          <div class="{{ captcha_req }}" data-sitekey="{{ captcha_key }}"></div>
-          <input class="btn btn-primary" value="{% trans 'Log in' %}" type="submit" id="input_go">
+          <div class="row g-3">
+            <div class="col">
+              <div class="{{ captcha_req }}" data-sitekey="{{ captcha_key }}"></div>
+            </div>
+            <div class="col align-self-center text-end">
+              <input class="btn btn-primary" value="{% trans 'Log in' %}" type="submit" id="input_go">
+            </div>
+          </div>
         {% else %}
           <input class="btn btn-primary {{ captcha_req }}" data-sitekey="{{ captcha_key }}" data-callback="Functions_recaptchaCallback" value="{% trans 'Log in' %}" type="submit" id="input_go">
         {% endif %}

diff --git a/templates/login/twofactor.twig b/templates/login/twofactor.twig
@@ -1,7 +1,14 @@
 <form method="post" class="disableAjax">
-    {{ get_hidden_inputs() }}
-    {{ form|raw }}
-    {% if show_submit %}
+  {{ get_hidden_inputs() }}
+
+  <div class="card">
+    <div class="card-body">
+      {{ form|raw }}
+    </div>
+    <div class="card-footer">
+      {% if show_submit %}
         <input class="btn btn-primary" type="submit" value="{% trans "Verify" %}">
-    {% endif %}
+      {% endif %}
+    </div>
+  </div>
 </form>
diff --git a/templates/login/twofactor/application.twig b/templates/login/twofactor/application.twig
@@ -1,4 +1,5 @@
-<p>
-<label>{% trans "Authentication code:" %} <input type="text" name="2fa_code" autocomplete="off" autofocus></label>
-</p>
-<p>{% trans "Open the two-factor authentication app on your device to view your authentication code and verify your identity." %}</p>
+<div class="mb-3">
+  <label class="form-label" for="2faCodeInput">{% trans "Authentication code:" %}</label>
+  <input class="form-control" id="2faCodeInput" type="text" name="2fa_code" autocomplete="off" autofocus>
+</div>
+{% trans 'Open the two-factor authentication app on your device to view your authentication code and verify your identity.' %}