70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import { useTRPC } from '@/integrations/trpc/react';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { type ISignInShare, zSignInShare } from '@openpanel/validation';
|
|
import { useMutation } from '@tanstack/react-query';
|
|
import { useForm } from 'react-hook-form';
|
|
import { toast } from 'sonner';
|
|
import { PublicPageCard } from '../public-page-card';
|
|
import { Button } from '../ui/button';
|
|
import { Input } from '../ui/input';
|
|
|
|
export function ShareEnterPassword({
|
|
shareId,
|
|
shareType = 'overview',
|
|
}: {
|
|
shareId: string;
|
|
shareType?: 'overview' | 'dashboard' | 'report';
|
|
}) {
|
|
const trpc = useTRPC();
|
|
const mutation = useMutation(
|
|
trpc.auth.signInShare.mutationOptions({
|
|
onSuccess() {
|
|
window.location.reload();
|
|
},
|
|
onError() {
|
|
toast.error('Incorrect password');
|
|
},
|
|
}),
|
|
);
|
|
const form = useForm<ISignInShare>({
|
|
resolver: zodResolver(zSignInShare),
|
|
defaultValues: {
|
|
password: '',
|
|
shareId,
|
|
shareType,
|
|
},
|
|
});
|
|
|
|
const onSubmit = form.handleSubmit((data) => {
|
|
mutation.mutate({
|
|
password: data.password,
|
|
shareId,
|
|
shareType,
|
|
});
|
|
});
|
|
|
|
const typeLabel =
|
|
shareType === 'dashboard'
|
|
? 'Dashboard'
|
|
: shareType === 'report'
|
|
? 'Report'
|
|
: 'Overview';
|
|
|
|
return (
|
|
<PublicPageCard
|
|
title={`${typeLabel} is locked`}
|
|
description={`Please enter correct password to access this ${typeLabel.toLowerCase()}`}
|
|
>
|
|
<form onSubmit={onSubmit} className="col gap-4">
|
|
<Input
|
|
{...form.register('password')}
|
|
type="password"
|
|
placeholder="Enter your password"
|
|
size="large"
|
|
/>
|
|
<Button type="submit">Get access</Button>
|
|
</form>
|
|
</PublicPageCard>
|
|
);
|
|
}
|