web/admin: fix CSS for outpost deployment modal, fix URL
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
parent
83bb3f8b0b
commit
c82cd4fbcf
|
|
@ -1,5 +1,4 @@
|
|||
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
import { unsafeHTML } from "lit-html/directives/unsafe-html";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
|
||||
|
|
@ -22,9 +21,6 @@ export class ModalButton extends LitElement {
|
|||
@property({type: Boolean})
|
||||
open = false;
|
||||
|
||||
@property()
|
||||
modal = "<slot name='modal'></slot>";
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal].concat(
|
||||
css`
|
||||
|
|
@ -72,7 +68,7 @@ export class ModalButton extends LitElement {
|
|||
}
|
||||
|
||||
renderModalInner(): TemplateResult {
|
||||
return html`${unsafeHTML(this.modal)}`;
|
||||
return html`<slot name='modal'></slot>`;
|
||||
}
|
||||
|
||||
renderModal(): TemplateResult {
|
||||
|
|
|
|||
|
|
@ -496,7 +496,7 @@ msgstr "Clear cache"
|
|||
msgid "Click to change value"
|
||||
msgstr "Click to change value"
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:112
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts:42
|
||||
msgid "Click to copy token"
|
||||
msgstr "Click to copy token"
|
||||
|
||||
|
|
@ -520,7 +520,7 @@ msgstr "Client Secret"
|
|||
msgid "Client type"
|
||||
msgstr "Client type"
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:126
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts:56
|
||||
msgid "Close"
|
||||
msgstr "Close"
|
||||
|
||||
|
|
@ -674,8 +674,8 @@ msgstr "Copy Key"
|
|||
#: src/pages/flows/FlowListPage.ts:117
|
||||
#: src/pages/groups/GroupListPage.ts:91
|
||||
#: src/pages/groups/GroupListPage.ts:99
|
||||
#: src/pages/outposts/OutpostListPage.ts:136
|
||||
#: src/pages/outposts/OutpostListPage.ts:144
|
||||
#: src/pages/outposts/OutpostListPage.ts:102
|
||||
#: src/pages/outposts/OutpostListPage.ts:110
|
||||
#: src/pages/outposts/ServiceConnectionListPage.ts:110
|
||||
#: src/pages/outposts/ServiceConnectionListPage.ts:119
|
||||
#: src/pages/policies/BoundPoliciesList.ts:158
|
||||
|
|
@ -746,7 +746,7 @@ msgstr "Create Notification Rule"
|
|||
msgid "Create Notification Transport"
|
||||
msgstr "Create Notification Transport"
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:139
|
||||
#: src/pages/outposts/OutpostListPage.ts:105
|
||||
msgid "Create Outpost"
|
||||
msgstr "Create Outpost"
|
||||
|
||||
|
|
@ -1470,7 +1470,7 @@ msgstr "If left empty, authentik will try to extract the launch URL based on the
|
|||
msgid "If this flag is set, this Stage will jump to the next Stage when no Invitation is given. By default this Stage will cancel the Flow when no invitation is given."
|
||||
msgstr "If this flag is set, this Stage will jump to the next Stage when no Invitation is given. By default this Stage will cancel the Flow when no invitation is given."
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:116
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts:46
|
||||
msgid "If your authentik Instance is using a self-signed certificate, set this value."
|
||||
msgstr "If your authentik Instance is using a self-signed certificate, set this value."
|
||||
|
||||
|
|
@ -2105,7 +2105,7 @@ msgstr "Order"
|
|||
msgid "Outpost"
|
||||
msgstr "Outpost"
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:95
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts:25
|
||||
msgid "Outpost Deployment Info"
|
||||
msgstr "Outpost Deployment Info"
|
||||
|
||||
|
|
@ -3635,7 +3635,7 @@ msgstr "Version: {0}"
|
|||
msgid "View Deployment Info"
|
||||
msgstr "View Deployment Info"
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:98
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts:28
|
||||
msgid "View deployment documentation"
|
||||
msgstr "View deployment documentation"
|
||||
|
||||
|
|
|
|||
|
|
@ -492,7 +492,7 @@ msgstr ""
|
|||
msgid "Click to change value"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:112
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts:42
|
||||
msgid "Click to copy token"
|
||||
msgstr ""
|
||||
|
||||
|
|
@ -516,7 +516,7 @@ msgstr ""
|
|||
msgid "Client type"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:126
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts:56
|
||||
msgid "Close"
|
||||
msgstr ""
|
||||
|
||||
|
|
@ -670,8 +670,8 @@ msgstr ""
|
|||
#: src/pages/flows/FlowListPage.ts:117
|
||||
#: src/pages/groups/GroupListPage.ts:91
|
||||
#: src/pages/groups/GroupListPage.ts:99
|
||||
#: src/pages/outposts/OutpostListPage.ts:136
|
||||
#: src/pages/outposts/OutpostListPage.ts:144
|
||||
#: src/pages/outposts/OutpostListPage.ts:102
|
||||
#: src/pages/outposts/OutpostListPage.ts:110
|
||||
#: src/pages/outposts/ServiceConnectionListPage.ts:110
|
||||
#: src/pages/outposts/ServiceConnectionListPage.ts:119
|
||||
#: src/pages/policies/BoundPoliciesList.ts:158
|
||||
|
|
@ -742,7 +742,7 @@ msgstr ""
|
|||
msgid "Create Notification Transport"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:139
|
||||
#: src/pages/outposts/OutpostListPage.ts:105
|
||||
msgid "Create Outpost"
|
||||
msgstr ""
|
||||
|
||||
|
|
@ -1466,7 +1466,7 @@ msgstr ""
|
|||
msgid "If this flag is set, this Stage will jump to the next Stage when no Invitation is given. By default this Stage will cancel the Flow when no invitation is given."
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:116
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts:46
|
||||
msgid "If your authentik Instance is using a self-signed certificate, set this value."
|
||||
msgstr ""
|
||||
|
||||
|
|
@ -2101,7 +2101,7 @@ msgstr ""
|
|||
msgid "Outpost"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:95
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts:25
|
||||
msgid "Outpost Deployment Info"
|
||||
msgstr ""
|
||||
|
||||
|
|
@ -3629,7 +3629,7 @@ msgstr ""
|
|||
msgid "View Deployment Info"
|
||||
msgstr ""
|
||||
|
||||
#: src/pages/outposts/OutpostListPage.ts:98
|
||||
#: src/pages/outposts/OutpostDeploymentModal.ts:28
|
||||
msgid "View deployment documentation"
|
||||
msgstr ""
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
import { Outpost } from "authentik-api";
|
||||
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
import { t } from "@lingui/macro";
|
||||
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
|
||||
import PFForm from "@patternfly/patternfly/components/Form/form.css";
|
||||
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
|
||||
import AKGlobal from "../../authentik.css";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import "../../elements/buttons/TokenCopyButton";
|
||||
|
||||
@customElement("ak-outpost-deployment-modal")
|
||||
export class OutpostDeploymentModal extends LitElement {
|
||||
|
||||
@property({attribute: false})
|
||||
outpost?: Outpost;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFTitle, PFButton, PFModalBox, PFForm, PFFormControl, AKGlobal];
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<div class="pf-c-modal-box__header">
|
||||
<h1 class="pf-c-title pf-m-2xl">${t`Outpost Deployment Info`}</h1>
|
||||
</div>
|
||||
<div class="pf-c-modal-box__body">
|
||||
<p><a target="_blank" href="https://goauthentik.io/docs/outposts/outposts/#deploy">${t`View deployment documentation`}</a></p>
|
||||
<form class="pf-c-form">
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label" for="help-text-simple-form-name">
|
||||
<span class="pf-c-form__label-text">AUTHENTIK_HOST</span>
|
||||
</label>
|
||||
<input class="pf-c-form-control" readonly type="text" value="${document.location.origin}" />
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label" for="help-text-simple-form-name">
|
||||
<span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span>
|
||||
</label>
|
||||
<div>
|
||||
<ak-token-copy-button identifier="${ifDefined(this.outpost?.tokenIdentifier)}">
|
||||
${t`Click to copy token`}
|
||||
</ak-token-copy-button>
|
||||
</div>
|
||||
</div>
|
||||
<h3>${t`If your authentik Instance is using a self-signed certificate, set this value.`}</h3>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label" for="help-text-simple-form-name">
|
||||
<span class="pf-c-form__label-text">AUTHENTIK_INSECURE</span>
|
||||
</label>
|
||||
<input class="pf-c-form-control" readonly type="text" value="true" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<footer class="pf-c-modal-box__footer pf-m-align-left">
|
||||
<a class="pf-c-button pf-m-primary">${t`Close`}</a>
|
||||
</footer>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -7,8 +7,8 @@ import { TablePage } from "../../elements/table/TablePage";
|
|||
|
||||
import "./OutpostHealth";
|
||||
import "./OutpostForm";
|
||||
import "./OutpostDeploymentModal";
|
||||
import "../../elements/buttons/SpinnerButton";
|
||||
import "../../elements/buttons/TokenCopyButton";
|
||||
import "../../elements/forms/DeleteForm";
|
||||
import "../../elements/forms/ModalForm";
|
||||
import { PAGE_SIZE } from "../../constants";
|
||||
|
|
@ -87,42 +87,8 @@ export class OutpostListPage extends TablePage<Outpost> {
|
|||
<button slot="trigger" class="pf-c-button pf-m-tertiary">
|
||||
${t`View Deployment Info`}
|
||||
</button>
|
||||
<div slot="modal">
|
||||
<div class="pf-c-modal-box__header">
|
||||
<h1 class="pf-c-title pf-m-2xl" id="modal-title">${t`Outpost Deployment Info`}</h1>
|
||||
</div>
|
||||
<div class="pf-c-modal-box__body" id="modal-description">
|
||||
<p><a href="https://goauthentik.io/docs/outposts/outposts/#deploy">${t`View deployment documentation`}</a></p>
|
||||
<form class="pf-c-form">
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label" for="help-text-simple-form-name">
|
||||
<span class="pf-c-form__label-text">AUTHENTIK_HOST</span>
|
||||
</label>
|
||||
<input class="pf-c-form-control" readonly type="text" value="${document.location.toString()}" />
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label" for="help-text-simple-form-name">
|
||||
<span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span>
|
||||
</label>
|
||||
<div>
|
||||
<ak-token-copy-button identifier="${ifDefined(item.tokenIdentifier)}">
|
||||
${t`Click to copy token`}
|
||||
</ak-token-copy-button>
|
||||
</div>
|
||||
</div>
|
||||
<h3>${t`If your authentik Instance is using a self-signed certificate, set this value.`}</h3>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label" for="help-text-simple-form-name">
|
||||
<span class="pf-c-form__label-text">AUTHENTIK_INSECURE</span>
|
||||
</label>
|
||||
<input class="pf-c-form-control" readonly type="text" value="true" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<footer class="pf-c-modal-box__footer pf-m-align-left">
|
||||
<a class="pf-c-button pf-m-primary">${t`Close`}</a>
|
||||
</footer>
|
||||
</div>
|
||||
<ak-outpost-deployment-modal .outpost=${item} slot="modal">
|
||||
</ak-outpost-deployment-modal>
|
||||
</ak-modal-button>`,
|
||||
];
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue