web/flows: improve display of static tokens

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-11-04 15:21:04 +01:00
parent 3712d5aee2
commit 337677ad12
4 changed files with 30 additions and 25 deletions

View file

@ -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">

View file

@ -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"

View file

@ -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"

View file

@ -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 ""