merge v0.23.0-rc changes

ui/src/components/records/PageRecordConfirmVerification.svelte

@@ -1,40 +1,74 @@
 <script>
-    import PocketBase, { getTokenPayload } from "pocketbase";
     import FullPage from "@/components/base/FullPage.svelte";
+    import ApiClient from "@/utils/ApiClient";
+    import PocketBase, { getTokenPayload, isTokenExpired } from "pocketbase";
 
     export let params;
 
-    let success = false;
-    let isLoading = false;
+    let successConfirm = false;
+    let isConfirming = false;
+
+    let successResend = false;
+    let isResending = false;
 
     send();
 
     async function send() {
-        isLoading = true;
+        if (isConfirming) {
+            return;
+        }
 
-        // init a custom client to avoid interfering with the admin state
+        isConfirming = true;
+
+        // init a custom client to avoid interfering with the superuser state
         const client = new PocketBase(import.meta.env.PB_BACKEND_URL);
 
         try {
             const payload = getTokenPayload(params?.token);
             await client.collection(payload.collectionId).confirmVerification(params?.token);
-            success = true;
+            successConfirm = true;
         } catch (err) {
-            success = false;
+            successConfirm = false;
         }
 
-        isLoading = false;
+        isConfirming = false;
+    }
+
+    $: canResend = params?.token && isTokenExpired(params.token);
+
+    async function resend() {
+        const payload = getTokenPayload(params?.token);
+
+        if (isResending || !payload.collectionId || !payload.email) {
+            return;
+        }
+
+        isResending = true;
+
+        // init a custom client to avoid interfering with the superuser state
+        const client = new PocketBase(import.meta.env.PB_BACKEND_URL);
+
+        try {
+            const payload = getTokenPayload(params?.token);
+            await client.collection(payload.collectionId).requestVerification(payload.email);
+            successResend = true;
+        } catch (err) {
+            ApiClient.error(err);
+            successResend = false;
+        }
+
+        isResending = false;
     }
 </script>
 
 <FullPage nobranding>
-    {#if isLoading}
+    {#if isConfirming}
         <div class="txt-center">
             <div class="loader loader-lg">
                 <em>Please wait...</em>
             </div>
         </div>
-    {:else if success}
+    {:else if successConfirm}
         <div class="alert alert-success">
             <div class="icon"><i class="ri-checkbox-circle-line" /></div>
             <div class="content txt-bold">
@@ -42,6 +76,17 @@
             </div>
         </div>
 
+        <button type="button" class="btn btn-transparent btn-block" on:click={() => window.close()}>
+            Close
+        </button>
+    {:else if successResend}
+        <div class="alert alert-success">
+            <div class="icon"><i class="ri-checkbox-circle-line" /></div>
+            <div class="content txt-bold">
+                <p>Please check your email for the new verification link.</p>
+            </div>
+        </div>
+
         <button type="button" class="btn btn-transparent btn-block" on:click={() => window.close()}>
             Close
         </button>
@@ -53,8 +98,20 @@
             </div>
         </div>
 
-        <button type="button" class="btn btn-transparent btn-block" on:click={() => window.close()}>
-            Close
-        </button>
+        {#if canResend}
+            <button
+                type="button"
+                class="btn btn-transparent btn-block"
+                class:btn-loading={isResending}
+                disabled={isResending}
+                on:click={resend}
+            >
+                <span class="txt">Resend</span>
+            </button>
+        {:else}
+            <button type="button" class="btn btn-transparent btn-block" on:click={() => window.close()}>
+                Close
+            </button>
+        {/if}
     {/if}
 </FullPage>