refactor(frontend): auth-shared.css, apiErrorMessage, one date helper per shape, modal canon in components.css — the frontend pass of the shape audit (#2831 #2832, milestone 296)

- assets/auth-shared.css: the five auth views carried byte-identical scoped copies of the page/card/brand/footer/field/input/error rules (~60 lines each); they now load one stylesheet the way the editors load editor-shared.css. .closed-msg/.error-block/.success-msg (identical bodies) are one .auth-note; the form rules are scoped under .auth-card so nothing leaks into the rest of the app. - api/client.apiErrorMessage(e, fallback): the one place the {"error"} envelope is unpacked; replaces ten six-line `"body" in e` catch blocks. - utils/dateFormat: fmtDate / fmtStamp / fmtLogStamp replace eight local formatDate/formatTime copies (three byte-identical pairs); the file’s old Calendar/Home helpers had no callers and are gone. useRelativeTime gains relativeTimeOrDate for the two workspace panels’ identical variant. - components.css now owns the .modal-* shape (overlay/card/title/message/ actions/btn/primary/danger). It was copied into four views and lived in editor-shared.css, which ConfirmDialog — styleless, teleported to <body> — silently depended on: opened from SnippetDetailView before any editor view had loaded, it rendered unstyled. Views keep only their own overrides. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-21 12:41:18 -04:00
parent 7d48eb0b1b
commit 2a6c55dacb
22 changed files with 290 additions and 834 deletions
@@ -3,10 +3,11 @@ import { ref, computed, watch, onMounted } from "vue";
 import { useSettingsStore } from "@/stores/settings";
 import { useAuthStore } from "@/stores/auth";
 import { useToastStore } from "@/stores/toast";
-import { apiGet, apiPost, apiPut, apiDelete, listGroups, createGroup, deleteGroup, listGroupMembers, addGroupMember, removeGroupMember, searchUsers, listApiKeys, createApiKey as apiCreateApiKey, revokeApiKey as apiRevokeApiKey, getProfile, updateProfile, type ApiKeyEntry, type GroupEntry, type GroupMember, type UserSearchResult, type UserProfile } from "@/api/client";
+import { apiGet, apiPost, apiPut, apiDelete, listGroups, createGroup, deleteGroup, listGroupMembers, addGroupMember, removeGroupMember, searchUsers, listApiKeys, createApiKey as apiCreateApiKey, revokeApiKey as apiRevokeApiKey, getProfile, updateProfile, type ApiKeyEntry, type GroupEntry, type GroupMember, type UserSearchResult, type UserProfile, apiErrorMessage } from "@/api/client";
 import type { User } from "@/types/auth";
 import PaginationBar from "@/components/PaginationBar.vue";
 import TagInput from "@/components/TagInput.vue";
+import { fmtDate, fmtLogStamp } from "@/utils/dateFormat";

 const store = useSettingsStore();
 const authStore = useAuthStore();
@@ -624,12 +625,7 @@ async function changeEmail() {
    emailPassword.value = "";
    toastStore.show("Email updated successfully");
  } catch (e: unknown) {
-    if (e && typeof e === "object" && "body" in e) {
-      const b = (e as { body?: { error?: string } }).body;
-      toastStore.show(b?.error || "Failed to update email", "error");
-    } else {
-      toastStore.show("Failed to update email", "error");
-    }
+    toastStore.show(apiErrorMessage(e, "Failed to update email"), "error");
  } finally {
    changingEmail.value = false;
  }
@@ -663,12 +659,7 @@ async function changePassword() {
    newPassword.value = "";
    confirmNewPassword.value = "";
  } catch (e: unknown) {
-    if (e && typeof e === "object" && "body" in e) {
-      const body = (e as { body?: { error?: string } }).body;
-      toastStore.show(body?.error || "Failed to change password", "error");
-    } else {
-      toastStore.show("Failed to change password", "error");
-    }
+    toastStore.show(apiErrorMessage(e, "Failed to change password"), "error");
  } finally {
    changingPassword.value = false;
  }
@@ -766,12 +757,7 @@ async function sendTestEmail() {
    await apiPost("/api/admin/smtp/test", { recipient: testRecipient.value.trim() });
    toastStore.show("Test email sent successfully");
  } catch (e: unknown) {
-    if (e && typeof e === "object" && "body" in e) {
-      const body = (e as { body?: { error?: string } }).body;
-      toastStore.show(body?.error || "Failed to send test email", "error");
-    } else {
-      toastStore.show("Failed to send test email", "error");
-    }
+    toastStore.show(apiErrorMessage(e, "Failed to send test email"), "error");
  } finally {
    sendingTest.value = false;
  }
@@ -1129,14 +1115,6 @@ function toggleLogExpand(id: number) {
  expandedLogId.value = expandedLogId.value === id ? null : id;
 }

-function formatLogTime(iso: string): string {
-  const d = new Date(iso);
-  return d.toLocaleString(undefined, {
-    month: "short", day: "numeric",
-    hour: "2-digit", minute: "2-digit", second: "2-digit",
-  });
-}
-
 function formatLogDetails(details: string | null): string {
  if (!details) return "";
  try { return JSON.stringify(JSON.parse(details), null, 2); } catch { return details; }
@@ -1224,12 +1202,6 @@ async function deleteUser(userId: number) {
    deleting.value = null;
  }
 }
-
-function formatUserDate(iso: string): string {
-  return new Date(iso).toLocaleDateString(undefined, {
-    year: "numeric", month: "short", day: "numeric",
-  });
-}
 </script>

 <template>
@@ -2355,8 +2327,8 @@ function formatUserDate(iso: string): string {
            <tbody>
              <tr v-for="inv in invitations" :key="inv.id">
                <td class="cell-email">{{ inv.email }}</td>
-                <td class="hide-mobile cell-date">{{ formatUserDate(inv.created_at) }}</td>
-                <td class="hide-mobile cell-date">{{ formatUserDate(inv.expires_at) }}</td>
+                <td class="hide-mobile cell-date">{{ fmtDate(inv.created_at) }}</td>
+                <td class="hide-mobile cell-date">{{ fmtDate(inv.expires_at) }}</td>
                <td class="cell-actions">
                  <button class="btn-ghost btn-compact" @click="revokeInvitation(inv.id)" :disabled="revokingId !== null">
                    {{ revokingId === inv.id ? "Revoking..." : "Revoke" }}
@@ -2391,7 +2363,7 @@ function formatUserDate(iso: string): string {
                  {{ u.role }}
                </span>
              </td>
-              <td class="hide-mobile cell-date">{{ formatUserDate(u.created_at) }}</td>
+              <td class="hide-mobile cell-date">{{ fmtDate(u.created_at) }}</td>
              <td class="cell-actions">
                <template v-if="u.id === authStore.user?.id">
                  <span class="you-label">You</span>
@@ -2474,7 +2446,7 @@ function formatUserDate(iso: string): string {
            <tbody>
              <template v-for="entry in logs" :key="entry.id">
                <tr class="log-row" :class="{ 'row-expanded': expandedLogId === entry.id }" @click="toggleLogExpand(entry.id)">
-                  <td class="cell-time">{{ formatLogTime(entry.created_at) }}</td>
+                  <td class="cell-time">{{ fmtLogStamp(entry.created_at) }}</td>
                  <td>
                    <span class="category-badge" :class="'cat-' + entry.category">{{ entry.category }}</span>
                  </td>