@accounter/scraper-app 0.0.1

package/src/ui/screens/vault-setup.tsx

@@ -0,0 +1,120 @@
+import { useState, type ReactElement } from 'react';
+import { useVault } from '../contexts/vault-context.js';
+
+type Step = 1 | 2 | 3;
+
+export function VaultSetup(): ReactElement {
+  const vault = useVault();
+  const [step, setStep] = useState<Step>(1);
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [serverUrl, setServerUrl] = useState('');
+  const [apiKey, setApiKey] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  function handleStep1(e: React.FormEvent) {
+    e.preventDefault();
+    if (password.length < 8) {
+      setLocalError('Password must be at least 8 characters.');
+      return;
+    }
+    if (password !== confirm) {
+      setLocalError('Passwords do not match.');
+      return;
+    }
+    setLocalError(null);
+    setStep(2);
+  }
+
+  function handleStep2(e: React.FormEvent) {
+    e.preventDefault();
+    setLocalError(null);
+    setStep(3);
+  }
+
+  async function handleStep3(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    await vault.create(password, serverUrl, apiKey);
+    setLoading(false);
+  }
+
+  return (
+    <div>
+      <h1>Setup Vault</h1>
+
+      {step === 1 && (
+        <form onSubmit={handleStep1}>
+          <h2>Step 1: Choose master password</h2>
+          <div>
+            <label htmlFor="setup-password">Master password</label>
+            <input
+              id="setup-password"
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              autoFocus
+            />
+          </div>
+          <div>
+            <label htmlFor="setup-confirm">Confirm password</label>
+            <input
+              id="setup-confirm"
+              type="password"
+              value={confirm}
+              onChange={e => setConfirm(e.target.value)}
+            />
+          </div>
+          {localError && <p role="alert">{localError}</p>}
+          <button type="submit">Next</button>
+        </form>
+      )}
+
+      {step === 2 && (
+        <form onSubmit={handleStep2}>
+          <h2>Step 2: Server connection</h2>
+          <div>
+            <label htmlFor="setup-server-url">Server URL</label>
+            <input
+              id="setup-server-url"
+              type="url"
+              value={serverUrl}
+              onChange={e => setServerUrl(e.target.value)}
+              autoFocus
+            />
+          </div>
+          <div>
+            <label htmlFor="setup-api-key">API key</label>
+            <input
+              id="setup-api-key"
+              type="text"
+              value={apiKey}
+              onChange={e => setApiKey(e.target.value)}
+            />
+          </div>
+          {localError && <p role="alert">{localError}</p>}
+          <button type="button" onClick={() => setStep(1)}>
+            Back
+          </button>
+          <button type="submit">Next</button>
+        </form>
+      )}
+
+      {step === 3 && (
+        <form onSubmit={handleStep3}>
+          <h2>Step 3: Confirm</h2>
+          <p>Server URL: {serverUrl || '(none)'}</p>
+          <p>API key: {apiKey ? '••••••••' : '(none)'}</p>
+          {vault.error && <p role="alert">{vault.error}</p>}
+          <button type="button" onClick={() => setStep(2)}>
+            Back
+          </button>
+          <button type="submit" disabled={loading}>
+            {loading ? 'Creating…' : 'Create Vault'}
+          </button>
+        </form>
+      )}
+    </div>
+  );
+}

package/src/ui/screens/vault-unlock.tsx

@@ -0,0 +1,38 @@
+import { useState, type ReactElement } from 'react';
+import { useVault } from '../contexts/vault-context.js';
+
+export function VaultUnlock(): ReactElement {
+  const vault = useVault();
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    await vault.unlock(password);
+    setLoading(false);
+  }
+
+  return (
+    <div>
+      <h1>Unlock Vault</h1>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="password">Master password</label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            disabled={loading}
+            autoFocus
+          />
+        </div>
+        {vault.error && <p role="alert">{vault.error}</p>}
+        <button type="submit" disabled={loading}>
+          {loading ? 'Unlocking…' : 'Unlock'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "react-jsx",
+    "rootDir": "src",
+    "outDir": "dist",
+    "paths": {
+      "@accounter/modern-poalim-scraper": ["../modern-poalim-scraper/src/index"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["tsup.config.ts", "vite.config.ts"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/server/index.ts'],
+  outDir: 'dist/server',
+  format: 'esm',
+  target: 'node22',
+  sourcemap: true,
+  clean: true,
+});

package/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const scraperServerPort = Number(process.env.PORT ?? 4001);
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: `http://localhost:${scraperServerPort}`,
+        changeOrigin: true,
+      },
+      '/ws': {
+        target: `ws://localhost:${scraperServerPort}`,
+        ws: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist/ui',
+    emptyOutDir: true,
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    setupFiles: ['./src/test-setup.ts'],
+  },
+});