import { Head, Link, router, useForm } from '@inertiajs/react';
import { FormEvent, useEffect } from 'react';
import { Button, Card, Field, Input } from '@/Components/ui';
import GuestLayout from '@/Layouts/GuestLayout';
export default function Join({
token,
role,
organization,
expires_at,
registered = false,
registeredName = null,
dashboardUrl = '/dashboard',
}: {
token: string;
role: { name: string; slug: string } | null;
organization: string;
expires_at: string | null;
registered?: boolean;
registeredName?: string | null;
dashboardUrl?: string;
}) {
const form = useForm({
name: '',
username: '',
email: '',
password: '',
password_confirmation: '',
});
useEffect(() => {
if (!registered) {
return;
}
const timer = window.setTimeout(() => {
router.visit(dashboardUrl);
}, 2500);
return () => window.clearTimeout(timer);
}, [registered, dashboardUrl]);
function submit(event: FormEvent) {
event.preventDefault();
form.post(`/join/${token}`);
}
if (registered) {
return (
Registration successful
Welcome{registeredName ? `, ${registeredName}` : ''}! Your {organization} account is ready.
A welcome email is on the way. Redirecting you to the dashboard…
);
}
return (
Join {organization}
Create your account{role ? ` as ${role.name}` : ''}.
{expires_at ? ` This invite expires ${new Date(expires_at).toLocaleDateString()}.` : ''}
Already have an account? Sign in
);
}