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

web/admin: add Radio control, search-select fixes (#4333) 

* move search select to forms folder

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* add radio, migrate smaller lists

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* move dropdown when scrolling, hide when container out of frame

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens L 2023-01-02 14:51:44 +01:00 committed by GitHub
parent 9564894eda
commit ba5cd6e719
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 697 additions and 602 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/admin/applications/ApplicationCheckAccessForm.ts
View File

@ -1,8 +1,8 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { PFColor } from "@goauthentik/elements/Label"; import { PFColor } from "@goauthentik/elements/Label";
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

34
web/src/admin/applications/ApplicationForm.ts
View File

@ -1,12 +1,13 @@
import "@goauthentik/admin/providers/ProviderWizard"; import "@goauthentik/admin/providers/ProviderWizard";
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
import { first, groupBy } from "@goauthentik/common/utils"; import { first, groupBy } 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 "@goauthentik/elements/forms/ModalForm"; import "@goauthentik/elements/forms/ModalForm";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/ProxyForm"; import "@goauthentik/elements/forms/ProxyForm";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -153,20 +154,23 @@ export class ApplicationForm extends ModelForm<Application, string> {
?required=${true} ?required=${true}
name="policyEngineMode" name="policyEngineMode"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value=${PolicyEngineMode.Any} {
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any} label: "ANY",
> value: PolicyEngineMode.Any,
${t`ANY, any policy must match to grant access.`} default: true,
</option> description: html`${t`Any policy must match to grant access`}`,
<option },
value=${PolicyEngineMode.All} {
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.All} label: "ALL",
> value: PolicyEngineMode.All,
${t`ALL, all policies must match to grant access.`} description: html`${t`All policies must match to grant access`}`,
</option> },
</select> ]}
.value=${this.instance?.policyEngineMode}
>
</ak-radio>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> ${t`UI settings`} </span> <span slot="header"> ${t`UI settings`} </span>

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

@ -1,7 +1,7 @@
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 "@goauthentik/elements/forms/SearchSelect";
import { WizardFormPage } from "@goauthentik/elements/wizard/WizardFormPage"; import { WizardFormPage } from "@goauthentik/elements/wizard/WizardFormPage";
import "@goauthentik/elements/wizard/WizardFormPage"; import "@goauthentik/elements/wizard/WizardFormPage";

2
web/src/admin/blueprints/BlueprintForm.ts
View File

@ -2,10 +2,10 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
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";
import "@goauthentik/elements/forms/SearchSelect";
import YAML from "yaml"; import YAML from "yaml";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

54
web/src/admin/events/RuleForm.ts
View File

@ -1,7 +1,8 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
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 "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -48,29 +49,6 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
} }
}; };
renderSeverity(): TemplateResult {
return html`
<option
value=${SeverityEnum.Alert}
?selected=${this.instance?.severity === SeverityEnum.Alert}
>
${t`Alert`}
</option>
<option
value=${SeverityEnum.Warning}
?selected=${this.instance?.severity === SeverityEnum.Warning}
>
${t`Warning`}
</option>
<option
value=${SeverityEnum.Notice}
?selected=${this.instance?.severity === SeverityEnum.Notice}
>
${t`Notice`}
</option>
`;
}
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name"> <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
@ -107,10 +85,12 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
</ak-search-select> </ak-search-select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Transports`} ?required=${true} name="transports"> <ak-form-element-horizontal label=${t`Transports`} ?required=${true} name="transports">
<select name="users" class="pf-c-form-control" multiple> <select class="pf-c-form-control" multiple>
${until( ${until(
new EventsApi(DEFAULT_CONFIG) new EventsApi(DEFAULT_CONFIG)
.eventsTransportsList({}) .eventsTransportsList({
ordering: "name",
})
.then((transports) => { .then((transports) => {
return transports.results.map((transport) => { return transports.results.map((transport) => {
const selected = Array.from( const selected = Array.from(
@ -137,9 +117,25 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Severity`} ?required=${true} name="severity"> <ak-form-element-horizontal label=${t`Severity`} ?required=${true} name="severity">
<select class="pf-c-form-control"> <ak-radio
${this.renderSeverity()} .options=${[
</select> {
label: "Alert",
value: SeverityEnum.Alert,
default: true,
},
{
label: t`Warning`,
value: SeverityEnum.Warning,
},
{
label: t`Notice`,
value: SeverityEnum.Notice,
},
]}
.value=${this.instance?.severity}
>
</ak-radio>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }

2
web/src/admin/events/TransportForm.ts
View File

@ -1,8 +1,8 @@
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/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

479
web/src/admin/flows/FlowForm.ts
View File

