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

web/admin: replace flow selections with ak-search-select 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-12-29 11:49:43 +01:00
parent 4d1bcd2e19
commit 7a10872854
No known key found for this signature in database
6 changed files with 166 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
View File

@ -1,4 +1,5 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import "@goauthentik/elements/SearchSelect";
import { KeyUnknown } from "@goauthentik/elements/forms/Form"; import { KeyUnknown } from "@goauthentik/elements/forms/Form";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { WizardFormPage } from "@goauthentik/elements/wizard/WizardFormPage"; import { WizardFormPage } from "@goauthentik/elements/wizard/WizardFormPage";
@ -8,13 +9,13 @@ import { t } from "@lingui/macro";
import { customElement } from "@lit/reactive-element/decorators/custom-element.js"; import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js";
import { import {
ClientTypeEnum, ClientTypeEnum,
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
OAuth2ProviderRequest, OAuth2ProviderRequest,
ProvidersApi, ProvidersApi,
} from "@goauthentik/api"; } from "@goauthentik/api";
@ -46,23 +47,29 @@ export class TypeOAuthCodeApplicationWizardPage extends WizardFormPage {
?required=${true} ?required=${true}
name="authorizationFlow" name="authorizationFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
${until( .fetchObjects=${async (query?: string): Promise<Flow[]> => {
new FlowsApi(DEFAULT_CONFIG) const args: FlowsInstancesListRequest = {
.flowsInstancesList({ ordering: "name",
ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authorization, designation: FlowsInstancesListDesignationEnum.Authorization,
}) };
.then((flows) => { if (query !== undefined) {
return flows.results.map((flow) => { args.search = query;
return html`<option value=${ifDefined(flow.pk)}> }
${flow.name} (${flow.slug}) const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(args);
</option>`; return flows.results;
}); }}
}), .renderElement=${(flow: Flow): string => {
html`<option>${t`Loading...`}</option>`, return flow.name;
)} }}
</select> .renderDescription=${(flow: Flow): string => {
return flow.slug;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;
}}
>
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Flow used when users access this application.`} ${t`Flow used when users access this application.`}
</p> </p>

42
web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
View File

@ -1,5 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first, randomString } from "@goauthentik/common/utils"; import { first, randomString } from "@goauthentik/common/utils";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -15,8 +16,10 @@ import { until } from "lit/directives/until.js";
import { import {
ClientTypeEnum, ClientTypeEnum,
CryptoApi, CryptoApi,
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
IssuerModeEnum, IssuerModeEnum,
OAuth2Provider, OAuth2Provider,
PropertymappingsApi, PropertymappingsApi,
@ -77,26 +80,29 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
?required=${true} ?required=${true}
name="authorizationFlow" name="authorizationFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
${until( .fetchObjects=${async (query?: string): Promise<Flow[]> => {
new FlowsApi(DEFAULT_CONFIG) const args: FlowsInstancesListRequest = {
.flowsInstancesList({ ordering: "name",
ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authorization, designation: FlowsInstancesListDesignationEnum.Authorization,
}) };
.then((flows) => { if (query !== undefined) {
return flows.results.map((flow) => { args.search = query;
return html`<option }
value=${ifDefined(flow.pk)} const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(args);
?selected=${this.instance?.authorizationFlow === flow.pk} return flows.results;
}}
.renderElement=${(flow: Flow): string => {
return flow.name;
}}
.renderDescription=${(flow: Flow): string => {
return flow.slug;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;
}}
> >
${flow.name} (${flow.slug}) </ak-search-select>
</option>`;
});
}),
html`<option>${t`Loading...`}</option>`,
)}
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Flow used when authorizing this provider.`} ${t`Flow used when authorizing this provider.`}
</p> </p>

45
web/src/admin/providers/proxy/ProxyProviderForm.ts
View File

