Implement authentication system with access control UI

frontend/src/components/AccessManagement.css

@@ -0,0 +1,116 @@
+.access-management {
+  margin-top: 1.5rem;
+}
+
+.access-management__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.access-management__header h3 {
+  margin: 0;
+}
+
+.access-management__form {
+  background: var(--bg-tertiary);
+  padding: 1rem;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+}
+
+.access-management__form .form-row {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-end;
+}
+
+.access-management__form .form-group {
+  flex: 1;
+}
+
+.access-management__form .form-group:last-of-type {
+  flex: 0 0 auto;
+}
+
+.access-management__list {
+  margin-top: 1rem;
+}
+
+.access-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.access-table th,
+.access-table td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.access-table th {
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.access-table td.actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.access-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.access-badge--read {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.access-badge--write {
+  background: var(--color-info-bg);
+  color: var(--color-info);
+}
+
+.access-badge--admin {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.btn-danger {
+  background: var(--color-error);
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #c0392b;
+}
+
+/* Expired permission styling */
+.expired {
+  color: var(--color-error);
+  font-weight: 500;
+}
+
+/* Date input styling in table */
+.access-table input[type="date"] {
+  padding: 0.25rem 0.5rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}

frontend/src/components/AccessManagement.tsx

@@ -0,0 +1,296 @@
+import { useState, useEffect, useCallback } from 'react';
+import { AccessPermission, AccessLevel } from '../types';
+import {
+  listProjectPermissions,
+  grantProjectAccess,
+  updateProjectAccess,
+  revokeProjectAccess,
+} from '../api';
+import './AccessManagement.css';
+
+interface AccessManagementProps {
+  projectName: string;
+}
+
+export function AccessManagement({ projectName }: AccessManagementProps) {
+  const [permissions, setPermissions] = useState<AccessPermission[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  // Form state
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [newUsername, setNewUsername] = useState('');
+  const [newLevel, setNewLevel] = useState<AccessLevel>('read');
+  const [newExpiresAt, setNewExpiresAt] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  // Edit state
+  const [editingUser, setEditingUser] = useState<string | null>(null);
+  const [editLevel, setEditLevel] = useState<AccessLevel>('read');
+  const [editExpiresAt, setEditExpiresAt] = useState('');
+
+  const loadPermissions = useCallback(async () => {
+    try {
+      setLoading(true);
+      const data = await listProjectPermissions(projectName);
+      setPermissions(data);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load permissions');
+    } finally {
+      setLoading(false);
+    }
+  }, [projectName]);
+
+  useEffect(() => {
+    loadPermissions();
+  }, [loadPermissions]);
+
+  const handleGrant = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newUsername.trim()) return;
+
+    try {
+      setSubmitting(true);
+      setError(null);
+      await grantProjectAccess(projectName, {
+        username: newUsername.trim(),
+        level: newLevel,
+        expires_at: newExpiresAt || undefined,
+      });
+      setSuccess(`Access granted to ${newUsername}`);
+      setNewUsername('');
+      setNewLevel('read');
+      setNewExpiresAt('');
+      setShowAddForm(false);
+      await loadPermissions();
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to grant access');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleUpdate = async (username: string) => {
+    try {
+      setSubmitting(true);
+      setError(null);
+      await updateProjectAccess(projectName, username, {
+        level: editLevel,
+        expires_at: editExpiresAt || null,
+      });
+      setSuccess(`Updated access for ${username}`);
+      setEditingUser(null);
+      await loadPermissions();
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update access');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleRevoke = async (username: string) => {
+    if (!confirm(`Revoke access for ${username}?`)) return;
+
+    try {
+      setSubmitting(true);
+      setError(null);
+      await revokeProjectAccess(projectName, username);
+      setSuccess(`Access revoked for ${username}`);
+      await loadPermissions();
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to revoke access');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const startEdit = (permission: AccessPermission) => {
+    setEditingUser(permission.user_id);
+    setEditLevel(permission.level as AccessLevel);
+    // Convert ISO date to local date format for date input
+    setEditExpiresAt(permission.expires_at ? permission.expires_at.split('T')[0] : '');
+  };
+
+  const cancelEdit = () => {
+    setEditingUser(null);
+    setEditExpiresAt('');
+  };
+
+  const formatExpiration = (expiresAt: string | null) => {
+    if (!expiresAt) return 'Never';
+    const date = new Date(expiresAt);
+    const now = new Date();
+    const isExpired = date < now;
+    return (
+      <span className={isExpired ? 'expired' : ''}>
+        {date.toLocaleDateString()}
+        {isExpired && ' (Expired)'}
+      </span>
+    );
+  };
+
+  if (loading) {
+    return <div className="access-management loading">Loading permissions...</div>;
+  }
+
+  return (
+    <div className="access-management card">
+      <div className="access-management__header">
+        <h3>Access Management</h3>
+        <button
+          className="btn btn-primary btn-sm"
+          onClick={() => setShowAddForm(!showAddForm)}
+        >
+          {showAddForm ? 'Cancel' : '+ Add User'}
+        </button>
+      </div>
+
+      {error && <div className="error-message">{error}</div>}
+      {success && <div className="success-message">{success}</div>}
+
+      {showAddForm && (
+        <form className="access-management__form" onSubmit={handleGrant}>
+          <div className="form-row">
+            <div className="form-group">
+              <label htmlFor="username">Username</label>
+              <input
+                id="username"
+                type="text"
+                value={newUsername}
+                onChange={(e) => setNewUsername(e.target.value)}
+                placeholder="Enter username"
+                required
+                disabled={submitting}
+              />
+            </div>
+            <div className="form-group">
+              <label htmlFor="level">Access Level</label>
+              <select
+                id="level"
+                value={newLevel}
+                onChange={(e) => setNewLevel(e.target.value as AccessLevel)}
+                disabled={submitting}
+              >
+                <option value="read">Read</option>
+                <option value="write">Write</option>
+                <option value="admin">Admin</option>
+              </select>
+            </div>
+            <div className="form-group">
+              <label htmlFor="expires_at">Expires (optional)</label>
+              <input
+                id="expires_at"
+                type="date"
+                value={newExpiresAt}
+                onChange={(e) => setNewExpiresAt(e.target.value)}
+                disabled={submitting}
+                min={new Date().toISOString().split('T')[0]}
+              />
+            </div>
+            <button type="submit" className="btn btn-primary" disabled={submitting}>
+              {submitting ? 'Granting...' : 'Grant Access'}
+            </button>
+          </div>
+        </form>
+      )}
+
+      <div className="access-management__list">
+        {permissions.length === 0 ? (
+          <p className="text-muted">No explicit permissions set. Only the project owner has access.</p>
+        ) : (
+          <table className="access-table">
+            <thead>
+              <tr>
+                <th>User</th>
+                <th>Access Level</th>
+                <th>Granted</th>
+                <th>Expires</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {permissions.map((p) => (
+                <tr key={p.id}>
+                  <td>{p.user_id}</td>
+                  <td>
+                    {editingUser === p.user_id ? (
+                      <select
+                        value={editLevel}
+                        onChange={(e) => setEditLevel(e.target.value as AccessLevel)}
+                        disabled={submitting}
+                      >
+                        <option value="read">Read</option>
+                        <option value="write">Write</option>
+                        <option value="admin">Admin</option>
+                      </select>
+                    ) : (
+                      <span className={`access-badge access-badge--${p.level}`}>
+                        {p.level}
+                      </span>
+                    )}
+                  </td>
+                  <td>{new Date(p.created_at).toLocaleDateString()}</td>
+                  <td>
+                    {editingUser === p.user_id ? (
+                      <input
+                        type="date"
+                        value={editExpiresAt}
+                        onChange={(e) => setEditExpiresAt(e.target.value)}
+                        disabled={submitting}
+                        min={new Date().toISOString().split('T')[0]}
+                      />
+                    ) : (
+                      formatExpiration(p.expires_at)
+                    )}
+                  </td>
+                  <td className="actions">
+                    {editingUser === p.user_id ? (
+                      <>
+                        <button
+                          className="btn btn-sm btn-primary"
+                          onClick={() => handleUpdate(p.user_id)}
+                          disabled={submitting}
+                        >
+                          Save
+                        </button>
+                        <button
+                          className="btn btn-sm"
+                          onClick={cancelEdit}
+                          disabled={submitting}
+                        >
+                          Cancel
+                        </button>
+                      </>
+                    ) : (
+                      <>
+                        <button
+                          className="btn btn-sm"
+                          onClick={() => startEdit(p)}
+                          disabled={submitting}
+                        >
+                          Edit
+                        </button>
+                        <button
+                          className="btn btn-sm btn-danger"
+                          onClick={() => handleRevoke(p.user_id)}
+                          disabled={submitting}
+                        >
+                          Revoke
+                        </button>
+                      </>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/DragDropUpload.css

@@ -42,6 +42,17 @@
   border-style: solid;
 }
 
+.drop-zone--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background: var(--bg-disabled, #f5f5f5);
+}
+
+.drop-zone--disabled:hover {
+  border-color: var(--border-color, #ddd);
+  background: var(--bg-disabled, #f5f5f5);
+}
+
 .drop-zone__input {
   display: none;
 }

frontend/src/components/DragDropUpload.tsx

@@ -89,6 +89,8 @@ export interface DragDropUploadProps {
   maxRetries?: number;
   tag?: string;
   className?: string;
+  disabled?: boolean;
+  disabledReason?: string;
 }
 
 // Utility functions
@@ -230,6 +232,8 @@ export function DragDropUpload({
   maxRetries = 3,
   tag,
   className = '',
+  disabled = false,
+  disabledReason,
 }: DragDropUploadProps) {
   const [isDragOver, setIsDragOver] = useState(false);
   const [uploadQueue, setUploadQueue] = useState<UploadItem[]>([]);
@@ -649,20 +653,22 @@ export function DragDropUpload({
   const handleDragEnter = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
+    if (disabled) return;
     dragCounterRef.current++;
     if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
       setIsDragOver(true);
     }
-  }, []);
+  }, [disabled]);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
+    if (disabled) return;
     dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
       setIsDragOver(false);
     }
-  }, []);
+  }, [disabled]);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
@@ -675,18 +681,22 @@ export function DragDropUpload({
     setIsDragOver(false);
     dragCounterRef.current = 0;
 
+    if (disabled) return;
+
     const files = e.dataTransfer.files;
     if (files && files.length > 0) {
       addFiles(files);
     }
-  }, [addFiles]);
+  }, [addFiles, disabled]);
 
   // Click to browse
   const handleClick = useCallback(() => {
+    if (disabled) return;
     fileInputRef.current?.click();
-  }, []);
+  }, [disabled]);
 
   const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
     const files = e.target.files;
     if (files && files.length > 0) {
       addFiles(files);
@@ -695,7 +705,7 @@ export function DragDropUpload({
     if (fileInputRef.current) {
       fileInputRef.current.value = '';
     }
-  }, [addFiles]);
+  }, [addFiles, disabled]);
 
   // Remove item from queue
   const removeItem = useCallback((id: string) => {
@@ -738,15 +748,17 @@ export function DragDropUpload({
       )}
 
       <div
-        className={`drop-zone ${isDragOver ? 'drop-zone--active' : ''}`}
+        className={`drop-zone ${isDragOver ? 'drop-zone--active' : ''} ${disabled ? 'drop-zone--disabled' : ''}`}
         onDragEnter={handleDragEnter}
         onDragLeave={handleDragLeave}
         onDragOver={handleDragOver}
         onDrop={handleDrop}
         onClick={handleClick}
         role="button"
-        tabIndex={0}
+        tabIndex={disabled ? -1 : 0}
         onKeyDown={(e) => e.key === 'Enter' && handleClick()}
+        aria-disabled={disabled}
+        title={disabled ? disabledReason : undefined}
       >
         <input
           ref={fileInputRef}
@@ -755,16 +767,23 @@ export function DragDropUpload({
           onChange={handleFileChange}
           className="drop-zone__input"
           accept={!allowAllTypes && allowedTypes ? allowedTypes.join(',') : undefined}
+          disabled={disabled}
         />
         <div className="drop-zone__content">
           <UploadIcon />
           <p className="drop-zone__text">
-            <strong>Drag files here</strong> or click to browse
-          </p>
-          <p className="drop-zone__hint">
-            {maxFileSize && `Max file size: ${formatBytes(maxFileSize)}`}
-            {!allowAllTypes && allowedTypes && ` • Accepted: ${allowedTypes.join(', ')}`}
+            {disabled ? (
+              <span>{disabledReason || 'Upload disabled'}</span>
+            ) : (
+              <><strong>Drag files here</strong> or click to browse</>
+            )}
           </p>
+          {!disabled && (
+            <p className="drop-zone__hint">
+              {maxFileSize && `Max file size: ${formatBytes(maxFileSize)}`}
+              {!allowAllTypes && allowedTypes && ` • Accepted: ${allowedTypes.join(', ')}`}
+            </p>
+          )}
         </div>
       </div>
 

frontend/src/components/Layout.css

@@ -98,6 +98,170 @@
   opacity: 0.7;
 }
 
+/* Login link */
+.nav-login {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  margin-left: 8px;
+  border: 1px solid var(--border-primary);
+}
+
+.nav-login:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+  border-color: var(--border-secondary);
+}
+
+/* User Menu */
+.user-menu {
+  position: relative;
+  margin-left: 8px;
+}
+
+.user-menu-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: transparent;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.user-menu-trigger:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-secondary);
+}
+
+.user-avatar {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-gradient);
+  border-radius: var(--radius-sm);
+  color: white;
+  font-weight: 600;
+  font-size: 0.8125rem;
+}
+
+.user-name {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-menu-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+  min-width: 200px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 200;
+  overflow: hidden;
+}
+
+.user-menu-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+}
+
+.user-menu-username {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.user-menu-badge {
+  padding: 2px 8px;
+  background: var(--accent-gradient);
+  border-radius: 100px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: white;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.user-menu-divider {
+  height: 1px;
+  background: var(--border-primary);
+}
+
+.user-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 16px;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-align: left;
+  text-decoration: none;
+}
+
+.user-menu-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.user-menu-item svg {
+  opacity: 0.7;
+}
+
+.user-menu-item:hover svg {
+  opacity: 1;
+}
+
+/* User menu loading state */
+.user-menu-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-left: 8px;
+}
+
+.user-menu-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-secondary);
+  border-top-color: var(--accent-primary);
+  border-radius: 50%;
+  animation: user-menu-spin 0.6s linear infinite;
+}
+
+@keyframes user-menu-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* Main content */
 .main {
   flex: 1;

frontend/src/components/Layout.tsx

@@ -1,5 +1,6 @@
-import { ReactNode } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { ReactNode, useState, useRef, useEffect } from 'react';
+import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
 import { GlobalSearch } from './GlobalSearch';
 import './Layout.css';
 
@@ -9,6 +10,31 @@ interface LayoutProps {
 
 function Layout({ children }: LayoutProps) {
   const location = useLocation();
+  const navigate = useNavigate();
+  const { user, loading, logout } = useAuth();
+  const [showUserMenu, setShowUserMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setShowUserMenu(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  async function handleLogout() {
+    try {
+      await logout();
+      setShowUserMenu(false);
+      navigate('/');
+    } catch {
+      // Error handled in context
+    }
+  }
 
   return (
     <div className="layout">
@@ -60,6 +86,97 @@ function Layout({ children }: LayoutProps) {
               </svg>
               Docs
             </a>
+            
+            {/* User Menu */}
+            {loading ? (
+              <div className="user-menu-loading">
+                <div className="user-menu-spinner"></div>
+              </div>
+            ) : user ? (
+              <div className="user-menu" ref={menuRef}>
+                <button 
+                  className="user-menu-trigger"
+                  onClick={() => setShowUserMenu(!showUserMenu)}
+                  aria-expanded={showUserMenu}
+                  aria-haspopup="true"
+                >
+                  <div className="user-avatar">
+                    {user.username.charAt(0).toUpperCase()}
+                  </div>
+                  <span className="user-name">{user.display_name || user.username}</span>
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <polyline points="6 9 12 15 18 9"/>
+                  </svg>
+                </button>
+                
+                {showUserMenu && (
+                  <div className="user-menu-dropdown">
+                    <div className="user-menu-header">
+                      <span className="user-menu-username">{user.username}</span>
+                      {user.is_admin && (
+                        <span className="user-menu-badge">Admin</span>
+                      )}
+                    </div>
+                    <div className="user-menu-divider"></div>
+                    <NavLink
+                      to="/settings/api-keys"
+                      className="user-menu-item"
+                      onClick={() => setShowUserMenu(false)}
+                    >
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+                      </svg>
+                      API Keys
+                    </NavLink>
+                    {user.is_admin && (
+                      <>
+                        <NavLink
+                          to="/admin/users"
+                          className="user-menu-item"
+                          onClick={() => setShowUserMenu(false)}
+                        >
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                            <circle cx="9" cy="7" r="4"/>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                          </svg>
+                          User Management
+                        </NavLink>
+                        <NavLink
+                          to="/admin/oidc"
+                          className="user-menu-item"
+                          onClick={() => setShowUserMenu(false)}
+                        >
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                          </svg>
+                          SSO Configuration
+                        </NavLink>
+                      </>
+                    )}
+                    <div className="user-menu-divider"></div>
+                    <button className="user-menu-item" onClick={handleLogout}>
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                        <polyline points="16 17 21 12 16 7"/>
+                        <line x1="21" y1="12" x2="9" y2="12"/>
+                      </svg>
+                      Sign out
+                    </button>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <Link to="/login" className="nav-login">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
+                  <polyline points="10 17 15 12 10 7"/>
+                  <line x1="15" y1="12" x2="3" y2="12"/>
+                </svg>
+                Login
+              </Link>
+            )}
           </nav>
         </div>
       </header>