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
@ -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">
|
||||
|
||||
@ -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`}
|
||||
</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`Include claims in id_token`}</span>
|
||||
</label>
|
||||
<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>
|
||||
|
||||
@ -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`}
|
||||
</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`Internal host SSL Validation`}</span
|
||||
>
|
||||
</label>
|
||||
<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`}
|
||||
</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`Set HTTP-Basic Authentication`}</span
|
||||
>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Set a custom HTTP-Basic Authentication header based on values from authentik.`}
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user