securepool 1.0.0

package/apps/demo-frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,158 @@
+import { useState, useEffect, type FormEvent } from "react";
+import { useAuth } from "@securepool/react-sdk";
+import { useNavigate, Link } from "react-router-dom";
+
+function getInitials(email: string): string {
+  return email.split("@")[0].slice(0, 2).toUpperCase();
+}
+
+function getAvatarUrl(email: string): string {
+  const initials = getInitials(email);
+  return `https://ui-avatars.com/api/?name=${encodeURIComponent(initials)}&size=80&background=3b82f6&color=fff&bold=true&format=svg`;
+}
+
+export default function LoginPage() {
+  const { login, accounts, switchAccount, isLoading, error, clearError } = useAuth();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+
+  useEffect(() => { clearError(); }, [clearError]);
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      await login(email, password);
+      navigate("/dashboard");
+    } catch {
+      // error is set in context
+    }
+  };
+
+  const handleSwitchTo = (accountId: string) => {
+    switchAccount(accountId);
+    navigate("/dashboard");
+    window.location.reload();
+  };
+
+  return (
+    <div className="auth-layout">
+      <div className="auth-card">
+        <h1>Welcome back</h1>
+        <p className="subtitle">Sign in to your SecurePool account</p>
+
+        {/* Show existing logged-in accounts */}
+        {accounts.length > 0 && (
+          <>
+            <div style={{ marginBottom: 16 }}>
+              <div style={{ fontSize: 12, color: "#64748b", marginBottom: 8, textTransform: "uppercase", letterSpacing: 0.5 }}>
+                Switch to an existing account
+              </div>
+              {accounts.map((account) => (
+                <div
+                  key={account.id}
+                  onClick={() => handleSwitchTo(account.id)}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                    padding: "10px 12px",
+                    background: "rgba(59,130,246,0.06)",
+                    border: "1px solid #334155",
+                    borderRadius: 10,
+                    cursor: "pointer",
+                    marginBottom: 6,
+                    transition: "all 0.15s",
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = "rgba(59,130,246,0.15)";
+                    e.currentTarget.style.borderColor = "#3b82f6";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = "rgba(59,130,246,0.06)";
+                    e.currentTarget.style.borderColor = "#334155";
+                  }}
+                >
+                  <img
+                    src={getAvatarUrl(account.email)}
+                    alt=""
+                    style={{ width: 36, height: 36, borderRadius: "50%", flexShrink: 0 }}
+                  />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{
+                      fontSize: 14,
+                      color: "#e2e8f0",
+                      fontWeight: 500,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}>
+                      {account.email.trim().toLowerCase()}
+                    </div>
+                    <div style={{ fontSize: 11, color: "#64748b" }}>Click to open dashboard</div>
+                  </div>
+                  <span style={{
+                    fontSize: 18,
+                    color: "#3b82f6",
+                  }}>
+                    →
+                  </span>
+                </div>
+              ))}
+            </div>
+            <div className="divider"><span>or sign in with another account</span></div>
+          </>
+        )}
+
+        {error && <div className="error-msg">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="email">Email</label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <div style={{ textAlign: "right", marginBottom: 8 }}>
+            <Link to="/forgot-password" style={{ fontSize: 13, color: "#60a5fa" }}>
+              Forgot password?
+            </Link>
+          </div>
+          <button type="submit" className="btn btn-primary" disabled={isLoading}>
+            {isLoading ? "Signing in..." : "Sign In"}
+          </button>
+        </form>
+
+        <div className="divider"><span>or</span></div>
+
+        <Link to="/otp-login">
+          <button type="button" className="btn btn-outline">
+            Sign in with OTP
+          </button>
+        </Link>
+
+        <div className="auth-links">
+          Don't have an account? <Link to="/signup">Sign up</Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/demo-frontend/src/pages/OtpLoginPage.tsx

@@ -0,0 +1,114 @@
+import { useState, useEffect, type FormEvent } from "react";
+import { useAuth } from "@securepool/react-sdk";
+import { useNavigate, Link } from "react-router-dom";
+
+export default function OtpLoginPage() {
+  const { requestOtp, verifyOtp, isLoading, error, clearError } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => { clearError(); }, [clearError]);
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [otpSent, setOtpSent] = useState(false);
+
+  const handleRequestOtp = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      await requestOtp(email);
+      setOtpSent(true);
+    } catch {
+      // error set in context
+    }
+  };
+
+  const handleVerifyOtp = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      await verifyOtp(email, code);
+      navigate("/dashboard");
+    } catch {
+      // error set in context
+    }
+  };
+
+  if (!otpSent) {
+    return (
+      <div className="auth-layout">
+        <div className="auth-card">
+          <h1>OTP Login</h1>
+          <p className="subtitle">We'll send a 6-digit code to your email</p>
+
+          {error && <div className="error-msg">{error}</div>}
+
+          <form onSubmit={handleRequestOtp}>
+            <div className="form-group">
+              <label htmlFor="email">Email</label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@example.com"
+                required
+                disabled={isLoading}
+              />
+            </div>
+            <button type="submit" className="btn btn-primary" disabled={isLoading}>
+              {isLoading ? "Sending..." : "Send OTP"}
+            </button>
+          </form>
+
+          <div className="auth-links">
+            <Link to="/login">Back to password login</Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="auth-layout">
+      <div className="auth-card">
+        <h1>Enter OTP</h1>
+        <p className="subtitle">
+          Code sent to <strong>{email}</strong>. Check your inbox.
+        </p>
+
+        {error && <div className="error-msg">{error}</div>}
+
+        <form onSubmit={handleVerifyOtp}>
+          <div className="form-group">
+            <label htmlFor="otp">6-digit Code</label>
+            <input
+              id="otp"
+              type="text"
+              className="otp-input"
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+              placeholder="000000"
+              maxLength={6}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <button type="submit" className="btn btn-primary" disabled={isLoading || code.length !== 6}>
+            {isLoading ? "Verifying..." : "Verify & Sign In"}
+          </button>
+        </form>
+
+        <button
+          type="button"
+          className="btn btn-outline"
+          style={{ marginTop: 12 }}
+          onClick={() => {
+            setOtpSent(false);
+            setCode("");
+          }}
+          disabled={isLoading}
+        >
+          Use different email
+        </button>
+      </div>
+    </div>
+  );
+}

