feat: add session-based authentication to the web interface and API routes

frontend/src/App.vue

@@ -6,9 +6,10 @@
           <img src="/favicon.svg" alt="Nucleus Logo" class="w-8 h-8 drop-shadow-md" />
           <h1 class="text-xl font-bold text-heading">Nucleus</h1>
         </div>
-        <nav class="flex space-x-4">
+        <nav class="flex space-x-4 items-center" v-if="$route.path !== '/login'">
           <router-link to="/" class="px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-border-subtle hover:text-heading" active-class="bg-bg text-accent shadow-inner">Targets</router-link>
           <router-link to="/scans" class="px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-border-subtle hover:text-heading" active-class="bg-bg text-accent shadow-inner">Scans History</router-link>
+          <button @click="logout" class="ml-4 px-3 py-1.5 border border-border-subtle rounded-md text-sm font-medium text-body hover:text-red-400 hover:border-red-400/50 transition-colors hover:cursor-pointer">Logout</button>
         </nav>
       </div>
     </header>
@@ -20,3 +21,14 @@
     </main>
   </div>
 </template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const logout = async () => {
+  await fetch('/api/auth/logout', { method: 'POST' })
+  router.push('/login')
+}
+</script>

frontend/src/components/FindingsInspector.vue

@@ -69,6 +69,7 @@ const findings = ref([])
 const loadFindings = async () => {
   try {
     const res = await fetch(`/api/scans/${props.id}/findings`)
+    if (res.status === 401) { window.location.href = '/login'; return }
     findings.value = await res.json() || []
   } catch (e) {
     console.error(e)

frontend/src/components/Login.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex items-center justify-center min-h-[70vh]">
+    <div class="w-full max-w-md bg-surface p-8 rounded-xl shadow-lg border border-border-subtle backdrop-blur-sm">
+      <div class="flex justify-center mb-6">
+        <img src="/favicon.svg" alt="Nucleus Logo" class="w-16 h-16 drop-shadow-md" />
+      </div>
+      <h2 class="text-2xl font-bold text-center text-heading mb-6">Sign In to Nucleus</h2>
+      
+      <form @submit.prevent="login" class="space-y-4">
+        <div v-if="error" class="p-3 bg-red-500/20 border border-red-500/50 text-red-400 rounded-lg text-sm text-center">
+          {{ error }}
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-body mb-1">Username</label>
+          <input v-model="username" type="text" required class="w-full bg-bg border border-border-subtle rounded-lg px-4 py-2 text-heading focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-all">
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-body mb-1">Password</label>
+          <input v-model="password" type="password" required class="w-full bg-bg border border-border-subtle rounded-lg px-4 py-2 text-heading focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-all">
+        </div>
+        <button type="submit" class="w-full bg-accent hover:bg-accent/80 text-bg font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-all hover:cursor-pointer mt-2">
+          Login
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const username = ref('')
+const password = ref('')
+const error = ref('')
+
+const login = async () => {
+  error.value = ''
+  try {
+    const res = await fetch('/api/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username: username.value, password: password.value })
+    })
+    
+    if (res.ok) {
+      router.push('/')
+    } else {
+      error.value = 'Invalid username or password'
+    }
+  } catch (e) {
+    error.value = 'Network error'
+  }
+}
+</script>

frontend/src/components/ScansHistory.vue

@@ -75,6 +75,7 @@ let interval = null
 const loadScans = async () => {
   try {
     const res = await fetch('/api/scans')
+    if (res.status === 401) { window.location.href = '/login'; return }
     scans.value = await res.json() || []
   } catch (e) {
     console.error(e)

frontend/src/components/TargetManager.vue

@@ -84,6 +84,7 @@ const form = ref({ name: '', address: '', schedule: 'manual', customSchedule: ''
 const loadTargets = async () => {
   try {
     const res = await fetch('/api/targets')
+    if (res.status === 401) { window.location.href = '/login'; return }
     targets.value = await res.json() || []
   } catch (e) {
     console.error(e)

frontend/src/router.js

@@ -2,14 +2,34 @@ import { createRouter, createWebHistory } from 'vue-router'
 import TargetManager from './components/TargetManager.vue'
 import ScansHistory from './components/ScansHistory.vue'
 import FindingsInspector from './components/FindingsInspector.vue'
+import Login from './components/Login.vue'
 
 const routes = [
-  { path: '/', component: TargetManager },
-  { path: '/scans', component: ScansHistory },
-  { path: '/scans/:id', component: FindingsInspector, props: true }
+  { path: '/login', component: Login },
+  { path: '/', component: TargetManager, meta: { requiresAuth: true } },
+  { path: '/scans', component: ScansHistory, meta: { requiresAuth: true } },
+  { path: '/scans/:id', component: FindingsInspector, props: true, meta: { requiresAuth: true } }
 ]
 
 export const router = createRouter({
   history: createWebHistory(),
   routes
 })
+
+router.beforeEach(async (to, from, next) => {
+  if (to.meta.requiresAuth) {
+    try {
+      const res = await fetch('/api/auth/status')
+      const status = await res.json()
+      if (status.auth_required && !status.authenticated) {
+        next('/login')
+      } else {
+        next()
+      }
+    } catch (e) {
+      next('/login')
+    }
+  } else {
+    next()
+  }
+})