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 2021-05-26 12:05:17 +02:00
parent 523621daa2
commit a237ae3363
2 changed files with 103 additions and 0 deletions

View File

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

View File

@ -8,6 +8,7 @@ import "../../elements/EmptyState";
import "../../elements/events/ObjectChangelog";
import "../policies/BoundPoliciesList";
import "./ApplicationForm";
import "./ApplicationCheckAccessForm";
import "../../elements/PageHeader";
import { Application, CoreApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config";
@ -111,6 +112,28 @@ export class ApplicationViewPage extends LitElement {
</div>
</dd>
</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 ?
html`<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">