InviteAccept
The public accept-invitation page. It covers a valid invitation with accept and decline or sign in first, an expired one, one sent to another account, one already used and one that was cancelled.
Code
<InviteAccept state="valid" workspace={{ name: "Sahab Studio", meta: "12 members" }} invitedBy={{ name: "Sara Alharbi" }} role="Admin" inviteEmail="[email protected]" account={{ name: "Omar Khalid", email: "[email protected]" }} onAccept={() => api.acceptInvite(token)} onDecline={() => api.declineInvite(token)}/>Auth · beta
Live examples and controls: InviteAccept in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/invite-accept.jsonWhat a person sees after clicking the link in an invitation email. You resolve the link on the server and pass
the outcome as state; the page shows the right message and the right next step for it.
When to use
- The landing page of an invitation link, signed in or not.
When not to use
- Asking for consent for a third-party app: use
OAuthConsent. - Inviting people (the sender side): use
MembersManager.
Import
import { InviteAccept } from "@fadymondy/nasaq/web";Quick start
<InviteAccept
state="valid"
workspace={{ name: "Sahab Studio", meta: "12 members" }}
invitedBy={{ name: "Sara Alharbi" }}
role="Admin"
inviteEmail="[email protected]"
account={{ name: "Omar Khalid", email: "[email protected]" }}
onAccept={() => api.acceptInvite(token)}
onDecline={() => api.declineInvite(token)}
/>Anatomy
InviteAccept (AuthLayout, or bare) data-slot="invite-accept", data-state
├─ state icon for every state except valid
├─ workspace row logo, name, meta, role badge
├─ details role, invited email, expiry (valid)
└─ actions by stateStates
state | Shows | Actions |
|---|---|---|
valid, signed in | workspace, role, expiry, who you are | Accept, Decline |
valid, signed out (account empty) | the invited email | onSignIn, onSignUp |
expired | how to get a new one | onRequestNew; a success message after |
wrong-account | invited email versus signed-in email | onSwitchAccount |
already-accepted | you are already a member | onOpenWorkspace |
revoked | the inviter cancelled it | onGoHome |
API
| Prop | Type | Default | Description |
|---|---|---|---|
state | InviteState | required | One of the five outcomes. |
workspace | { name, logo?, meta? } | required | |
invitedBy | { name, email? } | none | Names the sender in the copy. |
role | string | none | The role label the person gets. |
inviteEmail | string | none | Where the invitation was sent. Always left-to-right. |
expiresAt | string | number | Date | none | |
account | { name, email, avatar? } | null | none | The signed-in account. |
onAccept | () => Promise<void | { error? }> | required | |
onDecline, onRequestNew | same shape | none | |
onSignIn, onSignUp, onOpenWorkspace, onGoHome | () => void | none | |
onSwitchAccount | () => void | Promise<void> | none | |
bare | boolean | false | Render without AuthLayout. |
labels | InviteAcceptLabels | en / ar |
The rest are AuthLayout props (variant, mark, panel, footer).
Examples
- In your own layout:
<InviteAccept bare ... />. - Split screen:
<InviteAccept variant="split" panel={<BrandPanel />} ... />.
Accessibility
The page heading is the h1. Failures from your callbacks show in a role="alert". Each blocked state has an
icon and a sentence, so the meaning never rests on colour.
RTL & i18n
Built-in English and Arabic. Emails are isolated inside sentences and stay left-to-right.
Styling & tokens
Status icons use the nq-warning, nq-success and nq-danger soft tokens. The frame is AuthLayout.
Do / Don't
- Do check the token on the server; this page only presents the result.
- Do not pass an invited email you would not show to anyone who holds the link.
Related
Lab
https://docs.nasaqui.com/?path=/docs/components-auth-invite-accept--docs
IdleLock
Locks the app after a period of inactivity: a Still there countdown dialog first, then your LockScreen over the inert app.
LockScreen
OS-style lock screen over a wallpaper with a clock. Unlock by PIN keypad, password with an optional authenticator code, or biometrics, with a lockout after wrong tries and a quiet-mode gate.