merge v0.23.0-rc changes

ui/src/components/records/ImpersonatePopup.svelte

@@ -0,0 +1,157 @@
+<script>
+    import { createEventDispatcher } from "svelte";
+    import ApiClient from "@/utils/ApiClient";
+    import CommonHelper from "@/utils/CommonHelper";
+    import { addSuccessToast } from "@/stores/toasts";
+    import OverlayPanel from "@/components/base/OverlayPanel.svelte";
+    import CopyIcon from "@/components/base/CopyIcon.svelte";
+    import SdkTabs from "@/components/base/SdkTabs.svelte";
+    import Field from "@/components/base/Field.svelte";
+
+    const dispatch = createEventDispatcher();
+    const formId = "impersonate_" + CommonHelper.randomString(5);
+
+    export let collection;
+    export let record;
+
+    let panel;
+    let duration = 0;
+    let isSubmitting = false;
+    let impersonateClient;
+
+    $: backendAbsUrl = CommonHelper.getApiExampleUrl(impersonateClient?.baseURL);
+
+    export function show() {
+        if (!record) {
+            return;
+        }
+        panel?.show();
+    }
+
+    export function hide() {
+        panel?.hide();
+        reset();
+    }
+
+    async function submit() {
+        if (isSubmitting || !collection || !record) {
+            return;
+        }
+
+        isSubmitting = true;
+
+        try {
+            impersonateClient = await ApiClient.collection(collection.name).impersonate(record.id, duration);
+
+            dispatch("submit", impersonateClient);
+        } catch (err) {
+            ApiClient.error(err);
+        }
+
+        isSubmitting = false;
+    }
+
+    function reset() {
+        duration = 0;
+        impersonateClient = undefined;
+    }
+</script>
+
+<OverlayPanel
+    bind:this={panel}
+    overlayClose={false}
+    escClose={!isSubmitting}
+    beforeHide={() => !isSubmitting}
+    popup
+    on:show
+    on:hide
+>
+    <svelte:fragment slot="header">
+        <h4>Impersonate auth token</h4>
+    </svelte:fragment>
+
+    <div class="clearfix"></div>
+
+    {#if impersonateClient?.authStore?.token}
+        <div class="alert alert-success">
+            <div class="content txt-bold">
+                <span class="txt token-holder">{impersonateClient.authStore.token}</span>
+                <CopyIcon value={impersonateClient.authStore.token} />
+            </div>
+        </div>
+
+        <SdkTabs
+            js={`
+                import PocketBase from 'pocketbase';
+
+                const token = "...";
+
+                const pb = new PocketBase('${backendAbsUrl}');
+
+                pb.authStore.save(token, null);
+            `}
+            dart={`
+                import 'package:pocketbase/pocketbase.dart';
+
+                final token = "...";
+
+                final pb = PocketBase('${backendAbsUrl}');
+
+                pb.authStore.save(token, null);
+            `}
+        />
+    {:else}
+        <form id={formId} on:submit|preventDefault={submit}>
+            <p>
+                Generate a non-refreshable auth token for
+                <strong>{CommonHelper.displayValue(record)}:</strong>
+            </p>
+
+            <Field class="form-field m-b-0 m-t-sm" name="duration" let:uniqueId>
+                <label for={uniqueId}>Token duration (in seconds)</label>
+                <input
+                    type="number"
+                    id={uniqueId}
+                    placeholder="Default to the collection setting ({collection?.authToken?.duration || 0}s)"
+                    min="0"
+                    step="1"
+                    value={duration || ""}
+                    on:input={(e) => (duration = e.target.value << 0)}
+                />
+            </Field>
+        </form>
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <button type="button" class="btn btn-transparent" on:click={hide} disabled={isSubmitting}>
+            <span class="txt">Close</span>
+        </button>
+        {#if impersonateClient?.authStore?.token}
+            <button
+                type="button"
+                class="btn btn-secondary btn-expanded"
+                disabled={isSubmitting}
+                on:click={() => reset()}
+            >
+                <span class="txt">Generate a new one</span>
+            </button>
+        {:else}
+            <button
+                type="submit"
+                form={formId}
+                class="btn btn-expanded"
+                class:btn-loading={isSubmitting}
+                disabled={isSubmitting}
+                on:click={() => submit()}
+            >
+                <span class="txt">Generate token</span>
+            </button>
+        {/if}
+    </svelte:fragment>
+</OverlayPanel>
+
+<style>
+    .token-holder {
+        user-select: all;
+    }
+</style>