@ -2,8 +2,10 @@ import { DesignationToLabel, LayoutToLabel } from "@goauthentik/admin/flows/util
import { AuthenticationEnum } from "@goauthentik/api/dist/models/AuthenticationEnum"; import { AuthenticationEnum } from "@goauthentik/api/dist/models/AuthenticationEnum";
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
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";
import "@goauthentik/elements/forms/Radio";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -74,140 +76,6 @@ export class FlowForm extends ModelForm<Flow, string> {
return flow; return flow;
}; };
renderDesignations(): TemplateResult {
return html`
<option
value=${FlowDesignationEnum.Authentication}
?selected=${this.instance?.designation === FlowDesignationEnum.Authentication}
>
${DesignationToLabel(FlowDesignationEnum.Authentication)}
</option>
<option
value=${FlowDesignationEnum.Authorization}
?selected=${this.instance?.designation === FlowDesignationEnum.Authorization}
>
${DesignationToLabel(FlowDesignationEnum.Authorization)}
</option>
<option
value=${FlowDesignationEnum.Enrollment}
?selected=${this.instance?.designation === FlowDesignationEnum.Enrollment}
>
${DesignationToLabel(FlowDesignationEnum.Enrollment)}
</option>
<option
value=${FlowDesignationEnum.Invalidation}
?selected=${this.instance?.designation === FlowDesignationEnum.Invalidation}
>
${DesignationToLabel(FlowDesignationEnum.Invalidation)}
</option>
<option
value=${FlowDesignationEnum.Recovery}
?selected=${this.instance?.designation === FlowDesignationEnum.Recovery}
>
${DesignationToLabel(FlowDesignationEnum.Recovery)}
</option>
<option
value=${FlowDesignationEnum.StageConfiguration}
?selected=${this.instance?.designation === FlowDesignationEnum.StageConfiguration}
>
${DesignationToLabel(FlowDesignationEnum.StageConfiguration)}
</option>
<option
value=${FlowDesignationEnum.Unenrollment}
?selected=${this.instance?.designation === FlowDesignationEnum.Unenrollment}
>
${DesignationToLabel(FlowDesignationEnum.Unenrollment)}
</option>
`;
}
renderDeniedAction(): TemplateResult {
return html` <option
value=${DeniedActionEnum.MessageContinue}
?selected=${this.instance?.deniedAction === DeniedActionEnum.MessageContinue}
>
${t`MESSAGE_CONTINUE will follow the ?next parameter if set, otherwise show a message.`}
</option>
<option
value=${DeniedActionEnum.Continue}
?selected=${this.instance?.deniedAction === DeniedActionEnum.Continue}
>
${t`CONTINUE will either follow the ?next parameter or redirect to the default interface.`}
</option>
<option
value=${DeniedActionEnum.Message}
?selected=${this.instance?.deniedAction === DeniedActionEnum.Message}
>
${t`MESSAGE will notify the user the flow isn't applicable.`}
</option>`;
}
renderAuthentication(): TemplateResult {
return html`
<option
value=${AuthenticationEnum.None}
?selected=${this.instance?.authentication === AuthenticationEnum.None}
>
${t`No requirement`}
</option>
<option
value=${AuthenticationEnum.RequireAuthenticated}
?selected=${this.instance?.authentication ===
AuthenticationEnum.RequireAuthenticated}
>
${t`Require authentication`}
</option>
<option
value=${AuthenticationEnum.RequireUnauthenticated}
?selected=${this.instance?.authentication ===
AuthenticationEnum.RequireUnauthenticated}
>
${t`Require no authentication.`}
</option>
<option
value=${AuthenticationEnum.RequireSuperuser}
?selected=${this.instance?.authentication === AuthenticationEnum.RequireSuperuser}
>
${t`Require superuser.`}
</option>
`;
}
renderLayout(): TemplateResult {
return html`
<option
value=${LayoutEnum.Stacked}
?selected=${this.instance?.layout === LayoutEnum.Stacked}
>
${LayoutToLabel(LayoutEnum.Stacked)}
</option>
<option
value=${LayoutEnum.ContentLeft}
?selected=${this.instance?.layout === LayoutEnum.ContentLeft}
>
${LayoutToLabel(LayoutEnum.ContentLeft)}
</option>
<option
value=${LayoutEnum.ContentRight}
?selected=${this.instance?.layout === LayoutEnum.ContentRight}
>
${LayoutToLabel(LayoutEnum.ContentRight)}
</option>
<option
value=${LayoutEnum.SidebarLeft}
?selected=${this.instance?.layout === LayoutEnum.SidebarLeft}
>
${LayoutToLabel(LayoutEnum.SidebarLeft)}
</option>
<option
value=${LayoutEnum.SidebarRight}
?selected=${this.instance?.layout === LayoutEnum.SidebarRight}
>
${LayoutToLabel(LayoutEnum.SidebarRight)}
</option>
`;
}
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name"> <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
@ -236,38 +104,6 @@ export class FlowForm extends ModelForm<Flow, string> {
/> />
<p class="pf-c-form__helper-text">${t`Visible in the URL.`}</p> <p class="pf-c-form__helper-text">${t`Visible in the URL.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Policy engine mode`}
?required=${true}
name="policyEngineMode"
>
<select class="pf-c-form-control">
<option
value=${PolicyEngineMode.Any}
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any}
>
${t`ANY, any policy must match to grant access.`}
</option>
<option
value=${PolicyEngineMode.All}
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.All}
>
${t`ALL, all policies must match to grant access.`}
</option>
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authentication`}
?required=${true}
name="authentication"
>
<select class="pf-c-form-control">
${this.renderAuthentication()}
</select>
<p class="pf-c-form__helper-text">
${t`Required authentication level for this flow.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Designation`} label=${t`Designation`}
?required=${true} ?required=${true}
@ -277,99 +113,264 @@ export class FlowForm extends ModelForm<Flow, string> {
<option value="" ?selected=${this.instance?.designation === undefined}> <option value="" ?selected=${this.instance?.designation === undefined}>
--------- ---------
</option> </option>
${this.renderDesignations()} <option
value=${FlowDesignationEnum.Authentication}
?selected=${this.instance?.designation ===
FlowDesignationEnum.Authentication}
>
${DesignationToLabel(FlowDesignationEnum.Authentication)}
</option>
<option
value=${FlowDesignationEnum.Authorization}
?selected=${this.instance?.designation ===
FlowDesignationEnum.Authorization}
>
${DesignationToLabel(FlowDesignationEnum.Authorization)}
</option>
<option
value=${FlowDesignationEnum.Enrollment}
?selected=${this.instance?.designation === FlowDesignationEnum.Enrollment}
>
${DesignationToLabel(FlowDesignationEnum.Enrollment)}
</option>
<option
value=${FlowDesignationEnum.Invalidation}
?selected=${this.instance?.designation === FlowDesignationEnum.Invalidation}
>
${DesignationToLabel(FlowDesignationEnum.Invalidation)}
</option>
<option
value=${FlowDesignationEnum.Recovery}
?selected=${this.instance?.designation === FlowDesignationEnum.Recovery}
>
${DesignationToLabel(FlowDesignationEnum.Recovery)}
</option>
<option
value=${FlowDesignationEnum.StageConfiguration}
?selected=${this.instance?.designation ===
FlowDesignationEnum.StageConfiguration}
>
${DesignationToLabel(FlowDesignationEnum.StageConfiguration)}
</option>
<option
value=${FlowDesignationEnum.Unenrollment}
?selected=${this.instance?.designation === FlowDesignationEnum.Unenrollment}
>
${DesignationToLabel(FlowDesignationEnum.Unenrollment)}
</option>
</select> </select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Decides what this Flow is used for. For example, the Authentication flow is redirect to when an un-authenticated user visits authentik.`} ${t`Decides what this Flow is used for. For example, the Authentication flow is redirect to when an un-authenticated user visits authentik.`}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Denied action`} label=${t`Authentication`}
?required=${true} ?required=${true}
name="deniedAction" name="authentication"
> >
<select class="pf-c-form-control"> <select class="pf-c-form-control">
${this.renderDeniedAction()} <option
value=${AuthenticationEnum.None}
?selected=${this.instance?.authentication === AuthenticationEnum.None}
>
${t`No requirement`}
</option>
<option
value=${AuthenticationEnum.RequireAuthenticated}
?selected=${this.instance?.authentication ===
AuthenticationEnum.RequireAuthenticated}
>
${t`Require authentication`}
</option>
<option
value=${AuthenticationEnum.RequireUnauthenticated}
?selected=${this.instance?.authentication ===
AuthenticationEnum.RequireUnauthenticated}
>
${t`Require no authentication.`}
</option>
<option
value=${AuthenticationEnum.RequireSuperuser}
?selected=${this.instance?.authentication ===
AuthenticationEnum.RequireSuperuser}
>
${t`Require superuser.`}
</option>
</select> </select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Decides the response when a policy denies access to this flow for a user.`} ${t`Required authentication level for this flow.`}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Layout`} ?required=${true} name="layout"> <ak-form-group>
<select class="pf-c-form-control"> <span slot="header"> ${t`Behavior settings`} </span>
${this.renderLayout()} <div slot="body" class="pf-c-form">
</select> <ak-form-element-horizontal name="compatibilityMode">
</ak-form-element-horizontal> <div class="pf-c-check">
${until( <input
config().then((c) => { type="checkbox"
if (c.capabilities.includes(CapabilitiesEnum.SaveMedia)) { class="pf-c-check__input"
return html`<ak-form-element-horizontal ?checked=${first(this.instance?.compatibilityMode, false)}
/>
<label class="pf-c-check__label"> ${t`Compatibility mode`} </label>
</div>
<p class="pf-c-form__helper-text">
${t`Increases compatibility with password managers and mobile devices.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Denied action`}
?required=${true}
name="deniedAction"
>
<ak-radio
.options=${[
{
label: "MESSAGE_CONTINUE",
value: DeniedActionEnum.MessageContinue,
default: true,
description: html`${t`Will follow the ?next parameter if set, otherwise show a message`}`,
},
{
label: "CONTINUE",
value: DeniedActionEnum.Continue,
description: html`${t`Will either follow the ?next parameter or redirect to the default interface`}`,
},
{
label: "MESSAGE",
value: DeniedActionEnum.Message,
description: html`${t`Will notify the user the flow isn't applicable`}`,
},
]}
.value=${this.instance?.deniedAction}
>
</ak-radio>
<p class="pf-c-form__helper-text">
${t`Decides the response when a policy denies access to this flow for a user.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Policy engine mode`}
?required=${true}
name="policyEngineMode"
>
<ak-radio
.options=${[
{
label: "ANY",
value: PolicyEngineMode.Any,
default: true,
description: html`${t`Any policy must match to grant access`}`,
},
{
label: "ALL",
value: PolicyEngineMode.All,
description: html`${t`All policies must match to grant access`}`,
},
]}
.value=${this.instance?.policyEngineMode}
>
</ak-radio>
</ak-form-element-horizontal>
</div>
</ak-form-group>
<ak-form-group>
<span slot="header"> ${t`Appearance settings`} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`Layout`} ?required=${true} name="layout">
<select class="pf-c-form-control">
<option
value=${LayoutEnum.Stacked}
?selected=${this.instance?.layout === LayoutEnum.Stacked}
>
${LayoutToLabel(LayoutEnum.Stacked)}
</option>
<option
value=${LayoutEnum.ContentLeft}
?selected=${this.instance?.layout === LayoutEnum.ContentLeft}
>
${LayoutToLabel(LayoutEnum.ContentLeft)}
</option>
<option
value=${LayoutEnum.ContentRight}
?selected=${this.instance?.layout === LayoutEnum.ContentRight}
>
${LayoutToLabel(LayoutEnum.ContentRight)}
</option>
<option
value=${LayoutEnum.SidebarLeft}
?selected=${this.instance?.layout === LayoutEnum.SidebarLeft}
>
${LayoutToLabel(LayoutEnum.SidebarLeft)}
</option>
<option
value=${LayoutEnum.SidebarRight}
?selected=${this.instance?.layout === LayoutEnum.SidebarRight}
>
${LayoutToLabel(LayoutEnum.SidebarRight)}
</option>
</select>
</ak-form-element-horizontal>
${until(
config().then((c) => {
if (c.capabilities.includes(CapabilitiesEnum.SaveMedia)) {
return html`<ak-form-element-horizontal
label=${t`Background`}
name="background"
>
<input type="file" value="" class="pf-c-form-control" />
${this.instance?.background
? html`
<p class="pf-c-form__helper-text">
${t`Currently set to:`}
${this.instance?.background}
</p>
`
: html``}
<p class="pf-c-form__helper-text">
${t`Background shown during execution.`}
</p>
</ak-form-element-horizontal>
${this.instance?.background
? html`
<ak-form-element-horizontal>
<div class="pf-c-check">
<input
type="checkbox"
class="pf-c-check__input"
@change=${(ev: Event) => {
const target =
ev.target as HTMLInputElement;
this.clearBackground = target.checked;
}}
/>
<label class="pf-c-check__label">
${t`Clear background image`}
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Delete currently set background image.`}
</p>
</ak-form-element-horizontal>
`
: html``}`;
}
return html`<ak-form-element-horizontal
label=${t`Background`} label=${t`Background`}
name="background" name="background"
> >
<input type="file" value="" class="pf-c-form-control" /> <input
${this.instance?.background type="text"
? html` value="${first(this.instance?.background, "")}"
<p class="pf-c-form__helper-text"> class="pf-c-form-control"
${t`Currently set to:`} ${this.instance?.background} />
</p>
`
: html``}
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Background shown during execution.`} ${t`Background shown during execution.`}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>`;
${this.instance?.background }),
? html` )}
<ak-form-element-horizontal>
<div class="pf-c-check">
<input
type="checkbox"
class="pf-c-check__input"
@change=${(ev: Event) => {
const target = ev.target as HTMLInputElement;
this.clearBackground = target.checked;
}}
/>
<label class="pf-c-check__label">
${t`Clear background image`}
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Delete currently set background image.`}
</p>
</ak-form-element-horizontal>
`
: html``}`;
}
return html`<ak-form-element-horizontal
label=${t`Background`}
name="background"
>
<input
type="text"
value="${first(this.instance?.background, "")}"
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
${t`Background shown during execution.`}
</p>
</ak-form-element-horizontal>`;
}),
)}
<ak-form-element-horizontal name="compatibilityMode">
<div class="pf-c-check">
<input
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.compatibilityMode, false)}
/>
<label class="pf-c-check__label"> ${t`Compatibility mode`} </label>
</div> </div>
<p class="pf-c-form__helper-text"> </ak-form-group>
${t`Enable compatibility mode, increases compatibility with password managers on mobile devices.`}
</p>
</ak-form-element-horizontal>
</form>`; </form>`;
} }
} }

83
web/src/admin/flows/StageBindingForm.ts
View File

@ -1,8 +1,9 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first, groupBy } from "@goauthentik/common/utils"; import { first, groupBy } from "@goauthentik/common/utils";
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 "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -165,35 +166,34 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Invalid response action`} label=${t`Invalid response behavior`}
?required=${true} ?required=${true}
name="invalidResponseAction" name="invalidResponseAction"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value=${InvalidResponseActionEnum.Retry} {
?selected=${this.instance?.invalidResponseAction === label: "RETRY",
InvalidResponseActionEnum.Retry} value: InvalidResponseActionEnum.Retry,
> default: true,
${t`RETRY returns the error message and a similar challenge to the executor.`} description: html`${t`Returns the error message and a similar challenge to the executor`}`,
</option> },
<option {
value=${InvalidResponseActionEnum.Restart} label: "RESTART",
?selected=${this.instance?.invalidResponseAction === value: InvalidResponseActionEnum.Restart,
InvalidResponseActionEnum.Restart} description: html`${t`Restarts the flow from the beginning`}`,
> },
${t`RESTART restarts the flow from the beginning.`} {
</option> label: "RESTART_WITH_CONTEXT",
<option value: InvalidResponseActionEnum.RestartWithContext,
value=${InvalidResponseActionEnum.RestartWithContext} description: html`${t`Restarts the flow from the beginning, while keeping the flow context`}`,
?selected=${this.instance?.invalidResponseAction === },
InvalidResponseActionEnum.RestartWithContext} ]}
> .value=${this.instance?.invalidResponseAction}
${t`RESTART_WITH_CONTEXT restarts the flow from the beginning, while keeping the flow context.`} >
</option> </ak-radio>
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Configure how the flow executor should handle an invalid response to a challenge.`} ${t`Configure how the flow executor should handle an invalid response to a challenge given by this bound stage.`}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
@ -201,20 +201,23 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
?required=${true} ?required=${true}
name="policyEngineMode" name="policyEngineMode"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value=${PolicyEngineMode.Any} {
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any} label: "ANY",
> value: PolicyEngineMode.Any,
${t`ANY, any policy must match to include this stage access.`} default: true,
</option> description: html`${t`Any policy must match to grant access`}`,
<option },
value=${PolicyEngineMode.All} {
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.All} label: "ALL",
> value: PolicyEngineMode.All,
${t`ALL, all policies must match to include this stage access.`} description: html`${t`All policies must match to grant access`}`,
</option> },
</select> ]}
.value=${this.instance?.policyEngineMode}
>
</ak-radio>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }

2
web/src/admin/groups/GroupForm.ts
View File

@ -2,11 +2,11 @@ import "@goauthentik/admin/groups/MemberSelectModal";
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/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/chips/Chip"; import "@goauthentik/elements/chips/Chip";
import "@goauthentik/elements/chips/ChipGroup"; import "@goauthentik/elements/chips/ChipGroup";
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 "@goauthentik/elements/forms/SearchSelect";
import { UserOption } from "@goauthentik/elements/user/utils"; import { UserOption } from "@goauthentik/elements/user/utils";
import YAML from "yaml"; import YAML from "yaml";

2
web/src/admin/outposts/OutpostForm.ts
View File

@ -2,9 +2,9 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import { groupBy } from "@goauthentik/common/utils"; import { groupBy } 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 "@goauthentik/elements/forms/SearchSelect";
import YAML from "yaml"; import YAML from "yaml";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/outposts/ServiceConnectionDockerForm.ts
View File

@ -1,8 +1,8 @@
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/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/policies/PolicyBindingForm.ts
View File

@ -1,8 +1,8 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first, groupBy } from "@goauthentik/common/utils"; import { first, groupBy } from "@goauthentik/common/utils";
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 "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/policies/PolicyTestForm.ts
View File

@ -2,9 +2,9 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { PFColor } from "@goauthentik/elements/Label"; import { PFColor } from "@goauthentik/elements/Label";
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";
import "@goauthentik/elements/forms/SearchSelect";
import YAML from "yaml"; import YAML from "yaml";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
View File

@ -1,9 +1,9 @@
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/property-mappings/PropertyMappingTestForm.ts
View File

@ -1,9 +1,9 @@
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/CodeMirror"; import "@goauthentik/elements/CodeMirror";
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";
import "@goauthentik/elements/forms/SearchSelect";
import YAML from "yaml"; import YAML from "yaml";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

66
web/src/admin/providers/ldap/LDAPProviderForm.ts
View File

@ -1,9 +1,10 @@
import { DEFAULT_CONFIG, tenant } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG, tenant } 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";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -146,44 +147,49 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Bind mode`} name="bindMode"> <ak-form-element-horizontal label=${t`Bind mode`} name="bindMode">
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value="${LDAPAPIAccessMode.Cached}" {
?selected=${this.instance?.bindMode === LDAPAPIAccessMode.Cached} label: t`Cached binding`,
> value: LDAPAPIAccessMode.Cached,
${t`Cached binding, flow is executed and session is cached in memory. Flow is executed when session expires.`} default: true,
</option> description: html`${t`Flow is executed and session is cached in memory. Flow is executed when session expires`}`,
<option },
value="${LDAPAPIAccessMode.Direct}" {
?selected=${this.instance?.bindMode === LDAPAPIAccessMode.Direct} label: t`Direct binding`,
> value: LDAPAPIAccessMode.Direct,
${t`Direct binding, always execute the configured bind flow to authenticate the user.`} description: html`${t`Always execute the configured bind flow to authenticate the user`}`,
</option> },
</select> ]}
.value=${this.instance?.bindMode}
>
</ak-radio>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Configure how the outpost authenticates requests.`} ${t`Configure how the outpost authenticates requests.`}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Search mode`} name="searchMode"> <ak-form-element-horizontal label=${t`Search mode`} name="searchMode">
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value="${LDAPAPIAccessMode.Cached}" {
?selected=${this.instance?.searchMode === LDAPAPIAccessMode.Cached} label: t`Cached querying`,
> value: LDAPAPIAccessMode.Cached,
${t`Cached querying, the outpost holds all users and groups in-memory and will refresh every 5 Minutes.`} default: true,
</option> description: html`${t`The outpost holds all users and groups in-memory and will refresh every 5 Minutes`}`,
<option },
value="${LDAPAPIAccessMode.Direct}" {
?selected=${this.instance?.searchMode === LDAPAPIAccessMode.Direct} label: t`Direct querying`,
> value: LDAPAPIAccessMode.Direct,
${t`Direct querying, always returns the latest data, but slower than cached querying.`} description: html`${t`Always returns the latest data, but slower than cached querying`}`,
</option> },
</select> ]}
.value=${this.instance?.searchMode}
>
</ak-radio>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Configure how the outpost queries the core authentik server's users.`} ${t`Configure how the outpost queries the core authentik server's users.`}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> ${t`Protocol settings`} </span> <span slot="header"> ${t`Protocol settings`} </span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">

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

@ -1,9 +1,10 @@
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";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import "@goauthentik/elements/utils/TimeDeltaHelp"; import "@goauthentik/elements/utils/TimeDeltaHelp";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -365,21 +366,21 @@ ${this.instance?.redirectUris}</textarea
?required=${true} ?required=${true}
name="issuerMode" name="issuerMode"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value="${IssuerModeEnum.PerProvider}" {
?selected=${this.instance?.issuerMode === label: t`Each provider has a different issuer, based on the application slug`,
IssuerModeEnum.PerProvider} value: IssuerModeEnum.PerProvider,
> default: true,
${t`Each provider has a different issuer, based on the application slug.`} },
</option> {
<option label: t`Same identifier is used for all providers`,
value="${IssuerModeEnum.Global}" value: IssuerModeEnum.Global,
?selected=${this.instance?.issuerMode === IssuerModeEnum.Global} },
> ]}
${t`Same identifier is used for all providers`} .value=${this.instance?.issuerMode}
</option> >
</select> </ak-radio>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Configure how the issuer field of the ID Token should be filled.`} ${t`Configure how the issuer field of the ID Token should be filled.`}
</p> </p>

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

