179 lines
8.5 KiB
TypeScript
179 lines
8.5 KiB
TypeScript
import { Head, Link, useForm } from '@inertiajs/react';
|
|
import { useEffect } from 'react';
|
|
import { FormErrors, controlClass } from '@/components/procurement';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export default function Access({
|
|
companyId,
|
|
purpose,
|
|
accessStatus,
|
|
emailDeliveryAvailable,
|
|
}: {
|
|
companyId: number;
|
|
purpose: string;
|
|
accessStatus: string | null;
|
|
emailDeliveryAvailable: boolean;
|
|
}) {
|
|
const recovery = useForm({ email: '' });
|
|
const confirmation = useForm({
|
|
token: '',
|
|
password: '',
|
|
password_confirmation: '',
|
|
});
|
|
const { setData } = confirmation;
|
|
useEffect(() => {
|
|
const token = new URLSearchParams(window.location.hash.slice(1)).get(
|
|
'token',
|
|
);
|
|
if (token) setData('token', token);
|
|
}, [setData]);
|
|
const verify = purpose === 'confirmar-email';
|
|
return (
|
|
<>
|
|
<Head title={verify ? 'Confirmar email' : 'Recuperar acesso'} />
|
|
<main className="mx-auto max-w-xl space-y-5 p-6">
|
|
<h1 className="text-3xl font-semibold">
|
|
{verify ? 'Confirmar email' : 'Recuperar acesso'}
|
|
</h1>
|
|
<Link className="underline" href={`/candidaturas/${companyId}`}>
|
|
Entrada de candidatos
|
|
</Link>
|
|
{accessStatus === 'completed' ? (
|
|
<p>
|
|
{verify
|
|
? 'Email confirmado. Esta confirmação não verifica a identidade nem constitui candidatura.'
|
|
: 'Palavra-passe actualizada. Entre novamente; as sessões anteriores perderam o acesso.'}
|
|
</p>
|
|
) : (
|
|
<>
|
|
{accessStatus === 'requested' && (
|
|
<p>
|
|
Se existir uma conta e o envio estiver
|
|
disponível, receberá uma ligação temporária no
|
|
email indicado.
|
|
</p>
|
|
)}
|
|
{!emailDeliveryAvailable && (
|
|
<p>
|
|
O envio de email ainda não está configurado. O
|
|
perfil e a entrada com a palavra-passe actual
|
|
continuam disponíveis.
|
|
</p>
|
|
)}
|
|
{confirmation.data.token ? (
|
|
<form
|
|
className="space-y-4"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
confirmation.post(
|
|
`/candidaturas/${companyId}/${purpose}`,
|
|
{
|
|
preserveState: false,
|
|
onFinish: () =>
|
|
confirmation.reset(
|
|
'password',
|
|
'password_confirmation',
|
|
),
|
|
},
|
|
);
|
|
}}
|
|
>
|
|
<FormErrors errors={confirmation.errors} />
|
|
{!verify && (
|
|
<>
|
|
<label className="grid gap-2">
|
|
Nova palavra-passe
|
|
<input
|
|
className={controlClass}
|
|
type="password"
|
|
autoComplete="new-password"
|
|
required
|
|
minLength={12}
|
|
maxLength={128}
|
|
value={
|
|
confirmation.data.password
|
|
}
|
|
onChange={(e) =>
|
|
confirmation.setData(
|
|
'password',
|
|
e.target.value,
|
|
)
|
|
}
|
|
/>
|
|
</label>
|
|
<label className="grid gap-2">
|
|
Confirmar palavra-passe
|
|
<input
|
|
className={controlClass}
|
|
type="password"
|
|
autoComplete="new-password"
|
|
required
|
|
value={
|
|
confirmation.data
|
|
.password_confirmation
|
|
}
|
|
onChange={(e) =>
|
|
confirmation.setData(
|
|
'password_confirmation',
|
|
e.target.value,
|
|
)
|
|
}
|
|
/>
|
|
</label>
|
|
</>
|
|
)}
|
|
<Button disabled={confirmation.processing}>
|
|
{verify
|
|
? 'Confirmar o meu email'
|
|
: 'Definir nova palavra-passe'}
|
|
</Button>
|
|
</form>
|
|
) : !verify ? (
|
|
<form
|
|
className="space-y-4"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
recovery.post(
|
|
`/candidaturas/${companyId}/pedir-recuperacao`,
|
|
);
|
|
}}
|
|
>
|
|
<FormErrors errors={recovery.errors} />
|
|
<label className="grid gap-2">
|
|
Email da conta
|
|
<input
|
|
className={controlClass}
|
|
type="email"
|
|
required
|
|
autoComplete="email"
|
|
value={recovery.data.email}
|
|
onChange={(e) =>
|
|
recovery.setData(
|
|
'email',
|
|
e.target.value,
|
|
)
|
|
}
|
|
/>
|
|
</label>
|
|
<Button
|
|
disabled={
|
|
recovery.processing ||
|
|
!emailDeliveryAvailable
|
|
}
|
|
>
|
|
Pedir ligação de recuperação
|
|
</Button>
|
|
</form>
|
|
) : (
|
|
<p>
|
|
Abra a ligação recebida no seu email. Pode pedir
|
|
outra na sua área de perfil.
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|