initial v0.8 pre-release

ui/src/components/admins/AdminUpsertPanel.svelte

@@ -4,6 +4,7 @@
     import { Admin } from "pocketbase";
     import CommonHelper from "@/utils/CommonHelper";
     import ApiClient from "@/utils/ApiClient";
+    import tooltip from "@/actions/tooltip";
     import { setErrors } from "@/stores/errors";
     import { confirm } from "@/stores/confirmation";
     import { addSuccessToast } from "@/stores/toasts";
@@ -43,7 +44,6 @@
     }
 
     function load(model) {
-        setErrors({}); // reset errors
         admin = model?.clone ? model.clone() : new Admin();
         reset(); // reset form
     }
@@ -54,6 +54,7 @@
         avatar = admin?.avatar || 0;
         password = "";
         passwordConfirm = "";
+        setErrors({}); // reset errors
     }
 
     function save() {
@@ -146,6 +147,15 @@
                     <i class={CommonHelper.getFieldTypeIcon("primary")} />
                     <span class="txt">ID</span>
                 </label>
+                <div class="form-field-addon">
+                    <i
+                        class="ri-calendar-event-line txt-disabled"
+                        use:tooltip={{
+                            text: `Created: ${admin.created}\nUpdated: ${admin.updated}`,
+                            position: "left",
+                        }}
+                    />
+                </div>
                 <input type="text" id={uniqueId} value={admin.id} disabled />
             </Field>
         {/if}
@@ -154,22 +164,16 @@
             <p class="section-title">Avatar</p>
             <div class="flex flex-gap-xs flex-wrap">
                 {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as index}
-                    <figure
-                        tabindex="0"
+                    <button
+                        type="button"
                         class="link-fade thumb thumb-circle {index == avatar ? 'thumb-active' : 'thumb-sm'}"
                         on:click={() => (avatar = index)}
-                        on:keydown={(e) => {
-                            if (e.code === "Enter" || e.code === "Space") {
-                                e.preventDefault();
-                                avatar = index;
-                            }
-                        }}
                     >
                         <img
                             src="{import.meta.env.BASE_URL}images/avatars/avatar{index}.svg"
                             alt="Avatar {index}"
                         />
-                    </figure>
+                    </button>
                 {/each}
             </div>
         </div>
@@ -234,7 +238,7 @@
                 <span />
                 <i class="ri-more-line" />
                 <Toggler class="dropdown dropdown-upside dropdown-left dropdown-nowrap">
-                    <button type="button" class="dropdown-item" on:click={() => deleteConfirm()}>
+                    <button type="button" class="dropdown-item txt-danger" on:click={() => deleteConfirm()}>
                         <i class="ri-delete-bin-7-line" />
                         <span class="txt">Delete</span>
                     </button>

ui/src/components/admins/PageAdminLogin.svelte

@@ -3,7 +3,7 @@
     import FullPage from "@/components/base/FullPage.svelte";
     import ApiClient from "@/utils/ApiClient";
     import Field from "@/components/base/Field.svelte";
-    import { addErrorToast } from "@/stores/toasts";
+    import { addErrorToast, removeAllToasts } from "@/stores/toasts";
 
     const queryParams = new URLSearchParams($querystring);
 
@@ -18,8 +18,10 @@
 
         isLoading = true;
 
-        return ApiClient.admins.authViaEmail(email, password)
+        return ApiClient.admins
+            .authWithPassword(email, password)
             .then(() => {
+                removeAllToasts();
                 replace("/");
             })
             .catch(() => {
@@ -37,7 +39,7 @@
             <h4>Admin sign in</h4>
         </div>
 
-        <Field class="form-field required" name="email" let:uniqueId>
+        <Field class="form-field required" name="identity" let:uniqueId>
             <label for={uniqueId}>Email</label>
             <!-- svelte-ignore a11y-autofocus -->
             <input type="email" id={uniqueId} bind:value={email} required autofocus />

ui/src/components/admins/PageAdmins.svelte

@@ -10,6 +10,7 @@
     import SortHeader from "@/components/base/SortHeader.svelte";
     import IdLabel from "@/components/base/IdLabel.svelte";
     import FormattedDate from "@/components/base/FormattedDate.svelte";
+    import HorizontalScroller from "@/components/base/HorizontalScroller.svelte";
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
     import AdminUpsertPanel from "@/components/admins/AdminUpsertPanel.svelte";
 
@@ -86,7 +87,7 @@
         on:submit={(e) => (filter = e.detail)}
     />
 
-    <div class="table-wrapper">
+    <HorizontalScroller class="table-wrapper">
         <table class="table" class:table-loading={isLoading}>
             <thead>
                 <tr>
@@ -145,6 +146,7 @@
                                 />
                             </figure>
                         </td>
+
                         <td class="col-type-text col-field-id">
                             <IdLabel id={admin.id} />
                             {#if admin.id === $loggedAdmin.id}
@@ -161,9 +163,11 @@
                         <td class="col-type-date col-field-created">
                             <FormattedDate date={admin.created} />
                         </td>
+
                         <td class="col-type-date col-field-updated">
                             <FormattedDate date={admin.updated} />
                         </td>
+
                         <td class="col-type-action min-width">
                             <i class="ri-arrow-right-line" />
                         </td>
@@ -194,7 +198,7 @@
                 {/each}
             </tbody>
         </table>
-    </div>
+    </HorizontalScroller>
 
     {#if admins.length}
         <small class="block txt-hint txt-right m-t-sm">Showing {admins.length} of {admins.length}</small>