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

web: migrate checkbox to switch (#4409)

Browse Source 
* start migrating to switch

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* general cleanup

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* remove broken Create provider

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* migrate all

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* migrate table selectors, fix dark theme

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-01-11 13:37:49 +01:00
committed by GitHub
parent f7037b9f33
commit ddbd8153e2
47 changed files with 702 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/admin/AdminInterface.ts
View File

@ -243,15 +243,15 @@ export class AdminInterface extends AKElement {
<ak-sidebar-item path="/policy/policies">
<span slot="label">${t`Policies`}</span>
</ak-sidebar-item>
<ak-sidebar-item path="/policy/reputation">
<span slot="label">${t`Reputation scores`}</span>
</ak-sidebar-item>
<ak-sidebar-item path="/core/property-mappings">
<span slot="label">${t`Property Mappings`}</span>
</ak-sidebar-item>
<ak-sidebar-item path="/blueprints/instances">
<span slot="label">${t`Blueprints`}</span>
</ak-sidebar-item>
<ak-sidebar-item path="/policy/reputation">
<span slot="label">${t`Reputation scores`}</span>
</ak-sidebar-item>
</ak-sidebar-item>
<ak-sidebar-item>
<span slot="label">${t`Flows & Stages`}</span>

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

@ -1,4 +1,3 @@
import "@goauthentik/admin/providers/ProviderWizard";
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
import { first, groupBy } from "@goauthentik/common/utils";
import "@goauthentik/elements/forms/FormGroup";
@ -139,15 +138,8 @@ export class ApplicationForm extends ModelForm<Application, string> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Select a provider that this application should use. Alternatively, create a new provider.`}
${t`Select a provider that this application should use.`}
</p>
<ak-provider-wizard
.finalHandler=${async () => {
this.requestUpdate();
}}
createText=${t`Create provider`}
>
</ak-provider-wizard>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Policy engine mode`}
@ -172,7 +164,7 @@ export class ApplicationForm extends ModelForm<Application, string> {
>
</ak-radio>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<ak-form-group>
<span slot="header"> ${t`UI settings`} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`Launch URL`} name="metaLaunchUrl">
@ -186,14 +178,19 @@ export class ApplicationForm extends ModelForm<Application, string> {
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="openInNewTab">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.openInNewTab, false)}
/>
<label class="pf-c-check__label"> ${t`Open in new tab`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Open in new tab`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`If checked, the launch URL will open in a new browser tab or window from the user's application library.`}
</p>
@ -218,20 +215,28 @@ export class ApplicationForm extends ModelForm<Application, string> {
${this.instance?.metaIcon
? html`
<ak-form-element-horizontal>
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
@change=${(ev: Event) => {
const target =
ev.target as HTMLInputElement;
this.clearIcon = target.checked;
}}
/>
<label class="pf-c-check__label">
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i
class="fas fa-check"
aria-hidden="true"
></i>
</span>
</span>
<span class="pf-c-switch__label">
${t`Clear icon`}
</span>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Delete currently set icon.`}
</p>

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

@ -87,14 +87,19 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="enabled">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.enabled, true)}
/>
<label class="pf-c-check__label"> ${t`Enabled`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Enabled`}</span>
</label>
<p class="pf-c-form__helper-text">${t`Disabled blueprints are never applied.`}</p>
</ak-form-element-horizontal>
<div class="pf-c-card pf-m-selectable pf-m-selected">

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

@ -163,14 +163,19 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
</ak-search-select>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="sendOnce">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.sendOnce, false)}
/>
<label class="pf-c-check__label"> ${t`Send once`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Send once`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Only send notification once, for example when sending a webhook into a chat channel.`}
</p>

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

@ -205,14 +205,19 @@ export class FlowForm extends ModelForm<Flow, string> {
<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">
<label class="pf-c-switch">
<input
class="pf-c-switch__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>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Compatibility mode`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Increases compatibility with password managers and mobile devices.`}
</p>
@ -333,20 +338,28 @@ export class FlowForm extends ModelForm<Flow, string> {
${this.instance?.background
? html`
<ak-form-element-horizontal>
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__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`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i
class="fas fa-check"
aria-hidden="true"
></i>
</span>
</span>
<span class="pf-c-switch__label">
${t`Clear icon`}
</span>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Delete currently set background image.`}
</p>

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

