From ad2aaea8b0ac6a0973b7e77727f54da34a420cb9 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:47:47 +0300
Subject: [PATCH 01/16] Feat: reintroduce API module with enhanced error
 handling and documentation

---
 ui/src/api.js           |  79 -------------------------------
 ui/src/pages/Create.vue |   2 +-
 ui/src/pages/View.vue   |   2 +-
 ui/src/services/api.js  | 100 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 102 insertions(+), 81 deletions(-)
 delete mode 100644 ui/src/api.js
 create mode 100644 ui/src/services/api.js

diff --git a/ui/src/api.js b/ui/src/api.js
deleted file mode 100644
index 57cb620..0000000
--- a/ui/src/api.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Provides functions to interact with the backend API.
- * Uses fetch for HTTP requests.
- */
-const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080'
-console.log('API_URL:', API_URL);
-
-export async function createSend(formData) {
-  const res = await fetch(`${API_URL}/send`, {
-    method: 'POST',
-    body: formData
-  })
-  if (!res.ok) {
-    if (res.status === 413) {
-      throw new Error('File too large')
-    } else if (res.status === 422) {
-      throw new Error('Invalid form data')
-    } else if (res.status === 429) {
-      throw new Error('Too many requests – please try again later')
-    } else {
-      throw new Error('Failed to create send')
-    }
-  }
-  return res.json()
-}
-
-export async function getSend(hash, password = '') {
-  const API_BASE_URL = `${window.location.origin}/api`
-  const url = new URL(`${API_BASE_URL}/send/${hash}`)
-
-  if (password) url.searchParams.set('password', password)
-
-  const res = await fetch(url)
-
-
-  if (res.status === 404) {
-    console.log('Secret not found.')
-    return { notFound: true }
-  }
-
-  if (!res.ok) {
-    console.error('Failed to retrieve send:', res.statusText)
-    throw new Error('Failed to retrieve send')
-  }
-
-  const contentDisposition = res.headers.get('Content-Disposition')
-  let filename = `download-${hash}`
-
-  if (contentDisposition) {
-    const matches = contentDisposition.match(/filename="(.+?)"/)
-    if (matches && matches[1]) {
-      filename = matches[1]
-    }
-  }
-
-  const contentType = res.headers.get('content-type')
-
-  if (contentType.includes('application/octet-stream')) {
-    const blob = await res.blob()
-    return { file: blob, filename }
-  }
-
-  const text = await res.text()
-  return { text }
-}
-
-export async function checkPasswordProtection(hash) {
-  const res = await fetch(`${API_URL}/send/${hash}/check`)
-
-  if (res.status === 404) {
-    return { notFound: true }
-  }
-
-  if (!res.ok) {
-    throw new Error('Failed to check password protection')
-  }
-
-  return await res.json()
-}
\ No newline at end of file
diff --git a/ui/src/pages/Create.vue b/ui/src/pages/Create.vue
index 06d10bd..074bd8e 100644
--- a/ui/src/pages/Create.vue
+++ b/ui/src/pages/Create.vue
@@ -99,7 +99,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { createSend } from '../api.js'
+import { createSend } from '../services/api.js'
 
 const type = ref('text')
 const textSecret = ref('')
diff --git a/ui/src/pages/View.vue b/ui/src/pages/View.vue
index 677d57d..b1c7dff 100644
--- a/ui/src/pages/View.vue
+++ b/ui/src/pages/View.vue
@@ -55,7 +55,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { getSend, checkPasswordProtection } from '../api.js'
+import { getSend, checkPasswordProtection } from '../services/api.js'
 
 const route = useRoute()
 const hash = route.params.hash
diff --git a/ui/src/services/api.js b/ui/src/services/api.js
new file mode 100644
index 0000000..6762eca
--- /dev/null
+++ b/ui/src/services/api.js
@@ -0,0 +1,100 @@
+/**
+ * @module api
+ * @description Provides functions to interact with the backend API.
+ */
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080';
+console.log('API_URL:', API_URL);
+
+/**
+ * Maps HTTP status codes to error messages for the createSend function.
+ * @type {Object<number, string>}
+ */
+const createSendErrorMessages = {
+  413: 'File too large',
+  422: 'Invalid form data',
+  429: 'Too many requests – please try again later'
+};
+
+/**
+ * Creates a new "send" with the provided form data.
+ * @param {FormData} formData - The data for creating the send.
+ * @returns {Promise<object>} The server's JSON response.
+ * @throws {Error} If the request fails.
+ */
+export async function createSend(formData) {
+  const res = await fetch(`${API_URL}/send`, {
+    method: 'POST',
+    body: formData
+  });
+
+  if (!res.ok) {
+    const errorMessage = createSendErrorMessages[res.status] || 'Failed to create send';
+    throw new Error(errorMessage);
+  }
+  return res.json();
+}
+
+/**
+ * Retrieves a "send" by its hash.
+ * @param {string} hash - The hash of the send to retrieve.
+ * @param {string} [password=''] - The password for the send.
+ * @returns {Promise<object>} An object containing the send data or a notFound flag.
+ * @throws {Error} If the retrieval fails.
+ */
+export async function getSend(hash, password = '') {
+  const url = new URL(`${API_URL}/send/${hash}`);
+  if (password) {
+    url.searchParams.set('password', password);
+  }
+
+  const res = await fetch(url);
+
+  if (res.status === 404) {
+    console.log('Secret not found.');
+    return { notFound: true };
+  }
+
+  if (!res.ok) {
+    console.error('Failed to retrieve send:', res.statusText);
+    throw new Error('Failed to retrieve send');
+  }
+
+  const contentDisposition = res.headers.get('Content-Disposition');
+  let filename = `download-${hash}`;
+  if (contentDisposition) {
+    const matches = contentDisposition.match(/filename="(.+?)"/);
+    if (matches && matches[1]) {
+      filename = matches[1];
+    }
+  }
+
+  const contentType = res.headers.get('content-type');
+  if (contentType.includes('application/octet-stream')) {
+    const blob = await res.blob();
+    return { file: blob, filename };
+  }
+
+  const text = await res.text();
+  return { text };
+}
+
+/**
+ * Checks if a "send" is password protected.
+ * @param {string} hash - The hash of the send to check.
+ * @returns {Promise<object>} An object indicating if a password is required or a notFound flag.
+ * @throws {Error} If the check fails.
+ */
+export async function checkPasswordProtection(hash) {
+  const res = await fetch(`${API_URL}/send/${hash}/check`);
+
+  if (res.status === 404) {
+    return { notFound: true };
+  }
+
+  if (!res.ok) {
+    throw new Error('Failed to check password protection');
+  }
+
+  return res.json();
+}
\ No newline at end of file

From 6b4bfcf06826b30e5a8df32c4c3cc35c0d8362d5 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:48:12 +0300
Subject: [PATCH 02/16] Feat: implement password generator utility function

---
 ui/src/utils/passwordGenerator.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 ui/src/utils/passwordGenerator.js

diff --git a/ui/src/utils/passwordGenerator.js b/ui/src/utils/passwordGenerator.js
new file mode 100644
index 0000000..19797fa
--- /dev/null
+++ b/ui/src/utils/passwordGenerator.js
@@ -0,0 +1,21 @@
+/**
+ * @module passwordGenerator
+ * @description Provides a function for generating random passwords.
+ */
+
+/**
+ * Generates a random password.
+ * @param {number} length - The length of the password.
+ * @param {string} charset - The character set to use for the password.
+ * @returns {string} The generated password.
+ */
+export function generatePassword(length = 12, charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+') {
+  let generatedPassword = '';
+  const randomValues = new Uint32Array(length);
+  window.crypto.getRandomValues(randomValues);
+  for (let i = 0; i < length; i++) {
+    const randomIndex = randomValues[i] % charset.length;
+    generatedPassword += charset[randomIndex];
+  }
+  return generatedPassword;
+}
\ No newline at end of file

From 4bf81e801adf0433e388aac94ad3d2caec7a71ad Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:48:24 +0300
Subject: [PATCH 03/16] Feat: add file downloader utility function for browser
 downloads

---
 ui/src/utils/fileDownloader.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 ui/src/utils/fileDownloader.js

