web/flows: improve layout for TOTP QR stage
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
0248755cda
commit
e49050af19
|
@ -8,7 +8,7 @@ import "webcomponent-qr-code";
|
|||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
|
@ -31,7 +31,22 @@ export class AuthenticatorTOTPStage extends BaseStage<
|
|||
AuthenticatorTOTPChallengeResponseRequest
|
||||
> {
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
|
||||
return [
|
||||
PFBase,
|
||||
PFLogin,
|
||||
PFForm,
|
||||
PFFormControl,
|
||||
PFTitle,
|
||||
PFButton,
|
||||
AKGlobal,
|
||||
css`
|
||||
.qr-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
|
@ -61,27 +76,31 @@ export class AuthenticatorTOTPStage extends BaseStage<
|
|||
</ak-form-static>
|
||||
<input type="hidden" name="otp_uri" value=${this.challenge.configUrl} />
|
||||
<ak-form-element>
|
||||
<!-- @ts-ignore -->
|
||||
<qr-code data="${this.challenge.configUrl}"></qr-code>
|
||||
<button
|
||||
type="button"
|
||||
class="pf-c-button pf-m-secondary pf-m-progress pf-m-in-progress"
|
||||
@click=${(e: Event) => {
|
||||
e.preventDefault();
|
||||
if (!this.challenge?.configUrl) return;
|
||||
navigator.clipboard
|
||||
.writeText(this.challenge?.configUrl)
|
||||
.then(() => {
|
||||
showMessage({
|
||||
level: MessageLevel.success,
|
||||
message: t`Successfully copied TOTP Config.`,
|
||||
<div class="qr-container">
|
||||
<!-- @ts-ignore -->
|
||||
<qr-code data="${this.challenge.configUrl}"></qr-code>
|
||||
<button
|
||||
type="button"
|
||||
class="pf-c-button pf-m-secondary pf-m-progress pf-m-in-progress"
|
||||
@click=${(e: Event) => {
|
||||
e.preventDefault();
|
||||
if (!this.challenge?.configUrl) return;
|
||||
navigator.clipboard
|
||||
.writeText(this.challenge?.configUrl)
|
||||
.then(() => {
|
||||
showMessage({
|
||||
level: MessageLevel.success,
|
||||
message: t`Successfully copied TOTP Config.`,
|
||||
});
|
||||
});
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span class="pf-c-button__progress"><i class="fas fa-copy"></i></span>
|
||||
${t`Copy`}
|
||||
</button>
|
||||
}}
|
||||
>
|
||||
<span class="pf-c-button__progress"
|
||||
><i class="fas fa-copy"></i
|
||||
></span>
|
||||
${t`Copy`}
|
||||
</button>
|
||||
</div>
|
||||
</ak-form-element>
|
||||
<ak-form-element
|
||||
label="${t`Code`}"
|
||||
|
|
Reference in New Issue