updated OAuth2 providers ui

2023-04-13 15:38:12 +03:00
parent a77b62e5bd
commit af5f808144
74 changed files with 845 additions and 609 deletions
--- a/ui/src/components/settings/AuthProviderPanel.svelte
+++ b/ui/src/components/settings/AuthProviderPanel.svelte
@@ -0,0 +1,124 @@
+<script>
+    import { createEventDispatcher } from "svelte";
+    import ApiClient from "@/utils/ApiClient";
+    import CommonHelper from "@/utils/CommonHelper";
+    import { setErrors } from "@/stores/errors";
+    import { addSuccessToast } from "@/stores/toasts";
+    import OverlayPanel from "@/components/base/OverlayPanel.svelte";
+    import Field from "@/components/base/Field.svelte";
+    import RedactedPasswordInput from "@/components/base/RedactedPasswordInput.svelte";
+
+    const dispatch = createEventDispatcher();
+
+    const formId = "provider_popup_" + CommonHelper.randomString(5);
+
+    let panel;
+    let provider = {};
+    let config = {};
+    let isSubmitting = false;
+    let initialHash = "";
+
+    $: hasChanges = JSON.stringify(config) != initialHash;
+
+    export function show(showProvider, showConfig) {
+        setErrors({}); // reset any previous errors
+
+        provider = Object.assign({}, showProvider);
+        config = Object.assign({ enabled: true }, showConfig);
+        initialHash = JSON.stringify(config);
+
+        panel?.show();
+    }
+
+    export function hide() {
+        return panel?.hide();
+    }
+
+    async function submit() {
+        isSubmitting = true;
+
+        try {
+            const data = {};
+            data[provider.key] = CommonHelper.filterRedactedProps(config);
+
+            const result = await ApiClient.settings.update(data);
+
+            setErrors({});
+
+            addSuccessToast("Successfully updated provider settings.");
+
+            dispatch("submit", result);
+
+            hide();
+        } catch (err) {
+            ApiClient.errorResponseHandler(err);
+        }
+
+        isSubmitting = false;
+    }
+
+    function clear() {
+        for (let k in config) {
+            config[k] = "";
+        }
+        config.enabled = false;
+    }
+</script>
+
+<OverlayPanel bind:this={panel} overlayClose={!isSubmitting} escClose={!isSubmitting} on:show on:hide>
+    <svelte:fragment slot="header">
+        <h4 class="center txt-break">{provider.title || provider.key} provider</h4>
+    </svelte:fragment>
+
+    <form id={formId} autocomplete="off" on:submit|preventDefault={() => submit()}>
+        <div class="flex m-b-base">
+            <Field class="form-field form-field-toggle m-b-0" name="{provider.key}.enabled" let:uniqueId>
+                <input type="checkbox" id={uniqueId} bind:checked={config.enabled} />
+                <label for={uniqueId}>Enable</label>
+            </Field>
+
+            <button type="button" class="btn btn-sm btn-transparent btn-hint m-l-auto" on:click={clear}>
+                <span class="txt">Clear all fields</span>
+            </button>
+        </div>
+
+        <Field
+            class="form-field {config.enabled ? 'required' : ''}"
+            name="{provider.key}.clientId"
+            let:uniqueId
+        >
+            <label for={uniqueId}>Client ID</label>
+            <input type="text" id={uniqueId} bind:value={config.clientId} required={config.enabled} />
+        </Field>
+
+        <Field
+            class="form-field {config.enabled ? 'required' : ''}"
+            name="{provider.key}.clientSecret"
+            let:uniqueId
+        >
+            <label for={uniqueId}>Client secret</label>
+            <RedactedPasswordInput bind:value={config.clientSecret} id={uniqueId} required={config.enabled} />
+        </Field>
+
+        {#if provider.optionsComponent}
+            <div class="col-lg-12">
+                <svelte:component this={provider.optionsComponent} key={provider.key} bind:config />
+            </div>
+        {/if}
+    </form>
+
+    <svelte:fragment slot="footer">
+        <button type="button" class="btn btn-transparent" on:click={hide} disabled={isSubmitting}>
+            Close
+        </button>
+        <button
+            type="submit"
+            form={formId}
+            class="btn btn-expanded"
+            class:btn-loading={isSubmitting}
+            disabled={!hasChanges || isSubmitting}
+        >
+            <span class="txt">Save changes</span>
+        </button>
+    </svelte:fragment>
+</OverlayPanel>