@ -1,9 +1,9 @@
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";
import "@goauthentik/elements/forms/SearchSelect";
import "@goauthentik/elements/utils/TimeDeltaHelp"; import "@goauthentik/elements/utils/TimeDeltaHelp";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

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

@ -1,8 +1,9 @@
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";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import "@goauthentik/elements/utils/TimeDeltaHelp"; import "@goauthentik/elements/utils/TimeDeltaHelp";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -130,20 +131,21 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
?required=${true} ?required=${true}
name="spBinding" name="spBinding"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value=${SpBindingEnum.Redirect} {
?selected=${this.instance?.spBinding === SpBindingEnum.Redirect} label: t`Redirect`,
> value: SpBindingEnum.Redirect,
${t`Redirect`} default: true,
</option> },
<option {
value=${SpBindingEnum.Post} label: t`Post`,
?selected=${this.instance?.spBinding === SpBindingEnum.Post} value: SpBindingEnum.Post,
> },
${t`Post`} ]}
</option> .value=${this.instance?.spBinding}
</select> >
</ak-radio>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Determines how authentik sends the response back to the Service Provider.`} ${t`Determines how authentik sends the response back to the Service Provider.`}
</p> </p>
@ -366,81 +368,62 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
?required=${true} ?required=${true}
name="digestAlgorithm" name="digestAlgorithm"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value=${DigestAlgorithmEnum._200009Xmldsigsha1} {
?selected=${this.instance?.digestAlgorithm === label: "SHA1",
DigestAlgorithmEnum._200009Xmldsigsha1} value: DigestAlgorithmEnum._200009Xmldsigsha1,
> },
${t`SHA1`} {
</option> label: "SHA256",
<option value: DigestAlgorithmEnum._200104Xmlencsha256,
value=${DigestAlgorithmEnum._200104Xmlencsha256} default: true,
?selected=${this.instance?.digestAlgorithm === },
DigestAlgorithmEnum._200104Xmlencsha256 || {
this.instance?.digestAlgorithm === undefined} label: "SHA384",
> value: DigestAlgorithmEnum._200104XmldsigMoresha384,
${t`SHA256`} },
</option> {
<option label: "SHA512",
value=${DigestAlgorithmEnum._200104XmldsigMoresha384} value: DigestAlgorithmEnum._200104Xmlencsha512,
?selected=${this.instance?.digestAlgorithm === },
DigestAlgorithmEnum._200104XmldsigMoresha384} ]}
> .value=${this.instance?.digestAlgorithm}
${t`SHA384`} >
</option> </ak-radio>
<option
value=${DigestAlgorithmEnum._200104Xmlencsha512}
?selected=${this.instance?.digestAlgorithm ===
DigestAlgorithmEnum._200104Xmlencsha512}
>
${t`SHA512`}
</option>
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Signature algorithm`} label=${t`Signature algorithm`}
?required=${true} ?required=${true}
name="signatureAlgorithm" name="signatureAlgorithm"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value=${SignatureAlgorithmEnum._200009XmldsigrsaSha1} {
?selected=${this.instance?.signatureAlgorithm === label: "RSA-SHA1",
SignatureAlgorithmEnum._200009XmldsigrsaSha1} value: SignatureAlgorithmEnum._200009XmldsigrsaSha1,
> },
${t`RSA-SHA1`} {
</option> label: "RSA-SHA256",
<option value: SignatureAlgorithmEnum._200104XmldsigMorersaSha256,
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha256} default: true,
?selected=${this.instance?.signatureAlgorithm === },
SignatureAlgorithmEnum._200104XmldsigMorersaSha256 || {
this.instance?.signatureAlgorithm === undefined} label: "RSA-SHA384",
> value: SignatureAlgorithmEnum._200104XmldsigMorersaSha384,
${t`RSA-SHA256`} },
</option> {
<option label: "RSA-SHA512",
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha384} value: SignatureAlgorithmEnum._200104XmldsigMorersaSha512,
?selected=${this.instance?.signatureAlgorithm === },
SignatureAlgorithmEnum._200104XmldsigMorersaSha384} {
> label: "DSA-SHA1",
${t`RSA-SHA384`} value: SignatureAlgorithmEnum._200009XmldsigdsaSha1,
</option> },
<option ]}
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha512} .value=${this.instance?.signatureAlgorithm}
?selected=${this.instance?.signatureAlgorithm === >
SignatureAlgorithmEnum._200104XmldsigMorersaSha512} </ak-radio>
>
${t`RSA-SHA512`}
</option>
<option
value=${SignatureAlgorithmEnum._200009XmldsigdsaSha1}
?selected=${this.instance?.signatureAlgorithm ===
SignatureAlgorithmEnum._200009XmldsigdsaSha1}
>
${t`DSA-SHA1`}
</option>
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>
</ak-form-group> </ak-form-group>

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