@ -8,7 +8,7 @@ import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { customElement, property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js";
@ -24,15 +24,20 @@ import {
@customElement("ak-stage-binding-form")
export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
loadInstance(pk: string): Promise<FlowStageBinding> {
return new FlowsApi(DEFAULT_CONFIG).flowsBindingsRetrieve({
async loadInstance(pk: string): Promise<FlowStageBinding> {
const binding = await new FlowsApi(DEFAULT_CONFIG).flowsBindingsRetrieve({
fsbUuid: pk,
});
this.defaultOrder = await this.getOrder();
return binding;
}
@property()
targetPk?: string;
@state()
defaultOrder = 0;
getSuccessMessage(): string {
if (this.instance?.pk) {
return t`Successfully updated binding.`;
@ -131,36 +136,45 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
</ak-search-select>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Order`} ?required=${true} name="order">
<!-- @ts-ignore -->
<input
type="number"
value="${until(this.getOrder())}"
value="${first(this.instance?.order, this.defaultOrder)}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="evaluateOnPlan">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.evaluateOnPlan, true)}
/>
<label class="pf-c-check__label"> ${t`Evaluate on plan`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Evaluate on plan`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Evaluate policies during the Flow planning process. Disable this for input-based policies. Should be used in conjunction with 'Re-evaluate policies', as with both options disabled, policies are **not** evaluated.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="reEvaluatePolicies">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.reEvaluatePolicies, false)}
/>
<label class="pf-c-check__label"> ${t`Re-evaluate policies`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Re-evaluate policies`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Evaluate policies before the Stage is present to the user.`}
</p>

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

@ -71,14 +71,19 @@ export class GroupForm extends ModelForm<Group, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="isSuperuser">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.isSuperuser, false)}
/>
<label class="pf-c-check__label"> ${t`Is superuser`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Is superuser`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Users added to this group will be superusers.`}
</p>

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

@ -1,21 +1,21 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global";
import { groupBy } from "@goauthentik/common/utils";
import { first, groupBy } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror";
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";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { customElement, property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js";
import {
Outpost,
OutpostDefaultConfig,
OutpostTypeEnum,
OutpostsApi,
OutpostsServiceConnectionsAllListRequest,
@ -31,17 +31,20 @@ export class OutpostForm extends ModelForm<Outpost, string> {
@property({ type: Boolean })
embedded = false;
loadInstance(pk: string): Promise<Outpost> {
return new OutpostsApi(DEFAULT_CONFIG)
.outpostsInstancesRetrieve({
async loadInstance(pk: string): Promise<Outpost> {
const o = await new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesRetrieve({
uuid: pk,
})
.then((o) => {
this.type = o.type || OutpostTypeEnum.Proxy;
return o;
});
this.type = o.type || OutpostTypeEnum.Proxy;
this.defaultConfig = await new OutpostsApi(
DEFAULT_CONFIG,
).outpostsInstancesDefaultSettingsRetrieve();
return o;
}
@state()
defaultConfig?: OutpostDefaultConfig;
getSuccessMessage(): string {
if (this.instance) {
return t`Successfully updated outpost.`;
@ -205,20 +208,9 @@ export class OutpostForm extends ModelForm<Outpost, string> {
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Configuration`} name="config">
<!-- @ts-ignore -->
<ak-codemirror
mode="yaml"
value="${until(
new OutpostsApi(DEFAULT_CONFIG)
.outpostsInstancesDefaultSettingsRetrieve()
.then((config) => {
let fc = config.config;
if (this.instance) {
fc = this.instance.config;
}
return YAML.stringify(fc);
}),
)}"
value="${first(this.instance?.config, this.defaultConfig)}"
></ak-codemirror>
<p class="pf-c-form__helper-text">
${t`Set custom attributes using YAML or JSON.`}

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

@ -58,14 +58,19 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="local">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.local, false)}
/>
<label class="pf-c-check__label"> ${t`Local`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Local`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`If enabled, use the local connection. Required Docker socket/Kubernetes Integration.`}
</p>

28
web/src/admin/outposts/ServiceConnectionKubernetesForm.ts
View File

@ -56,14 +56,19 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="local">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.local, false)}
/>
<label class="pf-c-check__label"> ${t`Local`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Local`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`If enabled, use the local connection. Required Docker socket/Kubernetes Integration.`}
</p>
@ -79,16 +84,21 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="verifySsl">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.verifySsl, true)}
/>
<label class="pf-c-check__label">
${t`Verify Kubernetes API SSL Certificate`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label"
>${t`Verify Kubernetes API SSL Certificate`}</span
>
</label>
</div>
</ak-form-element-horizontal>
</form>`;
}

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

@ -8,9 +8,8 @@ import { t } from "@lingui/macro";
import { CSSResult, css } from "lit";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { customElement, property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css";
@ -35,12 +34,10 @@ enum target {
@customElement("ak-policy-binding-form")
export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
loadInstance(pk: string): Promise<PolicyBinding> {
return new PoliciesApi(DEFAULT_CONFIG)
.policiesBindingsRetrieve({
async loadInstance(pk: string): Promise<PolicyBinding> {
const binding = await new PoliciesApi(DEFAULT_CONFIG).policiesBindingsRetrieve({
policyBindingUuid: pk,
})
.then((binding) => {
});
if (binding?.policyObj) {
this.policyGroupUser = target.policy;
}
@ -50,8 +47,8 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
if (binding?.userObj) {
this.policyGroupUser = target.user;
}
this.defaultOrder = await this.getOrder();
return binding;
});
}
@property()
@ -63,6 +60,9 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
@property({ type: Boolean })
policyOnly = false;
@state()
defaultOrder = 0;
getSuccessMessage(): string {
if (this.instance?.pk) {
return t`Successfully updated binding.`;
@ -277,33 +277,42 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
value=${ifDefined(this.instance?.target || this.targetPk)}
/>
<ak-form-element-horizontal name="enabled">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.enabled, true)}
/>
<label class="pf-c-check__label"> ${t`Enabled`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Enabled`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="negate">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.negate, false)}
/>
<label class="pf-c-check__label"> ${t`Negate result`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Negate result`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Negates the outcome of the binding. Messages are unaffected.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Order`} ?required=${true} name="order">
<!-- @ts-ignore -->
<input
type="number"
value="${until(this.getOrder())}"
value="${first(this.instance?.order, this.defaultOrder)}"
class="pf-c-form-control"
required
/>

28
web/src/admin/policies/dummy/DummyPolicyForm.ts
View File

@ -55,14 +55,19 @@ export class DummyPolicyForm extends ModelForm<DummyPolicy, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="executionLogging">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.executionLogging, false)}
?checked=${first(this.instance?.executionLogging, true)}
/>
<label class="pf-c-check__label"> ${t`Execution logging`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Execution logging`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`When this option is enabled, all executions of this policy will be logged. By default, only execution errors are logged.`}
</p>
@ -71,14 +76,19 @@ export class DummyPolicyForm extends ModelForm<DummyPolicy, string> {
<span slot="header"> ${t`Policy-specific settings`} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="result">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.result, false)}
/>
<label class="pf-c-check__label"> ${t`Pass policy?`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Pass policy?`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Wait (min)`}

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

@ -57,14 +57,19 @@ export class EventMatcherPolicyForm extends ModelForm<EventMatcherPolicy, string
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="executionLogging">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.executionLogging, false)}
?checked=${first(this.instance?.executionLogging, true)}
/>
<label class="pf-c-check__label"> ${t`Execution logging`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Execution logging`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`When this option is enabled, all executions of this policy will be logged. By default, only execution errors are logged.`}
</p>

30
web/src/admin/policies/expiry/ExpiryPolicyForm.ts
View File

@ -55,14 +55,19 @@ export class PasswordExpiryPolicyForm extends ModelForm<PasswordExpiryPolicy, st
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="executionLogging">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.executionLogging, false)}
?checked=${first(this.instance?.executionLogging, true)}
/>
<label class="pf-c-check__label"> ${t`Execution logging`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Execution logging`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`When this option is enabled, all executions of this policy will be logged. By default, only execution errors are logged.`}
</p>
@ -83,16 +88,21 @@ export class PasswordExpiryPolicyForm extends ModelForm<PasswordExpiryPolicy, st
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="denyOnly">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.denyOnly, false)}
/>
<label class="pf-c-check__label">
${t`Only fail the policy, don't invalidate user's password.`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label"
>${t`Only fail the policy, don't invalidate user's password`}</span
>
</label>
</div>
</ak-form-element-horizontal>
</div>
</ak-form-group>

15
web/src/admin/policies/expression/ExpressionPolicyForm.ts
View File

@ -57,14 +57,19 @@ export class ExpressionPolicyForm extends ModelForm<ExpressionPolicy, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="executionLogging">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.executionLogging, false)}
?checked=${first(this.instance?.executionLogging, true)}
/>
<label class="pf-c-check__label"> ${t`Execution logging`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Execution logging`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`When this option is enabled, all executions of this policy will be logged. By default, only execution errors are logged.`}
</p>

54
web/src/admin/policies/password/PasswordPolicyForm.ts
View File

@ -233,14 +233,19 @@ export class PasswordPolicyForm extends ModelForm<PasswordPolicy, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="executionLogging">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.executionLogging, false)}
?checked=${first(this.instance?.executionLogging, true)}
/>
<label class="pf-c-check__label"> ${t`Execution logging`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Execution logging`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`When this option is enabled, all executions of this policy will be logged. By default, only execution errors are logged.`}
</p>
@ -262,32 +267,42 @@ export class PasswordPolicyForm extends ModelForm<PasswordPolicy, string> {
</ak-form-element-horizontal>
<ak-form-element-horizontal name="checkStaticRules">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.checkStaticRules, true)}
@change=${(ev: Event) => {
const el = ev.target as HTMLInputElement;
this.showStatic = el.checked;
}}
/>
<label class="pf-c-check__label"> ${t`Check static rules`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Check static rules`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="checkHaveIBeenPwned">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.checkHaveIBeenPwned, true)}
@change=${(ev: Event) => {
const el = ev.target as HTMLInputElement;
this.showHIBP = el.checked;
}}
/>
<label class="pf-c-check__label"> ${t`Check haveibeenpwned.com`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Check haveibeenpwned.com`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`For more info see:`}
<a href="https://haveibeenpwned.com/API/v2#SearchingPwnedPasswordsByRange"
@ -296,18 +311,23 @@ export class PasswordPolicyForm extends ModelForm<PasswordPolicy, string> {
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="checkZxcvbn">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.checkZxcvbn, true)}
@change=${(ev: Event) => {
const el = ev.target as HTMLInputElement;
this.showZxcvbn = el.checked;
}}
/>
<label class="pf-c-check__label"> ${t`Check zxcvbn`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Check zxcvbn`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Password strength estimator created by Dropbox, see:`}
<a href="https://github.com/dropbox/zxcvbn#readme">dropbox/zxcvbn</a>

41
web/src/admin/policies/reputation/ReputationPolicyForm.ts
View File

@ -64,14 +64,19 @@ export class ReputationPolicyForm extends ModelForm<ReputationPolicy, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="executionLogging">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.executionLogging, false)}
?checked=${first(this.instance?.executionLogging, true)}
/>
<label class="pf-c-check__label"> ${t`Execution logging`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Execution logging`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`When this option is enabled, all executions of this policy will be logged. By default, only execution errors are logged.`}
</p>
@ -80,24 +85,34 @@ export class ReputationPolicyForm extends ModelForm<ReputationPolicy, string> {
<span slot="header"> ${t`Policy-specific settings`} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="checkIp">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.checkIp, false)}
/>
<label class="pf-c-check__label"> ${t`Check IP`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Check IP`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="checkUsername">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.checkUsername, false)}
/>
<label class="pf-c-check__label"> ${t`Check Username`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Check Username`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Threshold`}

