Phase 2: auth, session management, layout, PWA manifest

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-11 11:54:37 +03:00
parent 0bc9160d97
commit d9de37d3d8
17 changed files with 487 additions and 1 deletions
@@ -0,0 +1,7 @@
+{{define "content"}}
+<h1 class="text-2xl font-bold text-gray-800 mb-2">Library</h1>
+<p class="text-gray-500 text-sm">
+  No questions yet.
+  <a href="/upload" class="text-blue-600 hover:underline">Upload a document</a> to get started.
+</p>
+{{end}}
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -0,0 +1,73 @@
+{{define "layout"}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>QBank</title>
+  <!-- Development: Tailwind CDN. Production: replaced by make tailwind output. -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="manifest" href="/static/manifest.json">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="QBank">
+  <link rel="apple-touch-icon" href="/static/icon-192.png">
+  <meta name="theme-color" content="#2563eb">
+  <script>if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
+</head>
+<body class="bg-gray-50 min-h-screen text-gray-900">
+
+  {{if .User}}
+  <header class="bg-blue-600 text-white shadow-md">
+    <div class="max-w-2xl mx-auto px-4 py-3 flex items-center justify-between">
+      <a href="/" class="text-lg font-bold tracking-tight">QBank</a>
+      <div class="flex items-center gap-3">
+        <nav class="hidden sm:flex items-center gap-5 text-sm font-medium">
+          <a href="/" class="hover:underline underline-offset-2">Library</a>
+          <a href="/upload" class="hover:underline underline-offset-2">Upload</a>
+          <a href="/test/new" class="hover:underline underline-offset-2">Take Test</a>
+          <a href="/history" class="hover:underline underline-offset-2">History</a>
+        </nav>
+        <span class="text-sm opacity-75 hidden sm:inline">{{.User.Name}}</span>
+        <form method="post" action="/logout">
+          <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
+          <button type="submit"
+                  class="text-xs bg-blue-700 hover:bg-blue-800 px-3 py-1.5 rounded-md font-medium">
+            Logout
+          </button>
+        </form>
+      </div>
+    </div>
+    <nav class="sm:hidden border-t border-blue-500 overflow-x-auto">
+      <div class="flex px-4 py-2 gap-5 text-sm font-medium whitespace-nowrap items-center">
+        <a href="/" class="hover:underline">Library</a>
+        <a href="/upload" class="hover:underline">Upload</a>
+        <a href="/test/new" class="hover:underline">Take Test</a>
+        <a href="/history" class="hover:underline">History</a>
+        <span class="opacity-75 ml-auto">{{.User.Name}}</span>
+      </div>
+    </nav>
+  </header>
+  {{else}}
+  <header class="bg-blue-600 text-white shadow-md">
+    <div class="max-w-2xl mx-auto px-4 py-3">
+      <span class="text-lg font-bold tracking-tight">QBank</span>
+    </div>
+  </header>
+  {{end}}
+
+  {{if .Flash}}
+  <div class="max-w-2xl mx-auto px-4 pt-4">
+    <div class="bg-green-50 border border-green-200 text-green-800 text-sm px-4 py-3 rounded-md">
+      {{.Flash}}
+    </div>
+  </div>
+  {{end}}
+
+  <main class="max-w-2xl mx-auto px-4 py-6">
+    {{block "content" .}}{{end}}
+  </main>
+
+</body>
+</html>
+{{end}}
@@ -0,0 +1,32 @@
+{{define "content"}}
+<div class="max-w-sm mx-auto mt-12">
+  <h1 class="text-2xl font-bold mb-8 text-center text-gray-800">Sign in to QBank</h1>
+
+  {{if .Error}}
+  <div class="mb-4 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3 rounded-md">
+    {{.Error}}
+  </div>
+  {{end}}
+
+  <form method="post" action="/login" class="space-y-4">
+    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
+      <input type="text" name="username" required autofocus
+             class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm shadow-sm
+                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+    </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+      <input type="password" name="password" required
+             class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm shadow-sm
+                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+    </div>
+    <button type="submit"
+            class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2.5 px-4 rounded-md
+                   text-sm font-semibold shadow-sm">
+      Sign in
+    </button>
+  </form>
+</div>
+{{end}}