@ -1,8 +1,8 @@
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/sources/ldap/LDAPSourceForm.ts
View File

@ -1,9 +1,9 @@
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/sources/oauth/OAuthSourceForm.ts
View File

@ -2,10 +2,10 @@ import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils"
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/sources/plex/PlexSourceForm.ts
View File

@ -2,10 +2,10 @@ import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils"
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
import { PlexAPIClient, PlexResource, popupCenterScreen } from "@goauthentik/common/helpers/plex"; import { PlexAPIClient, PlexResource, popupCenterScreen } from "@goauthentik/common/helpers/plex";
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

160
web/src/admin/sources/saml/SAMLSourceForm.ts
View File

@ -4,6 +4,7 @@ import { first } from "@goauthentik/common/utils";
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";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/utils/TimeDeltaHelp"; import "@goauthentik/elements/utils/TimeDeltaHelp";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -242,26 +243,26 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
?required=${true} ?required=${true}
name="bindingType" name="bindingType"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value=${BindingTypeEnum.Redirect} {
?selected=${this.instance?.bindingType === BindingTypeEnum.Redirect} label: t`Redirect binding`,
> value: BindingTypeEnum.Redirect,
${t`Redirect binding`} default: true,
</option> },
<option {
value=${BindingTypeEnum.PostAuto} label: t`Post-auto binding`,
?selected=${this.instance?.bindingType === BindingTypeEnum.PostAuto} value: BindingTypeEnum.PostAuto,
> description: html`${t`Post binding but the request is automatically sent and the user doesn't have to confirm.`}`,
${t`Post binding (auto-submit)`} },
</option> {
<option label: t`Post binding`,
value=${BindingTypeEnum.Post} value: BindingTypeEnum.Post,
?selected=${this.instance?.bindingType === BindingTypeEnum.Post} },
> ]}
${t`Post binding`} .value=${this.instance?.bindingType}
</option> >
</select> </ak-radio>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Signing keypair`} name="signingKp"> <ak-form-element-horizontal label=${t`Signing keypair`} name="signingKp">
<ak-search-select <ak-search-select
@ -394,81 +395,62 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
?required=${true} ?required=${true}
name="digestAlgorithm" name="digestAlgorithm"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value=${DigestAlgorithmEnum._200009Xmldsigsha1} {
?selected=${this.instance?.digestAlgorithm === label: "SHA1",
DigestAlgorithmEnum._200009Xmldsigsha1} value: DigestAlgorithmEnum._200009Xmldsigsha1,
> },
${t`SHA1`} {
</option> label: "SHA256",
<option value: DigestAlgorithmEnum._200104Xmlencsha256,
value=${DigestAlgorithmEnum._200104Xmlencsha256} default: true,
?selected=${this.instance?.digestAlgorithm === },
DigestAlgorithmEnum._200104Xmlencsha256 || {
this.instance?.digestAlgorithm === undefined} label: "SHA384",
> value: DigestAlgorithmEnum._200104XmldsigMoresha384,
${t`SHA256`} },
</option> {
<option label: "SHA512",
value=${DigestAlgorithmEnum._200104XmldsigMoresha384} value: DigestAlgorithmEnum._200104Xmlencsha512,
?selected=${this.instance?.digestAlgorithm === },
DigestAlgorithmEnum._200104XmldsigMoresha384} ]}
> .value=${this.instance?.digestAlgorithm}
${t`SHA384`} >
</option> </ak-radio>
<option
value=${DigestAlgorithmEnum._200104Xmlencsha512}
?selected=${this.instance?.digestAlgorithm ===
DigestAlgorithmEnum._200104Xmlencsha512}
>
${t`SHA512`}
</option>
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Signature algorithm`} label=${t`Signature algorithm`}
?required=${true} ?required=${true}
name="signatureAlgorithm" name="signatureAlgorithm"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value=${SignatureAlgorithmEnum._200009XmldsigrsaSha1} {
?selected=${this.instance?.signatureAlgorithm === label: "RSA-SHA1",
SignatureAlgorithmEnum._200009XmldsigrsaSha1} value: SignatureAlgorithmEnum._200009XmldsigrsaSha1,
> },
${t`RSA-SHA1`} {
</option> label: "RSA-SHA256",
<option value: SignatureAlgorithmEnum._200104XmldsigMorersaSha256,
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha256} default: true,
?selected=${this.instance?.signatureAlgorithm === },
SignatureAlgorithmEnum._200104XmldsigMorersaSha256 || {
this.instance?.signatureAlgorithm === undefined} label: "RSA-SHA384",
> value: SignatureAlgorithmEnum._200104XmldsigMorersaSha384,
${t`RSA-SHA256`} },
</option> {
<option label: "RSA-SHA512",
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha384} value: SignatureAlgorithmEnum._200104XmldsigMorersaSha512,
?selected=${this.instance?.signatureAlgorithm === },
SignatureAlgorithmEnum._200104XmldsigMorersaSha384} {
> label: "DSA-SHA1",
${t`RSA-SHA384`} value: SignatureAlgorithmEnum._200009XmldsigdsaSha1,
</option> },
<option ]}
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha512} .value=${this.instance?.signatureAlgorithm}
?selected=${this.instance?.signatureAlgorithm === >
SignatureAlgorithmEnum._200104XmldsigMorersaSha512} </ak-radio>
>
${t`RSA-SHA512`}
</option>
<option
value=${SignatureAlgorithmEnum._200009XmldsigdsaSha1}
?selected=${this.instance?.signatureAlgorithm ===
SignatureAlgorithmEnum._200009XmldsigdsaSha1}
>
${t`DSA-SHA1`}
</option>
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>
</ak-form-group> </ak-form-group>

