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

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 2021-04-10 12:19:32 +02:00
parent 83bb3f8b0b
commit c82cd4fbcf
5 changed files with 81 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/elements/buttons/ModalButton.ts
View File

@ -1,5 +1,4 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; 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 PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css"; import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
@ -22,9 +21,6 @@ export class ModalButton extends LitElement {
@property({type: Boolean}) @property({type: Boolean})
open = false; open = false;
@property()
modal = "<slot name='modal'></slot>";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal].concat( return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal].concat(
css` css`
@ -72,7 +68,7 @@ export class ModalButton extends LitElement {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`${unsafeHTML(this.modal)}`; return html`<slot name='modal'></slot>`;
} }
renderModal(): TemplateResult { renderModal(): TemplateResult {

16
web/src/locales/en.po
View File

@ -496,7 +496,7 @@ msgstr "Clear cache"
msgid "Click to change value" msgid "Click to change value"
msgstr "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" msgid "Click to copy token"
msgstr "Click to copy token" msgstr "Click to copy token"
@ -520,7 +520,7 @@ msgstr "Client Secret"
msgid "Client type" msgid "Client type"
msgstr "Client type" msgstr "Client type"
#: src/pages/outposts/OutpostListPage.ts:126 #: src/pages/outposts/OutpostDeploymentModal.ts:56
msgid "Close" msgid "Close"
msgstr "Close" msgstr "Close"
@ -674,8 +674,8 @@ msgstr "Copy Key"
#: src/pages/flows/FlowListPage.ts:117 #: src/pages/flows/FlowListPage.ts:117
#: src/pages/groups/GroupListPage.ts:91 #: src/pages/groups/GroupListPage.ts:91
#: src/pages/groups/GroupListPage.ts:99 #: src/pages/groups/GroupListPage.ts:99
#: src/pages/outposts/OutpostListPage.ts:136 #: src/pages/outposts/OutpostListPage.ts:102
#: src/pages/outposts/OutpostListPage.ts:144 #: src/pages/outposts/OutpostListPage.ts:110
#: src/pages/outposts/ServiceConnectionListPage.ts:110 #: src/pages/outposts/ServiceConnectionListPage.ts:110
#: src/pages/outposts/ServiceConnectionListPage.ts:119 #: src/pages/outposts/ServiceConnectionListPage.ts:119
#: src/pages/policies/BoundPoliciesList.ts:158 #: src/pages/policies/BoundPoliciesList.ts:158
@ -746,7 +746,7 @@ msgstr "Create Notification Rule"
msgid "Create Notification Transport" msgid "Create Notification Transport"
msgstr "Create Notification Transport" msgstr "Create Notification Transport"
#: src/pages/outposts/OutpostListPage.ts:139 #: src/pages/outposts/OutpostListPage.ts:105
msgid "Create Outpost" msgid "Create Outpost"
msgstr "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." 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." 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." 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." msgstr "If your authentik Instance is using a self-signed certificate, set this value."
@ -2105,7 +2105,7 @@ msgstr "Order"
msgid "Outpost" msgid "Outpost"
msgstr "Outpost" msgstr "Outpost"
#: src/pages/outposts/OutpostListPage.ts:95 #: src/pages/outposts/OutpostDeploymentModal.ts:25
msgid "Outpost Deployment Info" msgid "Outpost Deployment Info"
msgstr "Outpost Deployment Info" msgstr "Outpost Deployment Info"
@ -3635,7 +3635,7 @@ msgstr "Version: {0}"
msgid "View Deployment Info" msgid "View Deployment Info"
msgstr "View Deployment Info" msgstr "View Deployment Info"
#: src/pages/outposts/OutpostListPage.ts:98 #: src/pages/outposts/OutpostDeploymentModal.ts:28
msgid "View deployment documentation" msgid "View deployment documentation"
msgstr "View deployment documentation" msgstr "View deployment documentation"

16
web/src/locales/pseudo-LOCALE.po
View File

@ -492,7 +492,7 @@ msgstr ""
msgid "Click to change value" msgid "Click to change value"
msgstr "" msgstr ""
#: src/pages/outposts/OutpostListPage.ts:112 #: src/pages/outposts/OutpostDeploymentModal.ts:42
msgid "Click to copy token" msgid "Click to copy token"
msgstr "" msgstr ""
@ -516,7 +516,7 @@ msgstr ""
msgid "Client type" msgid "Client type"
msgstr "" msgstr ""
#: src/pages/outposts/OutpostListPage.ts:126 #: src/pages/outposts/OutpostDeploymentModal.ts:56
msgid "Close" msgid "Close"
msgstr "" msgstr ""
@ -670,8 +670,8 @@ msgstr ""
#: src/pages/flows/FlowListPage.ts:117 #: src/pages/flows/FlowListPage.ts:117
#: src/pages/groups/GroupListPage.ts:91 #: src/pages/groups/GroupListPage.ts:91
#: src/pages/groups/GroupListPage.ts:99 #: src/pages/groups/GroupListPage.ts:99
#: src/pages/outposts/OutpostListPage.ts:136 #: src/pages/outposts/OutpostListPage.ts:102
#: src/pages/outposts/OutpostListPage.ts:144 #: src/pages/outposts/OutpostListPage.ts:110
#: src/pages/outposts/ServiceConnectionListPage.ts:110 #: src/pages/outposts/ServiceConnectionListPage.ts:110
#: src/pages/outposts/ServiceConnectionListPage.ts:119 #: src/pages/outposts/ServiceConnectionListPage.ts:119
#: src/pages/policies/BoundPoliciesList.ts:158 #: src/pages/policies/BoundPoliciesList.ts:158
@ -742,7 +742,7 @@ msgstr ""
msgid "Create Notification Transport" msgid "Create Notification Transport"
msgstr "" msgstr ""
#: src/pages/outposts/OutpostListPage.ts:139 #: src/pages/outposts/OutpostListPage.ts:105
msgid "Create Outpost" msgid "Create Outpost"
msgstr "" 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." 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 "" 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." msgid "If your authentik Instance is using a self-signed certificate, set this value."
msgstr "" msgstr ""
@ -2101,7 +2101,7 @@ msgstr ""
msgid "Outpost" msgid "Outpost"
msgstr "" msgstr ""
#: src/pages/outposts/OutpostListPage.ts:95 #: src/pages/outposts/OutpostDeploymentModal.ts:25
msgid "Outpost Deployment Info" msgid "Outpost Deployment Info"
msgstr "" msgstr ""
@ -3629,7 +3629,7 @@ msgstr ""
msgid "View Deployment Info" msgid "View Deployment Info"
msgstr "" msgstr ""
#: src/pages/outposts/OutpostListPage.ts:98 #: src/pages/outposts/OutpostDeploymentModal.ts:28
msgid "View deployment documentation" msgid "View deployment documentation"
msgstr "" msgstr ""

61
web/src/pages/outposts/OutpostDeploymentModal.ts Normal file
View File

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

40
web/src/pages/outposts/OutpostListPage.ts
View File

@ -7,8 +7,8 @@ import { TablePage } from "../../elements/table/TablePage";
import "./OutpostHealth"; import "./OutpostHealth";
import "./OutpostForm"; import "./OutpostForm";
import "./OutpostDeploymentModal";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
import "../../elements/buttons/TokenCopyButton";
import "../../elements/forms/DeleteForm"; import "../../elements/forms/DeleteForm";
import "../../elements/forms/ModalForm"; import "../../elements/forms/ModalForm";
import { PAGE_SIZE } from "../../constants"; 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"> <button slot="trigger" class="pf-c-button pf-m-tertiary">
${t`View Deployment Info`} ${t`View Deployment Info`}
</button> </button>
<div slot="modal"> <ak-outpost-deployment-modal .outpost=${item} slot="modal">
<div class="pf-c-modal-box__header"> </ak-outpost-deployment-modal>
<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-modal-button>`, </ak-modal-button>`,
]; ];
} }