From 5df237223268e7ad0cd8637e9ebbdca9c55bd20c Mon Sep 17 00:00:00 2001
From: Katos <7927609+katosdev@users.noreply.github.com>
Date: Sun, 7 Jul 2024 22:25:18 +0100
Subject: [PATCH] [WIP] Add LostandFound page (v1)

---
 frontend/pages/a/[id].vue       |  6 +++
 frontend/pages/lostandfound.vue | 79 +++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 frontend/pages/lostandfound.vue

diff --git a/frontend/pages/a/[id].vue b/frontend/pages/a/[id].vue
index 6bcca5b1..43521c4e 100644
--- a/frontend/pages/a/[id].vue
+++ b/frontend/pages/a/[id].vue
@@ -3,6 +3,12 @@
     middleware: ["auth"],
   });
 
+  if (!ctx.isAuthorized()) {
+      toast.error("User is not logged in");
+      navigateTo("/lostandfound");
+      return;
+    }
+
   const route = useRoute();
   const assetId = computed<string>(() => route.params.id as string);
   await navigateTo("/assets/" + assetId.value, { replace: true, redirectCode: 301 });
diff --git a/frontend/pages/lostandfound.vue b/frontend/pages/lostandfound.vue
new file mode 100644
index 00000000..d1b0be81
--- /dev/null
+++ b/frontend/pages/lostandfound.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+  import { statCardData } from "./statistics";
+  import { itemsTable } from "./table";
+  import { useLabelStore } from "~~/stores/labels";
+  import { useLocationStore } from "~~/stores/locations";
+
+  definePageMeta({
+    middleware: ["auth"],
+  });
+  useHead({
+    title: "Homebox | Lost Item",
+  });
+
+  const api = useUserApi();
+  const breakpoints = useBreakpoints();
+
+  const locationStore = useLocationStore();
+  const locations = computed(() => locationStore.parentLocations);
+
+  const labelsStore = useLabelStore();
+  const labels = computed(() => labelsStore.labels);
+
+  const itemTable = itemsTable(api);
+  const stats = statCardData(api);
+</script>
+
+<template>
+  <template>
+  <div class="lost-and-found">
+    <h1>Lost and Found</h1>
+    <p>You have located an item that may be lost. Please contact the owner here: <a :href="'mailto:' + ownerEmail">{{ ownerEmail }}</a></p>
+    <div class="login-option">
+      <p>Do you own this item? <router-link to="/login">Login to view or edit.</router-link></p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LostAndFound',
+  data() {
+    return {
+      ownerEmail: 'katos@creatorswave.com'
+    };
+  }
+};
+</script>
+
+<style scoped>
+.lost-and-found {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+}
+
+.lost-and-found h1 {
+  font-size: 24px;
+  color: #333;
+}
+
+.lost-and-found p {
+  font-size: 16px;
+  margin: 10px 0;
+}
+
+.login-option p {
+  margin-top: 20px;
+  font-weight: bold;
+}
+
+.login-option a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.login-option a:hover {
+  text-decoration: underline;
+}
+</style>
+</template>