2
web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
View File

@ -1,9 +1,9 @@
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
View File

@ -1,11 +1,11 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { MessageLevel } from "@goauthentik/common/messages"; import { MessageLevel } from "@goauthentik/common/messages";
import "@goauthentik/elements/Divider"; import "@goauthentik/elements/Divider";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/buttons/ActionButton"; import "@goauthentik/elements/buttons/ActionButton";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModalForm } from "@goauthentik/elements/forms/ModalForm"; import { ModalForm } from "@goauthentik/elements/forms/ModalForm";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/SearchSelect";
import { showMessage } from "@goauthentik/elements/messages/MessageContainer"; import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

32
web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
View File

@ -1,9 +1,10 @@
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";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -106,20 +107,21 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
?required=${true} ?required=${true}
name="authType" name="authType"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value="${AuthTypeEnum.Basic}" {
?selected=${this.instance?.authType === AuthTypeEnum.Basic} label: t`Basic Auth`,
> value: AuthTypeEnum.Basic,
${t`Basic Auth`} default: true,
</option> },
<option {
value="${AuthTypeEnum.Bearer}" label: t`Bearer Token`,
?selected=${this.instance?.authType === AuthTypeEnum.Bearer} value: AuthTypeEnum.Bearer,
> },
${t`Bearer Token`} ]}
</option> .value=${this.instance?.authType}
</select> >
</ak-radio>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`External API URL`} label=${t`External API URL`}

