feat(website): improve website ui

- improve register and login ui
- delete unused component
- rework modal
- add router navigation guard when not logged in
- home visible only if logged in
- do not show/check notifications if not logged in

packages/website/src/App.vue

@@ -61,7 +61,7 @@ async function loginState() {
     console.log(`Logged In: ${loggedIn.value} New User: `, newUser);
 
     if (!loggedIn.value && newUser) {
-      await userStore.changeUser(newUser, "login");
+      await userStore.changeUser(newUser);
     } else {
       throw Error();
     }

packages/website/src/Httpclient.ts

@@ -336,7 +336,6 @@ export const HttpClient = {
       return Promise.reject(new Error("already logged in"));
     }
     if (psw !== pswRepeat) {
-      // TODO show incorrect password
       return Promise.reject(new Error("repeated password does not match new password"));
     }
 
@@ -347,7 +346,7 @@ export const HttpClient = {
   },
 
   logout(): Promise<boolean> {
-    return this.queryServer(serverRestApi.api.user.logout.post).then((result) => result.loggedOut);
+    return this.queryServer(serverRestApi.api.user.logout.post);
   },
 
   getExternalUser(): Promise<ExternalUser[]> {

packages/website/src/components/app-header.vue

@@ -55,6 +55,10 @@ const userStore = useUserStore();
 
 // DATA
 const loggedInItems = [
+  {
+    label: "Home",
+    to: { name: "home" },
+  },
   {
     label: "Add Medium",
     to: { name: "addMedium" },
@@ -131,12 +135,7 @@ const notifications = ref<UserNotification[]>([]);
 
 // COMPUTED
 const menuItems = computed(() => {
-  const items: MenuItem[] = [
-    {
-      label: "Home",
-      to: { name: "home" },
-    },
-  ];
+  const items: MenuItem[] = [];
 
   if (userStore.loggedIn) {
     items.push(
@@ -177,6 +176,7 @@ function logout(): void {
     });
   });
 }
+
 function checkNotifications() {
   getLatestNotifications();
   // check every minute at most
@@ -186,6 +186,11 @@ function checkNotifications() {
 async function getLatestNotifications() {
   await userStore.checkNotificationCounts();
 
+  if (!userStore.loggedIn) {
+    notifications.value = [];
+    return;
+  }
+
   const now = new Date();
   now.setDate(now.getDate() - 5);
   const data = await HttpClient.getNotifications(now, false, 5);

packages/website/src/components/external-user.vue

@@ -87,14 +87,15 @@ const data = reactive<Data>({
 const filteredData = computed(() => {
   return externalUserStore.externalUser
     .filter((value) => value)
-    .map((value): ExternalUserItem => {
+    .map((value): ExternalUserItem | undefined => {
       const host = data.hosts.find((hostValue) => hostValue.value === value.type);
       if (!host) {
-        // FIXME: do not throw error, display error and filter this out
-        throw Error("no host for external user: " + JSON.stringify(value));
+        console.warn("no host for external user:", value);
+        return undefined;
       }
       return { ...value, host };
-    });
+    })
+    .filter((value): value is ExternalUserItem => !!value);
 });
 
 // FUNCTIONS

packages/website/src/components/modal/add-unused-modal.vue

@@ -148,7 +148,7 @@
         </li>
       </ul>
     </template>
-    <template #finish> Add Medium</template>
+    <template #finish>Add Medium</template>
   </modal>
   <div
     id="alert-toast"

packages/website/src/router.ts

@@ -1,4 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
+import { pinia } from "./store/pinia";
+import { useUserStore } from "./store/store";
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
@@ -228,4 +230,12 @@ const router = createRouter({
   ],
 });
 
+const userStore = useUserStore(pinia);
+
+router.beforeEach((to) => {
+  if (!userStore.loggedIn && (!to.name || !["login", "register"].includes(to.name.toString()))) {
+    return { name: "login" };
+  }
+});
+
 export default router;

packages/website/src/store/lists.ts

@@ -20,18 +20,9 @@ export const useListStore = defineStore("lists", {
     userListsLocal(lists: List[]): void {
       this.lists = lists.map((list) => ({ ...list, external: false }));
     },
-    addListLocal(list: StoreInternalList) {
-      list.external = false;
-      this.lists.push(list);
-    },
-    deleteListLocal(id: number) {
-      const index = this.lists.findIndex((value) => value.id === id);
-      if (index < 0) {
-        throw Error("invalid listId");
-      }
-      this.lists.splice(index, 1);
-    },
-    removeListItemLocal(payload: { listId: number; mediumId: number }) {
+    async deleteListItem(payload: { listId: number; mediumId: number }) {
+      await HttpClient.deleteListItem({ listId: payload.listId, mediumId: [payload.mediumId] });
+
       const list = this.lists.find((value) => value.id === payload.listId);
       if (!list) {
         throw Error("invalid listId");
@@ -45,14 +36,21 @@ export const useListStore = defineStore("lists", {
       }
       list.items.push(payload.mediumId);
     },
-    updateListLocal(updateList: List) {
+    async updateList(updateList: List) {
+      const success = await HttpClient.updateList(updateList);
+
+      if (!success) {
+        return false;
+      }
+
       const list = this.lists.find((value: List) => value.id === updateList.id);
 
       if (list) {
         Object.assign(list, updateList);
       } else {
         console.error("Cannot find list to update for id:", updateList.id);
       }
+      return true;
     },
     async loadLists() {
       try {
@@ -65,23 +63,28 @@ export const useListStore = defineStore("lists", {
     },
 
     async addList(data: { name: string; medium: number }) {
-      // TODO: check if list already exists
+      if (this.lists.find((value) => value.name === data.name)) {
+        throw Error("Duplicate List Name");
+      }
       if (!data.name) {
-        // TODO: commit("addListModalError", "Missing name");
-      } else if (!data.medium) {
-        // TODO: commit("addListModalError", "Missing type");
-      } else {
-        return HttpClient.createList({ list: { name: data.name, medium: data.medium } }).then((list) => {
-          // @ts-expect-error
-          this.addListLocal(list);
-          // TODO: commit("resetModal", "addList");
-        });
+        throw Error("Missing name");
+      }
+      if (!data.medium) {
+        throw Error("Missing Type");
       }
+
+      const list = await HttpClient.createList({ list: { name: data.name, medium: data.medium } });
+      this.lists.push({ ...list, external: false });
     },
 
     async deleteList(id: number) {
       await HttpClient.deleteList(id);
-      this.deleteListLocal(id);
+
+      const index = this.lists.findIndex((value) => value.id === id);
+      if (index < 0) {
+        throw Error("invalid listId");
+      }
+      this.lists.splice(index, 1);
     },
   },
 });

packages/website/src/store/media.ts

@@ -32,27 +32,13 @@ export const useMediaStore = defineStore("media", {
     },
   },
   actions: {
-    addMediumLocal(medium: Medium | Medium[]) {
-      if (Array.isArray(medium)) {
-        medium.forEach((item) => {
-          if (!item.id) {
-            throw Error("missing id on medium");
-          }
-          this.media[item.id] = item;
-        });
-      } else {
-        if (!medium.id) {
-          throw Error("missing id on medium");
-        }
-        this.media[medium.id] = medium;
-      }
-    },
     updateMediumLocal(medium: SimpleMedium) {
       if (!medium.id) {
         throw Error("missing id on medium");
       }
       Object.assign(this.media[medium.id], medium);
     },
+
     deleteMediumLocal(id: number) {
       if (!(id in this.media)) {
         throw Error("invalid mediumId");
@@ -68,13 +54,15 @@ export const useMediaStore = defineStore("media", {
         }
       });
     },
+
     deleteTocLocal(data: { mediumId: number; link: string }) {
       const medium = this.secondaryMedia[data.mediumId];
       if (!medium) {
         throw Error("invalid mediumId");
       }
       medium.tocs = medium.tocs.filter((toc) => toc.link !== data.link);
     },
+
     async loadMedia() {
       try {
         const [data, secondaryData] = await Promise.all([HttpClient.getAllMedia(), HttpClient.getAllSecondaryMedia()]);
@@ -101,23 +89,20 @@ export const useMediaStore = defineStore("media", {
         console.error(error);
       }
     },
-    addMedium(data: AddMedium) {
+
+    async addMedium(data: AddMedium) {
       if (!data.title) {
-        // TODO: commit("addMediumModalError", "Missing title");
+        throw Error("Missing title");
       } else if (!data.medium) {
-        // TODO: commit("addMediumModalError", "Missing type");
+        throw Error("Missing Type");
       } else {
-        HttpClient.createMedium(data)
-          .then((medium) => {
-            // @ts-expect-error
-            this.addMediumLocal(medium);
-          })
-          .catch((error) => {
-            // TODO: notify error
-            console.error(error);
-          });
+        const medium = await HttpClient.createMedium(data);
+        if (!medium.id) {
+          throw Error("missing id on medium");
+        }
+        this.media[medium.id] = medium as Medium;
+        return medium;
       }
-      // TODO implement addMedium
     },
 
     editMedium(data: { id: number; prop: string }) {