17
web/src/admin/property-mappings/PropertyMappingListPage.ts
View File

@ -130,12 +130,10 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item pf-m-search-filter">
<div class="pf-c-input-group">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-check__input"
class="pf-c-switch__input"
type="checkbox"
id="hide-managed"
name="hide-managed"
?checked=${this.hideManaged}
@change=${() => {
this.hideManaged = !this.hideManaged;
@ -146,10 +144,13 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
});
}}
/>
<label class="pf-c-check__label" for="hide-managed"
>${t`Hide managed mappings`}</label
>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Hide managed mappings`}</span>
</label>
</div>
</div>
</div>`;

22
web/src/admin/providers/ldap/LDAPProviderViewPage.ts
View File

@ -13,8 +13,7 @@ import "@goauthentik/elements/events/ObjectChangelog";
import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, html } from "lit";
import { until } from "lit-html/directives/until.js";
import { customElement, property } from "lit/decorators.js";
import { customElement, property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
@ -30,7 +29,7 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { LDAPProvider, ProvidersApi } from "@goauthentik/api";
import { LDAPProvider, ProvidersApi, SessionUser } from "@goauthentik/api";
@customElement("ak-provider-ldap-view")
export class LDAPProviderViewPage extends AKElement {
@ -51,6 +50,9 @@ export class LDAPProviderViewPage extends AKElement {
@property({ attribute: false })
provider?: LDAPProvider;
@state()
me?: SessionUser;
static get styles(): CSSResult[] {
return [
PFBase,
@ -74,6 +76,9 @@ export class LDAPProviderViewPage extends AKElement {
if (!this.provider?.pk) return;
this.providerID = this.provider?.pk;
});
me().then((user) => {
this.me = user;
});
}
render(): TemplateResult {
@ -185,18 +190,13 @@ export class LDAPProviderViewPage extends AKElement {
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${t`Bind DN`}</span>
</label>
<!-- @ts-ignore -->
<input
class="pf-c-form-control"
readonly
type="text"
value=${until(
me().then((m) => {
return `cn=${
m.user.username
},ou=users,${this.provider?.baseDn?.toLowerCase()}`;
}),
)}
value=${`cn=${
this.me?.user.username
},ou=users,${this.provider?.baseDn?.toLowerCase()}`}
/>
</div>
<div class="pf-c-form__group">

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

@ -347,16 +347,19 @@ ${this.instance?.redirectUris}</textarea
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="includeClaimsInIdToken">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.includeClaimsInIdToken, true)}
/>
<label class="pf-c-check__label">
${t`Include claims in id_token`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Include claims in id_token`}</span>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Include User claims from scopes in the id_token, for applications that don't access the userinfo endpoint.`}
</p>

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

@ -204,16 +204,21 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="internalHostSslValidation">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.internalHostSslValidation, true)}
/>
<label class="pf-c-check__label">
${t`Internal host SSL Validation`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label"
>${t`Internal host SSL Validation`}</span
>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Validate SSL Certificates of upstream servers.`}
</p>
@ -437,20 +442,25 @@ ${this.instance?.skipPathRegex}</textarea
</ak-form-element-horizontal>
<ak-form-element-horizontal name="basicAuthEnabled">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.basicAuthEnabled, false)}
@change=${(ev: Event) => {
const el = ev.target as HTMLInputElement;
this.showHttpBasic = el.checked;
}}
/>
<label class="pf-c-check__label">
${t`Set HTTP-Basic Authentication`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label"
>${t`Set HTTP-Basic Authentication`}</span
>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Set a custom HTTP-Basic Authentication header based on values from authentik.`}
</p>

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

@ -73,47 +73,67 @@ export class LDAPSourceForm extends ModelForm<LDAPSource, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="enabled">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.enabled, true)}
/>
<label class="pf-c-check__label"> ${t`Enabled`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Enabled`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="syncUsers">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.syncUsers, true)}
/>
<label class="pf-c-check__label"> ${t`Sync users`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Sync users`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="syncUsersPassword">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.syncUsersPassword, true)}
/>
<label class="pf-c-check__label"> ${t`User password writeback`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`User password writeback`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Login password is synced from LDAP into authentik automatically. Enable this option only to write password changes in authentik back to LDAP.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="syncGroups">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.syncGroups, true)}
/>
<label class="pf-c-check__label"> ${t`Sync groups`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Sync groups`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${t`Connection settings`} </span>
@ -135,14 +155,19 @@ export class LDAPSourceForm extends ModelForm<LDAPSource, string> {
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="startTls">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.startTls, true)}
/>
<label class="pf-c-check__label"> ${t`Enable StartTLS`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Enable StartTLS`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`To use SSL instead, use 'ldaps://' and disable this option.`}
</p>

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

