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
GitHub
parent
9564894eda
commit
ba5cd6e719
|
|
@ -1,8 +1,8 @@
|
|||
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 "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import "@goauthentik/admin/providers/ProviderWizard";
|
||||
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
|
||||
import { first, groupBy } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/FormGroup";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import "@goauthentik/elements/forms/ModalForm";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/ProxyForm";
|
||||
import "@goauthentik/elements/forms/Radio";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
@ -153,20 +154,23 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
|||
?required=${true}
|
||||
name="policyEngineMode"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${PolicyEngineMode.Any}
|
||||
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any}
|
||||
<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}
|
||||
>
|
||||
${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-radio>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-group .expanded=${true}>
|
||||
<span slot="header"> ${t`UI settings`} </span>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import { KeyUnknown } from "@goauthentik/elements/forms/Form";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import { WizardFormPage } from "@goauthentik/elements/wizard/WizardFormPage";
|
||||
import "@goauthentik/elements/wizard/WizardFormPage";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
|||
import { docLink } from "@goauthentik/common/global";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/CodeMirror";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/FormGroup";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import YAML from "yaml";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/Radio";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
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 {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<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-form-element-horizontal>
|
||||
<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(
|
||||
new EventsApi(DEFAULT_CONFIG)
|
||||
.eventsTransportsList({})
|
||||
.eventsTransportsList({
|
||||
ordering: "name",
|
||||
})
|
||||
.then((transports) => {
|
||||
return transports.results.map((transport) => {
|
||||
const selected = Array.from(
|
||||
|
|
@ -137,9 +117,25 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
|
|||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Severity`} ?required=${true} name="severity">
|
||||
<select class="pf-c-form-control">
|
||||
${this.renderSeverity()}
|
||||
</select>
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
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>
|
||||
</form>`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@ import { DesignationToLabel, LayoutToLabel } from "@goauthentik/admin/flows/util
|
|||
import { AuthenticationEnum } from "@goauthentik/api/dist/models/AuthenticationEnum";
|
||||
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/forms/FormGroup";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/Radio";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
@ -74,17 +76,54 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
return flow;
|
||||
};
|
||||
|
||||
renderDesignations(): TemplateResult {
|
||||
return html`
|
||||
renderForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Title`} ?required=${true} name="title">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.title)}"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">${t`Shown as the Title in Flow pages.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Slug`} ?required=${true} name="slug">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.slug)}"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">${t`Visible in the URL.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Designation`}
|
||||
?required=${true}
|
||||
name="designation"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.instance?.designation === undefined}>
|
||||
---------
|
||||
</option>
|
||||
<option
|
||||
value=${FlowDesignationEnum.Authentication}
|
||||
?selected=${this.instance?.designation === FlowDesignationEnum.Authentication}
|
||||
?selected=${this.instance?.designation ===
|
||||
FlowDesignationEnum.Authentication}
|
||||
>
|
||||
${DesignationToLabel(FlowDesignationEnum.Authentication)}
|
||||
</option>
|
||||
<option
|
||||
value=${FlowDesignationEnum.Authorization}
|
||||
?selected=${this.instance?.designation === FlowDesignationEnum.Authorization}
|
||||
?selected=${this.instance?.designation ===
|
||||
FlowDesignationEnum.Authorization}
|
||||
>
|
||||
${DesignationToLabel(FlowDesignationEnum.Authorization)}
|
||||
</option>
|
||||
|
|
@ -108,7 +147,8 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
</option>
|
||||
<option
|
||||
value=${FlowDesignationEnum.StageConfiguration}
|
||||
?selected=${this.instance?.designation === FlowDesignationEnum.StageConfiguration}
|
||||
?selected=${this.instance?.designation ===
|
||||
FlowDesignationEnum.StageConfiguration}
|
||||
>
|
||||
${DesignationToLabel(FlowDesignationEnum.StageConfiguration)}
|
||||
</option>
|
||||
|
|
@ -118,32 +158,17 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
>
|
||||
${DesignationToLabel(FlowDesignationEnum.Unenrollment)}
|
||||
</option>
|
||||
`;
|
||||
}
|
||||
|
||||
renderDeniedAction(): TemplateResult {
|
||||
return html` <option
|
||||
value=${DeniedActionEnum.MessageContinue}
|
||||
?selected=${this.instance?.deniedAction === DeniedActionEnum.MessageContinue}
|
||||
</select>
|
||||
<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.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Authentication`}
|
||||
?required=${true}
|
||||
name="authentication"
|
||||
>
|
||||
${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`
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${AuthenticationEnum.None}
|
||||
?selected=${this.instance?.authentication === AuthenticationEnum.None}
|
||||
|
|
@ -166,15 +191,93 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
</option>
|
||||
<option
|
||||
value=${AuthenticationEnum.RequireSuperuser}
|
||||
?selected=${this.instance?.authentication === AuthenticationEnum.RequireSuperuser}
|
||||
?selected=${this.instance?.authentication ===
|
||||
AuthenticationEnum.RequireSuperuser}
|
||||
>
|
||||
${t`Require superuser.`}
|
||||
</option>
|
||||
`;
|
||||
}
|
||||
|
||||
renderLayout(): TemplateResult {
|
||||
return html`
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Required authentication level for this flow.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-group>
|
||||
<span slot="header"> ${t`Behavior settings`} </span>
|
||||
<div slot="body" class="pf-c-form">
|
||||
<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>
|
||||
<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}
|
||||
|
|
@ -205,99 +308,6 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
>
|
||||
${LayoutToLabel(LayoutEnum.SidebarRight)}
|
||||
</option>
|
||||
`;
|
||||
}
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Title`} ?required=${true} name="title">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.title)}"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">${t`Shown as the Title in Flow pages.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Slug`} ?required=${true} name="slug">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.slug)}"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">${t`Visible in the URL.`}</p>
|
||||
</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
|
||||
label=${t`Designation`}
|
||||
?required=${true}
|
||||
name="designation"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.instance?.designation === undefined}>
|
||||
---------
|
||||
</option>
|
||||
${this.renderDesignations()}
|
||||
</select>
|
||||
<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.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Denied action`}
|
||||
?required=${true}
|
||||
name="deniedAction"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
${this.renderDeniedAction()}
|
||||
</select>
|
||||
<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`Layout`} ?required=${true} name="layout">
|
||||
<select class="pf-c-form-control">
|
||||
${this.renderLayout()}
|
||||
</select>
|
||||
</ak-form-element-horizontal>
|
||||
${until(
|
||||
|
|
@ -311,7 +321,8 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
${this.instance?.background
|
||||
? html`
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Currently set to:`} ${this.instance?.background}
|
||||
${t`Currently set to:`}
|
||||
${this.instance?.background}
|
||||
</p>
|
||||
`
|
||||
: html``}
|
||||
|
|
@ -327,7 +338,8 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
type="checkbox"
|
||||
class="pf-c-check__input"
|
||||
@change=${(ev: Event) => {
|
||||
const target = ev.target as HTMLInputElement;
|
||||
const target =
|
||||
ev.target as HTMLInputElement;
|
||||
this.clearBackground = target.checked;
|
||||
}}
|
||||
/>
|
||||
|
|
@ -357,19 +369,8 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
</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>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Enable compatibility mode, increases compatibility with password managers on mobile devices.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
</ak-form-group>
|
||||
</form>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first, groupBy } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/Radio";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
@ -165,35 +166,34 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
|
|||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Invalid response action`}
|
||||
label=${t`Invalid response behavior`}
|
||||
?required=${true}
|
||||
name="invalidResponseAction"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${InvalidResponseActionEnum.Retry}
|
||||
?selected=${this.instance?.invalidResponseAction ===
|
||||
InvalidResponseActionEnum.Retry}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: "RETRY",
|
||||
value: InvalidResponseActionEnum.Retry,
|
||||
default: true,
|
||||
description: html`${t`Returns the error message and a similar challenge to the executor`}`,
|
||||
},
|
||||
{
|
||||
label: "RESTART",
|
||||
value: InvalidResponseActionEnum.Restart,
|
||||
description: html`${t`Restarts the flow from the beginning`}`,
|
||||
},
|
||||
{
|
||||
label: "RESTART_WITH_CONTEXT",
|
||||
value: InvalidResponseActionEnum.RestartWithContext,
|
||||
description: html`${t`Restarts the flow from the beginning, while keeping the flow context`}`,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.invalidResponseAction}
|
||||
>
|
||||
${t`RETRY returns the error message and a similar challenge to the executor.`}
|
||||
</option>
|
||||
<option
|
||||
value=${InvalidResponseActionEnum.Restart}
|
||||
?selected=${this.instance?.invalidResponseAction ===
|
||||
InvalidResponseActionEnum.Restart}
|
||||
>
|
||||
${t`RESTART restarts the flow from the beginning.`}
|
||||
</option>
|
||||
<option
|
||||
value=${InvalidResponseActionEnum.RestartWithContext}
|
||||
?selected=${this.instance?.invalidResponseAction ===
|
||||
InvalidResponseActionEnum.RestartWithContext}
|
||||
>
|
||||
${t`RESTART_WITH_CONTEXT restarts the flow from the beginning, while keeping the flow context.`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
<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>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
|
|
@ -201,20 +201,23 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
|
|||
?required=${true}
|
||||
name="policyEngineMode"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${PolicyEngineMode.Any}
|
||||
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any}
|
||||
<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}
|
||||
>
|
||||
${t`ANY, any policy must match to include this stage access.`}
|
||||
</option>
|
||||
<option
|
||||
value=${PolicyEngineMode.All}
|
||||
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.All}
|
||||
>
|
||||
${t`ALL, all policies must match to include this stage access.`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
</ak-form-element-horizontal>
|
||||
</form>`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import "@goauthentik/admin/groups/MemberSelectModal";
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/CodeMirror";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/chips/Chip";
|
||||
import "@goauthentik/elements/chips/ChipGroup";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import { UserOption } from "@goauthentik/elements/user/utils";
|
||||
import YAML from "yaml";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
|||
import { docLink } from "@goauthentik/common/global";
|
||||
import { groupBy } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/CodeMirror";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import YAML from "yaml";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first, groupBy } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ 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 "@goauthentik/elements/forms/SearchSelect";
|
||||
import YAML from "yaml";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { 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 "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/CodeMirror";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import { Form } from "@goauthentik/elements/forms/Form";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import YAML from "yaml";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { DEFAULT_CONFIG, tenant } from "@goauthentik/common/api/config";
|
||||
import { 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 "@goauthentik/elements/forms/Radio";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
@ -146,44 +147,49 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
|
|||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Bind mode`} name="bindMode">
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value="${LDAPAPIAccessMode.Cached}"
|
||||
?selected=${this.instance?.bindMode === LDAPAPIAccessMode.Cached}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: t`Cached binding`,
|
||||
value: LDAPAPIAccessMode.Cached,
|
||||
default: true,
|
||||
description: html`${t`Flow is executed and session is cached in memory. Flow is executed when session expires`}`,
|
||||
},
|
||||
{
|
||||
label: t`Direct binding`,
|
||||
value: LDAPAPIAccessMode.Direct,
|
||||
description: html`${t`Always execute the configured bind flow to authenticate the user`}`,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.bindMode}
|
||||
>
|
||||
${t`Cached binding, flow is executed and session is cached in memory. Flow is executed when session expires.`}
|
||||
</option>
|
||||
<option
|
||||
value="${LDAPAPIAccessMode.Direct}"
|
||||
?selected=${this.instance?.bindMode === LDAPAPIAccessMode.Direct}
|
||||
>
|
||||
${t`Direct binding, always execute the configured bind flow to authenticate the user.`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Configure how the outpost authenticates requests.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Search mode`} name="searchMode">
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value="${LDAPAPIAccessMode.Cached}"
|
||||
?selected=${this.instance?.searchMode === LDAPAPIAccessMode.Cached}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: t`Cached querying`,
|
||||
value: LDAPAPIAccessMode.Cached,
|
||||
default: true,
|
||||
description: html`${t`The outpost holds all users and groups in-memory and will refresh every 5 Minutes`}`,
|
||||
},
|
||||
{
|
||||
label: t`Direct querying`,
|
||||
value: LDAPAPIAccessMode.Direct,
|
||||
description: html`${t`Always returns the latest data, but slower than cached querying`}`,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.searchMode}
|
||||
>
|
||||
${t`Cached querying, the outpost holds all users and groups in-memory and will refresh every 5 Minutes.`}
|
||||
</option>
|
||||
<option
|
||||
value="${LDAPAPIAccessMode.Direct}"
|
||||
?selected=${this.instance?.searchMode === LDAPAPIAccessMode.Direct}
|
||||
>
|
||||
${t`Direct querying, always returns the latest data, but slower than cached querying.`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Configure how the outpost queries the core authentik server's users.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
||||
<ak-form-group .expanded=${true}>
|
||||
<span slot="header"> ${t`Protocol settings`} </span>
|
||||
<div slot="body" class="pf-c-form">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first, randomString } 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 "@goauthentik/elements/forms/Radio";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import "@goauthentik/elements/utils/TimeDeltaHelp";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
|
@ -365,21 +366,21 @@ ${this.instance?.redirectUris}</textarea
|
|||
?required=${true}
|
||||
name="issuerMode"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value="${IssuerModeEnum.PerProvider}"
|
||||
?selected=${this.instance?.issuerMode ===
|
||||
IssuerModeEnum.PerProvider}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: t`Each provider has a different issuer, based on the application slug`,
|
||||
value: IssuerModeEnum.PerProvider,
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
label: t`Same identifier is used for all providers`,
|
||||
value: IssuerModeEnum.Global,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.issuerMode}
|
||||
>
|
||||
${t`Each provider has a different issuer, based on the application slug.`}
|
||||
</option>
|
||||
<option
|
||||
value="${IssuerModeEnum.Global}"
|
||||
?selected=${this.instance?.issuerMode === IssuerModeEnum.Global}
|
||||
>
|
||||
${t`Same identifier is used for all providers`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Configure how the issuer field of the ID Token should be filled.`}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { 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 "@goauthentik/elements/forms/SearchSelect";
|
||||
import "@goauthentik/elements/utils/TimeDeltaHelp";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/FormGroup";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/Radio";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import "@goauthentik/elements/utils/TimeDeltaHelp";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
|
@ -130,20 +131,21 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
|
|||
?required=${true}
|
||||
name="spBinding"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${SpBindingEnum.Redirect}
|
||||
?selected=${this.instance?.spBinding === SpBindingEnum.Redirect}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: t`Redirect`,
|
||||
value: SpBindingEnum.Redirect,
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
label: t`Post`,
|
||||
value: SpBindingEnum.Post,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.spBinding}
|
||||
>
|
||||
${t`Redirect`}
|
||||
</option>
|
||||
<option
|
||||
value=${SpBindingEnum.Post}
|
||||
?selected=${this.instance?.spBinding === SpBindingEnum.Post}
|
||||
>
|
||||
${t`Post`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Determines how authentik sends the response back to the Service Provider.`}
|
||||
</p>
|
||||
|
|
@ -366,81 +368,62 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
|
|||
?required=${true}
|
||||
name="digestAlgorithm"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${DigestAlgorithmEnum._200009Xmldsigsha1}
|
||||
?selected=${this.instance?.digestAlgorithm ===
|
||||
DigestAlgorithmEnum._200009Xmldsigsha1}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: "SHA1",
|
||||
value: DigestAlgorithmEnum._200009Xmldsigsha1,
|
||||
},
|
||||
{
|
||||
label: "SHA256",
|
||||
value: DigestAlgorithmEnum._200104Xmlencsha256,
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
label: "SHA384",
|
||||
value: DigestAlgorithmEnum._200104XmldsigMoresha384,
|
||||
},
|
||||
{
|
||||
label: "SHA512",
|
||||
value: DigestAlgorithmEnum._200104Xmlencsha512,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.digestAlgorithm}
|
||||
>
|
||||
${t`SHA1`}
|
||||
</option>
|
||||
<option
|
||||
value=${DigestAlgorithmEnum._200104Xmlencsha256}
|
||||
?selected=${this.instance?.digestAlgorithm ===
|
||||
DigestAlgorithmEnum._200104Xmlencsha256 ||
|
||||
this.instance?.digestAlgorithm === undefined}
|
||||
>
|
||||
${t`SHA256`}
|
||||
</option>
|
||||
<option
|
||||
value=${DigestAlgorithmEnum._200104XmldsigMoresha384}
|
||||
?selected=${this.instance?.digestAlgorithm ===
|
||||
DigestAlgorithmEnum._200104XmldsigMoresha384}
|
||||
>
|
||||
${t`SHA384`}
|
||||
</option>
|
||||
<option
|
||||
value=${DigestAlgorithmEnum._200104Xmlencsha512}
|
||||
?selected=${this.instance?.digestAlgorithm ===
|
||||
DigestAlgorithmEnum._200104Xmlencsha512}
|
||||
>
|
||||
${t`SHA512`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Signature algorithm`}
|
||||
?required=${true}
|
||||
name="signatureAlgorithm"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${SignatureAlgorithmEnum._200009XmldsigrsaSha1}
|
||||
?selected=${this.instance?.signatureAlgorithm ===
|
||||
SignatureAlgorithmEnum._200009XmldsigrsaSha1}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: "RSA-SHA1",
|
||||
value: SignatureAlgorithmEnum._200009XmldsigrsaSha1,
|
||||
},
|
||||
{
|
||||
label: "RSA-SHA256",
|
||||
value: SignatureAlgorithmEnum._200104XmldsigMorersaSha256,
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
label: "RSA-SHA384",
|
||||
value: SignatureAlgorithmEnum._200104XmldsigMorersaSha384,
|
||||
},
|
||||
{
|
||||
label: "RSA-SHA512",
|
||||
value: SignatureAlgorithmEnum._200104XmldsigMorersaSha512,
|
||||
},
|
||||
{
|
||||
label: "DSA-SHA1",
|
||||
value: SignatureAlgorithmEnum._200009XmldsigdsaSha1,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.signatureAlgorithm}
|
||||
>
|
||||
${t`RSA-SHA1`}
|
||||
</option>
|
||||
<option
|
||||
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha256}
|
||||
?selected=${this.instance?.signatureAlgorithm ===
|
||||
SignatureAlgorithmEnum._200104XmldsigMorersaSha256 ||
|
||||
this.instance?.signatureAlgorithm === undefined}
|
||||
>
|
||||
${t`RSA-SHA256`}
|
||||
</option>
|
||||
<option
|
||||
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha384}
|
||||
?selected=${this.instance?.signatureAlgorithm ===
|
||||
SignatureAlgorithmEnum._200104XmldsigMorersaSha384}
|
||||
>
|
||||
${t`RSA-SHA384`}
|
||||
</option>
|
||||
<option
|
||||
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha512}
|
||||
?selected=${this.instance?.signatureAlgorithm ===
|
||||
SignatureAlgorithmEnum._200104XmldsigMorersaSha512}
|
||||
>
|
||||
${t`RSA-SHA512`}
|
||||
</option>
|
||||
<option
|
||||
value=${SignatureAlgorithmEnum._200009XmldsigdsaSha1}
|
||||
?selected=${this.instance?.signatureAlgorithm ===
|
||||
SignatureAlgorithmEnum._200009XmldsigdsaSha1}
|
||||
>
|
||||
${t`DSA-SHA1`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
</ak-form-element-horizontal>
|
||||
</div>
|
||||
</ak-form-group>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { SentryIgnoredError } from "@goauthentik/common/errors";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import { Form } from "@goauthentik/elements/forms/Form";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { 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 "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils"
|
|||
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/CodeMirror";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/FormGroup";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils"
|
|||
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
|
||||
import { PlexAPIClient, PlexResource, popupCenterScreen } from "@goauthentik/common/helpers/plex";
|
||||
import { first, randomString } 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 "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { first } from "@goauthentik/common/utils";
|
|||
import "@goauthentik/elements/forms/FormGroup";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/Radio";
|
||||
import "@goauthentik/elements/utils/TimeDeltaHelp";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
|
@ -242,26 +243,26 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
|
|||
?required=${true}
|
||||
name="bindingType"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${BindingTypeEnum.Redirect}
|
||||
?selected=${this.instance?.bindingType === BindingTypeEnum.Redirect}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: t`Redirect binding`,
|
||||
value: BindingTypeEnum.Redirect,
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
label: t`Post-auto binding`,
|
||||
value: BindingTypeEnum.PostAuto,
|
||||
description: html`${t`Post binding but the request is automatically sent and the user doesn't have to confirm.`}`,
|
||||
},
|
||||
{
|
||||
label: t`Post binding`,
|
||||
value: BindingTypeEnum.Post,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.bindingType}
|
||||
>
|
||||
${t`Redirect binding`}
|
||||
</option>
|
||||
<option
|
||||
value=${BindingTypeEnum.PostAuto}
|
||||
?selected=${this.instance?.bindingType === BindingTypeEnum.PostAuto}
|
||||
>
|
||||
${t`Post binding (auto-submit)`}
|
||||
</option>
|
||||
<option
|
||||
value=${BindingTypeEnum.Post}
|
||||
?selected=${this.instance?.bindingType === BindingTypeEnum.Post}
|
||||
>
|
||||
${t`Post binding`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Signing keypair`} name="signingKp">
|
||||
<ak-search-select
|
||||
|
|
@ -394,81 +395,62 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
|
|||
?required=${true}
|
||||
name="digestAlgorithm"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${DigestAlgorithmEnum._200009Xmldsigsha1}
|
||||
?selected=${this.instance?.digestAlgorithm ===
|
||||
DigestAlgorithmEnum._200009Xmldsigsha1}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: "SHA1",
|
||||
value: DigestAlgorithmEnum._200009Xmldsigsha1,
|
||||
},
|
||||
{
|
||||
label: "SHA256",
|
||||
value: DigestAlgorithmEnum._200104Xmlencsha256,
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
label: "SHA384",
|
||||
value: DigestAlgorithmEnum._200104XmldsigMoresha384,
|
||||
},
|
||||
{
|
||||
label: "SHA512",
|
||||
value: DigestAlgorithmEnum._200104Xmlencsha512,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.digestAlgorithm}
|
||||
>
|
||||
${t`SHA1`}
|
||||
</option>
|
||||
<option
|
||||
value=${DigestAlgorithmEnum._200104Xmlencsha256}
|
||||
?selected=${this.instance?.digestAlgorithm ===
|
||||
DigestAlgorithmEnum._200104Xmlencsha256 ||
|
||||
this.instance?.digestAlgorithm === undefined}
|
||||
>
|
||||
${t`SHA256`}
|
||||
</option>
|
||||
<option
|
||||
value=${DigestAlgorithmEnum._200104XmldsigMoresha384}
|
||||
?selected=${this.instance?.digestAlgorithm ===
|
||||
DigestAlgorithmEnum._200104XmldsigMoresha384}
|
||||
>
|
||||
${t`SHA384`}
|
||||
</option>
|
||||
<option
|
||||
value=${DigestAlgorithmEnum._200104Xmlencsha512}
|
||||
?selected=${this.instance?.digestAlgorithm ===
|
||||
DigestAlgorithmEnum._200104Xmlencsha512}
|
||||
>
|
||||
${t`SHA512`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Signature algorithm`}
|
||||
?required=${true}
|
||||
name="signatureAlgorithm"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${SignatureAlgorithmEnum._200009XmldsigrsaSha1}
|
||||
?selected=${this.instance?.signatureAlgorithm ===
|
||||
SignatureAlgorithmEnum._200009XmldsigrsaSha1}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: "RSA-SHA1",
|
||||
value: SignatureAlgorithmEnum._200009XmldsigrsaSha1,
|
||||
},
|
||||
{
|
||||
label: "RSA-SHA256",
|
||||
value: SignatureAlgorithmEnum._200104XmldsigMorersaSha256,
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
label: "RSA-SHA384",
|
||||
value: SignatureAlgorithmEnum._200104XmldsigMorersaSha384,
|
||||
},
|
||||
{
|
||||
label: "RSA-SHA512",
|
||||
value: SignatureAlgorithmEnum._200104XmldsigMorersaSha512,
|
||||
},
|
||||
{
|
||||
label: "DSA-SHA1",
|
||||
value: SignatureAlgorithmEnum._200009XmldsigdsaSha1,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.signatureAlgorithm}
|
||||
>
|
||||
${t`RSA-SHA1`}
|
||||
</option>
|
||||
<option
|
||||
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha256}
|
||||
?selected=${this.instance?.signatureAlgorithm ===
|
||||
SignatureAlgorithmEnum._200104XmldsigMorersaSha256 ||
|
||||
this.instance?.signatureAlgorithm === undefined}
|
||||
>
|
||||
${t`RSA-SHA256`}
|
||||
</option>
|
||||
<option
|
||||
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha384}
|
||||
?selected=${this.instance?.signatureAlgorithm ===
|
||||
SignatureAlgorithmEnum._200104XmldsigMorersaSha384}
|
||||
>
|
||||
${t`RSA-SHA384`}
|
||||
</option>
|
||||
<option
|
||||
value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha512}
|
||||
?selected=${this.instance?.signatureAlgorithm ===
|
||||
SignatureAlgorithmEnum._200104XmldsigMorersaSha512}
|
||||
>
|
||||
${t`RSA-SHA512`}
|
||||
</option>
|
||||
<option
|
||||
value=${SignatureAlgorithmEnum._200009XmldsigdsaSha1}
|
||||
?selected=${this.instance?.signatureAlgorithm ===
|
||||
SignatureAlgorithmEnum._200009XmldsigdsaSha1}
|
||||
>
|
||||
${t`DSA-SHA1`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
</ak-form-element-horizontal>
|
||||
</div>
|
||||
</ak-form-group>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { 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 "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { MessageLevel } from "@goauthentik/common/messages";
|
||||
import "@goauthentik/elements/Divider";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/buttons/ActionButton";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModalForm } from "@goauthentik/elements/forms/ModalForm";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { 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 "@goauthentik/elements/forms/Radio";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
@ -106,20 +107,21 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
|
|||
?required=${true}
|
||||
name="authType"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value="${AuthTypeEnum.Basic}"
|
||||
?selected=${this.instance?.authType === AuthTypeEnum.Basic}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: t`Basic Auth`,
|
||||
value: AuthTypeEnum.Basic,
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
label: t`Bearer Token`,
|
||||
value: AuthTypeEnum.Bearer,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.authType}
|
||||
>
|
||||
${t`Basic Auth`}
|
||||
</option>
|
||||
<option
|
||||
value="${AuthTypeEnum.Bearer}"
|
||||
?selected=${this.instance?.authType === AuthTypeEnum.Bearer}
|
||||
>
|
||||
${t`Bearer Token`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`External API URL`}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/FormGroup";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first, groupBy } 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 "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { dateTimeLocal, first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/CodeMirror";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import YAML from "yaml";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { 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 "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { 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 "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/CodeMirror";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/FormGroup";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import { DefaultTenant } from "@goauthentik/elements/sidebar/SidebarBrand";
|
||||
import YAML from "yaml";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
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 "@goauthentik/elements/forms/Radio";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
@ -82,20 +83,23 @@ export class TokenForm extends ModelForm<Token, string> {
|
|||
</ak-search-select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Intent`} ?required=${true} name="intent">
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=${IntentEnum.Api}
|
||||
?selected=${this.instance?.intent === IntentEnum.Api}
|
||||
<ak-radio
|
||||
.options=${[
|
||||
{
|
||||
label: t`API Token`,
|
||||
value: IntentEnum.Api,
|
||||
default: true,
|
||||
description: html`${t`Used to access the API programmatically`}`,
|
||||
},
|
||||
{
|
||||
label: t`App password.`,
|
||||
value: IntentEnum.AppPassword,
|
||||
description: html`${t`Used to login using a flow executor`}`,
|
||||
},
|
||||
]}
|
||||
.value=${this.instance?.intent}
|
||||
>
|
||||
${t`API Token (can be used to access the API programmatically)`}
|
||||
</option>
|
||||
<option
|
||||
value=${IntentEnum.AppPassword}
|
||||
?selected=${this.instance?.intent === IntentEnum.AppPassword}
|
||||
>
|
||||
${t`App password (can be used to login using a flow executor)`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-radio>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Description`} name="description">
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { groupBy } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import { Form } from "@goauthentik/elements/forms/Form";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants";
|
|||
import { MessageLevel } from "@goauthentik/common/messages";
|
||||
import { camelToSnake, convertToSlug } from "@goauthentik/common/utils";
|
||||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { SearchSelect } from "@goauthentik/elements/SearchSelect";
|
||||
import { HorizontalFormElement } from "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { SearchSelect } from "@goauthentik/elements/forms/SearchSelect";
|
||||
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
|
||||
import "@polymer/iron-form/iron-form";
|
||||
import { IronFormElement } from "@polymer/iron-form/iron-form";
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@ export class HorizontalFormElement extends AKElement {
|
|||
case "ak-codemirror":
|
||||
case "ak-chip-group":
|
||||
case "ak-search-select":
|
||||
case "ak-radio":
|
||||
(input as HTMLInputElement).name = this.name;
|
||||
break;
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -65,7 +65,16 @@ export class ModalForm extends ModalButton {
|
|||
</h1>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
|
|
|
|||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
|
|
@ -66,11 +66,25 @@ export class SearchSelect<T> extends AKElement {
|
|||
});
|
||||
};
|
||||
|
||||
scrollHandler?: () => void;
|
||||
observer: IntersectionObserver;
|
||||
|
||||
dropdownContainer: HTMLDivElement;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
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 {
|
||||
|
|
@ -102,12 +116,20 @@ export class SearchSelect<T> extends AKElement {
|
|||
document.body.append(this.dropdownContainer);
|
||||
this.updateData();
|
||||
this.addEventListener(EVENT_REFRESH, this.updateData);
|
||||
this.scrollHandler = () => {
|
||||
this.requestUpdate();
|
||||
};
|
||||
window.addEventListener("scroll", this.scrollHandler);
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
this.removeEventListener(EVENT_REFRESH, this.updateData);
|
||||
if (this.scrollHandler) {
|
||||
window.removeEventListener("scroll", this.scrollHandler);
|
||||
}
|
||||
this.dropdownContainer.remove();
|
||||
this.observer.disconnect();
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -238,7 +260,7 @@ export class SearchSelect<T> extends AKElement {
|
|||
setTimeout(() => {
|
||||
this.open = false;
|
||||
this.renderMenu();
|
||||
}, 200);
|
||||
}, 100);
|
||||
}}
|
||||
.value=${this.selectedObject
|
||||
? this.renderElement(this.selectedObject)
|
||||
Reference in New Issue