Add simple auth

frontend/.env.example

@@ -3,8 +3,9 @@
 # In production point it directly at the backend, e.g. https://api.example.com/api/v1
 VITE_API_URL=/api/v1
 
-# Shared password for HTTP Basic auth (must match APP_PASSWORD on the backend).
-VITE_APP_PASSWORD=changeme
+# Credentials are no longer configured here. Users enter their username and
+# password via the login form. The backend validates them via HTTP Basic Auth.
+# Configure the backend credentials with APP_AUTH_USERNAME and APP_PASSWORD.
 
 # Set to 'false' to hide the upload UI (frontend). Also set UPLOAD_ENABLED=false on the backend to block the endpoint.
 VITE_UPLOAD_ENABLED=true

frontend/src/App.vue

@@ -6,23 +6,26 @@
         <span class="brand-name">AI Teacher</span>
         <span class="brand-subtitle">Neurosurgeon Learning Platform</span>
       </div>
-      <ul class="navbar-links">
-        <li>
-          <RouterLink to="/" :class="{ active: $route.path === '/' }">
-            <span class="nav-icon">📚</span> Library
-          </RouterLink>
-        </li>
-        <li>
-          <RouterLink to="/topics" :class="{ active: $route.path === '/topics' }">
-            <span class="nav-icon">🗂</span> Topics
-          </RouterLink>
-        </li>
-        <li>
-          <RouterLink to="/chat" :class="{ active: $route.path === '/chat' }">
-            <span class="nav-icon">💬</span> Chat
-          </RouterLink>
-        </li>
-      </ul>
+      <template v-if="authStore.isAuthenticated">
+        <ul class="navbar-links">
+          <li>
+            <RouterLink to="/" :class="{ active: $route.path === '/' }">
+              <span class="nav-icon">📚</span> Library
+            </RouterLink>
+          </li>
+          <li>
+            <RouterLink to="/topics" :class="{ active: $route.path === '/topics' }">
+              <span class="nav-icon">🗂</span> Topics
+            </RouterLink>
+          </li>
+          <li>
+            <RouterLink to="/chat" :class="{ active: $route.path === '/chat' }">
+              <span class="nav-icon">💬</span> Chat
+            </RouterLink>
+          </li>
+        </ul>
+        <button class="btn btn-logout" @click="logout">Sign out</button>
+      </template>
     </nav>
 
     <main class="main-content">
@@ -36,11 +39,20 @@
 
 <script setup lang="ts">
 import { ref, provide } from 'vue'
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink, RouterView, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/authStore'
+
+const authStore = useAuthStore()
+const router = useRouter()
 
 const toastMessage = ref('')
 const toastType = ref<'toast-error' | 'toast-success'>('toast-error')
 
