Layout tweaks

languages/en.yaml

@@ -687,5 +687,5 @@ PLUGIN_ADMIN:
   2FA_ENABLED: "2FA Enabled"
   2FA_CODE_INPUT: "2FA Code (if enabled)"
   2FA_SECRET: "2FA Secret"
-  2FA_SECRET_HELP: "Scan this code into your Authenticator App or enter the code manually.  Check the Grav docs for  more information"
+  2FA_SECRET_HELP: "Scan this QR code into your [Authenticator App](https://learn.getgrav.org/admin-panel/2fa#apps). Also it's a good idea to backup the secret in a safe location, in case you need to reinstall your app.  Check the [Grav docs](https://learn.getgrav.org/admin-panel/2fa) for more information "
   2FA_REGENERATE: "Regenerate"

themes/grav/scss/preset.scss

@@ -169,6 +169,11 @@ hr {
     color: $white;
 }
 
+.badge {
+    background: $update-bg;
+    color: $update-text;
+}
+
 .light-border {
     border-color: $underline !important;
 }

themes/grav/scss/template/_admin.scss

@@ -206,6 +206,7 @@ $sidebar-padding: 2rem;
         opacity: 1;
         width: $sidebar-width-large;
     }
+
 }
 
 #admin-logo {
@@ -373,8 +374,12 @@ $sidebar-padding: 2rem;
             line-height: 1.3;
         }
 
-        h5 {
+        .badge {
+            font-size: 0.8rem;
+        }
 
+        h5 {
+            opacity: 0.8;
             font-size: 0.9rem;
         }
     }

themes/grav/scss/template/_forms.scss

@@ -145,6 +145,15 @@ form {
         }
     }
 
+    .form-sublabel {
+        p {
+            opacity: 0.8;
+            font-size: 0.9rem;
+            margin: 10px 20px 0 0;
+            padding: 0;
+        }
+    }
+
     input, select, textarea, button, .selectize-input {
         font-size: $core-font-size;
         line-height: $core-line-height;

themes/grav/scss/template/_login.scss

@@ -132,6 +132,15 @@
     }
 }
 
+.twofa-secret-code {
+      font-weight: bold;
+}
+
+button[data-2fa-regenerate] {
+    margin-top: 5px;
+}
+
+
 .twofa-secret {
     position: absolute;
     opacity: 0;

themes/grav/templates/forms/field.html.twig

@@ -34,6 +34,11 @@
                     {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
                 {% endblock %}
                 </label>
+                {% if field.sublabel %}
+                <div class="form-sublabel">
+                    {{ field.sublabel|tu|markdown|raw }}
+                </div>
+                {% endif %}
             </div>
             <div class="form-data{% if not vertical %} block size-2-3{% endif %}"
                 {% block global_attributes %}

themes/grav/templates/forms/fields/2fa_secret/2fa_secret.html.twig

@@ -1,12 +1,14 @@
 {% extends "forms/field.html.twig" %}
 
 {% block input %}
-    <div class="form-input-wrapper 2fa-wrapper">
+    <div class="form-input-wrapper twofa-wrapper">
         {% set two_fa = admin.get2FA() %}
         {% set value = (value is null ? two_fa.createSecret(160) : value) %}
 
         <img style="border: 1px solid #ddd" data-2fa-image src="{{ two_fa.getQRCodeImageAsDataUri(grav.user.email, value) }}" />
-        <div class="2fa-secret" data-2fa-secret>{{ value|chunkSplit(4, ' ') }}</div>
+        <div>
+            <span>{{ 'PLUGIN_ADMIN.2FA_SECRET'|tu }}: </span><span class="twofa-secret-code" data-2fa-secret>{{ value|chunkSplit(4, ' ') }}</span>
+        </div>
         <button class="button button-small" data-2fa-regenerate><i class="fa fa-fw fa-refresh"></i> {{ 'PLUGIN_ADMIN.2FA_REGENERATE'|t }}</button>
 
         <input type="text" style="display:none;" name="{{ (scope ~ field.name)|fieldName }}" data-2fa-value value="{{ value|join(', ') }}" />

themes/grav/templates/partials/nav-user-details.html.twig

@@ -6,7 +6,7 @@
         {% include 'partials/nav-user-avatar.html.twig' %}
 
         <div class="admin-user-names">
-            <h4>{{ admin.user.fullname|e }}</h4>
+            <h4>{{ admin.user.fullname|e }} {% if admin.user.twofa_enabled %}<span class="badge">2FA</span>{% endif %}</h4>
             <h5>{{ admin.user.title|e }}</h5>
         </div>
     </a>