sepehr
640fcb26f7
## Bug Fixes ### Note Card Actions - Fix broken size change functionality (missing state declaration) - Implement React 19 useOptimistic for instant UI feedback - Add startTransition for non-blocking updates - Ensure smooth animations without page refresh - All note actions now work: pin, archive, color, size, checklist ### Markdown LaTeX Rendering - Add remark-math and rehype-katex plugins - Support inline equations with dollar sign syntax - Support block equations with double dollar sign syntax - Import KaTeX CSS for proper styling - Equations now render correctly instead of showing raw LaTeX ## Technical Details - Replace undefined currentNote references with optimistic state - Add optimistic updates before server actions for instant feedback - Use router.refresh() in transitions for smart cache invalidation - Install remark-math, rehype-katex, and katex packages ## Testing - Build passes successfully with no TypeScript errors - Dev server hot-reloads changes correctly
97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useActionState } from 'react';
|
|
import { useFormStatus } from 'react-dom';
|
|
import { authenticate } from '@/app/actions/auth';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import Link from 'next/link';
|
|
|
|
function LoginButton() {
|
|
const { pending } = useFormStatus();
|
|
return (
|
|
<Button className="w-full mt-4" aria-disabled={pending}>
|
|
Log in
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export function LoginForm({ allowRegister = true }: { allowRegister?: boolean }) {
|
|
const [errorMessage, dispatch] = useActionState(authenticate, undefined);
|
|
|
|
return (
|
|
<form action={dispatch} className="space-y-3">
|
|
<div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
|
|
<h1 className="mb-3 text-2xl font-bold">
|
|
Please log in to continue.
|
|
</h1>
|
|
<div className="w-full">
|
|
<div>
|
|
<label
|
|
className="mb-3 mt-5 block text-xs font-medium text-gray-900"
|
|
htmlFor="email"
|
|
>
|
|
Email
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
placeholder="Enter your email address"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<label
|
|
className="mb-3 mt-5 block text-xs font-medium text-gray-900"
|
|
htmlFor="password"
|
|
>
|
|
Password
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
|
|
id="password"
|
|
type="password"
|
|
name="password"
|
|
placeholder="Enter password"
|
|
required
|
|
minLength={6}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-end mt-2">
|
|
<Link
|
|
href="/forgot-password"
|
|
className="text-xs text-gray-500 hover:text-gray-900 underline"
|
|
>
|
|
Forgot password?
|
|
</Link>
|
|
</div>
|
|
<LoginButton />
|
|
<div
|
|
className="flex h-8 items-end space-x-1"
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
>
|
|
{errorMessage && (
|
|
<p className="text-sm text-red-500">{errorMessage}</p>
|
|
)}
|
|
</div>
|
|
{allowRegister && (
|
|
<div className="mt-4 text-center text-sm">
|
|
Don't have an account?{' '}
|
|
<Link href="/register" className="underline">
|
|
Register
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|