diff --git a/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts b/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts index b99e72fb2..c6e4a2fb7 100644 --- a/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts +++ b/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts @@ -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< - - - { - e.preventDefault(); - if (!this.challenge?.configUrl) return; - navigator.clipboard - .writeText(this.challenge?.configUrl) - .then(() => { - showMessage({ - level: MessageLevel.success, - message: t`Successfully copied TOTP Config.`, + + + + { + e.preventDefault(); + if (!this.challenge?.configUrl) return; + navigator.clipboard + .writeText(this.challenge?.configUrl) + .then(() => { + showMessage({ + level: MessageLevel.success, + message: t`Successfully copied TOTP Config.`, + }); }); - }); - }} - > - - ${t`Copy`} - + }} + > + + ${t`Copy`} + +