2
web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts
View File

@ -1,8 +1,8 @@
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/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
View File

@ -1,8 +1,8 @@
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts
View File

@ -1,7 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
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 "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/stages/identification/IdentificationStageForm.ts
View File

@ -1,9 +1,9 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first, groupBy } from "@goauthentik/common/utils"; import { first, groupBy } 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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

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

@ -1,9 +1,9 @@
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 "@goauthentik/elements/forms/SearchSelect";
import YAML from "yaml"; import YAML from "yaml";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/stages/password/PasswordStageForm.ts
View File

@ -1,9 +1,9 @@
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/stages/user_write/UserWriteStageForm.ts
View File

@ -1,9 +1,9 @@
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/admin/tenants/TenantForm.ts
View File

@ -1,10 +1,10 @@
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/CodeMirror"; import "@goauthentik/elements/CodeMirror";
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";
import "@goauthentik/elements/forms/SearchSelect";
import { DefaultTenant } from "@goauthentik/elements/sidebar/SidebarBrand"; import { DefaultTenant } from "@goauthentik/elements/sidebar/SidebarBrand";
import YAML from "yaml"; import YAML from "yaml";

34
web/src/admin/tokens/TokenForm.ts
View File

@ -1,9 +1,10 @@
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/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";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -82,20 +83,23 @@ export class TokenForm extends ModelForm<Token, string> {
</ak-search-select> </ak-search-select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Intent`} ?required=${true} name="intent"> <ak-form-element-horizontal label=${t`Intent`} ?required=${true} name="intent">
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value=${IntentEnum.Api} {
?selected=${this.instance?.intent === IntentEnum.Api} label: t`API Token`,
> value: IntentEnum.Api,
${t`API Token (can be used to access the API programmatically)`} default: true,
</option> description: html`${t`Used to access the API programmatically`}`,
<option },
value=${IntentEnum.AppPassword} {
?selected=${this.instance?.intent === IntentEnum.AppPassword} label: t`App password.`,
> value: IntentEnum.AppPassword,
${t`App password (can be used to login using a flow executor)`} description: html`${t`Used to login using a flow executor`}`,
</option> },
</select> ]}
.value=${this.instance?.intent}
>
</ak-radio>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Description`} name="description"> <ak-form-element-horizontal label=${t`Description`} name="description">
<input <input