package/apps/demo-frontend/src/pages/SignupPage.tsx

@@ -0,0 +1,95 @@
+import { useState, useEffect, type FormEvent } from "react";
+import { useAuth } from "@securepool/react-sdk";
+import { useNavigate, Link } from "react-router-dom";
+
+export default function SignupPage() {
+  const { register, isLoading, error, clearError } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => { clearError(); }, [clearError]);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setLocalError(null);
+
+    if (password !== confirmPassword) {
+      setLocalError("Passwords do not match");
+      return;
+    }
+    if (password.length < 8) {
+      setLocalError("Password must be at least 8 characters");
+      return;
+    }
+
+    try {
+      await register(email, password);
+      // Redirect to verify email page with the email
+      navigate("/verify-email", { state: { email } });
+    } catch {
+      // error in context
+    }
+  };
+
+  const displayError = localError || error;
+
+  return (
+    <div className="auth-layout">
+      <div className="auth-card">
+        <h1>Create account</h1>
+        <p className="subtitle">Get started with SecurePool</p>
+
+        {displayError && <div className="error-msg">{displayError}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="email">Email</label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Min 8 characters"
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="confirm">Confirm Password</label>
+            <input
+              id="confirm"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Re-enter your password"
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <button type="submit" className="btn btn-primary" disabled={isLoading}>
+            {isLoading ? "Creating account..." : "Sign Up"}
+          </button>
+        </form>
+
+        <div className="auth-links">
+          Already have an account? <Link to="/login">Sign in</Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/demo-frontend/src/pages/VerifyEmailPage.tsx

@@ -0,0 +1,84 @@
+import { useState, useEffect, type FormEvent } from "react";
+import { useAuth } from "@securepool/react-sdk";
+import { useNavigate, useLocation, Link } from "react-router-dom";
+
+export default function VerifyEmailPage() {
+  const { verifyEmail, requestOtp, isLoading, error, clearError } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => { clearError(); }, [clearError]);
+  const location = useLocation();
+  const passedEmail = (location.state as any)?.email || "";
+
+  const [email] = useState(passedEmail);
+  const [code, setCode] = useState("");
+  const [resent, setResent] = useState(false);
+
+  const handleVerify = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      await verifyEmail(email, code);
+      navigate("/dashboard");
+    } catch {
+      // error in context
+    }
+  };
+
+  const handleResend = async () => {
+    try {
+      await requestOtp(email);
+      setResent(true);
+      setTimeout(() => setResent(false), 3000);
+    } catch {
+      // error in context
+    }
+  };
+
+  return (
+    <div className="auth-layout">
+      <div className="auth-card">
+        <h1>Verify your email</h1>
+        <p className="subtitle">
+          We sent a 6-digit code to <strong>{email}</strong>
+        </p>
+
+        {resent && <div className="success-msg">OTP resent to your email</div>}
+        {error && <div className="error-msg">{error}</div>}
+
+        <form onSubmit={handleVerify}>
+          <div className="form-group">
+            <label htmlFor="otp">Verification Code</label>
+            <input
+              id="otp"
+              type="text"
+              className="otp-input"
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+              placeholder="000000"
+              maxLength={6}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <button type="submit" className="btn btn-primary" disabled={isLoading || code.length !== 6}>
+            {isLoading ? "Verifying..." : "Verify & Continue"}
+          </button>
+        </form>
+
+        <button
+          type="button"
+          className="btn btn-outline"
+          style={{ marginTop: 12 }}
+          onClick={handleResend}
+          disabled={isLoading}
+        >
+          Resend OTP
+        </button>
+
+        <div className="auth-links">
+          <Link to="/login">Back to login</Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/demo-frontend/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/apps/demo-frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/apps/demo-frontend/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/apps/demo-frontend/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+    alias: {
+      react: path.resolve(__dirname, 'node_modules/react'),
+      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+    },
+  },
+})