@ -244,14 +244,19 @@ export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="enabled">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.enabled, true)}
/>
<label class="pf-c-check__label"> ${t`Enabled`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Enabled`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`User matching mode`}
@ -325,19 +330,28 @@ export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
${this.instance?.icon
? html`
<ak-form-element-horizontal>
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
@change=${(ev: Event) => {
const target = ev.target as HTMLInputElement;
this.clearIcon = target.checked;
}}
/>
<label class="pf-c-check__label">
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i
class="fas fa-check"
aria-hidden="true"
></i>
</span>
</span>
<span class="pf-c-switch__label">
${t`Clear icon`}
</span>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Delete currently set icon.`}
</p>

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

@ -135,16 +135,21 @@ export class PlexSourceForm extends ModelForm<PlexSource, string> {
${t`Re-authenticate with plex`}
</button>
<ak-form-element-horizontal name="allowFriends">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.allowFriends, true)}
/>
<label class="pf-c-check__label">
${t`Allow friends to authenticate via Plex, even if you don't share any servers`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label"
>${t`Allow friends to authenticate via Plex, even if you don't share any servers`}</span
>
</label>
</div>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Allowed servers`}
@ -191,14 +196,19 @@ export class PlexSourceForm extends ModelForm<PlexSource, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="enabled">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.enabled, true)}
/>
<label class="pf-c-check__label"> ${t`Enabled`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Enabled`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`User matching mode`}
@ -272,19 +282,27 @@ export class PlexSourceForm extends ModelForm<PlexSource, string> {
${this.instance?.icon
? html`
<ak-form-element-horizontal>
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
@change=${(ev: Event) => {
const target = ev.target as HTMLInputElement;
this.clearIcon = target.checked;
}}
/>
<label class="pf-c-check__label">
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i
class="fas fa-check"
aria-hidden="true"
></i>
</span>
</span>
<span class="pf-c-switch__label">
${t`Clear icon`}
</span>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Delete currently set icon.`}
</p>

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

@ -103,14 +103,19 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="enabled">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.enabled, true)}
/>
<label class="pf-c-check__label"> ${t`Enabled`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Enabled`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`User matching mode`}
@ -171,19 +176,27 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
${this.instance?.icon
? html`
<ak-form-element-horizontal>
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
@change=${(ev: Event) => {
const target = ev.target as HTMLInputElement;
this.clearIcon = target.checked;
}}
/>
<label class="pf-c-check__label">
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i
class="fas fa-check"
aria-hidden="true"
></i>
</span>
</span>
<span class="pf-c-switch__label">
${t`Clear icon`}
</span>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Delete currently set icon.`}
</p>
@ -304,16 +317,21 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
<span slot="header"> ${t`Advanced protocol settings`} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="allowIdpInitiated">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.allowIdpInitiated, false)}
/>
<label class="pf-c-check__label">
${t` Allow IDP-initiated logins`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label"
>${t` Allow IDP-initiated logins`}</span
>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Allows authentication flows initiated by the IdP. This can be a security risk, as no validation of the request ID is done.`}
</p>

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