2
web/src/admin/users/UserResetEmailForm.ts
View File

@ -1,8 +1,8 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { groupBy } from "@goauthentik/common/utils"; import { groupBy } from "@goauthentik/common/utils";
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";
import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";

2
web/src/elements/forms/Form.ts
View File

@ -2,8 +2,8 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { MessageLevel } from "@goauthentik/common/messages"; import { MessageLevel } from "@goauthentik/common/messages";
import { camelToSnake, convertToSlug } from "@goauthentik/common/utils"; import { camelToSnake, convertToSlug } from "@goauthentik/common/utils";
import { AKElement } from "@goauthentik/elements/Base"; import { AKElement } from "@goauthentik/elements/Base";
import { SearchSelect } from "@goauthentik/elements/SearchSelect";
import { HorizontalFormElement } from "@goauthentik/elements/forms/HorizontalFormElement"; import { HorizontalFormElement } from "@goauthentik/elements/forms/HorizontalFormElement";
import { SearchSelect } from "@goauthentik/elements/forms/SearchSelect";
import { showMessage } from "@goauthentik/elements/messages/MessageContainer"; import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
import "@polymer/iron-form/iron-form"; import "@polymer/iron-form/iron-form";
import { IronFormElement } from "@polymer/iron-form/iron-form"; import { IronFormElement } from "@polymer/iron-form/iron-form";

