From e02b99bfbc9d40095ef8a821100f0e18263709cd Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Thu, 29 Dec 2022 11:00:57 +0100 Subject: [PATCH] web/admin: replace user selections with ak-search-select Signed-off-by: Jens Langhammer #4157 --- .../ApplicationCheckAccessForm.ts | 55 ++++++++++-------- web/src/admin/policies/PolicyBindingForm.ts | 56 ++++++++++++------- web/src/admin/policies/PolicyTestForm.ts | 50 +++++++++-------- .../PropertyMappingTestForm.ts | 50 +++++++++-------- .../authenticator_duo/DuoDeviceImportForm.ts | 44 +++++++++------ web/src/admin/tokens/TokenForm.ts | 49 ++++++++-------- 6 files changed, 177 insertions(+), 127 deletions(-) diff --git a/web/src/admin/applications/ApplicationCheckAccessForm.ts b/web/src/admin/applications/ApplicationCheckAccessForm.ts index 949bad0dd..9bd5bac2f 100644 --- a/web/src/admin/applications/ApplicationCheckAccessForm.ts +++ b/web/src/admin/applications/ApplicationCheckAccessForm.ts @@ -1,18 +1,23 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { PFColor } from "@goauthentik/elements/Label"; +import "@goauthentik/elements/SearchSelect"; import { Form } from "@goauthentik/elements/forms/Form"; import "@goauthentik/elements/forms/HorizontalFormElement"; -import { UserOption } from "@goauthentik/elements/user/utils"; import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import { until } from "lit/directives/until.js"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; -import { Application, CoreApi, PolicyTestResult } from "@goauthentik/api"; +import { + Application, + CoreApi, + CoreUsersListRequest, + PolicyTestResult, + User, +} from "@goauthentik/api"; @customElement("ak-application-check-access-form") export class ApplicationCheckAccessForm extends Form<{ forUser: number }> { @@ -114,25 +119,31 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> { renderForm(): TemplateResult { return html`
- + => { + const args: CoreUsersListRequest = { + ordering: "username", + }; + if (query !== undefined) { + args.search = query; + } + const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args); + return users.results; + }} + .renderElement=${(user: User): string => { + return user.username; + }} + .renderDescription=${(user: User): TemplateResult => { + return html`${user.name}`; + }} + .value=${(user: User | undefined): number | undefined => { + return user?.pk; + }} + .selected=${(user: User): boolean => { + return user.pk.toString() === this.request?.toString(); + }} + > + ${this.result ? this.renderResult() : html``}
`; diff --git a/web/src/admin/policies/PolicyBindingForm.ts b/web/src/admin/policies/PolicyBindingForm.ts index 8b76e3890..8c48d4b58 100644 --- a/web/src/admin/policies/PolicyBindingForm.ts +++ b/web/src/admin/policies/PolicyBindingForm.ts @@ -3,7 +3,6 @@ import { first, groupBy } from "@goauthentik/common/utils"; import "@goauthentik/elements/SearchSelect"; import "@goauthentik/elements/forms/HorizontalFormElement"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; -import { UserOption } from "@goauthentik/elements/user/utils"; import { t } from "@lingui/macro"; @@ -21,6 +20,7 @@ import { CoreGroupsListRequest, CoreUsersListRequest, Group, + PoliciesAllListRequest, PoliciesApi, Policy, PolicyBinding, @@ -181,28 +181,40 @@ export class PolicyBindingForm extends ModelForm { name="policy" ?hidden=${this.policyGroupUser !== target.policy} > - + { + return groupBy(items, (policy) => policy.verboseNamePlural); + }} + .fetchObjects=${async (query?: string): Promise => { + const args: PoliciesAllListRequest = { + ordering: "name", + }; + if (query !== undefined) { + args.search = query; + } + const policies = await new PoliciesApi( + DEFAULT_CONFIG, + ).policiesAllList(args); + return policies.results; + }} + .renderElement=${(policy: Policy): string => { + return policy.name; + }} + .value=${(policy: Policy | undefined): string | undefined => { + return policy?.pk; + }} + .selected=${(policy: Policy): boolean => { + return policy.pk === this.instance?.policy; + }} + ?blankable=${true} + > + - => { const args: CoreGroupsListRequest = { @@ -220,7 +232,7 @@ export class PolicyBindingForm extends ModelForm { return group.name; }} .value=${(group: Group | undefined): string | undefined => { - return group ? group.pk : undefined; + return group?.pk; }} .selected=${(group: Group): boolean => { return group.pk === this.instance?.group; @@ -239,7 +251,6 @@ export class PolicyBindingForm extends ModelForm { name="user" ?hidden=${this.policyGroupUser !== target.user} > - => { const args: CoreUsersListRequest = { @@ -252,10 +263,13 @@ export class PolicyBindingForm extends ModelForm { return users.results; }} .renderElement=${(user: User): string => { - return UserOption(user); + return user.username; + }} + .renderDescription=${(user: User): TemplateResult => { + return html`${user.name}`; }} .value=${(user: User | undefined): number | undefined => { - return user ? user.pk : undefined; + return user?.pk; }} .selected=${(user: User): boolean => { return user.pk === this.instance?.user; diff --git a/web/src/admin/policies/PolicyTestForm.ts b/web/src/admin/policies/PolicyTestForm.ts index c50885b09..be0ae106d 100644 --- a/web/src/admin/policies/PolicyTestForm.ts +++ b/web/src/admin/policies/PolicyTestForm.ts @@ -2,25 +2,26 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { first } from "@goauthentik/common/utils"; import "@goauthentik/elements/CodeMirror"; import { PFColor } from "@goauthentik/elements/Label"; +import "@goauthentik/elements/SearchSelect"; import { Form } from "@goauthentik/elements/forms/Form"; import "@goauthentik/elements/forms/HorizontalFormElement"; -import { UserOption } from "@goauthentik/elements/user/utils"; import YAML from "yaml"; import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; -import { until } from "lit/directives/until.js"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; import { CoreApi, + CoreUsersListRequest, PoliciesApi, Policy, PolicyTestRequest, PolicyTestResult, + User, } from "@goauthentik/api"; @customElement("ak-policy-test-form") @@ -119,26 +120,31 @@ export class PolicyTestForm extends Form { renderForm(): TemplateResult { return html`
- + => { + const args: CoreUsersListRequest = { + ordering: "username", + }; + if (query !== undefined) { + args.search = query; + } + const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args); + return users.results; + }} + .renderElement=${(user: User): string => { + return user.username; + }} + .renderDescription=${(user: User): TemplateResult => { + return html`${user.name}`; + }} + .value=${(user: User | undefined): number | undefined => { + return user?.pk; + }} + .selected=${(user: User): boolean => { + return this.request?.user.toString() === user.pk.toString(); + }} + > + { renderForm(): TemplateResult { return html` - + => { + const args: CoreUsersListRequest = { + ordering: "username", + }; + if (query !== undefined) { + args.search = query; + } + const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args); + return users.results; + }} + .renderElement=${(user: User): string => { + return user.username; + }} + .renderDescription=${(user: User): TemplateResult => { + return html`${user.name}`; + }} + .value=${(user: User | undefined): number | undefined => { + return user?.pk; + }} + .selected=${(user: User): boolean => { + return this.request?.user.toString() === user.pk.toString(); + }} + > + - + => { + const args: CoreUsersListRequest = { + ordering: "username", + }; + if (query !== undefined) { + args.search = query; + } + const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args); + return users.results; + }} + .renderElement=${(user: User): string => { + return user.username; + }} + .renderDescription=${(user: User): TemplateResult => { + return html`${user.name}`; + }} + .value=${(user: User | undefined): string | undefined => { + return user?.username; + }} + > + +

${t`The user in authentik this device will be assigned to.`}

diff --git a/web/src/admin/tokens/TokenForm.ts b/web/src/admin/tokens/TokenForm.ts index b07a1c14d..2589e3fa7 100644 --- a/web/src/admin/tokens/TokenForm.ts +++ b/web/src/admin/tokens/TokenForm.ts @@ -1,17 +1,16 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { dateTimeLocal, first } from "@goauthentik/common/utils"; +import "@goauthentik/elements/SearchSelect"; import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/HorizontalFormElement"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; -import { UserOption } from "@goauthentik/elements/user/utils"; import { t } from "@lingui/macro"; import { TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; -import { until } from "lit/directives/until.js"; -import { CoreApi, IntentEnum, Token } from "@goauthentik/api"; +import { CoreApi, CoreUsersListRequest, IntentEnum, Token, User } from "@goauthentik/api"; @customElement("ak-token-form") export class TokenForm extends ModelForm { @@ -56,25 +55,31 @@ export class TokenForm extends ModelForm {

- + => { + const args: CoreUsersListRequest = { + ordering: "username", + }; + if (query !== undefined) { + args.search = query; + } + const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args); + return users.results; + }} + .renderElement=${(user: User): string => { + return user.username; + }} + .renderDescription=${(user: User): TemplateResult => { + return html`${user.name}`; + }} + .value=${(user: User | undefined): number | undefined => { + return user?.pk; + }} + .selected=${(user: User): boolean => { + return this.instance?.user === user.pk; + }} + > +