feat: implement user authentication and admin management

- Add user management API endpoints for listing and creating users.
- Implement login and logout functionality with rate limiting.
- Create UI components for login form, logout button, and animated elements.
- Add session management with JWT and secure cookie handling.
- Seed initial admin user if no users exist.
- Introduce utility functions for password hashing and user authentication.
- Set up proxy middleware for route protection and security headers.
- Create a JSON file for user data storage.
- Add links configuration for external resources.

frontend/app/share/page.tsx

@@ -12,6 +12,22 @@ function formatBytes(n: number) {
   return `${(n / 1024 / 1024).toFixed(2)} MB`;
 }
 
+function UploadIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-10 h-10" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-10 h-10" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  );
+}
+
 export default function SharePage() {
   const router = useRouter();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -22,9 +38,9 @@ export default function SharePage() {
   const [existingGroups, setExistingGroups] = useState<string[]>([]);
   const [dragging, setDragging] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
 
-  // Pre-fetch existing group names for autocomplete
   useEffect(() => {
     fetch("/api/files")
       .then((r) => r.json())
@@ -34,7 +50,7 @@ export default function SharePage() {
         ).sort();
         setExistingGroups(groups);
       })
-      .catch(() => { });
+      .catch(() => {});
   }, []);
 
   function pickFile(f: File) {
@@ -62,22 +78,34 @@ export default function SharePage() {
     e.preventDefault();
     if (!file) return;
     setUploading(true);
+    setProgress(0);
     setError(null);
+
+    // Animate a fake progress bar for perceived speed
+    const interval = setInterval(() => {
+      setProgress((p) => (p < 85 ? p + Math.random() * 8 : p));
+    }, 200);
+
     try {
       const formData = new FormData();
       formData.append("file", file);
       if (displayName.trim()) formData.append("displayName", displayName.trim());
       formData.append("description", description);
       if (group.trim()) formData.append("group", group.trim());
+
       const res = await fetch("/api/upload", { method: "POST", body: formData });
       const data = (await res.json()) as { token?: string; error?: string };
-      if (!res.ok || !data.token) {
-        throw new Error(data.error ?? "Upload failed");
-      }
+      if (!res.ok || !data.token) throw new Error(data.error ?? "Upload failed");
+
+      clearInterval(interval);
+      setProgress(100);
+      await new Promise((r) => setTimeout(r, 400));
       router.push(`/files/${data.token}`);
     } catch (err) {
+      clearInterval(interval);
       setError(err instanceof Error ? err.message : "Unknown error");
       setUploading(false);
+      setProgress(0);
     }
   }
 
@@ -85,25 +113,33 @@ export default function SharePage() {
 
   return (
     <div className="mx-auto max-w-2xl px-6 py-16">
+      {/* Header */}
       <div className="mb-10">
-        <h1 className="text-3xl font-bold text-white">Share a file</h1>
-        <p className="mt-2 text-slate-400">
+        <p className="text-xs font-semibold uppercase tracking-widest text-cyan-400 mb-2">
+          Share
+        </p>
+        <h1 className="text-4xl font-extrabold tracking-tight text-white">
+          Share a file
+        </h1>
+        <p className="mt-3 text-slate-400 leading-relaxed">
           Upload a{" "}
-          <span className="font-mono text-slate-300">.backerup</span> snapshot or{" "}
-          <span className="font-mono text-slate-300">.json</span> container config.
-          Anyone with the link can download it.
+          <code className="font-mono text-slate-300 bg-white/5 px-1.5 py-0.5 rounded text-xs">.backerup</code>{" "}
+          snapshot or{" "}
+          <code className="font-mono text-slate-300 bg-white/5 px-1.5 py-0.5 rounded text-xs">.json</code>{" "}
+          container config. Anyone with the link can browse and download it.
         </p>
       </div>
 
       <form onSubmit={handleSubmit} className="space-y-6">
-        {/* Drop zone */}
+        {/* ── Drop zone ── */}
         <div
-          className={`relative flex cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed px-8 py-16 text-center transition ${dragging
-              ? "border-cyan-400 bg-cyan-500/10"
+          className={`relative flex cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed px-8 py-14 text-center transition-all ${
+            dragging
+              ? "border-cyan-400 bg-cyan-500/8 scale-[1.01]"
               : file
-                ? "border-emerald-500/50 bg-emerald-500/5"
-                : "border-slate-700 bg-slate-900/50 hover:border-slate-600"
-            }`}
+              ? "border-emerald-500/50 bg-emerald-500/5"
+              : "border-white/10 bg-white/2 hover:border-white/20 hover:bg-white/4"
+          }`}
           onClick={() => inputRef.current?.click()}
           onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
           onDragLeave={() => setDragging(false)}
@@ -116,39 +152,57 @@ export default function SharePage() {
             className="hidden"
             onChange={(e) => { const f = e.target.files?.[0]; if (f) pickFile(f); }}
           />
+
           {file ? (
             <>
-              <div className="text-4xl">{isBackerup ? "📦" : "🗂️"}</div>
-              <p className="mt-3 font-semibold text-white">{file.name}</p>
-              <p className="mt-1 text-xs text-slate-400">
+              <div className="text-emerald-400 mb-3">
+                <CheckIcon />
+              </div>
+              <p className="font-semibold text-white">{file.name}</p>
+              <p className="mt-1 text-sm text-slate-400">
                 {formatBytes(file.size)} ·{" "}
                 <button
                   type="button"
-                  className="text-cyan-400 hover:underline"
-                  onClick={(e) => { e.stopPropagation(); setFile(null); }}
+                  className="text-cyan-400 hover:text-cyan-300 transition-colors underline"
+                  onClick={(e) => { e.stopPropagation(); setFile(null); setError(null); }}
                 >
                   remove
                 </button>
               </p>
+              <div className="mt-3 flex flex-wrap items-center justify-center gap-2">
+                <span
+                  className={`rounded-full px-3 py-1 text-xs font-semibold border ${
+                    isBackerup
+                      ? "bg-cyan-500/12 border-cyan-500/30 text-cyan-400"
+                      : "bg-violet-500/12 border-violet-500/30 text-violet-400"
+                  }`}
+                >
+                  {isBackerup ? ".backerup archive" : ".json config"}
+                </span>
+              </div>
             </>
           ) : (
             <>
-              <div className="text-4xl text-slate-600">📁</div>
-              <p className="mt-4 text-sm font-medium text-slate-300">
-                Drop a file here or click to browse
+              <div className={`mb-4 transition-colors ${dragging ? "text-cyan-400" : "text-slate-600"}`}>
+                <UploadIcon />
+              </div>
+              <p className="font-semibold text-slate-300">
+                {dragging ? "Drop it!" : "Drop a file or click to browse"}
               </p>
-              <p className="mt-1 text-xs text-slate-500">
-                Accepts <span className="font-mono">.backerup</span> and{" "}
-                <span className="font-mono">.json</span> &mdash; up to 500 MB
+              <p className="mt-1.5 text-xs text-slate-600">
+                Accepts{" "}
+                <code className="font-mono text-slate-500">.backerup</code> and{" "}
+                <code className="font-mono text-slate-500">.json</code> — up to 500 MB
               </p>
             </>
           )}
         </div>
 
-        {/* Display name */}
-        <div>
-          <label className="mb-1.5 block text-sm font-medium text-slate-300" htmlFor="displayName">
-            Display name <span className="text-slate-600">(optional)</span>
+        {/* ── Display name ── */}
+        <div className="space-y-1.5">
+          <label className="block text-sm font-medium text-slate-300" htmlFor="displayName">
+            Display name{" "}
+            <span className="text-slate-600 font-normal">(optional)</span>
           </label>
           <input
             id="displayName"
@@ -157,15 +211,16 @@ export default function SharePage() {
             onChange={(e) => setDisplayName(e.target.value)}
             placeholder="e.g. Production Postgres backup"
             maxLength={120}
-            className="w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-sm text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500 transition-colors"
+            className="w-full rounded-xl border border-white/8 bg-white/4 px-4 py-3 text-sm text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500/50 focus:bg-white/6 transition-all"
           />
-          <p className="mt-1 text-xs text-slate-600">Shown instead of the raw filename.</p>
+          <p className="text-xs text-slate-600">Shown on the browse page instead of the raw filename.</p>
         </div>
 
-        {/* Group */}
-        <div>
-          <label className="mb-1.5 block text-sm font-medium text-slate-300" htmlFor="group">
-            Group <span className="text-slate-600">(optional)</span>
+        {/* ── Group ── */}
+        <div className="space-y-1.5">
+          <label className="block text-sm font-medium text-slate-300" htmlFor="group">
+            Group{" "}
+            <span className="text-slate-600 font-normal">(optional)</span>
           </label>
           <input
             id="group"
@@ -175,53 +230,106 @@ export default function SharePage() {
             onChange={(e) => setGroup(e.target.value)}
             placeholder="e.g. production, homelab, postgres"
             maxLength={60}
-            className="w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-sm text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500 transition-colors"
+            className="w-full rounded-xl border border-white/8 bg-white/4 px-4 py-3 text-sm text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500/50 focus:bg-white/6 transition-all"
           />
           {existingGroups.length > 0 && (
             <datalist id="group-list">
-              {existingGroups.map((g) => (
-                <option key={g} value={g} />
-              ))}
+              {existingGroups.map((g) => <option key={g} value={g} />)}
             </datalist>
           )}
-          <p className="mt-1 text-xs text-slate-600">
+          {existingGroups.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 pt-1">
+              {existingGroups.map((g) => (
+                <button
+                  key={g}
+                  type="button"
+                  onClick={() => setGroup(g === group ? "" : g)}
+                  className={`rounded-full px-2.5 py-0.5 text-xs transition-all ${
+                    group === g
+                      ? "bg-violet-500/20 border border-violet-500/40 text-violet-300"
+                      : "bg-white/4 border border-white/8 text-slate-500 hover:text-slate-300"
+                  }`}
+                >
+                  {g}
+                </button>
+              ))}
+            </div>
+          )}
+          <p className="text-xs text-slate-600">
             Tag this upload so others can filter by group on the browse page.
           </p>
         </div>
 
-        {/* Description */}
-        <div>
-          <label className="mb-1.5 block text-sm font-medium text-slate-300" htmlFor="desc">
-            Description <span className="text-slate-600">(optional)</span>
+        {/* ── Description ── */}
+        <div className="space-y-1.5">
+          <label className="block text-sm font-medium text-slate-300" htmlFor="desc">
+            Description{" "}
+            <span className="text-slate-600 font-normal">(optional)</span>
           </label>
           <textarea
             id="desc"
             rows={3}
             value={description}
             onChange={(e) => setDescription(e.target.value)}
-            placeholder="e.g. Production Postgres 16 with TimescaleDB extension"
-            className="w-full rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-sm text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500 transition-colors"
+            placeholder="e.g. Production Postgres 16 with TimescaleDB extension, includes all data volumes"
+            className="w-full rounded-xl border border-white/8 bg-white/4 px-4 py-3 text-sm text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500/50 focus:bg-white/6 transition-all resize-none"
           />
         </div>
 
-        {/* Warning for .backerup */}
+        {/* ── Warning for .backerup ── */}
         {isBackerup && (
-          <div className="rounded-xl border border-amber-500/20 bg-amber-500/5 p-4 text-xs text-amber-300">
-            <strong>Heads up:</strong> .backerup files may contain volume data. Make sure
-            you are not sharing sensitive database contents or secrets.
+          <div className="flex gap-3 rounded-xl border border-amber-500/20 bg-amber-500/5 p-4">
+            <span className="text-amber-400 shrink-0 mt-0.5">
+              <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+              </svg>
+            </span>
+            <p className="text-xs text-amber-300 leading-relaxed">
+              <strong className="font-semibold">Heads up:</strong> .backerup files may contain volume
+              data. Ensure you are not sharing sensitive database contents, secrets, or private keys.
+            </p>
           </div>
         )}
 
+        {/* ── Error ── */}
         {error && (
-          <p className="rounded-lg bg-red-500/10 px-4 py-3 text-sm text-red-400">{error}</p>
+          <div className="flex items-start gap-3 rounded-xl border border-red-500/20 bg-red-500/8 px-4 py-3">
+            <span className="text-red-400 shrink-0 mt-0.5">
+              <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6m0-6 6 6" />
+              </svg>
+            </span>
+            <p className="text-sm text-red-400">{error}</p>
+          </div>
         )}
 
+        {/* ── Progress bar ── */}
+        {uploading && (
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between text-xs text-slate-500">
+              <span>Uploading…</span>
+              <span>{Math.round(progress)}%</span>
+            </div>
+            <div className="h-1.5 w-full rounded-full bg-white/5 overflow-hidden">
+              <div
+                className="h-full rounded-full transition-all duration-300"
+                style={{
+                  width: `${progress}%`,
+                  background: "linear-gradient(90deg, #22d3ee, #818cf8)",
+                }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* ── Submit ── */}
         <button
           type="submit"
           disabled={!file || uploading}
-          className="w-full rounded-xl bg-cyan-500 py-3 text-sm font-bold text-slate-900 transition hover:bg-cyan-400 disabled:cursor-not-allowed disabled:opacity-40"
+          className="w-full rounded-xl py-3.5 text-sm font-bold text-slate-900 transition-all hover:brightness-110 hover:scale-[1.01] active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100"
+          style={{ background: "linear-gradient(135deg, #22d3ee, #06b6d4)" }}
         >
-          {uploading ? "Uploading…" : "Upload & get link"}
+          {uploading ? "Uploading…" : "Upload & get share link"}
         </button>
       </form>
     </div>