+function logout() {
+  authStore.clearCredentials()
+  router.push({ name: 'login' })
+}
+
 function showToast(message: string, type: 'error' | 'success' = 'error') {
   toastMessage.value = message
   toastType.value = type === 'error' ? 'toast-error' : 'toast-success'
@@ -227,6 +239,20 @@ body {
   background: #cbd5e0;
 }
 
+.btn-logout {
+  background: transparent;
+  color: #bee3f8;
+  border: 1px solid #4a90b8;
+  font-size: 0.85rem;
+  padding: 0.4rem 0.9rem;
+  margin-left: 1rem;
+}
+
+.btn-logout:hover {
+  background: #2b6cb0;
+  color: white;
+}
+
 .spinner {
   display: inline-block;
   width: 20px;

frontend/src/main.ts

@@ -4,6 +4,21 @@ import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
-app.use(createPinia())
+const pinia = createPinia()
+app.use(pinia)
 app.use(router)
+
+// Verify any session restored from sessionStorage is still valid.
+// If the backend rejects the credentials (e.g. password changed), clear them
+// before the router guard fires so the user lands on /login cleanly.
+import { useAuthStore } from '@/stores/authStore'
+import { api } from '@/services/api'
+
+const auth = useAuthStore()
+if (auth.isAuthenticated) {
+  api.get('/auth/check').catch(() => {
+    auth.clearCredentials()
+  })
+}
+
 app.mount('#app')

frontend/src/router/index.ts

@@ -1,4 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '@/stores/authStore'
+import LoginView from '@/views/LoginView.vue'
 import UploadView from '@/views/UploadView.vue'
 import TopicsView from '@/views/TopicsView.vue'
 import ChatView from '@/views/ChatView.vue'
@@ -7,6 +9,11 @@ import BookReaderView from '@/views/BookReaderView.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+    {
+      path: '/login',
+      name: 'login',
+      component: LoginView
+    },
     {
       path: '/',
       name: 'upload',
@@ -30,4 +37,11 @@ const router = createRouter({
   ]
 })
 
+router.beforeEach((to) => {
+  const auth = useAuthStore()
+  if (to.name !== 'login' && !auth.isAuthenticated) {
+    return { name: 'login' }
+  }
+})
+
 export default router

frontend/src/services/api.ts

@@ -1,20 +1,29 @@
 import axios from 'axios'
+import { useAuthStore } from '@/stores/authStore'
 
 export const api = axios.create({
   baseURL: import.meta.env.VITE_API_URL ?? '/api/v1',
-  auth: {
-    username: 'neurosurgeon',
-    password: import.meta.env.VITE_APP_PASSWORD ?? 'changeme'
-  },
   headers: {
     'Content-Type': 'application/json'
   }
 })
 
-// Response interceptor for error normalisation
+api.interceptors.request.use((config) => {
+  const auth = useAuthStore()
+  if (auth.username && auth.password) {
+    config.auth = { username: auth.username, password: auth.password }
+  }
+  return config
+})
+
 api.interceptors.response.use(
   (response) => response,
   (error) => {
+    if (error.response?.status === 401) {
+      useAuthStore().clearCredentials()
+      window.location.href = '/login'
+      return Promise.reject(new Error('Session expired. Please sign in again.'))
+    }
     const message =
       error.response?.data?.error ??
       error.message ??

frontend/src/stores/authStore.ts

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+const SESSION_KEY = 'auth'
+
+export const useAuthStore = defineStore('auth', () => {
+  const stored = sessionStorage.getItem(SESSION_KEY)
+  const parsed = stored ? (JSON.parse(stored) as { username: string; password: string }) : null
+
+  const username = ref<string | null>(parsed?.username ?? null)
+  const password = ref<string | null>(parsed?.password ?? null)
+
+  const isAuthenticated = computed(() => !!username.value && !!password.value)
+
+  function setCredentials(u: string, p: string) {
+    username.value = u
+    password.value = p
+    sessionStorage.setItem(SESSION_KEY, JSON.stringify({ username: u, password: p }))
+  }
+
+  function clearCredentials() {
+    username.value = null
+    password.value = null
+    sessionStorage.removeItem(SESSION_KEY)
+  }
+
+  return { username, password, isAuthenticated, setCredentials, clearCredentials }
+})

frontend/src/views/LoginView.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="login-wrapper">
+    <div class="login-card card">
+      <div class="login-header">
+        <span class="login-icon">🧠</span>
+        <h1 class="login-title">AI Teacher</h1>
+        <p class="login-subtitle">Neurosurgeon Learning Platform</p>
+      </div>
+
+      <form class="login-form" @submit.prevent="handleSubmit">
+        <div class="form-group">
+          <label for="username">Username</label>
+          <input
+            id="username"
+            v-model="username"
+            type="text"
+            autocomplete="username"
+            required
+            :disabled="loading"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input
+            id="password"
+            v-model="password"
+            type="password"
+            autocomplete="current-password"
+            required
+            :disabled="loading"
+          />
+        </div>
+
+        <div v-if="errorMessage" class="login-error">
+          {{ errorMessage }}
+        </div>
+
+        <button type="submit" class="btn btn-primary login-btn" :disabled="loading || !username || !password">
+          <span v-if="loading" class="spinner"></span>
+          <span v-else>Sign in</span>
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/authStore'
+import { api } from '@/services/api'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const username = ref('')
+const password = ref('')
+const loading = ref(false)
+const errorMessage = ref('')
+
+async function handleSubmit() {
+  errorMessage.value = ''
+  loading.value = true
+
+  authStore.setCredentials(username.value, password.value)
+
+  try {
+    await api.get('/auth/check')
+    router.push('/')
+  } catch {
+    authStore.clearCredentials()
+    errorMessage.value = 'Invalid username or password.'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #f0f4f8;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 380px;
+  padding: 2rem;
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 1.75rem;
+}
+
+.login-icon {
+  font-size: 2.5rem;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.login-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1a365d;
+  margin-bottom: 0.25rem;
+}
+
+.login-subtitle {
+  font-size: 0.85rem;
+  color: #718096;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.form-group label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #4a5568;
+}
+
+.form-group input {
+  padding: 0.6rem 0.75rem;
+  border: 1px solid #cbd5e0;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.form-group input:focus {
+  border-color: #3182ce;
+  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
+}
+
+.form-group input:disabled {
+  background: #f7fafc;
+  color: #a0aec0;
+}
+
+.login-error {
+  padding: 0.6rem 0.75rem;
+  background: #fed7d7;
+  color: #c53030;
+  border: 1px solid #fc8181;
+  border-radius: 6px;
+  font-size: 0.875rem;
+}
+
+.login-btn {
+  width: 100%;
+  justify-content: center;
+  padding: 0.7rem;
+  font-size: 0.95rem;
+  margin-top: 0.25rem;
+}
+</style>