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/files/[token]/CopyLinkButton.tsx

@@ -1,18 +1,55 @@
 "use client";
 
+import { useState } from "react";
+
 export default function CopyLinkButton({ token }: { token: string }) {
-  function copy() {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
     const url = `${window.location.origin}/files/${token}`;
-    navigator.clipboard.writeText(url).then(() => {
-      alert("Link copied to clipboard!");
-    });
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2500);
+    } catch {
+      // Fallback for browsers that deny clipboard access
+      const el = document.createElement("textarea");
+      el.value = url;
+      el.style.position = "fixed";
+      el.style.opacity = "0";
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2500);
+    }
   }
+
   return (
     <button
       onClick={copy}
-      className="flex w-full items-center justify-center gap-2 rounded-xl border border-slate-700 py-3 text-sm font-semibold text-slate-300 hover:bg-slate-800 hover:text-white transition-colors"
+      className={`flex w-full items-center justify-center gap-2.5 rounded-xl border py-3 text-sm font-semibold transition-all ${
+        copied
+          ? "border-emerald-500/40 bg-emerald-500/8 text-emerald-400"
+          : "border-white/8 bg-white/3 text-slate-300 hover:bg-white/6 hover:border-white/16 hover:text-white"
+      }`}
     >
-      Copy share link
+      {copied ? (
+        <>
+          <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+          </svg>
+          Link copied!
+        </>
+      ) : (
+        <>
+          <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="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+          </svg>
+          Copy share link
+        </>
+      )}
     </button>
   );
 }

frontend/app/files/[token]/page.tsx

@@ -9,6 +9,15 @@ function formatBytes(n: number) {
   return `${(n / 1024 / 1024).toFixed(2)} MB`;
 }
 