diff --git a/ui/src/utils/fileDownloader.js b/ui/src/utils/fileDownloader.js
new file mode 100644
index 0000000..977300f
--- /dev/null
+++ b/ui/src/utils/fileDownloader.js
@@ -0,0 +1,20 @@
+/**
+ * @module fileDownloader
+ * @description Provides a function for downloading files in the browser.
+ */
+
+/**
+ * Triggers a browser download for a file blob.
+ * @param {Blob} blob - The file blob to download.
+ * @param {string} filename - The desired name for the downloaded file.
+ */
+export function downloadFile(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename || 'download';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
\ No newline at end of file

From 0ce88376518d3f8d2d660cd97b9c40a5bca998c1 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:49:02 +0300
Subject: [PATCH 04/16] Feat: implement PasswordInput component with visibility
 toggle and random password generation

---
 ui/src/components/PasswordInput.vue |  41 ++++++
 ui/src/pages/Create.vue             | 215 ----------------------------
 ui/src/pages/Error404.vue           |  32 -----
 ui/src/pages/ErrorGeneral.vue       |  21 ---
 ui/src/pages/View.vue               | 138 ------------------
 5 files changed, 41 insertions(+), 406 deletions(-)
 create mode 100644 ui/src/components/PasswordInput.vue
 delete mode 100644 ui/src/pages/Create.vue
 delete mode 100644 ui/src/pages/Error404.vue
 delete mode 100644 ui/src/pages/ErrorGeneral.vue
 delete mode 100644 ui/src/pages/View.vue

diff --git a/ui/src/components/PasswordInput.vue b/ui/src/components/PasswordInput.vue
new file mode 100644
index 0000000..ebd3cc4
--- /dev/null
+++ b/ui/src/components/PasswordInput.vue
@@ -0,0 +1,41 @@
+<template>
+  <v-text-field
+    label="Password (optional)"
+    :type="showPassword ? 'text' : 'password'"
+    :model-value="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+    <template v-slot:append-inner>
+      <v-tooltip text="Toggle Password Visibility">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn icon v-bind="attrs" v-on="on" @click="showPassword = !showPassword" size="small">
+            <v-icon>{{ showPassword ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
+          </v-btn>
+        </template>
+      </v-tooltip>
+      <v-tooltip text="Generate Random Password">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn icon color="primary" v-bind="attrs" v-on="on" @click="generateNewPassword" size="small" style="margin-left: 4px">
+            <v-icon>mdi-refresh</v-icon>
+          </v-btn>
+        </template>
+      </v-tooltip>
+    </template>
+  </v-text-field>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { generatePassword } from '../utils/passwordGenerator.js';
+
+const props = defineProps({
+  modelValue: String
+});
+const emit = defineEmits(['update:modelValue']);
+
+const showPassword = ref(false);
+
+function generateNewPassword() {
+  emit('update:modelValue', generatePassword());
+}
+</script>
\ No newline at end of file
diff --git a/ui/src/pages/Create.vue b/ui/src/pages/Create.vue
deleted file mode 100644
index 074bd8e..0000000
--- a/ui/src/pages/Create.vue
+++ /dev/null
@@ -1,215 +0,0 @@
-<template>
-  <v-container class="d-flex justify-center align-center fill-height">
-    <v-card class="pa-4 animate__animated animate__fadeIn" max-width="600" outlined>
-      <v-card-title class="text-h5 text-center">Create a New Secret 🔑</v-card-title>
-      <v-card-text>
-        <v-form @submit.prevent="handleSubmit">
-          <v-select
-            label="Type"
-            v-model="type"
-            :items="['text', 'file']"
-            required
-          ></v-select>
-
-          <v-textarea
-            v-if="type === 'text'"
-            label="Text Secret"
-            v-model="textSecret"
-            required
-          ></v-textarea>
-
-          <v-file-input
-            v-if="type === 'file'"
-            label="Select File"
-            prepend-icon="mdi-upload"
-            @update:modelValue="handleFile"
-            show-size
-            required
-          ></v-file-input>
-
-          <v-text-field
-            label="Password (optional)"
-            v-model="password"
-            :type="showPassword ? 'text' : 'password'"
-          >
-            <template v-slot:append-inner>
-              <v-tooltip text="Toggle Password Visibility">
-                <template v-slot:activator="{ on, attrs }">
-                  <v-btn icon v-bind="attrs" v-on="on" @click="togglePasswordVisibility" size="small">
-                    <v-icon>{{ showPassword ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
-                  </v-btn>
-                </template>
-              </v-tooltip>
-
-              <v-tooltip text="Generate Random Password">
-                <template v-slot:activator="{ on, attrs }">
-                  <v-btn icon color="primary" v-bind="attrs" v-on="on" @click="generatePassword" size="small" style="margin-left: 4px">
-                    <v-icon>mdi-refresh</v-icon>
-                  </v-btn>
-                </template>
-              </v-tooltip>
-            </template>
-          </v-text-field>
-
-          <v-select
-            label="Expiration"
-            v-model="expires"
-            :items="expirationOptions"
-            required
-          ></v-select>
-
-          <v-checkbox
-            v-model="oneTime"
-            label="One-Time Retrieval"
-            class="mt-4"
-          ></v-checkbox>
-
-          <v-btn type="submit" color="primary" class="mt-4" block>Create</v-btn>
-
-          <v-alert v-if="errorMessage" type="error" class="mt-4 animate__animated animate__bounceIn">
-            {{ errorMessage }}
-          </v-alert>
-        </v-form>
-
-        <v-alert v-if="resultHash" type="success" class="mt-4 animate__animated animate__fadeIn">
-          Secret Created! Share this link:<br />
-          <div class="d-flex align-center mt-2">
-            <v-chip class="mr-2">{{ baseUrl }}/view/{{ resultHash }}</v-chip>
-            <v-tooltip text="Copy Link to Clipboard">
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn icon v-bind="attrs" v-on="on" @click="copyLink" color="white">
-                  <v-icon color="black">mdi-content-copy</v-icon>
-                </v-btn>
-              </template>
-            </v-tooltip>
-          </div>
-          <v-snackbar v-model="snackbar" timeout="2000">
-            Link copied to clipboard!
-          </v-snackbar>
-        </v-alert>
-
-        <!-- Loader Overlay -->
-        <v-overlay v-model="loading" class="align-center justify-center">
-          <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
-        </v-overlay>
-      </v-card-text>
-    </v-card>
-  </v-container>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { createSend } from '../services/api.js'
-
-const type = ref('text')
-const textSecret = ref('')
-const fileBlob = ref(null)
-const password = ref('')
-const showPassword = ref(false)
-const oneTime = ref(false)
-const expires = ref('24h')
-const errorMessage = ref('')
-const resultHash = ref('')
-const baseUrl = window.location.origin
-const snackbar = ref(false)
-const loading = ref(false)
-
-const expirationOptions = [
-  { title: '1 Hour', value: '1h' },
-  { title: '6 Hours', value: '6h' },
-  { title: '12 Hours', value: '12h' },
-  { title: '24 Hours', value: '24h' },
-  { title: '3 Days', value: '72h' },
-  { title: '1 Week', value: '168h' }
-]
-
-function handleFile(file) {
-  if (file) {
-    fileBlob.value = file
-    console.log("Selected file:", fileBlob.value)
-  } else {
-    fileBlob.value = null
-    console.error("No file selected")
-  }
-}
-
-async function handleSubmit() {
-  errorMessage.value = ''
-  resultHash.value = ''
-  loading.value = true
-
-  const formData = new FormData()
-  formData.append('type', type.value)
-
-  if (type.value === 'text') {
-    if (!textSecret.value.trim()) {
-      errorMessage.value = 'Please enter some text'
-      loading.value = false
-      return
-    }
-    formData.append('data', textSecret.value)
-  } else if (type.value === 'file') {
-    if (!fileBlob.value) {
-      errorMessage.value = 'Please select a file'
-      loading.value = false
-      return
-    }
-    formData.append('file', fileBlob.value)
-  }
-
-  if (password.value.trim()) formData.append('password', password.value)
-  if (oneTime.value) formData.append('onetime', 'true')
-  formData.append('expires', expires.value)
-
-  try {
-    const result = await createSend(formData)
-    if (result.hash) {
-      resultHash.value = result.hash
-    } else {
-      errorMessage.value = 'Unexpected error: no hash returned'
-    }
-  } catch (err) {
-    console.error("Submit error:", err)
-    if (err instanceof Error) {
-      errorMessage.value = err.message
-    } else {
-      errorMessage.value = 'Failed to create secret'
-    }
-  } finally {
-    loading.value = false
-  }
-}
-
-function copyLink() {
-  const link = `${window.location.origin}/view/${resultHash.value}`
-  navigator.clipboard.writeText(link)
-  snackbar.value = true
-}
-
-function generatePassword() {
-  const length = 12
-  const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+'
-  let generatedPassword = ''
-  const randomValues = new Uint32Array(length)
-  window.crypto.getRandomValues(randomValues)
-  for (let i = 0; i < length; i++) {
-    const randomIndex = randomValues[i] % charset.length
-    generatedPassword += charset[randomIndex]
-  }
-  password.value = generatedPassword
-}
-
-function togglePasswordVisibility() {
-  showPassword.value = !showPassword.value
-}
-</script>
-
-<style scoped>
-.v-container {
-  min-height: 100vh;
-}
-
-.v-card {
-  width: 100%;
-}
-</style>
diff --git a/ui/src/pages/Error404.vue b/ui/src/pages/Error404.vue
deleted file mode 100644
index d06123c..0000000
--- a/ui/src/pages/Error404.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <v-container class="error-page d-flex flex-column align-center justify-center fill-height">
-    <v-card class="pa-6 text-center" elevation="4" max-width="500">
-      <v-icon size="80" color="red">mdi-alert-circle-outline</v-icon>
-      <h2 class="text-h4 mt-4">Oops! Page Not Found</h2>
-      <p class="mt-2 mb-4 text-body-1">
-        The page you are looking for does not exist or has been moved.
-      </p>
-      <v-btn to="/" color="primary" large>
-        <v-icon left>mdi-home</v-icon>
-        Go Home
-      </v-btn>
-    </v-card>
-  </v-container>
-</template>
-
-<script setup>
-/**
- * 404 Error Page Component.
- */
-</script>
-
-<style scoped>
-.error-page {
-  min-height: 100vh;
-}
-
-.v-card {
-  background-color: #f5f5f5;
-  border-radius: 12px;
-}
-</style>
diff --git a/ui/src/pages/ErrorGeneral.vue b/ui/src/pages/ErrorGeneral.vue
deleted file mode 100644
index 89545c9..0000000
--- a/ui/src/pages/ErrorGeneral.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="error-page">
-      <h2>Oops, Something Went Wrong</h2>
-      <p>An unexpected error occurred.</p>
-      <router-link to="/">Go Back</router-link>
-    </div>
-  </template>
-  
-  <script setup>
-  /**
-   * General error page for unexpected issues.
-   */
-  </script>
-  
-  <style scoped>
-  .error-page {
-    text-align: center;
-    margin-top: 2rem;
-  }
-  </style>
-  
\ No newline at end of file
diff --git a/ui/src/pages/View.vue b/ui/src/pages/View.vue
deleted file mode 100644
index b1c7dff..0000000
--- a/ui/src/pages/View.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <v-container class="d-flex justify-center align-center fill-height">
-    <v-card class="pa-4 animate__animated animate__fadeIn" max-width="600" outlined>
-      <v-card-title class="text-h5 text-center">View Secret</v-card-title>
-      <v-card-text>
-        <v-alert v-if="errorMessage" type="error" class="mb-4">
-          {{ errorMessage }}
-        </v-alert>
-
-        <v-alert v-if="notFound" type="error" class="mb-4">
-          Secret not found or has expired.
-        </v-alert>
-
-        <v-form @submit.prevent="loadSecret" v-if="!secretLoaded">
-          <v-text-field
-            v-if="requiresPassword"
-            label="Password"
-            v-model="password"
-            type="password"
-            prepend-icon="mdi-lock"
-            required
-            class="animate__animated animate__fadeIn"
-          ></v-text-field>
-
-          <v-btn type="submit" color="primary" class="animate__animated animate__fadeIn" block>Load Secret</v-btn>
-        </v-form>
-
-        <div v-if="secretLoaded">
-          <!-- Display text secret -->
-          <v-alert v-if="secretContent" type="info" class="mb-4">
-            {{ secretContent }}
-          </v-alert>
-
-          <!-- Download button for file secret -->
-          <div v-if="fileBlob">
-            <v-btn color="primary" @click="downloadFile" block class="animate__animated animate__fadeIn">
-              <v-icon left>mdi-download</v-icon> Download File
-            </v-btn>
-          </div>
-
-          <!-- Copy button for text secret -->
-          <v-btn v-if="secretContent" color="primary" @click="copyContent" block class="mt-4">
-            <v-icon left>mdi-content-copy</v-icon> Copy Secret
-          </v-btn>
-
-          <v-snackbar v-model="snackbar" timeout="2000">
-            Text copied to clipboard!
-          </v-snackbar>
-        </div>
-      </v-card-text>
-    </v-card>
-  </v-container>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-import { getSend, checkPasswordProtection } from '../services/api.js'
-
-const route = useRoute()
-const hash = route.params.hash
-const password = ref('')
-const errorMessage = ref('')
-const notFound = ref(false)
-const requiresPassword = ref(false)
-const secretContent = ref('')
-const fileBlob = ref(null)
-const filename = ref('')
-const secretLoaded = ref(false)
-const snackbar = ref(false)
-
-async function loadSecret() {
-  errorMessage.value = '';
-  notFound.value = false;
-  secretContent.value = '';
-  fileBlob.value = null;
-
-  try {
-    const result = await getSend(hash, password.value);
-
-    if (result.notFound) {
-      console.log('Secret not found.');
-      notFound.value = true;
-      return;
-    }
-
-    if (result.file) {
-      console.log('File secret loaded.');
-      fileBlob.value = result.file;
-      filename.value = result.filename;
-    } else {
-      console.log('Text secret loaded:', result.text);
-      secretContent.value = result.text;
-    }
-
-    secretLoaded.value = true;
-  } catch (err) {
-    console.error('Error in loadSecret:', err);
-    errorMessage.value = 'Failed to load secret. Incorrect password or secret has expired.';
-  }
-}
-
-
-function copyContent() {
-  navigator.clipboard.writeText(secretContent.value)
-  snackbar.value = true
-}
-
-function downloadFile() {
-  const url = URL.createObjectURL(fileBlob.value)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = filename.value || 'download'
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-  URL.revokeObjectURL(url)
-}
-
-onMounted(async () => {
-  try {
-    const result = await checkPasswordProtection(hash)
-    requiresPassword.value = result.requiresPassword || false
-  } catch {
-    notFound.value = true
-  }
-})
-</script>
-
-<style scoped>
-.v-container {
-  min-height: 100vh;
-}
-
-.v-card {
-  width: 100%;
-}
-</style>

From 55191149d39b9d7a67f6390b2c65432c5b82fef1 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:49:15 +0300
Subject: [PATCH 05/16] Feat: add SecretDisplay component for displaying and
 copying secrets with file download functionality

---
 ui/src/components/SecretDisplay.vue | 47 +++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 ui/src/components/SecretDisplay.vue

diff --git a/ui/src/components/SecretDisplay.vue b/ui/src/components/SecretDisplay.vue
new file mode 100644
index 0000000..7f0f5d7
--- /dev/null
+++ b/ui/src/components/SecretDisplay.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <v-alert v-if="textContent" type="info" class="mb-4">
+      {{ textContent }}
+    </v-alert>
+
+    <div v-if="file">
+      <v-btn color="primary" @click="download" block>
+        <v-icon left>mdi-download</v-icon> Download File
+      </v-btn>
+    </div>
+
+    <v-btn v-if="textContent" color="primary" @click="copy" block class="mt-4">
+      <v-icon left>mdi-content-copy</v-icon> Copy Secret
+    </v-btn>
+
+    <v-snackbar v-model="snackbar" timeout="2000">
+      Text copied to clipboard!
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { downloadFile } from '../utils/fileDownloader.js';
+
+const props = defineProps({
+  textContent: String,
+  file: Blob,
+  filename: String
+});
+
+const snackbar = ref(false);
+
+function download() {
+  if (props.file) {
+    downloadFile(props.file, props.filename);
+  }
+}
+
+function copy() {
+  if (props.textContent) {
+    navigator.clipboard.writeText(props.textContent);
+    snackbar.value = true;
+  }
+}
+</script>
\ No newline at end of file

From 62736d855381c924d1e64e07de5d3c29717b9f27 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:49:37 +0300
Subject: [PATCH 06/16] Feat: implement Create component for creating secrets
 with text and file options

---
 ui/src/pages/Create.vue | 164 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100644 ui/src/pages/Create.vue

diff --git a/ui/src/pages/Create.vue b/ui/src/pages/Create.vue
new file mode 100644
index 0000000..409e62a
--- /dev/null
+++ b/ui/src/pages/Create.vue
@@ -0,0 +1,164 @@
+<template>
+  <v-container class="d-flex justify-center align-center fill-height">
+    <v-card class="pa-4 animate__animated animate__fadeIn" max-width="600" outlined>
+      <v-card-title class="text-h5 text-center">Create a New Secret 🔑</v-card-title>
+      <v-card-text>
+        <v-form @submit.prevent="handleSubmit">
+          <v-select
+            label="Type"
+            v-model="type"
+            :items="['text', 'file']"
+            required
+          ></v-select>
+
+          <v-textarea
+            v-if="type === 'text'"
+            label="Text Secret"
+            v-model="textSecret"
+            required
+          ></v-textarea>
+
+          <v-file-input
+            v-if="type === 'file'"
+            label="Select File"
+            prepend-icon="mdi-upload"
+            @update:modelValue="handleFile"
+            show-size
+            required
+          ></v-file-input>
+
+          <PasswordInput v-model="password" />
+
+          <v-select
+            label="Expiration"
+            v-model="expires"
+            :items="expirationOptions"
+            required
+          ></v-select>
+
+          <v-checkbox
+            v-model="oneTime"
+            label="One-Time Retrieval"
+            class="mt-4"
+          ></v-checkbox>
+
+          <v-btn type="submit" color="primary" class="mt-4" block>Create</v-btn>
+
+          <v-alert v-if="errorMessage" type="error" class="mt-4 animate__animated animate__bounceIn">
+            {{ errorMessage }}
+          </v-alert>
+        </v-form>
+
+        <v-alert v-if="resultHash" type="success" class="mt-4 animate__animated animate__fadeIn">
+          Secret Created! Share this link:<br />
+          <div class="d-flex align-center mt-2">
+            <v-chip class="mr-2">{{ baseUrl }}/view/{{ resultHash }}</v-chip>
+            <v-tooltip text="Copy Link to Clipboard">
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn icon v-bind="attrs" v-on="on" @click="copyLink" color="white">
+                  <v-icon color="black">mdi-content-copy</v-icon>
+                </v-btn>
+              </template>
+            </v-tooltip>
+          </div>
+          <v-snackbar v-model="snackbar" timeout="2000">
+            Link copied to clipboard!
+          </v-snackbar>
+        </v-alert>
+
+        <v-overlay v-model="loading" class="align-center justify-center">
+          <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+        </v-overlay>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { createSend } from '../services/api.js';
+import PasswordInput from '../components/PasswordInput.vue';
+
+const type = ref('text');
+const textSecret = ref('');
+const fileBlob = ref(null);
+const password = ref('');
+const oneTime = ref(false);
+const expires = ref('24h');
+const errorMessage = ref('');
+const resultHash = ref('');
+const baseUrl = window.location.origin;
+const snackbar = ref(false);
+const loading = ref(false);
+
+const expirationOptions = [
+  { title: '1 Hour', value: '1h' },
+  { title: '6 Hours', value: '6h' },
+  { title: '12 Hours', value: '12h' },
+  { title: '24 Hours', value: '24h' },
+  { title: '3 Days', value: '72h' },
+  { title: '1 Week', value: '168h' }
+];
+
+function handleFile(files) {
+  fileBlob.value = files[0] || null;
+}
+
+async function handleSubmit() {
+  errorMessage.value = '';
+  resultHash.value = '';
+  loading.value = true;
+
+  const formData = new FormData();
+  formData.append('type', type.value);
+
+  if (type.value === 'text') {
+    if (!textSecret.value.trim()) {
+      errorMessage.value = 'Please enter some text';
+      loading.value = false;
+      return;
+    }
+    formData.append('data', textSecret.value);
+  } else if (type.value === 'file') {
+    if (!fileBlob.value) {
+      errorMessage.value = 'Please select a file';
+      loading.value = false;
+      return;
+    }
+    formData.append('file', fileBlob.value);
+  }
+
+  if (password.value.trim()) {
+    formData.append('password', password.value);
+  }
+  if (oneTime.value) {
+    formData.append('onetime', 'true');
+  }
+  formData.append('expires', expires.value);
+
+  try {
+    const result = await createSend(formData);
+    resultHash.value = result.hash;
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to create secret';
+  } finally {
+    loading.value = false;
+  }
+}
+
+function copyLink() {
+  const link = `${baseUrl}/view/${resultHash.value}`;
+  navigator.clipboard.writeText(link);
+  snackbar.value = true;
+}
+</script>
+
+<style scoped>
+.v-container {
+  min-height: 100vh;
+}
+
+.v-card {
+  width: 100%;
+}
+</style>
\ No newline at end of file

From 296ad003685068580e3b8bebc15121cb899e4579 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:49:53 +0300
Subject: [PATCH 07/16] Feat: implement View component for displaying secrets
 with password protection and file download options

---
 ui/src/pages/View.vue | 103 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 ui/src/pages/View.vue

diff --git a/ui/src/pages/View.vue b/ui/src/pages/View.vue
new file mode 100644
index 0000000..d6809e7
--- /dev/null
+++ b/ui/src/pages/View.vue
@@ -0,0 +1,103 @@
+<template>
+  <v-container class="d-flex justify-center align-center fill-height">
+    <v-card class="pa-4 animate__animated animate__fadeIn" max-width="600" outlined>
+      <v-card-title class="text-h5 text-center">View Secret</v-card-title>
+      <v-card-text>
+        <v-alert v-if="errorMessage" type="error" class="mb-4">
+          {{ errorMessage }}
+        </v-alert>
+
+        <v-alert v-if="notFound" type="error" class="mb-4">
+          Secret not found or has expired.
+        </v-alert>
+
+        <v-form @submit.prevent="loadSecret" v-if="!secretLoaded">
+          <v-text-field
+            v-if="requiresPassword"
+            label="Password"
+            v-model="password"
+            type="password"
+            prepend-icon="mdi-lock"
+            required
+            class="animate__animated animate__fadeIn"
+          ></v-text-field>
+
+          <v-btn type="submit" color="primary" class="animate__animated animate__fadeIn" block>Load Secret</v-btn>
+        </v-form>
+
+        <SecretDisplay
+          v-if="secretLoaded"
+          :text-content="secretContent"
+          :file="fileBlob"
+          :filename="filename"
+        />
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { getSend, checkPasswordProtection } from '../services/api.js';
+import SecretDisplay from '../components/SecretDisplay.vue';
+
+const route = useRoute();
+const hash = route.params.hash;
+
+const password = ref('');
+const errorMessage = ref('');
+const notFound = ref(false);
+const requiresPassword = ref(false);
+const secretContent = ref('');
+const fileBlob = ref(null);
+const filename = ref('');
+const secretLoaded = ref(false);
+
+async function loadSecret() {
+  errorMessage.value = '';
+  try {
+    const result = await getSend(hash, password.value);
+    if (result.notFound) {
+      notFound.value = true;
+      return;
+    }
+
+    if (result.file) {
+      fileBlob.value = result.file;
+      filename.value = result.filename;
+    } else {
+      secretContent.value = result.text;
+    }
+    secretLoaded.value = true;
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to load secret. Incorrect password or secret has expired.';
+  }
+}
+
+onMounted(async () => {
+  try {
+    const result = await checkPasswordProtection(hash);
+    if (result.notFound) {
+      notFound.value = true;
+    } else {
+      requiresPassword.value = result.requiresPassword;
+      if (!requiresPassword.value) {
+        loadSecret();
+      }
+    }
+  } catch (err) {
+    notFound.value = true;
+  }
+});
+</script>
+
+<style scoped>
+.v-container {
+  min-height: 100vh;
+}
+
+.v-card {
+  width: 100%;
+}
+</style>
\ No newline at end of file

From a3f434906fb553eed032b94869c484678128db1d Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:51:33 +0300
Subject: [PATCH 08/16] Refactor: clean up comments and formatting in main
 application entry point

---
 ui/src/main.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/src/main.js b/ui/src/main.js
index 3b76e01..0a08408 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -1,18 +1,24 @@
+/**
+ * Main application entry point.
+ * Initializes Vue, Vuetify, and the Router.
+ */
 import { createApp } from 'vue'
 import App from './App.vue'
-import router from './router'
+import router from './router' // This now imports from the /router directory
 
 // Import Vuetify and styles
-import 'vuetify/styles' 
+import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
-import '@mdi/font/css/materialdesignicons.css' 
+import '@mdi/font/css/materialdesignicons.css'
 
+// Create Vuetify instance
 const vuetify = createVuetify({
   icons: {
-    defaultSet: 'mdi', 
+    defaultSet: 'mdi',
   },
 })
 
+// Create and mount the Vue application
 const app = createApp(App)
 app.use(router)
 app.use(vuetify)

From c808cc8da808c67b2c8c2750819d0353f28812a7 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:54:40 +0300
Subject: [PATCH 09/16] Feat: reintroduce Vue Router setup with corrected
 import paths and route definitions

---
 ui/src/router.js       | 22 ----------------------
 ui/src/router/index.js | 23 +++++++++++++++++++++++
 2 files changed, 23 insertions(+), 22 deletions(-)
 delete mode 100644 ui/src/router.js
 create mode 100644 ui/src/router/index.js

diff --git a/ui/src/router.js b/ui/src/router.js
deleted file mode 100644
index 281eaa6..0000000
--- a/ui/src/router.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Sets up the Vue Router with basic routes for create, view, and error pages.
- */
-import { createRouter, createWebHistory } from 'vue-router'
-import Create from './pages/Create.vue'
-import View from './pages/View.vue'
-import Error404 from './pages/Error404.vue'
-import ErrorGeneral from './pages/ErrorGeneral.vue'
-
-const routes = [
-  { path: '/', component: Create },
-  { path: '/view/:hash', component: View },
-  { path: '/error', component: ErrorGeneral },
-  { path: '/:pathMatch(.*)*', component: Error404 }
-]
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes
-})
-
-export default router
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
new file mode 100644
index 0000000..b5f42be
--- /dev/null
+++ b/ui/src/router/index.js
@@ -0,0 +1,23 @@
+/**
+ * Sets up the Vue Router.
+ * The import paths are now relative to the `src/router/` directory.
+ */
+import { createRouter, createWebHistory } from 'vue-router';
+import Create from '../pages/Create.vue'; // Corrected Path
+import View from '../pages/View.vue'; // Corrected Path
+import Error404 from '../pages/Error404.vue'; // Corrected Path
+import ErrorGeneral from '../pages/ErrorGeneral.vue'; // Corrected Path
+
+const routes = [
+  { path: '/', component: Create, name: 'create' },
+  { path: '/view/:hash', component: View, name: 'view' },
+  { path: '/error', component: ErrorGeneral, name: 'error' },
+  { path: '/:pathMatch(.*)*', component: Error404, name: 'not-found' }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+});
+
+export default router;

From 52f859dbe4ae371bf25778a2f5fd4b0ff188a333 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:54:46 +0300
Subject: [PATCH 10/16] Feat: add 404 and general error components for improved
 user feedback

---
 ui/src/pages/Error404.vue     | 28 ++++++++++++++++++++++++++++
 ui/src/pages/ErrorGeneral.vue | 27 +++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 ui/src/pages/Error404.vue
 create mode 100644 ui/src/pages/ErrorGeneral.vue

diff --git a/ui/src/pages/Error404.vue b/ui/src/pages/Error404.vue
new file mode 100644
index 0000000..a16cf7c
--- /dev/null
+++ b/ui/src/pages/Error404.vue
@@ -0,0 +1,28 @@
+<template>
+  <v-container class="d-flex flex-column align-center justify-center fill-height text-center">
+    <v-card class="pa-6" elevation="4" max-width="500">
+      <v-icon size="80" color="warning">mdi-alert-circle-outline</v-icon>
+      <h1 class="text-h4 mt-4 font-weight-bold">404 - Page Not Found</h1>
+      <p class="mt-2 mb-6 text-body-1">
+        Sorry, the page you are looking for does not exist or has been moved.
+      </p>
+      <v-btn to="/" color="primary" large>
+        <v-icon left>mdi-home</v-icon>
+        Go Home
+      </v-btn>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+/**
+ * A 404 "Page Not Found" error component.
+ * It is displayed when a user navigates to a route that does not exist.
+ */
+</script>
+
+<style scoped>
+.fill-height {
+  min-height: 80vh;
+}
+</style>
diff --git a/ui/src/pages/ErrorGeneral.vue b/ui/src/pages/ErrorGeneral.vue
new file mode 100644
index 0000000..cd3d08e
--- /dev/null
+++ b/ui/src/pages/ErrorGeneral.vue
@@ -0,0 +1,27 @@
+<template>
+  <v-container class="d-flex flex-column align-center justify-center fill-height text-center">
+    <v-card class="pa-6" elevation="4" max-width="500">
+      <v-icon size="80" color="error">mdi-close-octagon-outline</v-icon>
+      <h1 class="text-h4 mt-4 font-weight-bold">Oops! Something Went Wrong</h1>
+      <p class="mt-2 mb-6 text-body-1">
+        An unexpected error occurred. Please try again later.
+      </p>
+      <v-btn to="/" color="primary" large>
+        <v-icon left>mdi-home</v-icon>
+        Go Back Home
+      </v-btn>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+/**
+ * A general error page for displaying unexpected application issues.
+ */
+</script>
+
+<style scoped>
+.fill-height {
+  min-height: 80vh;
+}
+</style>
\ No newline at end of file

From f056b9a414c265e40cac81b75d33c5d50eeeef8f Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 14:58:26 +0300
Subject: [PATCH 11/16] Fix: update getSend function to correctly append
 password as a query parameter

---
 ui/src/services/api.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/services/api.js b/ui/src/services/api.js
index 6762eca..11ea582 100644
--- a/ui/src/services/api.js
+++ b/ui/src/services/api.js
@@ -43,12 +43,18 @@ export async function createSend(formData) {
  * @throws {Error} If the retrieval fails.
  */
 export async function getSend(hash, password = '') {
-  const url = new URL(`${API_URL}/send/${hash}`);
+  // --- Start of Fix ---
+  // Construct the base URL string.
+  let url = `${API_URL}/send/${hash}`;
+
+  // Manually append the password as a query parameter if it exists.
   if (password) {
-    url.searchParams.set('password', password);
+    const params = new URLSearchParams({ password });
+    url += `?${params.toString()}`;
   }
+  // --- End of Fix ---
 
-  const res = await fetch(url);
+  const res = await fetch(url); // Use the resilient URL string.
 
   if (res.status === 404) {
     console.log('Secret not found.');

From 161b7ed497d0b3fd6836db938405d224ec9278e7 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 15:03:36 +0300
Subject: [PATCH 12/16] Fix: update handleFile function to correctly handle
 both single files and arrays of files

---
 ui/src/pages/Create.vue | 8 ++++++--
 ui/src/services/api.js  | 3 ---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/Create.vue b/ui/src/pages/Create.vue
index 409e62a..aa6e567 100644
--- a/ui/src/pages/Create.vue
+++ b/ui/src/pages/Create.vue
@@ -100,8 +100,12 @@ const expirationOptions = [
   { title: '1 Week', value: '168h' }
 ];
 
-function handleFile(files) {
-  fileBlob.value = files[0] || null;
+function handleFile(fileOrFiles) {
+  if (Array.isArray(fileOrFiles)) {
+    fileBlob.value = fileOrFiles[0] || null;
+  } else {
+    fileBlob.value = fileOrFiles || null;
+  }
 }
 
 async function handleSubmit() {
diff --git a/ui/src/services/api.js b/ui/src/services/api.js
index 11ea582..ebe0005 100644
--- a/ui/src/services/api.js
+++ b/ui/src/services/api.js
@@ -43,8 +43,6 @@ export async function createSend(formData) {
  * @throws {Error} If the retrieval fails.
  */
 export async function getSend(hash, password = '') {
-  // --- Start of Fix ---
-  // Construct the base URL string.
   let url = `${API_URL}/send/${hash}`;
 
   // Manually append the password as a query parameter if it exists.
@@ -52,7 +50,6 @@ export async function getSend(hash, password = '') {
     const params = new URLSearchParams({ password });
     url += `?${params.toString()}`;
   }
-  // --- End of Fix ---
 
   const res = await fetch(url); // Use the resilient URL string.
 

From a7e57ce3892b78da85bb40c69e6fd8d531e75a52 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 15:07:39 +0300
Subject: [PATCH 13/16] Feat: implement form reset functionality and update
 file handling in Create.vue

---
 ui/src/App.vue             | 18 ++++++++++++------
 ui/src/pages/Create.vue    | 35 ++++++++++++++++++++++++++++-------
 ui/src/stores/formStore.js | 15 +++++++++++++++
 3 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 ui/src/stores/formStore.js

diff --git a/ui/src/App.vue b/ui/src/App.vue
index de55bac..5544cd5 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -2,26 +2,23 @@
   <v-app>
     <v-main class="d-flex flex-column">
       <v-container fluid class="pa-0 flex-grow-1">
-        <!-- Header -->
         <v-toolbar color="primary" dark flat>
           <v-toolbar-title>
-            <router-link to="/" class="logo-link animate__animated animate__pulse">
+            <router-link to="/" class="logo-link animate__animated animate__pulse" @click="requestFormReset">
               <img src="./assets/Images/logo.png" alt="Logo" height="50" />
             </router-link>
           </v-toolbar-title>
           <v-spacer></v-spacer>
-          <v-btn to="/" text class="animate__animated animate__fadeIn">
+          <v-btn to="/" text class="animate__animated animate__fadeIn" @click="requestFormReset">
             <v-icon left>mdi-plus</v-icon> Create
           </v-btn>
         </v-toolbar>
 
-        <!-- Main Content -->
         <v-container class="mt-4">
           <router-view />
         </v-container>
       </v-container>
 
-      <!-- Footer -->
       <v-footer color="primary" dark class="justify-center">
         <span>
           © {{ new Date().getFullYear() }} GopherDrop | 
@@ -44,6 +41,15 @@
  * The root component of the application.
  * Provides a header, navigation, and footer.
  */
+import { formStore } from './stores/formStore.js';
+
+/**
+ * Triggers the form reset via the store.
+ * This will be picked up by a watcher in Create.vue.
+ */
+function requestFormReset() {
+  formStore.triggerReset();
+}
 </script>
 
 <style scoped>
@@ -78,4 +84,4 @@
   flex-direction: column;
   min-height: 100vh;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/ui/src/pages/Create.vue b/ui/src/pages/Create.vue
index aa6e567..7df55d4 100644
--- a/ui/src/pages/Create.vue
+++ b/ui/src/pages/Create.vue
@@ -22,7 +22,7 @@
             v-if="type === 'file'"
             label="Select File"
             prepend-icon="mdi-upload"
-            @update:modelValue="handleFile"
+            v-model="files"
             show-size
             required
           ></v-file-input>
@@ -75,13 +75,15 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { createSend } from '../services/api.js';
 import PasswordInput from '../components/PasswordInput.vue';
+import { formStore } from '../stores/formStore.js'; // Import the store
 
 const type = ref('text');
 const textSecret = ref('');
-const fileBlob = ref(null);
+const fileBlob = ref(null); // Will hold the single file for upload
+const files = ref([]); // Will be the model for the v-file-input
 const password = ref('');
 const oneTime = ref(false);
 const expires = ref('24h');
@@ -100,14 +102,33 @@ const expirationOptions = [
   { title: '1 Week', value: '168h' }
 ];
 
-function handleFile(fileOrFiles) {
-  if (Array.isArray(fileOrFiles)) {
-    fileBlob.value = fileOrFiles[0] || null;
+// Watch the file input's model and update the fileBlob we use for the API
+watch(files, (newFiles) => {
+  if (Array.isArray(newFiles) && newFiles.length > 0) {
+    fileBlob.value = newFiles[0];
   } else {
-    fileBlob.value = fileOrFiles || null;
+    fileBlob.value = null;
   }
+});
+
+// The new function to reset all form fields to their default state
+function resetForm() {
+  type.value = 'text';
+  textSecret.value = '';
+  files.value = []; // This clears the v-file-input
+  password.value = '';
+  oneTime.value = false;
+  expires.value = '24h';
+  errorMessage.value = '';
+  resultHash.value = '';
+  loading.value = false;
 }
 
+// Watch the counter in the store. When it changes, reset the form.
+watch(() => formStore.resetCounter, () => {
+  resetForm();
+});
+
 async function handleSubmit() {
   errorMessage.value = '';
   resultHash.value = '';
diff --git a/ui/src/stores/formStore.js b/ui/src/stores/formStore.js
new file mode 100644
index 0000000..84c3249
--- /dev/null
+++ b/ui/src/stores/formStore.js
@@ -0,0 +1,15 @@
+import { reactive } from 'vue';
+
+/**
+ * A simple reactive store to handle cross-component communication
+ * for resetting the create form.
+ */
+export const formStore = reactive({
+  // A counter that components can watch. Incrementing it signals a reset.
+  resetCounter: 0,
+
+  // Function to trigger the reset from anywhere in the app.
+  triggerReset() {
+    this.resetCounter++;
+  }
+});
\ No newline at end of file

From 5e5ee452640b407e4cd5a8f47af64480fdb9e21b Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 15:07:50 +0300
Subject: [PATCH 14/16] Fix: correct import statement for router in main.js

---
 ui/src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/main.js b/ui/src/main.js
index 0a08408..7e41324 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -4,7 +4,7 @@
  */
 import { createApp } from 'vue'
 import App from './App.vue'
-import router from './router' // This now imports from the /router directory
+import router from './router'
 
 // Import Vuetify and styles
 import 'vuetify/styles'

From 2d5bf6de787978b0913e78332fb4e06b60917ba4 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 15:16:55 +0300
Subject: [PATCH 15/16] Feat: enhance UI components with improved styling and
 theme support

---
 ui/src/App.vue                      | 62 +++++++++++++++++------------
 ui/src/assets/style.css             | 43 +++++++++++++-------
 ui/src/components/SecretDisplay.vue |  6 +--
 ui/src/main.js                      | 39 +++++++++++++++++-
 ui/src/pages/Create.vue             | 49 +++++++++++++----------
 ui/src/pages/Error404.vue           |  6 +--
 ui/src/pages/ErrorGeneral.vue       |  4 +-
 ui/src/pages/View.vue               | 15 +++----
 8 files changed, 146 insertions(+), 78 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 5544cd5..1ddb19f 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -2,31 +2,37 @@
   <v-app>
     <v-main class="d-flex flex-column">
       <v-container fluid class="pa-0 flex-grow-1">
-        <v-toolbar color="primary" dark flat>
+        <v-app-bar color="transparent" flat class="px-4">
           <v-toolbar-title>
             <router-link to="/" class="logo-link animate__animated animate__pulse" @click="requestFormReset">
-              <img src="./assets/Images/logo.png" alt="Logo" height="50" />
+              <img src="./assets/Images/logo.png" alt="Logo" height="40" />
             </router-link>
           </v-toolbar-title>
           <v-spacer></v-spacer>
-          <v-btn to="/" text class="animate__animated animate__fadeIn" @click="requestFormReset">
-            <v-icon left>mdi-plus</v-icon> Create
+          <v-btn to="/" text class="animate__animated animate__fadeIn" @click="requestFormReset" rounded>
+            <v-icon left>mdi-plus</v-icon> Create New
           </v-btn>
-        </v-toolbar>
+          <v-tooltip :text="isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'">
+            <template v-slot:activator="{ props }">
+              <v-btn v-bind="props" icon @click="toggleTheme" class="ml-2">
+                <v-icon>{{ isDarkMode ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
+              </v-btn>
+            </template>
+          </v-tooltip>
+        </v-app-bar>
 
         <v-container class="mt-4">
           <router-view />
         </v-container>
       </v-container>
 
-      <v-footer color="primary" dark class="justify-center">
+      <v-footer color="transparent" class="justify-center mt-8 pa-4">
         <span>
-          © {{ new Date().getFullYear() }} GopherDrop | 
+          © {{ new Date().getFullYear() }} GopherDrop |
           <a
             href="https://github.com/kek-Sec/gopherdrop"
             target="_blank"
             rel="noopener noreferrer"
-            class="text-white"
           >
             GitHub Repository
           </a>
@@ -41,7 +47,27 @@
  * The root component of the application.
  * Provides a header, navigation, and footer.
  */
+import { ref, onMounted, computed } from 'vue';
 import { formStore } from './stores/formStore.js';
+import { useTheme } from 'vuetify';
+
+const themeInstance = useTheme();
+const isDarkMode = computed(() => themeInstance.global.current.value.dark);
+
+// On component mount, check localStorage for a saved theme
+onMounted(() => {
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    themeInstance.global.name.value = savedTheme;
+  }
+});
+
+function toggleTheme() {
+  const newTheme = isDarkMode.value ? 'customLightTheme' : 'customDarkTheme';
+  themeInstance.global.name.value = newTheme;
+  // Save the new theme preference to localStorage
+  localStorage.setItem('theme', newTheme);
+}
 
 /**
  * Triggers the form reset via the store.
@@ -53,30 +79,14 @@ function requestFormReset() {
 </script>
 
 <style scoped>
-.v-toolbar {
-  width: 100%;
-  margin: 0;
-}
-
-.v-footer {
-  width: 100%;
-  padding: 16px;
-  font-size: 14px;
-  text-align: center;
-}
-
 .v-footer a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.v-footer a:hover {
-  text-decoration: underline;
+  font-weight: 500;
 }
 
 .logo-link {
   display: inline-block;
   text-decoration: none;
+  vertical-align: middle;
 }
 
 .v-main {
diff --git a/ui/src/assets/style.css b/ui/src/assets/style.css
index 0b0576e..2c0608b 100644
--- a/ui/src/assets/style.css
+++ b/ui/src/assets/style.css
@@ -1,25 +1,38 @@
 /**
  * Global styles for responsive and clean layout.
  */
- html, body {
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
+
+html, body {
     margin: 0;
     padding: 0;
-    font-family: Arial, sans-serif;
+    font-family: 'Inter', Arial, sans-serif;
     color: #333;
-  }
-  
-  a {
-    color: #007bff;
+    background: #f4f4f9; /* Fallback background */
+}
+
+/* Add a subtle gradient background */
+body {
+    background: linear-gradient(180deg, rgba(232,222,248,0.3) 0%, rgba(255,255,255,1) 30%);
+}
+
+.v-application {
+    background: transparent !important;
+}
+
+
+a {
+    color: #6750A4; /* Using the new primary color */
     text-decoration: none;
-  }
-  
-  a:hover {
+    transition: color 0.3s ease;
+}
+
+a:hover {
     text-decoration: underline;
-  }
-  
-  @media (max-width: 600px) {
+}
+
+@media (max-width: 600px) {
     main, header {
-      padding: 1rem;
+      padding: 0.5rem;
     }
-  }
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui/src/components/SecretDisplay.vue b/ui/src/components/SecretDisplay.vue
index 7f0f5d7..99925a8 100644
--- a/ui/src/components/SecretDisplay.vue
+++ b/ui/src/components/SecretDisplay.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
-    <v-alert v-if="textContent" type="info" class="mb-4">
+    <v-alert v-if="textContent" type="info" class="mb-4 text-left" variant="tonal">
       {{ textContent }}
     </v-alert>
 
     <div v-if="file">
-      <v-btn color="primary" @click="download" block>
+      <v-btn color="primary" @click="download" block x-large height="50" rounded>
         <v-icon left>mdi-download</v-icon> Download File
       </v-btn>
     </div>
 
-    <v-btn v-if="textContent" color="primary" @click="copy" block class="mt-4">
+    <v-btn v-if="textContent" color="primary" @click="copy" block x-large height="50" rounded class="mt-4">
       <v-icon left>mdi-content-copy</v-icon> Copy Secret
     </v-btn>
 
diff --git a/ui/src/main.js b/ui/src/main.js
index 7e41324..430b644 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -11,8 +11,45 @@ import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
 import '@mdi/font/css/materialdesignicons.css'
 
+// Create a custom light theme
+const customLightTheme = {
+  dark: false,
+  colors: {
+    primary: '#6750A4', // A modern purple
+    secondary: '#E8DEF8', // A light, complementary purple
+    background: '#FFFFFF',
+    surface: '#FEF7FF', // Off-white for cards and surfaces
+    info: '#6750A4', // Using primary color for info state for consistency
+    error: '#B3261E',
+    success: '#4CAF50',
+    warning: '#FB8C00',
+  }
+};
+
+// Create a custom dark theme
+const customDarkTheme = {
+  dark: true,
+  colors: {
+    primary: '#D0BCFF', // A lighter purple for dark mode contrast
+    secondary: '#4A4458',
+    background: '#141218',
+    surface: '#262329',
+    info: '#D0BCFF', // Lighter purple for info state
+    error: '#F2B8B5',
+    success: '#B7F3B9',
+    warning: '#FFD6A8',
+  }
+}
+
 // Create Vuetify instance
 const vuetify = createVuetify({
+  theme: {
+    defaultTheme: 'customLightTheme',
+    themes: {
+      customLightTheme,
+      customDarkTheme
+    },
+  },
   icons: {
     defaultSet: 'mdi',
   },
@@ -22,4 +59,4 @@ const vuetify = createVuetify({
 const app = createApp(App)
 app.use(router)
 app.use(vuetify)
-app.mount('#app')
+app.mount('#app')
\ No newline at end of file
diff --git a/ui/src/pages/Create.vue b/ui/src/pages/Create.vue
index 7df55d4..3720ef8 100644
--- a/ui/src/pages/Create.vue
+++ b/ui/src/pages/Create.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container class="d-flex justify-center align-center fill-height">
-    <v-card class="pa-4 animate__animated animate__fadeIn" max-width="600" outlined>
-      <v-card-title class="text-h5 text-center">Create a New Secret 🔑</v-card-title>
+    <v-card class="pa-4 pa-md-8 animate__animated animate__fadeIn" max-width="600" elevation="6" rounded="lg">
+      <v-card-title class="text-h5 text-md-h4 font-weight-bold text-center mb-4">Create a New Secret 🔑</v-card-title>
       <v-card-text>
         <v-form @submit.prevent="handleSubmit">
           <v-select
@@ -9,6 +9,8 @@
             v-model="type"
             :items="['text', 'file']"
             required
+            variant="outlined"
+            class="mb-2"
           ></v-select>
 
           <v-textarea
@@ -16,6 +18,8 @@
             label="Text Secret"
             v-model="textSecret"
             required
+            variant="outlined"
+            rows="4"
           ></v-textarea>
 
           <v-file-input
@@ -25,43 +29,49 @@
             v-model="files"
             show-size
             required
+            variant="outlined"
           ></v-file-input>
 
-          <PasswordInput v-model="password" />
+          <PasswordInput v-model="password" class="mt-2" />
 
           <v-select
             label="Expiration"
             v-model="expires"
             :items="expirationOptions"
             required
+            variant="outlined"
+            class="mt-2"
           ></v-select>
 
           <v-checkbox
             v-model="oneTime"
             label="One-Time Retrieval"
-            class="mt-4"
+            color="primary"
+            class="mt-2"
           ></v-checkbox>
 
-          <v-btn type="submit" color="primary" class="mt-4" block>Create</v-btn>
+          <v-btn type="submit" color="primary" class="mt-4" block large rounded x-large height="50">Create Secret</v-btn>
 
-          <v-alert v-if="errorMessage" type="error" class="mt-4 animate__animated animate__bounceIn">
+          <v-alert v-if="errorMessage" type="error" class="mt-4 animate__animated animate__bounceIn" variant="tonal">
             {{ errorMessage }}
           </v-alert>
         </v-form>
 
-        <v-alert v-if="resultHash" type="success" class="mt-4 animate__animated animate__fadeIn">
-          Secret Created! Share this link:<br />
-          <div class="d-flex align-center mt-2">
-            <v-chip class="mr-2">{{ baseUrl }}/view/{{ resultHash }}</v-chip>
+        <v-alert v-if="resultHash" type="success" class="mt-6 animate__animated animate__fadeIn" variant="tonal">
+          <div class="text-h6 mb-2">Secret Created!</div>
+          <p>Share this link to view the secret:</p>
+          <div class="d-flex align-center mt-2 pa-2" style="background-color: rgba(var(--v-theme-on-surface), 0.05); border-radius: 8px;">
+            <span class="mr-2 text-truncate">{{ baseUrl }}/view/{{ resultHash }}</span>
+            <v-spacer></v-spacer>
             <v-tooltip text="Copy Link to Clipboard">
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn icon v-bind="attrs" v-on="on" @click="copyLink" color="white">
-                  <v-icon color="black">mdi-content-copy</v-icon>
+              <template v-slot:activator="{ props }">
+                <v-btn icon v-bind="props" @click="copyLink">
+                  <v-icon>mdi-content-copy</v-icon>
                 </v-btn>
               </template>
             </v-tooltip>
           </div>
-          <v-snackbar v-model="snackbar" timeout="2000">
+          <v-snackbar v-model="snackbar" timeout="2000" color="success">
             Link copied to clipboard!
           </v-snackbar>
         </v-alert>
@@ -82,8 +92,8 @@ import { formStore } from '../stores/formStore.js'; // Import the store
 
 const type = ref('text');
 const textSecret = ref('');
-const fileBlob = ref(null); // Will hold the single file for upload
-const files = ref([]); // Will be the model for the v-file-input
+const fileBlob = ref(null);
+const files = ref([]);
 const password = ref('');
 const oneTime = ref(false);
 const expires = ref('24h');
@@ -102,7 +112,6 @@ const expirationOptions = [
   { title: '1 Week', value: '168h' }
 ];
 
-// Watch the file input's model and update the fileBlob we use for the API
 watch(files, (newFiles) => {
   if (Array.isArray(newFiles) && newFiles.length > 0) {
     fileBlob.value = newFiles[0];
@@ -111,11 +120,10 @@ watch(files, (newFiles) => {
   }
 });
 
-// The new function to reset all form fields to their default state
 function resetForm() {
   type.value = 'text';
   textSecret.value = '';
-  files.value = []; // This clears the v-file-input
+  files.value = [];
   password.value = '';
   oneTime.value = false;
   expires.value = '24h';
@@ -124,7 +132,6 @@ function resetForm() {
   loading.value = false;
 }
 
-// Watch the counter in the store. When it changes, reset the form.
 watch(() => formStore.resetCounter, () => {
   resetForm();
 });
@@ -180,7 +187,7 @@ function copyLink() {
 
 <style scoped>
 .v-container {
-  min-height: 100vh;
+  min-height: 85vh;
 }
 
 .v-card {
diff --git a/ui/src/pages/Error404.vue b/ui/src/pages/Error404.vue
index a16cf7c..e6986de 100644
--- a/ui/src/pages/Error404.vue
+++ b/ui/src/pages/Error404.vue
@@ -1,12 +1,12 @@
 <template>
   <v-container class="d-flex flex-column align-center justify-center fill-height text-center">
-    <v-card class="pa-6" elevation="4" max-width="500">
+    <v-card class="pa-6 pa-md-10" elevation="6" max-width="500" rounded="lg">
       <v-icon size="80" color="warning">mdi-alert-circle-outline</v-icon>
       <h1 class="text-h4 mt-4 font-weight-bold">404 - Page Not Found</h1>
       <p class="mt-2 mb-6 text-body-1">
         Sorry, the page you are looking for does not exist or has been moved.
       </p>
-      <v-btn to="/" color="primary" large>
+      <v-btn to="/" color="primary" large rounded>
         <v-icon left>mdi-home</v-icon>
         Go Home
       </v-btn>
@@ -25,4 +25,4 @@
 .fill-height {
   min-height: 80vh;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/ui/src/pages/ErrorGeneral.vue b/ui/src/pages/ErrorGeneral.vue
index cd3d08e..0586404 100644
--- a/ui/src/pages/ErrorGeneral.vue
+++ b/ui/src/pages/ErrorGeneral.vue
@@ -1,12 +1,12 @@
 <template>
   <v-container class="d-flex flex-column align-center justify-center fill-height text-center">
-    <v-card class="pa-6" elevation="4" max-width="500">
+    <v-card class="pa-6 pa-md-10" elevation="6" max-width="500" rounded="lg">
       <v-icon size="80" color="error">mdi-close-octagon-outline</v-icon>
       <h1 class="text-h4 mt-4 font-weight-bold">Oops! Something Went Wrong</h1>
       <p class="mt-2 mb-6 text-body-1">
         An unexpected error occurred. Please try again later.
       </p>
-      <v-btn to="/" color="primary" large>
+      <v-btn to="/" color="primary" large rounded>
         <v-icon left>mdi-home</v-icon>
         Go Back Home
       </v-btn>
diff --git a/ui/src/pages/View.vue b/ui/src/pages/View.vue
index d6809e7..dabf83a 100644
--- a/ui/src/pages/View.vue
+++ b/ui/src/pages/View.vue
@@ -1,13 +1,13 @@
 <template>
   <v-container class="d-flex justify-center align-center fill-height">
-    <v-card class="pa-4 animate__animated animate__fadeIn" max-width="600" outlined>
-      <v-card-title class="text-h5 text-center">View Secret</v-card-title>
+    <v-card class="pa-4 pa-md-8 animate__animated animate__fadeIn" max-width="600" elevation="6" rounded="lg">
+      <v-card-title class="text-h5 text-md-h4 font-weight-bold text-center mb-4">View Secret 🔒</v-card-title>
       <v-card-text>
-        <v-alert v-if="errorMessage" type="error" class="mb-4">
+        <v-alert v-if="errorMessage" type="error" class="mb-4" variant="tonal">
           {{ errorMessage }}
         </v-alert>
 
-        <v-alert v-if="notFound" type="error" class="mb-4">
+        <v-alert v-if="notFound" type="error" class="mb-4" variant="tonal">
           Secret not found or has expired.
         </v-alert>
 
@@ -17,12 +17,13 @@
             label="Password"
             v-model="password"
             type="password"
-            prepend-icon="mdi-lock"
+            prepend-inner-icon="mdi-lock"
             required
+            variant="outlined"
             class="animate__animated animate__fadeIn"
           ></v-text-field>
 
-          <v-btn type="submit" color="primary" class="animate__animated animate__fadeIn" block>Load Secret</v-btn>
+          <v-btn type="submit" color="primary" class="animate__animated animate__fadeIn mt-4" block x-large height="50" rounded>Load Secret</v-btn>
         </v-form>
 
         <SecretDisplay
@@ -94,7 +95,7 @@ onMounted(async () => {
 
 <style scoped>
 .v-container {
-  min-height: 100vh;
+  min-height: 85vh;
 }
 
 .v-card {

From 6487ca88297c444f3f3a25c8790d63e49100e301 Mon Sep 17 00:00:00 2001
From: George Petrakis <g.petrakis@natechbanking.com>
Date: Fri, 13 Jun 2025 15:19:16 +0300
Subject: [PATCH 16/16] Feat: update changelog for version 1.0.8 with UI
 enhancements, theme updates, component improvements, and code cleanup

---
 CHANGELOG.md | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 83ccacd..a30432c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,23 @@
 # Changelog
 
-## [1.0.7] - 2025-04-22
+## [1.0.8]
+### UI Enhancements
+- **Redesigned Header and Footer**: Modernized header/footer with theme toggle and improved visual consistency.
+- **Improved 404 Page**: Updated design for better responsiveness and refined typography.
+
+### Theme and Styling Updates
+- **Custom Themes**: Introduced custom light/dark themes and theme switching functionality.
+- **Global Styling Updates**: Updated font to "Inter" and added a gradient background.
+
+### Component Enhancements
+- **Reusable Password Input**: Created a component for password handling, including visibility and generation.
+- **Secret Display Component**: Added a component for secret copying and file downloading with alerts.
+
+### Code Cleanup and Refactoring
+- **Removed Unused API Code**: Deleted obsolete `api.js` to simplify codebase.
+- **Form Reset Logic**: Refactored `Create.vue` to use a centralized store for form reset.
+
+## [1.0.7]
 ### Added
 - Customizable application title and description through environment variables
 - New build arguments in Dockerfile: VITE_APP_TITLE and VITE_APP_DESCRIPTION
@@ -61,4 +78,4 @@ Other Enhancements:
 - Updated Docker images to use multi-stage builds for backend and frontend.
 - Improved project documentation and added sections for installation, configuration, and deployment.
 
----
+---
\ No newline at end of file