@ -1,5 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -20,8 +21,10 @@ import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";
import { import {
CryptoApi, CryptoApi,
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
PropertymappingsApi, PropertymappingsApi,
ProvidersApi, ProvidersApi,
ProxyMode, ProxyMode,
@ -292,26 +295,32 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
?required=${true} ?required=${true}
name="authorizationFlow" name="authorizationFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
${until( .fetchObjects=${async (query?: string): Promise<Flow[]> => {
new FlowsApi(DEFAULT_CONFIG) const args: FlowsInstancesListRequest = {
.flowsInstancesList({ ordering: "name",
ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authorization, designation: FlowsInstancesListDesignationEnum.Authorization,
}) };
.then((flows) => { if (query !== undefined) {
return flows.results.map((flow) => { args.search = query;
return html`<option }
value=${ifDefined(flow.pk)} const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(args);
?selected=${this.instance?.authorizationFlow === flow.pk} return flows.results;
}}
.renderElement=${(flow: Flow): string => {
return flow.name;
}}
.renderDescription=${(flow: Flow): string => {
return flow.slug;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;
}}
.selected=${(flow: Flow): boolean => {
return flow.pk === this.instance?.authorizationFlow;
}}
> >
${flow.name} (${flow.slug}) </ak-search-select>
</option>`;
});
}),
html`<option>${t`Loading...`}</option>`,
)}
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Flow used when authorizing this provider.`} ${t`Flow used when authorizing this provider.`}
</p> </p>

45
web/src/admin/providers/saml/SAMLProviderForm.ts
View File

@ -1,4 +1,5 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -14,8 +15,10 @@ import { until } from "lit/directives/until.js";
import { import {
CryptoApi, CryptoApi,
DigestAlgorithmEnum, DigestAlgorithmEnum,
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
PropertymappingsApi, PropertymappingsApi,
ProvidersApi, ProvidersApi,
SAMLProvider, SAMLProvider,
@ -67,26 +70,32 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
?required=${true} ?required=${true}
name="authorizationFlow" name="authorizationFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
${until( .fetchObjects=${async (query?: string): Promise<Flow[]> => {
new FlowsApi(DEFAULT_CONFIG) const args: FlowsInstancesListRequest = {
.flowsInstancesList({ ordering: "name",
ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authorization, designation: FlowsInstancesListDesignationEnum.Authorization,
}) };
.then((flows) => { if (query !== undefined) {
return flows.results.map((flow) => { args.search = query;
return html`<option }
value=${ifDefined(flow.pk)} const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(args);
?selected=${this.instance?.authorizationFlow === flow.pk} return flows.results;
}}
.renderElement=${(flow: Flow): string => {
return flow.name;
}}
.renderDescription=${(flow: Flow): string => {
return flow.slug;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;
}}
.selected=${(flow: Flow): boolean => {
return flow.pk === this.instance?.authorizationFlow;
}}
> >
${flow.name} (${flow.slug}) </ak-search-select>
</option>`;
});
}),
html`<option>${t`Loading...`}</option>`,
)}
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Flow used when authorizing this provider.`} ${t`Flow used when authorizing this provider.`}
</p> </p>

42
web/src/admin/providers/saml/SAMLProviderImportForm.ts
View File

@ -1,5 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { SentryIgnoredError } from "@goauthentik/common/errors"; import { SentryIgnoredError } from "@goauthentik/common/errors";
import "@goauthentik/elements/SearchSelect";
import { Form } from "@goauthentik/elements/forms/Form"; import { Form } from "@goauthentik/elements/forms/Form";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
@ -7,11 +8,12 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js"; import { customElement } from "lit/decorators.js";
import { until } from "lit/directives/until.js";
import { import {
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
ProvidersApi, ProvidersApi,
SAMLProvider, SAMLProvider,
} from "@goauthentik/api"; } from "@goauthentik/api";
@ -45,23 +47,29 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
?required=${true} ?required=${true}
name="authorizationFlow" name="authorizationFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
${until( .fetchObjects=${async (query?: string): Promise<Flow[]> => {
new FlowsApi(DEFAULT_CONFIG) const args: FlowsInstancesListRequest = {
.flowsInstancesList({ ordering: "name",
ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authorization, designation: FlowsInstancesListDesignationEnum.Authorization,
}) };
.then((flows) => { if (query !== undefined) {
return flows.results.map((flow) => { args.search = query;
return html`<option value=${flow.slug}> }
${flow.name} (${flow.slug}) const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(args);
</option>`; return flows.results;
}); }}
}), .renderElement=${(flow: Flow): string => {
html`<option>${t`Loading...`}</option>`, return flow.name;
)} }}
</select> .renderDescription=${(flow: Flow): string => {
return flow.slug;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;
}}
>
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Flow used when authorizing this provider.`} ${t`Flow used when authorizing this provider.`}
</p> </p>

51
web/src/admin/stages/invitation/InvitationForm.ts
View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { dateTimeLocal, first } from "@goauthentik/common/utils"; import { dateTimeLocal, first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import YAML from "yaml"; import YAML from "yaml";
@ -9,12 +10,12 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js"; import { customElement } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js";
import { import {
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
Invitation, Invitation,
StagesApi, StagesApi,
} from "@goauthentik/api"; } from "@goauthentik/api";
@ -74,29 +75,33 @@ export class InvitationForm extends ModelForm<Invitation, string> {
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Flow`} ?required=${true} name="flow"> <ak-form-element-horizontal label=${t`Flow`} ?required=${true} name="flow">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.flow === undefined}> .fetchObjects=${async (query?: string): Promise<Flow[]> => {
--------- const args: FlowsInstancesListRequest = {
</option> ordering: "name",
${until(
new FlowsApi(DEFAULT_CONFIG)
.flowsInstancesList({
ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Enrollment, designation: FlowsInstancesListDesignationEnum.Enrollment,
}) };
.then((flows) => { if (query !== undefined) {
return flows.results.map((flow) => { args.search = query;
return html`<option }
value=${ifDefined(flow.pk)} const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(args);
?selected=${this.instance?.flow === flow.pk} return flows.results;
}}
.renderElement=${(flow: Flow): string => {
return flow.name;
}}
.renderDescription=${(flow: Flow): string => {
return flow.slug;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;
}}
.selected=${(flow: Flow): boolean => {
return flow.pk === this.instance?.flow;
}}
?blankable=${true}
> >
${flow.name} (${flow.slug}) </ak-search-select>
</option>`;
});
}),
html`<option>${t`Loading...`}</option>`,
)}
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`When selected, the invite will only be usable with the flow. By default the invite is accepted on all flows with invitation stages.`} ${t`When selected, the invite will only be usable with the flow. By default the invite is accepted on all flows with invitation stages.`}
</p> </p>