From e49050af19e3d731f9e31b968b4f1c7acd1a257f Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 28 Jul 2022 21:16:39 +0200
Subject: [PATCH] web/flows: improve layout for TOTP QR stage

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../AuthenticatorTOTPStage.ts                 | 63 ++++++++++++-------
 1 file changed, 41 insertions(+), 22 deletions(-)

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<
                     </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`}"