web/admin: add Modal to check application access for any user
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
parent
523621daa2
commit
a237ae3363
|
|
@ -0,0 +1,80 @@
|
||||||
|
import { Application, CoreApi, CheckAccessRequestRequest, PolicyTestResult } from "authentik-api";
|
||||||
|
import { t } from "@lingui/macro";
|
||||||
|
import { customElement, property } from "lit-element";
|
||||||
|
import { html, TemplateResult } from "lit-html";
|
||||||
|
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||||
|
import { Form } from "../../elements/forms/Form";
|
||||||
|
import { until } from "lit-html/directives/until";
|
||||||
|
import "../../elements/forms/HorizontalFormElement";
|
||||||
|
|
||||||
|
@customElement("ak-application-check-access-form")
|
||||||
|
export class ApplicationCheckAccessForm extends Form<CheckAccessRequestRequest> {
|
||||||
|
|
||||||
|
@property({attribute: false})
|
||||||
|
application!: Application;
|
||||||
|
|
||||||
|
@property({ attribute: false})
|
||||||
|
result?: PolicyTestResult;
|
||||||
|
|
||||||
|
@property({ attribute: false})
|
||||||
|
request?: CheckAccessRequestRequest;
|
||||||
|
|
||||||
|
getSuccessMessage(): string {
|
||||||
|
return t`Successfully sent test-request.`;
|
||||||
|
}
|
||||||
|
|
||||||
|
send = (data: CheckAccessRequestRequest): Promise<PolicyTestResult> => {
|
||||||
|
this.request = data;
|
||||||
|
return new CoreApi(DEFAULT_CONFIG).coreApplicationsCheckAccessCreate({
|
||||||
|
slug: this.application?.slug,
|
||||||
|
checkAccessRequestRequest: data,
|
||||||
|
}).then(result => this.result = result);
|
||||||
|
};
|
||||||
|
|
||||||
|
renderResult(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<ak-form-element-horizontal
|
||||||
|
label=${t`Passing`}>
|
||||||
|
<div class="pf-c-form__group-label">
|
||||||
|
<div class="c-form__horizontal-group">
|
||||||
|
<span class="pf-c-form__label-text">${this.result?.passing ? t`Yes` : t`No`}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ak-form-element-horizontal>
|
||||||
|
<ak-form-element-horizontal
|
||||||
|
label=${t`Messages`}>
|
||||||
|
<div class="pf-c-form__group-label">
|
||||||
|
<div class="c-form__horizontal-group">
|
||||||
|
<ul>
|
||||||
|
${(this.result?.messages || []).length > 0 ?
|
||||||
|
this.result?.messages?.map(m => {
|
||||||
|
return html`<li><span class="pf-c-form__label-text">${m}</span></li>`;
|
||||||
|
}) :
|
||||||
|
html`<li><span class="pf-c-form__label-text">-</span></li>`}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ak-form-element-horizontal>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderForm(): TemplateResult {
|
||||||
|
return html`<form class="pf-c-form pf-m-horizontal">
|
||||||
|
<ak-form-element-horizontal
|
||||||
|
label=${t`User`}
|
||||||
|
?required=${true}
|
||||||
|
name="forUser">
|
||||||
|
<select class="pf-c-form-control">
|
||||||
|
${until(new CoreApi(DEFAULT_CONFIG).coreUsersList({
|
||||||
|
ordering: "username",
|
||||||
|
}).then(users => {
|
||||||
|
return users.results.map(user => {
|
||||||
|
return html`<option ?selected=${user.pk.toString() === this.request?.forUser?.toString()} value=${user.pk}>${user.username}</option>`;
|
||||||
|
});
|
||||||
|
}), html`<option>${t`Loading...`}</option>`)}
|
||||||
|
</select>
|
||||||
|
</ak-form-element-horizontal>
|
||||||
|
${this.result ? this.renderResult(): html``}
|
||||||
|
</form>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -8,6 +8,7 @@ import "../../elements/EmptyState";
|
||||||
import "../../elements/events/ObjectChangelog";
|
import "../../elements/events/ObjectChangelog";
|
||||||
import "../policies/BoundPoliciesList";
|
import "../policies/BoundPoliciesList";
|
||||||
import "./ApplicationForm";
|
import "./ApplicationForm";
|
||||||
|
import "./ApplicationCheckAccessForm";
|
||||||
import "../../elements/PageHeader";
|
import "../../elements/PageHeader";
|
||||||
import { Application, CoreApi } from "authentik-api";
|
import { Application, CoreApi } from "authentik-api";
|
||||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||||
|
|
@ -111,6 +112,28 @@ export class ApplicationViewPage extends LitElement {
|
||||||
</div>
|
</div>
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pf-c-description-list__group">
|
||||||
|
<dt class="pf-c-description-list__term">
|
||||||
|
<span class="pf-c-description-list__text">${t`Check access`}</span>
|
||||||
|
</dt>
|
||||||
|
<dd class="pf-c-description-list__description">
|
||||||
|
<div class="pf-c-description-list__text">
|
||||||
|
<ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
|
||||||
|
<span slot="submit">
|
||||||
|
${t`Check`}
|
||||||
|
</span>
|
||||||
|
<span slot="header">
|
||||||
|
${t`Check Application access`}
|
||||||
|
</span>
|
||||||
|
<ak-application-check-access-form slot="form" .application=${this.application}>
|
||||||
|
</ak-application-check-access-form>
|
||||||
|
<button slot="trigger" class="pf-c-button pf-m-secondary">
|
||||||
|
${t`Test`}
|
||||||
|
</button>
|
||||||
|
</ak-forms-modal>
|
||||||
|
</div>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
${this.application.launchUrl ?
|
${this.application.launchUrl ?
|
||||||
html`<div class="pf-c-description-list__group">
|
html`<div class="pf-c-description-list__group">
|
||||||
<dt class="pf-c-description-list__term">
|
<dt class="pf-c-description-list__term">
|
||||||
|
|
|
||||||
Reference in New Issue