habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/flows: improve display of static tokens

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
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">