1
web/src/elements/forms/HorizontalFormElement.ts
View File

@ -90,6 +90,7 @@ export class HorizontalFormElement extends AKElement {
case "ak-codemirror": case "ak-codemirror":
case "ak-chip-group": case "ak-chip-group":
case "ak-search-select": case "ak-search-select":
case "ak-radio":
(input as HTMLInputElement).name = this.name; (input as HTMLInputElement).name = this.name;
break; break;
default: default:

11
web/src/elements/forms/ModalForm.ts
View File

@ -65,7 +65,16 @@ export class ModalForm extends ModalButton {
</h1> </h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body"> <section
class="pf-c-modal-box__body"
@scroll=${() => {
window.dispatchEvent(
new CustomEvent("scroll", {
bubbles: true,
}),
);
}}
>
<slot name="form"></slot> <slot name="form"></slot>
</section> </section>
<footer class="pf-c-modal-box__footer"> <footer class="pf-c-modal-box__footer">

81
web/src/elements/forms/Radio.ts Normal file
View File

@ -0,0 +1,81 @@
import { AKElement } from "@goauthentik/elements/Base";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
export interface RadioOption<T> {
label: string;
description?: TemplateResult;
default: boolean;
value: T;
}
@customElement("ak-radio")
export class Radio<T> extends AKElement {
@property({ attribute: false })
options: RadioOption<T>[] = [];
@property()
name = "";
@property()
value?: T;
@property({ attribute: false })
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onChange: (value: T) => void = (value: T) => {
return;
};
static get styles(): CSSResult[] {
return [
PFBase,
PFRadio,
PFForm,
AKGlobal,
css`
.pf-c-form__group-control {
padding-top: calc(
var(--pf-c-form--m-horizontal__group-label--md--PaddingTop) * 1.3
);
}
`,
];
}
render(): TemplateResult {
if (!this.value) {
const def = this.options.filter((opt) => opt.default);
if (def.length > 0) {
this.value = def[0].value;
}
}
return html`<div class="pf-c-form__group-control pf-m-stack">
${this.options.map((opt) => {
const elId = `${this.name}-${opt.value}`;
return html`<div class="pf-c-radio">
<input
class="pf-c-radio__input"
type="radio"
name="${this.name}"
id=${elId}
@change=${() => {
this.value = opt.value;
this.onChange(opt.value);
}}
.checked=${opt.value === this.value}
/>
<label class="pf-c-radio__label" for=${elId}>${opt.label}</label>
${opt.description
? html`<span class="pf-c-radio__description">${opt.description}</span>`
: html``}
</div>`;
})}
</div>`;
}
}

24
web/src/elements/SearchSelect.ts → web/src/elements/forms/SearchSelect.ts
View File

@ -66,11 +66,25 @@ export class SearchSelect<T> extends AKElement {
}); });
}; };
scrollHandler?: () => void;
observer: IntersectionObserver;
dropdownContainer: HTMLDivElement; dropdownContainer: HTMLDivElement;
constructor() { constructor() {
super(); super();
this.dropdownContainer = document.createElement("div"); this.dropdownContainer = document.createElement("div");
this.observer = new IntersectionObserver(() => {
this.open = false;
this.shadowRoot
?.querySelectorAll<HTMLInputElement>(
".pf-c-form-control.pf-c-select__toggle-typeahead",
)
.forEach((input) => {
input.blur();
});
});
this.observer.observe(this);
} }
toForm(): unknown { toForm(): unknown {
@ -102,12 +116,20 @@ export class SearchSelect<T> extends AKElement {
document.body.append(this.dropdownContainer); document.body.append(this.dropdownContainer);
this.updateData(); this.updateData();
this.addEventListener(EVENT_REFRESH, this.updateData); this.addEventListener(EVENT_REFRESH, this.updateData);
this.scrollHandler = () => {
this.requestUpdate();
};
window.addEventListener("scroll", this.scrollHandler);
} }
disconnectedCallback(): void { disconnectedCallback(): void {
super.disconnectedCallback(); super.disconnectedCallback();
this.removeEventListener(EVENT_REFRESH, this.updateData); this.removeEventListener(EVENT_REFRESH, this.updateData);
if (this.scrollHandler) {
window.removeEventListener("scroll", this.scrollHandler);
}
this.dropdownContainer.remove(); this.dropdownContainer.remove();
this.observer.disconnect();
} }
/* /*
@ -238,7 +260,7 @@ export class SearchSelect<T> extends AKElement {
setTimeout(() => { setTimeout(() => {
this.open = false; this.open = false;
this.renderMenu(); this.renderMenu();
}, 200); }, 100);
}} }}
.value=${this.selectedObject .value=${this.selectedObject
? this.renderElement(this.selectedObject) ? this.renderElement(this.selectedObject)