trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Jens Langhammer 2020-11-22 22:05:11 +01:00
parent 1b6bd5b997
commit e0dbeca657
11 changed files with 131 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
passbook/outposts/templates/outposts/deployment_modal.html
View file

@ -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 #}
<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="" />
<div>
<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">

8
passbook/static/static/dist/main.js vendored
View file

File diff suppressed because one or more lines are too long

2
passbook/static/static/dist/main.js.map vendored
View file

File diff suppressed because one or more lines are too long

10
passbook/static/static/passbook/passbook.css
View file

@ -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;

5
passbook/static/static/src/api/token.ts Normal file
View file

@ -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"]);
}

29
passbook/static/static/src/constants.ts Normal file
View file

@ -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);
}
`;

16
passbook/static/static/src/elements/ActionButton.ts
View file

@ -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";
const PRIMARY_CLASS = "pf-m-primary";
const SUCCESS_CLASS = "pf-m-success";
const ERROR_CLASS = "pf-m-danger";
const PROGRESS_CLASS = "pf-m-in-progress";
import {
ColorStyles,
ERROR_CLASS,
PRIMARY_CLASS,
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() {

15
passbook/static/static/src/elements/ModalButton.ts
View file

@ -83,19 +83,18 @@ export class ModalButton extends LitElement {
form.addEventListener("submit", (e) => {
e.preventDefault();
let formData = new FormData(form);
fetch(
this.href ? this.href : form.action,
{
method: form.method,
body: formData,
}
)
fetch(this.href ? this.href : form.action, {
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;

61
passbook/static/static/src/elements/TokenCopyButton.ts Normal file
View file

@ -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>`;
}
}

1
passbook/static/static/src/main.ts
View file

@ -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";

10
passbook/static/static/src/pages/RouterOutlet.ts
View file

@ -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() {