loginview

frontend/src/index.jsx

@@ -35,6 +35,7 @@ import { createDocumentsSurface } from './documents/DocumentsTable';
 import { createPreviewSurface } from './preview/PreviewWorkspace';
 import { createDesktopSurface } from './DesktopWorkspace';
 import { AppShellContext, useAppShell } from './appShellContext';
+import LoginView from './login/LoginView';
 
 const ASSET_PRESIGN_TTL_MS = 240 * 1000; // backend issues 5 min tokens; refresh slightly early
 const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
@@ -384,11 +385,6 @@ const createRootNode = () => ({
   hasChildren: false,
 });
 
-const StatusBanner = ({ status }) => {
-  if (!status) return null;
-  return <div className={`status-banner ${status.variant}`}>{status.message}</div>;
-};
-
 const DropOverlay = ({ active, folderName }) => (
   <div className={`drop-overlay${active ? ' active' : ''}`}>
     <div className="drop-overlay__content">
@@ -397,80 +393,6 @@ const DropOverlay = ({ active, folderName }) => (
   </div>
 );
 
-const LoginView = ({
-  onSubmit,
-  status,
-  tenantSelection,
-  onSelectTenant,
-  onCancelSelection,
-  selectingTenantId,
-}) => {
-  const hasTenantSelection = Boolean(tenantSelection?.tenants?.length);
-
-  return (
-    <div className="login-screen">
-      <div className="login-card">
-        <h1>Papercrate</h1>
-        {hasTenantSelection ? (
-          <div className="login-card__selection">
-            <p>Select a tenant to finish signing in.</p>
-            <div className="login-card__tenant-list">
-              {tenantSelection.tenants.map((tenant) => (
-                <button
-                  key={tenant.id}
-                  type="button"
-                  onClick={() => onSelectTenant?.(tenant)}
-                  disabled={Boolean(selectingTenantId)}
-                  className={
-                    selectingTenantId === tenant.id
-                      ? 'login-card__tenant-button is-loading'
-                      : 'login-card__tenant-button'
-                  }
-                >
-                  {tenant.name}
-                </button>
-              ))}
-            </div>
-            <button
-              type="button"
-              className="login-card__back-button"
-              onClick={() => onCancelSelection?.()}
-              disabled={Boolean(selectingTenantId)}
-            >
-              Use a different account
-            </button>
-          </div>
-        ) : (
-          <>
-            <p>Authenticate to manage your documents.</p>
-            <form onSubmit={onSubmit}>
-              <label htmlFor="username">Username</label>
-              <input
-                id="username"
-                name="username"
-                placeholder="admin"
-                autoComplete="username"
-                required
-              />
-              <label htmlFor="password">Password</label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                placeholder="••••••"
-                autoComplete="current-password"
-                required
-              />
-              <button type="submit">Sign in</button>
-            </form>
-          </>
-        )}
-        <StatusBanner status={status} />
-      </div>
-    </div>
-  );
-};
-
 
 
 const DocumentsLayout = ({ sidebarProps, children, sidebarCollapsed }) => (

frontend/src/login/LoginView.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+const StatusBanner = ({ status }) => {
+  if (!status) return null;
+  return <div className={`status-banner ${status.variant}`}>{status.message}</div>;
+};
+
+const LoginView = ({
+  onSubmit,
+  status,
+  tenantSelection,
+  onSelectTenant,
+  onCancelSelection,
+  selectingTenantId,
+}) => {
+  const hasTenantSelection = Boolean(tenantSelection?.tenants?.length);
+
+  return (
+    <div className="login-screen">
+      <div className="login-card">
+        <h1>Papercrate</h1>
+        {hasTenantSelection ? (
+          <div className="login-card__selection">
+            <p>Select a tenant to finish signing in.</p>
+            <div className="login-card__tenant-list">
+              {tenantSelection.tenants.map((tenant) => (
+                <button
+                  key={tenant.id}
+                  type="button"
+                  onClick={() => onSelectTenant?.(tenant)}
+                  disabled={Boolean(selectingTenantId)}
+                  className={
+                    selectingTenantId === tenant.id
+                      ? 'login-card__tenant-button is-loading'
+                      : 'login-card__tenant-button'
+                  }
+                >
+                  {tenant.name}
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              className="login-card__back-button"
+              onClick={() => onCancelSelection?.()}
+              disabled={Boolean(selectingTenantId)}
+            >
+              Use a different account
+            </button>
+          </div>
+        ) : (
+          <>
+            <p>Authenticate to manage your documents.</p>
+            <form onSubmit={onSubmit}>
+              <label htmlFor="username">Username</label>
+              <input
+                id="username"
+                name="username"
+                placeholder="admin"
+                autoComplete="username"
+                required
+              />
+              <label htmlFor="password">Password</label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                placeholder="••••••"
+                autoComplete="current-password"
+                required
+              />
+              <button type="submit">Sign in</button>
+            </form>
+          </>
+        )}
+        <StatusBanner status={status} />
+      </div>
+    </div>
+  );
+};
+
+export default LoginView;
+