From 74b407ebc7650dd4df491073099d6cccff59a464 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 25 Feb 2021 21:22:57 +0100
Subject: [PATCH] web: add button to copy TOTP URL

closes #591
---
 .../authenticator_totp/AuthenticatorTOTPStage.ts   | 14 ++++++++++++++
 web/src/elements/stages/form.ts                    | 13 +++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/web/src/elements/stages/authenticator_totp/AuthenticatorTOTPStage.ts b/web/src/elements/stages/authenticator_totp/AuthenticatorTOTPStage.ts
index ab91ea7c0..e6be98239 100644
--- a/web/src/elements/stages/authenticator_totp/AuthenticatorTOTPStage.ts
+++ b/web/src/elements/stages/authenticator_totp/AuthenticatorTOTPStage.ts
@@ -5,6 +5,7 @@ import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
 import "webcomponent-qr-code";
 import "../form";
+import { showMessage } from "../../messages/MessageContainer";
 
 export interface AuthenticatorTOTPChallenge extends WithUserInfoChallenge {
     config_url: string;
@@ -45,6 +46,19 @@ export class AuthenticatorTOTPStage extends BaseStage {
                     <ak-form-element>
                         <!-- @ts-ignore -->
                         <qr-code data="${this.challenge.config_url}"></qr-code>
+                        <button class="pf-c-button pf-m-secondary pf-m-progress pf-m-in-progress" @click=${(e: Event) => {
+                            e.preventDefault();
+                            if (!this.challenge?.config_url) return;
+                            navigator.clipboard.writeText(this.challenge?.config_url).then(() => {
+                                showMessage({
+                                    level_tag: "success",
+                                    message: gettext("Successfully copied TOTP Config.")
+                                });
+                            });
+                        }}>
+                            <span class="pf-c-button__progress"><i class="fas fa-copy"></i></span>
+                            ${gettext("Copy")}
+                        </button>
                     </ak-form-element>
                     <ak-form-element
                         label="${gettext("Code")}"
diff --git a/web/src/elements/stages/form.ts b/web/src/elements/stages/form.ts
index a49b1f883..db6aba755 100644
--- a/web/src/elements/stages/form.ts
+++ b/web/src/elements/stages/form.ts
@@ -1,4 +1,4 @@
-import { customElement, LitElement, CSSResult, property } from "lit-element";
+import { customElement, LitElement, CSSResult, property, css } from "lit-element";
 import { TemplateResult, html } from "lit-html";
 import { Error } from "../../api/Flows";
 import { COMMON_STYLES } from "../../common/styles";
@@ -7,7 +7,16 @@ import { COMMON_STYLES } from "../../common/styles";
 export class FormElement extends LitElement {
 
     static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return COMMON_STYLES.concat(
+            css`
+                slot {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: space-around;
+                }
+            `
+        );
     }
 
     @property()