97 lines
2.7 KiB
TypeScript
97 lines
2.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 { LogoSquare } from '../logo';
|
|
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,
|
|
});
|
|
});
|
|
|
|
return (
|
|
<div className="center-center h-screen w-screen p-4 col">
|
|
<div className="bg-background p-6 rounded-lg max-w-md w-full text-left">
|
|
<div className="col mt-1 flex-1 gap-2">
|
|
<LogoSquare className="size-12 mb-4" />
|
|
<div className="text-xl font-semibold">
|
|
{shareType === 'dashboard'
|
|
? 'Dashboard is locked'
|
|
: shareType === 'report'
|
|
? 'Report is locked'
|
|
: 'Overview is locked'}
|
|
</div>
|
|
<div className="text-lg text-muted-foreground leading-normal">
|
|
Please enter correct password to access this{' '}
|
|
{shareType === 'dashboard'
|
|
? 'dashboard'
|
|
: shareType === 'report'
|
|
? 'report'
|
|
: 'overview'}
|
|
</div>
|
|
</div>
|
|
<form onSubmit={onSubmit} className="col gap-4 mt-6">
|
|
<Input
|
|
{...form.register('password')}
|
|
type="password"
|
|
placeholder="Enter your password"
|
|
size="large"
|
|
/>
|
|
<Button type="submit">Get access</Button>
|
|
</form>
|
|
</div>
|
|
<div className="p-6 text-sm max-w-sm col gap-0.5">
|
|
<p>
|
|
Powered by{' '}
|
|
<a href="https://openpanel.dev" className="font-medium">
|
|
OpenPanel.dev
|
|
</a>
|
|
</p>
|
|
<p>
|
|
The best web and product analytics tool out there (our honest
|
|
opinion).
|
|
</p>
|
|
<p>
|
|
<a href="https://dashboard.openpanel.dev/onboarding">
|
|
Try it for free today!
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|