improve avatar, code cleanup

src/app/components/ClientCard/Avatar.vue

@@ -22,9 +22,7 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   client: LocalClient;
 }>();
-// TODO: why is this undefined?
-console.log(props.client.avatar);
 </script>

src/app/components/ClientCard/Name.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="text-sm text-gray-700 md:text-base dark:text-neutral-200"
-    :title="$t('createdOn') + dateTime(new Date(client.createdAt))"
+    :title="$t('createdOn') + $d(new Date(client.createdAt))"
   >
     <span class="border-b-2 border-t-2 border-transparent">
       {{ client.name }}

src/app/components/Clients/CreateDialog.vue

@@ -127,4 +127,6 @@
 
 <script setup lang="ts">
 const modalStore = useModalStore();
+
+// TODO: use radix
 </script>

src/app/components/base/Avatar.vue

@@ -3,9 +3,8 @@
     class="mr-2 inline-flex select-none items-center justify-center overflow-hidden rounded-full align-middle"
   >
     <AvatarImage
-      v-if="img"
       class="h-full w-full rounded-[inherit] object-cover"
-      :src="img"
+      :src="img ?? ''"
     />
     <AvatarFallback
       class="leading-1 flex h-full w-full items-center justify-center bg-white text-sm font-medium"

src/app/layouts/default.vue

@@ -4,12 +4,12 @@
       <div
         class="mb-5"
         :class="
-          hasOwnLogo
-            ? 'flex justify-end'
-            : 'flex flex-auto flex-col-reverse items-center gap-3 xxs:flex-row'
+          loggedIn
+            ? 'flex flex-auto flex-col-reverse items-center gap-3 xxs:flex-row'
+            : 'flex justify-end'
         "
       >
-        <HeaderLogo v-if="!hasOwnLogo" />
+        <HeaderLogo v-if="loggedIn" />
         <div class="flex grow-0 items-center gap-3 self-end xxs:self-center">
           <HeaderThemeSwitch />
           <HeaderChartToggle />
@@ -59,10 +59,6 @@ globalStore.fetchRelease();
 
 const route = useRoute();
 
-const hasOwnLogo = computed(
-  () => route.path === '/login' || route.path === '/setup'
-);
-
 const loggedIn = computed(
   () => route.path !== '/login' && route.path !== '/setup'
 );

src/app/stores/auth.ts

@@ -1,16 +1,16 @@
 export const useAuthStore = defineStore('Auth', () => {
-  const userData = ref<null | {
-    name: string;
-    username: string;
-    role: string;
-    email: string | null;
-  }>();
+  const { data: userData, refresh: update } = useFetch('/api/session', {
+    method: 'get',
+  });
 
   /**
    * @throws if unsuccessful
    */
   async function login(username: string, password: string, remember: boolean) {
-    await api.createSession({ username, password, remember });
+    await $fetch('/api/session', {
+      method: 'post',
+      body: { username, password, remember },
+    });
     return true as const;
   }
 
@@ -18,15 +18,11 @@ export const useAuthStore = defineStore('Auth', () => {
    * @throws if unsuccessful
    */
   async function logout() {
-    const response = await api.deleteSession();
+    const response = await $fetch('/api/session', {
+      method: 'delete',
+    });
     return response.success;
   }
 
-  async function update() {
-    // store role etc
-    const { data: response } = await api.getSession();
-    userData.value = response.value;
-  }
-
   return { userData, login, logout, update };
 });

src/app/utils/api.ts

@@ -1,31 +1,4 @@
 class API {
-  async getSession() {
-    return useFetch('/api/session', {
-      method: 'get',
-    });
-  }
-
-  async createSession({
-    username,
-    password,
-    remember,
-  }: {
-    username: string;
-    password: string | null;
-    remember: boolean;
-  }) {
-    return $fetch('/api/session', {
-      method: 'post',
-      body: { username, password, remember },
-    });
-  }
-
-  async deleteSession() {
-    return $fetch('/api/session', {
-      method: 'delete',
-    });
-  }
-
   async getClients() {
     return useFetch('/api/client', {
       method: 'get',

src/server/api/session.post.ts

@@ -40,5 +40,5 @@ export default defineEventHandler(async (event) => {
 
   SERVER_DEBUG(`New Session: ${data.id}`);
 
-  return { success: true, requiresPassword: true };
+  return { success: true };
 });