+function MetaRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-start justify-between gap-6 py-3 border-b border-white/5 last:border-0">
+      <span className="text-sm text-slate-500 shrink-0">{label}</span>
+      <span className="text-sm text-slate-200 text-right font-mono">{value}</span>
+    </div>
+  );
+}
+
 export default async function FileDetailPage({
   params,
 }: {
@@ -20,98 +29,135 @@ export default async function FileDetailPage({
 
   const isBackerup = record.type === "backerup";
   const downloadUrl = `/api/files/${token}/download`;
+  const title = record.displayName ?? record.containerName ?? record.originalName;
 
   return (
     <div className="mx-auto max-w-2xl px-6 py-16">
-      <Link href="/browse" className="text-xs text-slate-500 hover:text-slate-300 transition-colors">
-        ← Back to browse
+      {/* Back */}
+      <Link
+        href="/browse"
+        className="inline-flex items-center gap-1.5 text-xs text-slate-500 hover:text-slate-300 transition-colors mb-8"
+      >
+        <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+          <path d="M19 12H5M12 5l-7 7 7 7" />
+        </svg>
+        Back to browse
       </Link>
 
-      <div className="mt-6">
-        <div className="flex items-center gap-3 flex-wrap">
+      {/* Header card */}
+      <div className="rounded-2xl border border-white/6 glass p-7 mb-6">
+        {/* Badges */}
+        <div className="flex flex-wrap items-center gap-2 mb-4">
           {isBackerup ? (
-            <span className="rounded-full bg-cyan-500/15 px-3 py-1 text-xs font-semibold text-cyan-400">
-              .backerup
+            <span className="rounded-full bg-cyan-500/12 border border-cyan-500/25 px-3 py-1 text-xs font-semibold text-cyan-400">
+              .backerup archive
             </span>
           ) : (
-            <span className="rounded-full bg-violet-500/15 px-3 py-1 text-xs font-semibold text-violet-400">
+            <span className="rounded-full bg-violet-500/12 border border-violet-500/25 px-3 py-1 text-xs font-semibold text-violet-400">
               .json config
             </span>
           )}
-          <span className="font-mono text-sm text-slate-500">{record.originalName}</span>
+          {record.group && (
+            <span className="rounded-full bg-white/5 border border-white/10 px-3 py-1 text-xs font-medium text-slate-400">
+              {record.group}
+            </span>
+          )}
+          <span className="font-mono text-xs text-slate-600 ml-auto">{record.originalName}</span>
         </div>
 
-        {record.group && (
-          <span className="mt-3 inline-block rounded-full bg-slate-700/60 px-3 py-0.5 text-xs font-medium text-slate-400">
-            {record.group}
-          </span>
-        )}
-        <h1 className="mt-4 text-3xl font-bold text-white">
-          {record.displayName ?? record.containerName ?? record.originalName}
+        {/* Title */}
+        <h1 className="text-3xl font-extrabold tracking-tight text-white leading-snug">
+          {title}
         </h1>
+
+        {/* Image */}
         {record.image && (
-          <p className="mt-1 text-slate-400">{record.image}</p>
+          <p className="mt-2 font-mono text-sm text-slate-400">{record.image}</p>
         )}
+
+        {/* Description */}
         {record.description && (
-          <p className="mt-4 text-sm leading-relaxed text-slate-300">{record.description}</p>
+          <p className="mt-4 text-slate-400 leading-relaxed border-t border-white/5 pt-4">
+            {record.description}
+          </p>
         )}
       </div>
 
-      {/* Metadata grid */}
-      <div className="mt-8 rounded-2xl border border-slate-800 bg-slate-900/60 p-6 space-y-3">
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-slate-500">File size</span>
-          <span className="text-sm font-mono text-slate-300">{formatBytes(record.size)}</span>
-        </div>
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-slate-500">Uploaded</span>
-          <span className="text-sm text-slate-300">
-            {new Date(record.uploadedAt).toLocaleString()}
-          </span>
-        </div>
-        {record.group && (
-          <div className="flex items-center justify-between">
-            <span className="text-xs text-slate-500">Group</span>
-            <span className="text-sm font-mono text-slate-300">{record.group}</span>
-          </div>
-        )}
-        {record.containerName && (
-          <div className="flex items-center justify-between">
-            <span className="text-xs text-slate-500">Container name</span>
-            <span className="text-sm font-mono text-slate-300">{record.containerName}</span>
-          </div>
-        )}
-        {record.image && (
-          <div className="flex items-center justify-between">
-            <span className="text-xs text-slate-500">Image</span>
-            <span className="text-sm font-mono text-slate-300">{record.image}</span>
-          </div>
-        )}
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-slate-500">Share token</span>
-          <span className="text-sm font-mono text-slate-400">{token}</span>
-        </div>
+      {/* Metadata */}
+      <div className="rounded-2xl border border-white/6 glass px-6 py-2 mb-6">
+        <MetaRow label="File size" value={formatBytes(record.size)} />
+        <MetaRow
+          label="Uploaded"
+          value={new Date(record.uploadedAt).toLocaleString("en-US", {
+            month: "long",
+            day: "numeric",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+          })}
+        />
+        {record.group && <MetaRow label="Group" value={record.group} />}
+        {record.containerName && <MetaRow label="Container name" value={record.containerName} />}
+        {record.image && <MetaRow label="Image" value={record.image} />}
+        <MetaRow label="Share token" value={token} />
       </div>
 
+      {/* Docker restore snippet for configs */}
+      {!isBackerup && record.image && (
+        <div className="rounded-2xl border border-white/6 glass overflow-hidden mb-6">
+          <div className="flex items-center gap-2 border-b border-white/6 px-5 py-3 bg-white/2">
+            <span className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
+            <span className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
+            <span className="h-2.5 w-2.5 rounded-full bg-emerald-500/70" />
+            <span className="ml-2 text-xs font-mono text-slate-500">quick restore</span>
+          </div>
+          <pre className="overflow-x-auto p-5 text-xs font-mono leading-6 text-slate-300">
+            <span className="text-slate-600 select-none"># Pull the image used by this config</span>{"\n"}
+            <span className="text-cyan-500 select-none">$ </span>
+            <span>docker pull {record.image}</span>{"\n\n"}
+            <span className="text-slate-600 select-none"># Download & import this config into Backerup to restore</span>{"\n"}
+            <span className="text-cyan-500 select-none">$ </span>
+            <span>curl -O {`{{BACKERUP_URL}}`}/api/files/{token}/download</span>
+          </pre>
+        </div>
+      )}
+
       {/* Actions */}
-      <div className="mt-6 space-y-3">
+      <div className="space-y-3">
         <a
           href={downloadUrl}
-          className="flex w-full items-center justify-center gap-2 rounded-xl bg-cyan-500 py-3 text-sm font-bold text-slate-900 hover:bg-cyan-400 transition-colors"
+          className="flex w-full items-center justify-center gap-2.5 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]"
+          style={{ background: "linear-gradient(135deg, #22d3ee, #06b6d4)" }}
           download={record.originalName}
         >
+          <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.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.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+          </svg>
           Download {record.originalName}
         </a>
 
-        {/* Copy link */}
         <CopyLinkButton token={token} />
+
+        <Link
+          href="/browse"
+          className="flex w-full items-center justify-center gap-2 rounded-xl border border-white/8 bg-white/3 py-3 text-sm font-medium text-slate-400 hover:text-white hover:bg-white/6 transition-all"
+        >
+          Browse more configs
+        </Link>
       </div>
 
+      {/* Warning for .backerup */}
       {isBackerup && (
-        <div className="mt-8 rounded-xl border border-amber-500/20 bg-amber-500/5 p-4 text-xs text-amber-300">
-          <strong>Note:</strong> This is a full .backerup archive. It may contain volume data
-          in addition to the container config. Import it into Backerup to restore
-          or clone the container.
+        <div className="mt-6 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">Note:</strong> This is a full .backerup archive. It may contain volume data
+            in addition to the container config. Import it into Backerup to restore or clone the container.
+          </p>
         </div>
       )}
     </div>