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
2023-01-11 13:37:49 +01:00
committed by GitHub
parent f7037b9f33
commit ddbd8153e2
47 changed files with 702 additions and 399 deletions

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({
uuid: pk,
})
.then((o) => {
this.type = o.type || OutpostTypeEnum.Proxy;
return o;
});
async loadInstance(pk: string): Promise<Outpost> {
const o = await new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesRetrieve({
uuid: pk,
});
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.`}

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>

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`}
</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`Verify Kubernetes API SSL Certificate`}</span
>
</label>
</ak-form-element-horizontal>
</form>`;
}