static: add TokenCopyButton for token lists, improve colours on buttons

passbook/outposts/templates/outposts/deployment_modal.html

@@ -21,8 +21,11 @@
                     <label class="pf-c-form__label" for="help-text-simple-form-name">
                         <span class="pf-c-form__label-text">PASSBOOK_TOKEN</span>
                     </label>
-                    {# TODO: Only load key on modal open #}
+                    <div>
-                    <input class="pf-c-form-control" data-pb-fetch-key="key" data-pb-fetch-fill="{% url 'passbook_api:token-view-key' identifier=outpost.token_identifier %}" readonly type="text" value="" />
+                        <pb-token-copy-button identifier="{{ outpost.token_identifier }}">
+                            {% trans 'Click to copy token' %}
+                        </pb-token-copy-button>
+                    </div>
                 </div>
                 <h3>{% trans 'If your passbook Instance is using a self-signed certificate, set this value.' %}</h3>
                 <div class="pf-c-form__group">

passbook/static/static/passbook/passbook.css

@@ -61,16 +61,6 @@ html {
     max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
 }
 
-.pf-m-success {
-    color: var(--pf-global--success-color--100);
-}
-.pf-m-warning {
-    color: var(--pf-global--warning-color--100);
-}
-.pf-m-danger {
-    color: var(--pf-global--danger-color--100);
-}
-
 /* fix multiple selects height */
 select[multiple] {
     height: initial;

passbook/static/static/src/api/token.ts

@@ -0,0 +1,5 @@
+export function tokenByIdentifier(identifier: string): Promise<string> {
+    return fetch(`/api/v2beta/core/tokens/${identifier}/view_key/`)
+        .then((r) => r.json())
+        .then((r) => r["key"]);
+}

passbook/static/static/src/constants.ts

@@ -0,0 +1,29 @@
+import { css } from "lit-element";
+
+export const PRIMARY_CLASS = "pf-m-primary";
+export const SUCCESS_CLASS = "pf-m-success";
+export const ERROR_CLASS = "pf-m-danger";
+export const PROGRESS_CLASS = "pf-m-in-progress";
+export const ColorStyles = css`
+    .pf-m-success {
+        color: var(--pf-global--success-color--100);
+    }
+    .pf-c-button.pf-m-success {
+        color: var(--pf-c-button--m-primary--Color);
+        background-color: var(--pf-global--success-color--100);
+    }
+    .pf-m-warning {
+        color: var(--pf-global--warning-color--100);
+    }
+    .pf-c-button.pf-m-warning {
+        color: var(--pf-c-button--m-primary--Color);
+        background-color: var(--pf-global--warning-color--100);
+    }
+    .pf-m-danger {
+        color: var(--pf-global--danger-color--100);
+    }
+    .pf-c-button.pf-m-danger {
+        color: var(--pf-c-button--m-primary--Color);
+        background-color: var(--pf-global--danger-color--100);
+    }
+`;

passbook/static/static/src/elements/ActionButton.ts

@@ -1,17 +1,19 @@
 import { getCookie } from "../utils";
 import { updateMessages } from "./Messages";
-import { customElement, html, LitElement, property } from "lit-element";
+import { css, customElement, html, LitElement, property } from "lit-element";
 // @ts-ignore
 import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
 // @ts-ignore
 import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
 // @ts-ignore
 import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
-
+import {
-const PRIMARY_CLASS = "pf-m-primary";
+    ColorStyles,
-const SUCCESS_CLASS = "pf-m-success";
+    ERROR_CLASS,
-const ERROR_CLASS = "pf-m-danger";
+    PRIMARY_CLASS,
-const PROGRESS_CLASS = "pf-m-in-progress";
+    PROGRESS_CLASS,
+    SUCCESS_CLASS,
+} from "../constants";
 
 @customElement("pb-action-button")
 export class ActionButton extends LitElement {
@@ -22,7 +24,7 @@ export class ActionButton extends LitElement {
     isRunning = false;
 
     static get styles() {
-        return [GlobalsStyle, ButtonStyle, SpinnerStyle];
+        return [GlobalsStyle, ButtonStyle, SpinnerStyle, ColorStyles];
     }
 
     setLoading() {

passbook/static/static/src/elements/ModalButton.ts

@@ -83,19 +83,18 @@ export class ModalButton extends LitElement {
                 form.addEventListener("submit", (e) => {
                     e.preventDefault();
                     let formData = new FormData(form);
-                    fetch(
+                    fetch(this.href ? this.href : form.action, {
-                        this.href ? this.href : form.action,
+                        method: form.method,
-                        {
+                        body: formData,
-                            method: form.method,
+                    })
-                            body: formData,
-                        }
-                    )
                         .then((response) => {
                             return response.text();
                         })
                         .then((data) => {
                             if (data.indexOf("csrfmiddlewaretoken") !== -1) {
-                                this.querySelector("[slot=modal]")!.innerHTML = data;
+                                this.querySelector(
+                                    "[slot=modal]"
+                                )!.innerHTML = data;
                                 this.updateHandlers();
                             } else {
                                 this.open = false;

passbook/static/static/src/elements/TokenCopyButton.ts

@@ -0,0 +1,61 @@
+import { css, customElement, html, LitElement, property } from "lit-element";
+// @ts-ignore
+import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
+// @ts-ignore
+import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
+import { tokenByIdentifier } from "../api/token";
+import {
+    ColorStyles,
+    ERROR_CLASS,
+    PRIMARY_CLASS,
+    SUCCESS_CLASS,
+} from "../constants";
+
+@customElement("pb-token-copy-button")
+export class TokenCopyButton extends LitElement {
+    @property()
+    identifier?: string;
+
+    @property()
+    buttonClass: string = PRIMARY_CLASS;
+
+    static get styles() {
+        return [
+            GlobalsStyle,
+            ButtonStyle,
+            ColorStyles,
+            css`
+                button {
+                    transition: background-color 0.3s ease 0s;
+                }
+            `,
+        ];
+    }
+
+    onClick() {
+        if (!this.identifier) {
+            this.buttonClass = ERROR_CLASS;
+            setTimeout(() => {
+                this.buttonClass = PRIMARY_CLASS;
+            }, 1500);
+            return;
+        }
+        tokenByIdentifier(this.identifier).then((token) => {
+            navigator.clipboard.writeText(token).then(() => {
+                this.buttonClass = SUCCESS_CLASS;
+                setTimeout(() => {
+                    this.buttonClass = PRIMARY_CLASS;
+                }, 1500);
+            });
+        });
+    }
+
+    render() {
+        return html`<button
+            @click=${() => this.onClick()}
+            class="pf-c-button ${this.buttonClass}"
+        >
+            <slot></slot>
+        </button>`;
+    }
+}

passbook/static/static/src/main.ts

@@ -9,6 +9,7 @@ import "./elements/Dropdown";
 import "./elements/FetchFillSlot";
 import "./elements/Messages";
 import "./elements/ModalButton";
+import "./elements/TokenCopyButton";
 import "./elements/Tabs";
 import "./pages/SiteShell";
 import "./pages/FlowShellCard";

passbook/static/static/src/pages/RouterOutlet.ts

@@ -15,6 +15,7 @@ import PBGlobal from "../../passbook/passbook.css";
 import CodeMirrorStyle from "codemirror/lib/codemirror.css";
 // @ts-ignore
 import CodeMirrorTheme from "codemirror/theme/monokai.css";
+import { ColorStyles } from "../constants";
 
 export interface Route {
     url: RegExp;
@@ -43,7 +44,14 @@ export class RouterOutlet extends LitElement {
     defaultUrl?: string;
 
     static get styles() {
-        return [PF, PFAddons, PBGlobal, CodeMirrorStyle, CodeMirrorTheme];
+        return [
+            PF,
+            PFAddons,
+            PBGlobal,
+            CodeMirrorStyle,
+            CodeMirrorTheme,
+            ColorStyles,
+        ];
     }
 
     constructor() {