web: migrate checkbox to switch (#4409)
* 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
@ -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>
|
||||
|
||||
@ -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`}
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Delete currently set icon.`}
|
||||
</p>
|
||||
|
||||
@ -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`}
|
||||
</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`Allow friends to authenticate via Plex, even if you don't share any servers`}</span
|
||||
>
|
||||
</label>
|
||||
</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`}
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Delete currently set icon.`}
|
||||
</p>
|
||||
|
||||
@ -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`}
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
<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`}
|
||||
</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` Allow IDP-initiated logins`}</span
|
||||
>
|
||||
</label>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user