@varshylinc/team-management 0.1.0

package/src/client/pages/EmailChangePage.tsx

@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from 'react';
+import { requestEmailChange, verifyEmailChange, cancelEmailChange } from '../api.js';
+
+interface EmailChangePageProps {
+  /** 'request' | 'verify' | 'cancel' */
+  mode: 'request' | 'verify' | 'cancel';
+  token?: string;
+}
+
+export function EmailChangePage({ mode, token }: EmailChangePageProps) {
+  const [newEmail, setNewEmail] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  // Auto-submit verify/cancel on mount
+  useEffect(() => {
+    if ((mode === 'verify' || mode === 'cancel') && token) {
+      setSubmitting(true);
+      const fn = mode === 'verify' ? verifyEmailChange : cancelEmailChange;
+      fn(token)
+        .then(() => setSuccess(true))
+        .catch((e: Error) => setError(e.message))
+        .finally(() => setSubmitting(false));
+    }
+  }, [mode, token]);
+
+  if (mode === 'verify' || mode === 'cancel') {
+    if (submitting) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-slate-50">
+          <div className="text-center">
+            <div className="mx-auto h-10 w-10 animate-spin rounded-full border-2 border-blue-500 border-t-transparent mb-4" />
+            <p className="text-sm text-slate-600">
+              {mode === 'verify' ? 'Verifying your email change…' : 'Cancelling email change…'}
+            </p>
+          </div>
+        </div>
+      );
+    }
+    if (success) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+          <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+              <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <h1 className="text-xl font-bold text-slate-900 mb-2">
+              {mode === 'verify' ? 'Email updated!' : 'Email change cancelled.'}
+            </h1>
+            <p className="text-sm text-slate-600 mb-6">
+              {mode === 'verify'
+                ? 'Your email address has been successfully updated.'
+                : 'The email change request has been cancelled. Your email remains unchanged.'}
+            </p>
+            <a href="/settings" className="inline-block rounded-md border border-slate-300 px-6 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
+              Back to Settings
+            </a>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+        <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+            <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </div>
+          <h1 className="text-xl font-bold text-slate-900 mb-2">Something went wrong</h1>
+          <p className="text-sm text-slate-600 mb-6">{error}</p>
+          <a href="/settings" className="inline-block rounded-md border border-slate-300 px-6 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
+            Back to Settings
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  // mode === 'request'
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSubmitting(true);
+    setError(null);
+    try {
+      await requestEmailChange(newEmail.trim());
+      setSuccess(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to request email change');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (success) {
+    return (
+      <div className="max-w-lg mx-auto px-4 py-8 text-center">
+        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+          <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+        </div>
+        <h1 className="text-xl font-bold text-slate-900 mb-2">Check your email</h1>
+        <p className="text-sm text-slate-600">
+          We sent a confirmation link to <strong>{newEmail}</strong>. Click the link to confirm your new email address.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-lg mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold text-slate-900 mb-2">Change Email Address</h1>
+      <p className="text-sm text-slate-600 mb-6">
+        Enter your new email address. We will send a confirmation link to verify the change.
+      </p>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">New Email Address</label>
+          <input
+            type="email"
+            value={newEmail}
+            onChange={(e) => setNewEmail(e.target.value)}
+            required
+            disabled={submitting}
+            placeholder="new@email.com"
+            className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:bg-slate-50"
+          />
+        </div>
+        {error && <p className="text-sm text-red-600">{error}</p>}
+        <button
+          type="submit"
+          disabled={submitting || !newEmail.trim()}
+          className="rounded-md bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 transition-colors"
+        >
+          {submitting ? 'Sending…' : 'Send Confirmation'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/client/pages/InvitationAcceptPage.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from 'react';
+import { acceptInvitationByToken } from '../api.js';
+import type { OrgRole } from '../types.js';
+
+interface InvitationAcceptPageProps {
+  /** The magic-link token, typically extracted from the URL query string */
+  token: string;
+  /** Whether the current user is authenticated */
+  isAuthenticated: boolean;
+  loginUrl?: string;
+  signupUrl?: string;
+}
+
+type State =
+  | { status: 'loading' }
+  | { status: 'success'; orgId: number; role: OrgRole }
+  | { status: 'already_member'; message: string }
+  | { status: 'error'; message: string }
+  | { status: 'unauthenticated' };
+
+export function InvitationAcceptPage({
+  token,
+  isAuthenticated,
+  loginUrl = '/login',
+  signupUrl = '/signup',
+}: InvitationAcceptPageProps) {
+  const [state, setState] = useState<State>(
+    isAuthenticated ? { status: 'loading' } : { status: 'unauthenticated' }
+  );
+
+  useEffect(() => {
+    if (!isAuthenticated || !token) return;
+
+    acceptInvitationByToken(token)
+      .then(({ orgId, role }) => setState({ status: 'success', orgId, role }))
+      .catch((err: Error) => {
+        const msg = err.message ?? 'Something went wrong';
+        if (msg.includes('already') || msg.includes('member')) {
+          setState({ status: 'already_member', message: msg });
+        } else {
+          setState({ status: 'error', message: msg });
+        }
+      });
+  }, [token, isAuthenticated]);
+
+  if (state.status === 'unauthenticated') {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+        <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
+            <svg className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+          </div>
+          <h1 className="text-xl font-bold text-slate-900 mb-2">You have been invited!</h1>
+          <p className="text-sm text-slate-600 mb-6">
+            Please log in or create an account to accept this invitation.
+          </p>
+          <div className="flex flex-col gap-3">
+            <a
+              href={`${loginUrl}?redirect_token=${encodeURIComponent(token)}`}
+              className="rounded-md bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700 text-center transition-colors"
+            >
+              Log In
+            </a>
+            <a
+              href={`${signupUrl}?redirect_token=${encodeURIComponent(token)}`}
+              className="rounded-md border border-slate-300 px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 text-center transition-colors"
+            >
+              Create Account
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (state.status === 'loading') {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50">
+        <div className="text-center">
+          <div className="mx-auto h-10 w-10 animate-spin rounded-full border-2 border-blue-500 border-t-transparent mb-4" />
+          <p className="text-sm text-slate-600">Accepting your invitation…</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (state.status === 'success') {
+    const roleLabels: Record<OrgRole, string> = {
+      owner: 'Owner',
+      admin: 'Admin',
+      member: 'Member',
+      viewer: 'Viewer',
+    };
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+        <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+            <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h1 className="text-xl font-bold text-slate-900 mb-2">Welcome aboard!</h1>
+          <p className="text-sm text-slate-600 mb-6">
+            You have joined the organization as <strong>{roleLabels[state.role]}</strong>.
+          </p>
+          <a
+            href={`/orgs/${state.orgId}`}
+            className="inline-block rounded-md bg-blue-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
+          >
+            Go to Organization
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  if (state.status === 'already_member') {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+        <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-amber-100">
+            <svg className="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <h1 className="text-xl font-bold text-slate-900 mb-2">Already a member</h1>
+          <p className="text-sm text-slate-600 mb-6">{state.message}</p>
+          <a
+            href="/"
+            className="inline-block rounded-md border border-slate-300 px-6 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors"
+          >
+            Back to Home
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  // error state
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+      <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
+        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+          <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </div>
+        <h1 className="text-xl font-bold text-slate-900 mb-2">Invitation failed</h1>
+        <p className="text-sm text-slate-600 mb-6">
+          {'message' in state ? state.message : 'This invitation link is invalid or has expired.'}
+        </p>
+        <a
+          href="/"
+          className="inline-block rounded-md border border-slate-300 px-6 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors"
+        >
+          Back to Home
+        </a>
+      </div>
+    </div>
+  );
+}

package/src/client/pages/InvitationCodePage.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { acceptInvitationByCode } from '../api.js';
+import type { OrgRole } from '../types.js';
+
+interface InvitationCodePageProps {
+  prefillEmail?: string;
+}
+
+type State =
+  | { status: 'idle' }
+  | { status: 'submitting' }
+  | { status: 'success'; orgId: number; role: OrgRole }
+  | { status: 'error'; message: string };
+
+export function InvitationCodePage({ prefillEmail = '' }: InvitationCodePageProps) {
+  const [email, setEmail] = useState(prefillEmail);
+  const [code, setCode] = useState('');
+  const [state, setState] = useState<State>({ status: 'idle' });
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setState({ status: 'submitting' });
+    try {
+      const result = await acceptInvitationByCode(email.trim(), code.trim());
+      setState({ status: 'success', ...result });
+    } catch (err) {
+      setState({ status: 'error', message: err instanceof Error ? err.message : 'Invalid code' });
+    }
+  }
+
+  if (state.status === 'success') {
+    const roleLabels: Record<OrgRole, string> = {
+      owner: 'Owner', admin: 'Admin', member: 'Member', viewer: 'Viewer',
+    };
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+        <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8 text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+            <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h1 className="text-xl font-bold text-slate-900 mb-2">You're in!</h1>
+          <p className="text-sm text-slate-600 mb-6">
+            You joined as <strong>{roleLabels[state.role]}</strong>.
+          </p>
+          <a
+            href={`/orgs/${state.orgId}`}
+            className="inline-block rounded-md bg-blue-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
+          >
+            Go to Organization
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  const submitting = state.status === 'submitting';
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+      <div className="bg-white rounded-xl shadow-md w-full max-w-md p-8">
+        <h1 className="text-xl font-bold text-slate-900 mb-2">Enter Invitation Code</h1>
+        <p className="text-sm text-slate-600 mb-6">
+          Enter the email address your invitation was sent to and the 6-digit code you received.
+        </p>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              disabled={submitting}
+              placeholder="you@company.com"
+              className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:bg-slate-50"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">6-Digit Code</label>
+            <input
+              type="text"
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+              required
+              disabled={submitting}
+              placeholder="123456"
+              maxLength={6}
+              inputMode="numeric"
+              className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm font-mono tracking-widest text-center focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:bg-slate-50"
+            />
+          </div>
+          {state.status === 'error' && (
+            <p className="text-sm text-red-600">{state.message}</p>
+          )}
+          <button
+            type="submit"
+            disabled={submitting || code.length !== 6 || !email.trim()}
+            className="w-full rounded-md bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {submitting ? 'Verifying…' : 'Accept Invitation'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}