feature: sending invitation link for newly created staff implemented.

2026-04-30 12:55:39 +03:30
parent c39bd872bd
commit 1b8856f64e
10 changed files with 527 additions and 64 deletions
--- a/frontend/src/app/(dashboard)/staff/page.tsx
+++ b/frontend/src/app/(dashboard)/staff/page.tsx
@@ -15,7 +15,7 @@ import {
  formatAccessSummary,
  type FeaturePermState,
 } from './staff-permission-form';
-import { UserPlus, Pencil, Trash2, Copy, Check, X } from 'lucide-react';
+import { UserPlus, Pencil, Trash2, Copy, Check, X, Clock3 } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { staffApi, type StaffMemberDto } from '@/lib/api/staff';
 import { Button } from '@/components/ui/Button';
@@ -105,12 +105,12 @@ export default function StaffPage() {
  const [inviteName, setInviteName] = useState('');
  const [invitePerms, setInvitePerms] = useState(() => emptyFeaturePermissionState());
  const [inviteLoading, setInviteLoading] = useState(false);
-  const [lastTempPassword, setLastTempPassword] = useState<string | null>(null);
-  const [copiedPw, setCopiedPw] = useState(false);
+  const [copiedInviteLink, setCopiedInviteLink] = useState(false);
  const [lastInviteInfo, setLastInviteInfo] = useState<{
    name: string;
    email: string;
-    isNewAccount: boolean;
+    invitationUrl: string | null;
+    invitationStatus: 'PENDING' | 'ACCEPTED';
  } | null>(null);

  const [editing, setEditing] = useState<StaffMemberDto | null>(null);
@@ -159,7 +159,6 @@ export default function StaffPage() {
  async function submitInvite() {
    setInviteLoading(true);
    setError('');
-    setLastTempPassword(null);
    setLastInviteInfo(null);
    const displayName = inviteName.trim();
    const displayEmail = inviteEmail.trim();
@@ -170,12 +169,11 @@ export default function StaffPage() {
        name: displayName,
        permissionNames,
      });
-      const isNew = Boolean(res.data.temporaryPassword);
-      setLastTempPassword(res.data.temporaryPassword);
      setLastInviteInfo({
        name: displayName,
        email: res.data.email,
-        isNewAccount: isNew,
+        invitationUrl: res.data.invitationUrl,
+        invitationStatus: res.data.invitationStatus,
      });
      setSuccess('');
      setInviteOpen(false);
@@ -235,17 +233,6 @@ export default function StaffPage() {
    }
  }

-  async function copyTempPassword() {
-    if (!lastTempPassword) return;
-    try {
-      await navigator.clipboard.writeText(lastTempPassword);
-      setCopiedPw(true);
-      setTimeout(() => setCopiedPw(false), 2000);
-    } catch {
-      setError('Could not copy to clipboard');
-    }
-  }
-
  if (!currentOrganization || !canViewStaff(currentOrganization)) {
    return (
      <p className="text-sm text-text-secondary">Redirecting…</p>
@@ -266,7 +253,6 @@ export default function StaffPage() {
            size="sm"
            onClick={() => {
              setInviteOpen(true);
-              setLastTempPassword(null);
              setLastInviteInfo(null);
            }}
            disabled={atSeatLimit}
@@ -313,44 +299,45 @@ export default function StaffPage() {
            aria-label="Dismiss"
            onClick={() => {
              setLastInviteInfo(null);
-              setLastTempPassword(null);
            }}
          >
            <X className="w-4 h-4" />
          </button>
          <p className="text-sm text-text-primary pr-6">
-            {lastInviteInfo.isNewAccount ? (
-              <>
-                <span className="font-medium">{lastInviteInfo.name}</span> ({lastInviteInfo.email}) — new
-                account created and added to this organization.
-                {lastTempPassword
-                  ? ' Share the temporary password below so they can sign in.'
-                  : ''}
-              </>
-            ) : (
-              <>
-                <span className="font-medium">{lastInviteInfo.name}</span> ({lastInviteInfo.email}) — this
-                person already had an account. They can select <span className="font-medium">{currentOrganization.name}</span>{' '}
-                from the organization switcher after signing in.
-              </>
-            )}
+            <span className="font-medium">{lastInviteInfo.name}</span> ({lastInviteInfo.email}) was invited.
+            {lastInviteInfo.invitationStatus === 'PENDING'
+              ? ' Invitation is pending until they open the link, set a password, and log in.'
+              : ' Invitation was accepted immediately.'}
          </p>
-          {lastTempPassword && (
+          {lastInviteInfo.invitationUrl && (
            <div className="space-y-2 pt-1 border-t border-border/60">
              <p className="text-xs font-medium text-text-secondary uppercase tracking-wide">
-                Temporary password (copy now — not stored)
+                Invite link
              </p>
              <div className="flex flex-wrap items-center gap-2">
-                <code className="text-sm px-2 py-1.5 rounded-[var(--radius-sm)] bg-background-card border border-border font-mono">
-                  {lastTempPassword}
+                <code className="text-sm px-2 py-1.5 rounded-[var(--radius-sm)] bg-background-card border border-border font-mono break-all">
+                  {lastInviteInfo.invitationUrl}
                </code>
-                <Button type="button" variant="outline" size="sm" onClick={() => void copyTempPassword()}>
-                  {copiedPw ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
-                  <span className="ml-1">{copiedPw ? 'Copied' : 'Copy'}</span>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={async () => {
+                    try {
+                      await navigator.clipboard.writeText(lastInviteInfo.invitationUrl as string);
+                      setCopiedInviteLink(true);
+                      setTimeout(() => setCopiedInviteLink(false), 1500);
+                    } catch {
+                      setError('Could not copy invitation link');
+                    }
+                  }}
+                >
+                  {copiedInviteLink ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                  <span className="ml-1">{copiedInviteLink ? 'Copied' : 'Copy link'}</span>
                </Button>
              </div>
              <p className="text-xs text-text-muted">
-                They should sign in with this password once, then change it under account settings.
+                Share this link manually via SMS or email. They must set password first.
              </p>
            </div>
          )}
@@ -367,6 +354,7 @@ export default function StaffPage() {
                <th className="p-3 font-medium">Name</th>
                <th className="p-3 font-medium">Email</th>
                <th className="p-3 font-medium">Role</th>
+                <th className="p-3 font-medium">Status</th>
                <th className="p-3 font-medium">Access</th>
                {canEdit && <th className="p-3 font-medium w-28">Actions</th>}
              </tr>
@@ -383,6 +371,22 @@ export default function StaffPage() {
                      <span className="text-text-secondary">Staff</span>
                    )}
                  </td>
+                  <td className="p-3">
+                    {m.isOwner || m.invitationStatus === 'ACTIVE' ? (
+                      <span className="inline-flex items-center rounded-full border border-emerald-600/40 bg-emerald-600/15 px-2 py-0.5 text-xs text-emerald-400">
+                        Active
+                      </span>
+                    ) : m.invitationStatus === 'PENDING' ? (
+                      <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/40 bg-amber-500/15 px-2 py-0.5 text-xs text-amber-300">
+                        <Clock3 className="h-3 w-3" />
+                        Pending
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center rounded-full border border-red-500/40 bg-red-500/15 px-2 py-0.5 text-xs text-red-300">
+                        Expired
+                      </span>
+                    )}
+                  </td>
                  <td className="p-3 text-text-secondary max-w-md">
                    {m.isOwner ? (
                      <span className="text-text-muted">All features</span>
--- a/frontend/src/app/(public)/accept-invite/page.tsx
+++ b/frontend/src/app/(public)/accept-invite/page.tsx
@@ -0,0 +1,166 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { Suspense } from 'react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { staffApi } from '@/lib/api/staff';
+
+function AcceptInviteContent() {
+  const params = useSearchParams();
+  const router = useRouter();
+  const token = useMemo(() => params.get('token') || '', [params]);
+
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [inviteInfo, setInviteInfo] = useState<{
+    email: string;
+    name: string;
+    organizationName: string;
+    expiresAt: string;
+    status: 'PENDING' | 'ACCEPTED';
+  } | null>(null);
+
+  const [name, setName] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  useEffect(() => {
+    if (!token) {
+      setLoading(false);
+      setError('Invalid invitation link');
+      return;
+    }
+
+    void (async () => {
+      setLoading(true);
+      setError('');
+      try {
+        const res = await staffApi.previewInvite(token);
+        setInviteInfo(res.data);
+        setName(res.data.name || '');
+        if (res.data.status === 'ACCEPTED') {
+          setSuccess('This invitation is already accepted. You can log in now.');
+        }
+      } catch (e: any) {
+        setError(e?.message || 'Could not load invitation');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [token]);
+
+  async function onAccept() {
+    if (!token) return;
+    setError('');
+    setSuccess('');
+    if (!name.trim()) {
+      setError('Name is required');
+      return;
+    }
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters');
+      return;
+    }
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await staffApi.acceptInvite({
+        token,
+        name: name.trim(),
+        password,
+      });
+      setSuccess('Invitation accepted. Redirecting to login...');
+      setTimeout(() => {
+        router.replace('/login');
+      }, 1000);
+    } catch (e: any) {
+      setError(e?.message || 'Could not accept invitation');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen app-web-bg flex items-center justify-center p-4">
+      <div className="w-full max-w-md surface-card p-6 space-y-5">
+        <h1 className="text-xl font-semibold text-text-primary">Accept invitation</h1>
+
+        {loading ? (
+          <p className="text-sm text-text-secondary">Loading invitation...</p>
+        ) : (
+          <>
+            {inviteInfo && (
+              <div className="rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
+                <p>
+                  Organization: <span className="text-text-primary">{inviteInfo.organizationName}</span>
+                </p>
+                <p>
+                  Email: <span className="text-text-primary">{inviteInfo.email}</span>
+                </p>
+              </div>
+            )}
+
+            {error && (
+              <div className="rounded-[var(--radius-md)] border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-300">
+                {error}
+              </div>
+            )}
+            {success && (
+              <div className="rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-3 py-2 text-sm text-text-primary">
+                {success}
+              </div>
+            )}
+
+            {inviteInfo?.status !== 'ACCEPTED' && (
+              <div className="space-y-3">
+                <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+                <Input
+                  label="Create password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+                <Input
+                  label="Confirm password"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                />
+                <Button type="button" fullWidth isLoading={submitting} onClick={() => void onAccept()}>
+                  Activate account
+                </Button>
+              </div>
+            )}
+
+            <p className="text-xs text-text-muted">
+              Already have access? <Link href="/login" className="text-primary">Go to login</Link>
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function AcceptInvitePage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen app-web-bg flex items-center justify-center">
+          <p className="text-sm text-text-secondary">Loading invitation...</p>
+        </div>
+      }
+    >
+      <AcceptInviteContent />
+    </Suspense>
+  );
+}
--- a/frontend/src/lib/api/staff.ts
+++ b/frontend/src/lib/api/staff.ts
@@ -6,6 +6,10 @@ export interface StaffMemberDto {
  email: string;
  name: string;
  isOwner: boolean;
+  isActive: boolean;
+  invitationStatus: 'ACTIVE' | 'PENDING' | 'EXPIRED';
+  invitedAt: string | null;
+  acceptedAt: string | null;
  permissions: string[] | null;
 }

@@ -27,7 +31,20 @@ export interface InviteStaffResponse {
    membershipId: string;
    userId: string;
    email: string;
-    temporaryPassword: string | null;
+    invitationId: string | null;
+    invitationUrl: string | null;
+    invitationStatus: 'PENDING' | 'ACCEPTED';
+  };
+}
+
+export interface PreviewInviteResponse {
+  success: boolean;
+  data: {
+    email: string;
+    name: string;
+    organizationName: string;
+    expiresAt: string;
+    status: 'PENDING' | 'ACCEPTED';
  };
 }

@@ -46,6 +63,20 @@ export const staffApi = {
    return response.data;
  },

+  previewInvite: async (token: string): Promise<PreviewInviteResponse> => {
+    const response = await apiClient.get(`/staff/invitations/preview?token=${encodeURIComponent(token)}`);
+    return response.data;
+  },
+
+  acceptInvite: async (body: {
+    token: string;
+    password: string;
+    name: string;
+  }): Promise<{ success: boolean; message: string; data: { email: string } }> => {
+    const response = await apiClient.post('/staff/invitations/accept', body);
+    return response.data;
+  },
+
  updateMember: async (
    membershipId: string,
    body: { name?: string; permissionNames?: string[] },