added option to auto generate admin and auth record passwords from the Admin UI

ui/src/components/admins/AdminUpsertPanel.svelte

@@ -10,6 +10,7 @@
     import Field from "@/components/base/Field.svelte";
     import Toggler from "@/components/base/Toggler.svelte";
     import OverlayPanel from "@/components/base/OverlayPanel.svelte";
+    import SecretGeneratorButton from "@/components/base/SecretGeneratorButton.svelte";
 
     const dispatch = createEventDispatcher();
     const formId = "admin_" + CommonHelper.randomString(5);
@@ -208,6 +209,9 @@
                                 required
                                 bind:value={password}
                             />
+                            <div class="form-field-addon">
+                                <SecretGeneratorButton />
+                            </div>
                         </Field>
                     </div>
                     <div class="col-sm-6">

ui/src/components/admins/PageAdmins.svelte

@@ -81,10 +81,12 @@
 
         <div class="flex-fill" />
 
-        <button type="button" class="btn btn-expanded" on:click={() => adminUpsertPanel?.show()}>
-            <i class="ri-add-line" />
-            <span class="txt">New admin</span>
-        </button>
+        <div class="btns-group">
+            <button type="button" class="btn btn-expanded" on:click={() => adminUpsertPanel?.show()}>
+                <i class="ri-add-line" />
+                <span class="txt">New admin</span>
+            </button>
+        </div>
     </header>
 
     <Searchbar

ui/src/components/base/CopyIcon.svelte

@@ -36,6 +36,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <i
     class={copyTimeout ? successClasses : idleClasses}
+    aria-label={"Copy"}
     use:tooltip={!copyTimeout ? "Copy" : ""}
     on:click|stopPropagation={copy}
 />

ui/src/components/base/SecretGeneratorButton.svelte

@@ -0,0 +1,68 @@
+<script>
+    import { createEventDispatcher, tick } from "svelte";
+    import CommonHelper from "@/utils/CommonHelper";
+    import Toggler from "@/components/base/Toggler.svelte";
+    import CopyIcon from "@/components/base/CopyIcon.svelte";
+    import tooltip from "@/actions/tooltip";
+
+    const dispatch = createEventDispatcher();
+
+    let classes = "btn-sm btn-hint btn-transparent";
+    export { classes as class };
+
+    export let length = 32;
+
+    let secret = "";
+    let secretElem;
+    let togglerActive = false;
+
+    async function generate() {
+        secret = CommonHelper.randomSecret(length);
+
+        dispatch("generate", secret);
+
+        await tick();
+
+        if (secretElem) {
+            let range = document.createRange();
+            range.selectNode(secretElem);
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+        }
+    }
+</script>
+
+<button
+    tabindex="-1"
+    type="button"
+    aria-label="Generate"
+    use:tooltip={togglerActive ? "" : "Generate"}
+    class="btn btn-circle {classes}"
+>
+    <i class="ri-sparkling-line" />
+    <Toggler
+        class="dropdown dropdown-upside dropdown-center dropdown-nowrap"
+        bind:active={togglerActive}
+        on:show={generate}
+    >
+        <div class="flex flex-gap-5 p-5">
+            <span bind:this={secretElem} class="secret">{secret}</span>
+            <CopyIcon value={secret} />
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <i
+                class="ri-refresh-line txt-sm link-hint"
+                use:tooltip={"Refresh"}
+                aria-label="Refresh"
+                on:click={generate}
+            />
+        </div>
+    </Toggler>
+</button>
+
+<style>
+    .secret {
+        font-family: monospace;
+        font-weight: normal;
+        user-select: all;
+    }
+</style>

ui/src/components/records/fields/AuthFields.svelte

@@ -5,6 +5,7 @@
     import { confirm } from "@/stores/confirmation";
     import { removeError } from "@/stores/errors";
     import Field from "@/components/base/Field.svelte";
+    import SecretGeneratorButton from "@/components/base/SecretGeneratorButton.svelte";
 
     export let record;
     export let collection;
@@ -102,6 +103,9 @@
                                 required
                                 bind:value={record.password}
                             />
+                            <div class="form-field-addon">
+                                <SecretGeneratorButton />
+                            </div>
                         </Field>
                     </div>
                     <div class="col-sm-6">

ui/src/components/settings/PageBackups.svelte

@@ -13,7 +13,7 @@
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
     import BackupsList from "@/components/settings/BackupsList.svelte";
     import S3Fields from "@/components/settings/S3Fields.svelte";
-    import BackupUploadBtn from "@/components/settings/BackupUploadBtn.svelte";
+    import BackupUploadButton from "@/components/settings/BackupUploadButton.svelte";
 
     $pageTitle = "Backups";
 
@@ -109,7 +109,7 @@
             <div class="flex m-b-sm flex-gap-10">
                 <span class="txt-xl">Backup and restore your PocketBase data</span>
                 <RefreshButton class="btn-sm" tooltip={"Refresh"} on:refresh={refreshList} />
-                <BackupUploadBtn class="btn-sm" on:success={refreshList} />
+                <BackupUploadButton class="btn-sm" on:success={refreshList} />
             </div>
 
             <BackupsList bind:this={backupsListComponent} />

ui/src/components/settings/TokenField.svelte

@@ -21,10 +21,7 @@
                 if (secret) {
                     secret = undefined;
                 } else {
-                    secret =
-                        typeof crypto != "undefined" && crypto.randomUUID
-                            ? crypto.randomUUID() + CommonHelper.randomString(14)
-                            : CommonHelper.randomString(50);
+                    secret = CommonHelper.randomSecret(50);
                 }
             }}
         >