28 lines
2.2 KiB
TypeScript
28 lines
2.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { authApi, saveSession } from '../services/api';
|
|
|
|
export const AccessTokenPage: React.FC<{ mode: 'invite' | 'reset' }> = ({ mode }) => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const token = new URLSearchParams(location.search).get('token') || '';
|
|
const [name, setName] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [saving, setSaving] = useState(false);
|
|
const submit = async (event: React.FormEvent) => {
|
|
event.preventDefault(); setError('');
|
|
if (mode === 'invite' && name.trim().length < 2) { setError('Informe seu nome.'); return; }
|
|
if (password.length < 8) { setError('A senha deve ter pelo menos 8 caracteres.'); return; }
|
|
setSaving(true);
|
|
try {
|
|
if (mode === 'invite') {
|
|
const session = await authApi.acceptInvitation(token, name, password);
|
|
saveSession(session); navigate(session.user.role === 'admin' ? '/admin' : session.user.role === 'instructor' ? '/gerenciar' : '/');
|
|
} else { await authApi.resetPassword(token, password); navigate('/'); }
|
|
} catch { setError('Este link é inválido, expirou ou não pôde ser usado.'); }
|
|
finally { setSaving(false); }
|
|
};
|
|
return <main className="min-h-screen pt-32 px-6 flex justify-center"><form noValidate onSubmit={submit} className="w-full max-w-md rounded-2xl border border-white/10 bg-zinc-950 p-7 space-y-4"><h1 className="text-2xl font-bold">{mode === 'invite' ? 'Criar seu acesso' : 'Redefinir senha'}</h1>{mode === 'invite' && <input value={name} onChange={(event) => setName(event.target.value)} placeholder="Seu nome" className="w-full rounded-xl bg-zinc-900 p-3" />}<input type="password" value={password} onChange={(event) => setPassword(event.target.value)} placeholder="Nova senha (mínimo 8 caracteres)" className="w-full rounded-xl bg-zinc-900 p-3" />{error && <p className="text-sm text-red-400">{error}</p>}<button disabled={!token || saving} className="w-full rounded-xl bg-orange-500 p-3 font-semibold">{saving ? 'Salvando...' : mode === 'invite' ? 'Criar conta' : 'Redefinir senha'}</button></form></main>;
|
|
};
|