@ -258,14 +258,19 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
? this.renderProviderGeneric()
: this.renderProviderTwillio()}
<ak-form-element-horizontal name="verifyOnly">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.verifyOnly, false)}
/>
<label class="pf-c-check__label">${t`Hash phone number`}</label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Hash phone number`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`If enabled, only a hash of the phone number will be saved. This can be done for data-protection reasons. Devices created from a stage with this enabled cannot be used with the authenticator validation stage.`}
</p>

13
web/src/admin/stages/dummy/DummyStageForm.ts
View File

@ -54,14 +54,19 @@ export class DummyStageForm extends ModelForm<DummyStage, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="throwError">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.throwError, false)}
/>
<label class="pf-c-check__label"> ${t`Throw error?`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Throw error?`}</span>
</label>
</ak-form-element-horizontal>
</form>`;
}

54
web/src/admin/stages/email/EmailStageForm.ts
View File

@ -88,24 +88,34 @@ export class EmailStageForm extends ModelForm<EmailStage, string> {
<input type="text" value="" class="pf-c-form-control" />
</ak-form-element-horizontal>
<ak-form-element-horizontal name="useTls">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.useTls, true)}
/>
<label class="pf-c-check__label"> ${t`Use TLS`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Use TLS`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="useSsl">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.useSsl, false)}
/>
<label class="pf-c-check__label"> ${t`Use SSL`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Use SSL`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Timeout`} ?required=${true} name="timeout">
<input
@ -148,33 +158,43 @@ export class EmailStageForm extends ModelForm<EmailStage, string> {
<span slot="header"> ${t`Stage-specific settings`} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="activateUserOnSuccess">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.activateUserOnSuccess, true)}
/>
<label class="pf-c-check__label">
${t`Activate pending user on success`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label"
>${t`Activate pending user on success`}</span
>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`When a user returns from the email successfully, their account will be activated.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="useGlobalSettings">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.useGlobalSettings, true)}
@change=${(ev: Event) => {
const target = ev.target as HTMLInputElement;
this.showConnectionSettings = !target.checked;
}}
/>
<label class="pf-c-check__label"> ${t`Use global settings`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Use global settings`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`When enabled, global Email connection settings will be used and connection settings below will be ignored.`}
</p>

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

