From 337677ad12fdd31a112fde2016407955a9148e43 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 4 Nov 2021 15:21:04 +0100
Subject: [PATCH] web/flows: improve display of static tokens

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../AuthenticatorStaticStage.ts               | 40 +++++++++----------
 web/src/locales/en.po                         |  5 ++-
 web/src/locales/fr_FR.po                      |  5 ++-
 web/src/locales/pseudo-LOCALE.po              |  5 ++-
 4 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts b/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
index adbb44bc8..22d16c781 100644
--- a/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
+++ b/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
@@ -22,21 +22,6 @@ import "../../../elements/forms/FormElement";
 import "../../FormStatic";
 import { BaseStage } from "../base";
 
-export const STATIC_TOKEN_STYLE = css`
-    /* Static OTP Tokens */
-    .ak-otp-tokens {
-        list-style: circle;
-        columns: 2;
-        -webkit-columns: 2;
-        -moz-columns: 2;
-        margin-left: var(--pf-global--spacer--xs);
-    }
-    .ak-otp-tokens li {
-        font-size: var(--pf-global--FontSize--2xl);
-        font-family: monospace;
-    }
-`;
-
 @customElement("ak-stage-authenticator-static")
 export class AuthenticatorStaticStage extends BaseStage<
     AuthenticatorStaticChallenge,
@@ -51,7 +36,21 @@ export class AuthenticatorStaticStage extends BaseStage<
             PFTitle,
             PFButton,
             AKGlobal,
-            STATIC_TOKEN_STYLE,
+            css`
+                /* Static OTP Tokens */
+                ul {
+                    list-style: circle;
+                    columns: 2;
+                    -webkit-columns: 2;
+                    -moz-columns: 2;
+                    margin-left: var(--pf-global--spacer--xs);
+                }
+                ul li {
+                    font-size: var(--pf-global--FontSize--2xl);
+                    font-family: monospace;
+                    margin: 0 2rem;
+                }
+            `,
         ];
     }
 
@@ -80,17 +79,14 @@ export class AuthenticatorStaticStage extends BaseStage<
                             >
                         </div>
                     </ak-form-static>
-                    <ak-form-element
-                        label="${t`Tokens`}"
-                        ?required="${true}"
-                        class="pf-c-form__group"
-                    >
-                        <ul class="ak-otp-tokens">
+                    <ak-form-element label="" class="pf-c-form__group">
+                        <ul>
                             ${this.challenge.codes.map((token) => {
                                 return html`<li>${token}</li>`;
                             })}
                         </ul>
                     </ak-form-element>
+                    <p>${t`Make sure to keep these tokens in a safe place.`}</p>
 
                     <div class="pf-c-form__group pf-m-action">
                         <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
diff --git a/web/src/locales/en.po b/web/src/locales/en.po
index 2c491cd7b..023bf4be8 100644
--- a/web/src/locales/en.po
+++ b/web/src/locales/en.po
@@ -2646,6 +2646,10 @@ msgstr "Long-running operations which authentik executes in the background."
 msgid "MFA Devices"
 msgstr "MFA Devices"
 
+#: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
+msgid "Make sure to keep these tokens in a safe place."
+msgstr "Make sure to keep these tokens in a safe place."
+
 #: src/pages/stages/user_write/UserWriteStageForm.ts
 msgid "Mark newly created users as inactive."
 msgstr "Mark newly created users as inactive."
@@ -4879,7 +4883,6 @@ msgstr "Token validity"
 msgid "Token(s)"
 msgstr "Token(s)"
 
-#: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
 #: src/pages/tokens/TokenListPage.ts
 msgid "Tokens"
 msgstr "Tokens"
diff --git a/web/src/locales/fr_FR.po b/web/src/locales/fr_FR.po
index f0e769787..15fa00a43 100644
--- a/web/src/locales/fr_FR.po
+++ b/web/src/locales/fr_FR.po
@@ -2627,6 +2627,10 @@ msgstr "Opérations de longue durée qu'Authentik exécute en arrière-plan."
 msgid "MFA Devices"
 msgstr ""
 
+#: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
+msgid "Make sure to keep these tokens in a safe place."
+msgstr ""
+
 #: src/pages/stages/user_write/UserWriteStageForm.ts
 msgid "Mark newly created users as inactive."
 msgstr "Marquer les utilisateurs nouvellements créés comme inactifs."
@@ -4821,7 +4825,6 @@ msgstr "Validité du jeton"
 msgid "Token(s)"
 msgstr "Jeton(s)"
 
-#: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
 #: src/pages/tokens/TokenListPage.ts
 msgid "Tokens"
 msgstr "Jetons"
diff --git a/web/src/locales/pseudo-LOCALE.po b/web/src/locales/pseudo-LOCALE.po
index e0d87b7cb..34c4cfc13 100644
--- a/web/src/locales/pseudo-LOCALE.po
+++ b/web/src/locales/pseudo-LOCALE.po
@@ -2638,6 +2638,10 @@ msgstr ""
 msgid "MFA Devices"
 msgstr ""
 
+#: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
+msgid "Make sure to keep these tokens in a safe place."
+msgstr ""
+
 #: src/pages/stages/user_write/UserWriteStageForm.ts
 msgid "Mark newly created users as inactive."
 msgstr ""
@@ -4864,7 +4868,6 @@ msgstr ""
 msgid "Token(s)"
 msgstr ""
 
-#: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
 #: src/pages/tokens/TokenListPage.ts
 msgid "Tokens"
 msgstr ""