habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: allow modification of users groups from user view

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-08-10 21:27:41 +02:00
parent ec95a2bddc
commit 7db3be604c
5 changed files with 174 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/pages/groups/GroupForm.ts
View File

@ -33,7 +33,7 @@ export class GroupForm extends ModelForm<Group, string> {
send = (data: Group): Promise<Group> => {
if (this.instance?.pk) {
return new CoreApi(DEFAULT_CONFIG).coreGroupsUpdate({
groupUuid: this.instance.pk || "",
groupUuid: this.instance.pk,
groupRequest: data,
});
} else {
@ -143,9 +143,6 @@ export class GroupForm extends ModelForm<Group, string> {
</ak-chip-group>
</div>
</div>
<p class="pf-c-form__helper-text">
${t`Hold control/command to select multiple items.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Attributes`} ?required=${true} name="attributes">
<ak-codemirror

85
web/src/pages/users/GroupSelectModal.ts Normal file
View File

@ -0,0 +1,85 @@
import { t } from "@lingui/macro";
import { CoreApi, Group } from "authentik-api";
import { customElement, property } from "lit-element";
import { TemplateResult, html } from "lit-html";
import { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config";
import { PAGE_SIZE } from "../../constants";
import { TableColumn } from "../../elements/table/Table";
import { TableModal } from "../../elements/table/TableModal";
import "../../elements/buttons/SpinnerButton";
@customElement("ak-user-group-select-table")
export class GroupSelectModal extends TableModal<Group> {
checkbox = true;
checkboxChip = true;
searchEnabled(): boolean {
return true;
}
@property()
confirm!: (selectedItems: Group[]) => Promise<unknown>;
order = "name";
apiEndpoint(page: number): Promise<AKResponse<Group>> {
return new CoreApi(DEFAULT_CONFIG).coreGroupsList({
ordering: this.order,
page: page,
pageSize: PAGE_SIZE / 2,
search: this.search || "",
});
}
columns(): TableColumn[] {
return [
new TableColumn(t`Name`, "username"),
new TableColumn(t`Superuser`, "is_superuser"),
new TableColumn(t`Members`, ""),
];
}
row(item: Group): TemplateResult[] {
return [
html`<div>
<div>${item.name}</div>
</div>`,
html`${item.isSuperuser ? t`Yes` : t`No`}`,
html`${item.users.length}`,
];
}
renderSelectedChip(item: Group): TemplateResult {
return html`${item.name}`;
}
renderModalInner(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Select groups to add user to`}</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-light">${this.renderTable()}</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
return this.confirm(this.selectedElements).then(() => {
this.open = false;
});
}}
class="pf-m-primary"
>
${t`Add`} </ak-spinner-button
>&nbsp;
<ak-spinner-button
.callAction=${async () => {
this.open = false;
}}
class="pf-m-secondary"
>
${t`Cancel`}
</ak-spinner-button>
</footer>`;
}
}

65
web/src/pages/users/UserForm.ts
View File

@ -1,4 +1,4 @@
import { CoreApi, User } from "authentik-api";
import { CoreApi, Group, User } from "authentik-api";
import { t } from "@lingui/macro";
import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html";
@ -6,9 +6,11 @@ import { DEFAULT_CONFIG } from "../../api/Config";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/forms/HorizontalFormElement";
import "../../elements/CodeMirror";
import "./GroupSelectModal";
import YAML from "yaml";
import { first } from "../../utils";
import { ModelForm } from "../../elements/forms/ModelForm";
import { until } from "lit-html/directives/until";
@customElement("ak-user-form")
export class UserForm extends ModelForm<User, number> {
@ -27,9 +29,9 @@ export class UserForm extends ModelForm<User, number> {
}
send = (data: User): Promise<User> => {
if (this.instance) {
if (this.instance?.pk) {
return new CoreApi(DEFAULT_CONFIG).coreUsersUpdate({
id: this.instance.pk || 0,
id: this.instance.pk,
userRequest: data,
});
} else {
@ -82,6 +84,63 @@ export class UserForm extends ModelForm<User, number> {
${t`Designates whether this user should be treated as active. Unselect this instead of deleting accounts.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Groups`} name="groups">
<div class="pf-c-input-group">
<ak-user-group-select-table
.confirm=${(items: Group[]) => {
// Because the model only has the IDs, map the group list to IDs
const ids = items.map((g) => g.pk);
if (!this.instance) this.instance = {} as User;
this.instance.groups = Array.from(this.instance?.groups || []).concat(
ids,
);
this.requestUpdate();
return Promise.resolve();
}}
>
<button slot="trigger" class="pf-c-button pf-m-control" type="button">
<i class="fas fa-plus" aria-hidden="true"></i>
</button>
</ak-user-group-select-table>
<div class="pf-c-form-control">
<ak-chip-group>
${until(
new CoreApi(DEFAULT_CONFIG)
.coreGroupsList({
ordering: "name",
})
.then((groups) => {
return groups.results.map((group) => {
const selected = Array.from(
this.instance?.groups || [],
).some((sg) => {
return sg == group.pk;
});
if (!selected) return;
return html`<ak-chip
.removable=${true}
value=${ifDefined(group.pk)}
@remove=${() => {
if (!this.instance) return;
const groups = Array.from(
this.instance?.groups || [],
);
const idx = groups.indexOf(group.pk);
groups.splice(idx, 1);
this.instance.groups = groups;
this.requestUpdate();
}}
>
${group.name}
</ak-chip>`;
});
}),
html`<option>${t`Loading...`}</option>`,
)}
</ak-chip-group>
</div>
</div>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Attributes`} ?required=${true} name="attributes">
<ak-codemirror
mode="yaml"