@ -140,29 +140,37 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="caseInsensitiveMatching">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.caseInsensitiveMatching, true)}
/>
<label class="pf-c-check__label">
${t`Case insensitive matching`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Case insensitive matching`}</span>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`When enabled, user fields are matched regardless of their casing.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="showMatchedUser">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.showMatchedUser, true)}
/>
<label class="pf-c-check__label"> ${t`Show matched user`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Show matched user`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`When a valid username/email has been entered, and this option is enabled, the user's username and avatar will be shown. Otherwise, the text that the user entered will be shown.`}
</p>
@ -216,14 +224,19 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="showSourceLabels">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.showSourceLabels, false)}
/>
<label class="pf-c-check__label"> ${t`Show sources' labels`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Show sources' labels`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`By default, only icons are shown for sources. Enable this to show their full names.`}
</p>

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

@ -117,14 +117,19 @@ export class InvitationForm extends ModelForm<Invitation, string> {
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="singleUse">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.singleUse, true)}
/>
<label class="pf-c-check__label"> ${t`Single use`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Single use`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`When enabled, the invitation will be deleted after usage.`}
</p>

15
web/src/admin/stages/invitation/InvitationStageForm.ts
View File

@ -57,19 +57,24 @@ export class InvitationStageForm extends ModelForm<InvitationStage, string> {
<span slot="header"> ${t`Stage-specific settings`} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="continueFlowWithoutInvitation">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(
this.instance?.continueFlowWithoutInvitation,
true,
)}
/>
<label class="pf-c-check__label">
${t`Continue flow without invitation`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label"
>${t`Continue flow without invitation`}</span
>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`If this flag is set, this Stage will jump to the next Stage when no Invitation is given. By default this Stage will cancel the Flow when no invitation is given.`}
</p>

28
web/src/admin/stages/prompt/PromptForm.ts
View File

@ -161,26 +161,36 @@ export class PromptForm extends ModelForm<Prompt, string> {
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="required">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.required, false)}
/>
<label class="pf-c-check__label"> ${t`Required`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Required`}</span>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="placeholderExpression">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.placeholderExpression, false)}
/>
<label class="pf-c-check__label"
>${t`Interpret placeholder as expression`}</label
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label"
>${t`Interpret placeholder as expression`}</span
>
</div>
</label>
<p class="pf-c-form__helper-text">
${t`When checked, the placeholder will be evaluated in the same way environment as a property mapping.
If the evaluation failed, the placeholder itself is returned.`}

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

