web/elements: use ActionButton as base for TokeCopyButton

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-11 00:52:51 +02:00
parent d76db3caba
commit 335c5a0b80

View file

@ -1,59 +1,39 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { customElement, property } from "lit-element";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { CoreApi } from "authentik-api"; import { CoreApi } from "authentik-api";
import { ERROR_CLASS, PRIMARY_CLASS, SUCCESS_CLASS } from "../../constants"; import { PRIMARY_CLASS, SUCCESS_CLASS } from "../../constants";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import AKGlobal from "../../authentik.css"; import { ActionButton } from "./ActionButton";
@customElement("ak-token-copy-button") @customElement("ak-token-copy-button")
export class TokenCopyButton extends LitElement { export class TokenCopyButton extends ActionButton {
@property() @property()
identifier?: string; identifier?: string;
@property() @property()
buttonClass: string = PRIMARY_CLASS; buttonClass: string = PRIMARY_CLASS;
static get styles(): CSSResult[] { apiRequest: () => Promise<unknown> = () => {
return [ this.setLoading();
PFBase,
PFButton,
AKGlobal,
css`
button {
transition: background-color 0.3s ease 0s;
}
`,
];
}
onClick(): void {
if (!this.identifier) { if (!this.identifier) {
this.buttonClass = ERROR_CLASS; return Promise.reject();
setTimeout(() => {
this.buttonClass = PRIMARY_CLASS;
}, 1500);
return;
} }
new CoreApi(DEFAULT_CONFIG).coreTokensViewKey({ return new CoreApi(DEFAULT_CONFIG).coreTokensViewKey({
identifier: this.identifier identifier: this.identifier
}).then((token) => { }).then((token) => {
if (!token.key) { if (!token.key) {
this.buttonClass = ERROR_CLASS; return Promise.reject();
return;
} }
navigator.clipboard.writeText(token.key).then(() => { return navigator.clipboard.writeText(token.key).then(() => {
this.buttonClass = SUCCESS_CLASS; this.buttonClass = SUCCESS_CLASS;
setTimeout(() => { setTimeout(() => {
this.buttonClass = PRIMARY_CLASS; this.buttonClass = PRIMARY_CLASS;
}, 1500); }, 1500);
}); });
}).catch((err: Response) => {
return err.json();
}).then(errResp => {
throw new Error(errResp["detail"]);
}); });
} }
render(): TemplateResult {
return html`<button @click=${() => this.onClick()} class="pf-c-button ${this.buttonClass}">
<slot></slot>
</button>`;
}
} }