@ -86,16 +86,19 @@ export class UserWriteStageForm extends ModelForm<UserWriteStage, string> {
</ak-radio>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="createUsersAsInactive">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.createUsersAsInactive, true)}
/>
<label class="pf-c-check__label">
${t`Create users as inactive`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Create users as inactive`}</span>
</label>
</div>
<p class="pf-c-form__helper-text">
${t`Mark newly created users as inactive.`}
</p>

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

@ -68,14 +68,19 @@ export class TenantForm extends ModelForm<Tenant, string> {
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="_default">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?._default, false)}
/>
<label class="pf-c-check__label"> ${t`Default`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Default`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Use this tenant for each domain that doesn't have a dedicated tenant.`}
</p>

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

@ -109,14 +109,19 @@ export class TokenForm extends ModelForm<Token, string> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="expiring">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.expiring, true)}
/>
<label class="pf-c-check__label"> ${t`Expiring?`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Expiring`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`If this is selected, the token will expire. Upon expiration, the token will be rotated.`}
</p>

15
web/src/admin/users/RelatedUserList.ts
View File

@ -393,12 +393,10 @@ export class RelatedUserList extends Table<User> {
<div class="pf-c-toolbar__group pf-m-filter-group">
<div class="pf-c-toolbar__item pf-m-search-filter">
<div class="pf-c-input-group">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-check__input"
class="pf-c-switch__input"
type="checkbox"
id="hide-service-accounts"
name="hide-service-accounts"
?checked=${this.hideServiceAccounts}
@change=${() => {
this.hideServiceAccounts = !this.hideServiceAccounts;
@ -409,12 +407,15 @@ export class RelatedUserList extends Table<User> {
});
}}
/>
<label class="pf-c-check__label" for="hide-service-accounts">
${t`Hide service-accounts`}
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Hide service-accounts`}</span>
</label>
</div>
</div>
</div>
</div>`;
}
}

13
web/src/admin/users/ServiceAccountForm.ts
View File

@ -43,10 +43,15 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="createGroup">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${true} />
<label class="pf-c-check__label"> ${t`Create group`} </label>
</div>
<label class="pf-c-switch">
<input class="pf-c-switch__input" type="checkbox" ?checked=${true} />
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Create group`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Enabling this toggle will create a group named after the user, with the user as member.`}
</p>

13
web/src/admin/users/UserForm.ts
View File

@ -93,14 +93,19 @@ export class UserForm extends ModelForm<User, number> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="isActive">
<div class="pf-c-check">
<label class="pf-c-switch">
<input
class="pf-c-switch__input"
type="checkbox"
class="pf-c-check__input"
?checked=${first(this.instance?.isActive, true)}
/>
<label class="pf-c-check__label"> ${t`Is active`} </label>
</div>
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Is active`}</span>
</label>
<p class="pf-c-form__helper-text">
${t`Designates whether this user should be treated as active. Unselect this instead of deleting accounts.`}
</p>

3
web/src/common/styles/authentik.css
View File

@ -265,6 +265,9 @@ html > form > input {
.pf-c-form-control[readonly] {
background-color: var(--ak-dark-background-light);
}
.pf-c-switch__input:checked ~ .pf-c-switch__label {
--pf-c-switch__input--checked__label--Color: var(--ak-dark-foreground);
}
/* select toggle */
.pf-c-select__toggle::before {
--pf-c-select__toggle--before--BorderTopColor: var(--ak-dark-background-lighter);

1
web/src/elements/TreeView.ts
View File

@ -197,7 +197,6 @@ export class TreeView extends AKElement {
const rootItem = this.parse(this.items);
return html`<div class="pf-c-tree-view pf-m-guides">
<ul class="pf-c-tree-view__list" role="tree">
<!-- @ts-ignore -->
<ak-treeview-node
.item=${rootItem}
activePath=${this.activePath}

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

@ -19,6 +19,7 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";
import PFSwitch from "@patternfly/patternfly/components/Switch/switch.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { ResponseError, ValidationError } from "@goauthentik/api";
@ -60,6 +61,7 @@ export class Form<T> extends AKElement {
PFAlert,
PFInputGroup,
PFFormControl,
PFSwitch,
AKGlobal,
css`
select[multiple] {

3
web/src/elements/table/TablePage.ts
View File

@ -11,6 +11,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFSidebar from "@patternfly/patternfly/components/Sidebar/sidebar.css";
import PFSwitch from "@patternfly/patternfly/components/Switch/switch.css";
export abstract class TablePage<T> extends Table<T> {
abstract pageTitle(): string;
@ -18,7 +19,7 @@ export abstract class TablePage<T> extends Table<T> {
abstract pageIcon(): string;
static get styles(): CSSResult[] {
return super.styles.concat(PFPage, PFContent, PFSidebar);
return super.styles.concat(PFPage, PFContent, PFSwitch, PFSidebar);
}
renderSidebarBefore(): TemplateResult {

1
web/src/flow/providers/oauth2/DeviceCode.ts
View File

@ -51,7 +51,6 @@ export class OAuth2DeviceCode extends BaseStage<
class="pf-c-form__group"
.errors=${(this.challenge?.responseErrors || {})["code"]}
>
<!-- @ts-ignore -->
<input
type="text"
name="code"

1
web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts
View File

@ -60,7 +60,6 @@ export class AuthenticatorSMSStage extends BaseStage<
class="pf-c-form__group"
.errors=${(this.challenge?.responseErrors || {})["phone_number"]}
>
<!-- @ts-ignore -->
<input
type="tel"
name="phoneNumber"

1
web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts
View File

@ -77,7 +77,6 @@ export class AuthenticatorTOTPStage extends BaseStage<
<input type="hidden" name="otp_uri" value=${this.challenge.configUrl} />
<ak-form-element>
<div class="qr-container">
<!-- @ts-ignore -->
<qr-code data="${this.challenge.configUrl}"></qr-code>
<button
type="button"

9
web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts
View File

@ -195,8 +195,7 @@ export class AuthenticatorValidateStage
case DeviceClassesEnum.Static:
case DeviceClassesEnum.Totp:
case DeviceClassesEnum.Sms:
return html`<!-- @ts-ignore -->
<ak-stage-authenticator-validate-code
return html` <ak-stage-authenticator-validate-code
.host=${this}
.challenge=${this.challenge}
.deviceChallenge=${this.selectedDeviceChallenge}
@ -204,8 +203,7 @@ export class AuthenticatorValidateStage
>
</ak-stage-authenticator-validate-code>`;
case DeviceClassesEnum.Webauthn:
return html`<!-- @ts-ignore -->
<ak-stage-authenticator-validate-webauthn
return html` <ak-stage-authenticator-validate-webauthn
.host=${this}
.challenge=${this.challenge}
.deviceChallenge=${this.selectedDeviceChallenge}
@ -213,8 +211,7 @@ export class AuthenticatorValidateStage
>
</ak-stage-authenticator-validate-webauthn>`;
case DeviceClassesEnum.Duo:
return html`<!-- @ts-ignore -->
<ak-stage-authenticator-validate-duo
return html` <ak-stage-authenticator-validate-duo
.host=${this}
.challenge=${this.challenge}
.deviceChallenge=${this.selectedDeviceChallenge}

2
web/src/user/user-settings/details/stages/prompt/PromptStage.ts
View File

@ -14,7 +14,7 @@ import { PromptTypeEnum, StagePrompt } from "@goauthentik/api";
@customElement("ak-user-stage-prompt")
export class UserSettingsPromptStage extends PromptStage {
static get styles(): CSSResult[] {
return super.styles.concat([PFCheck]);
return super.styles.concat(PFCheck);
}
renderPromptInner(prompt: StagePrompt, placeholderAsValue: boolean): string {