fix: improve note interactions and markdown LaTeX support
## 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
This commit is contained in:
77
keep-notes/app/(auth)/forgot-password/page.tsx
Normal file
77
keep-notes/app/(auth)/forgot-password/page.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { forgotPassword } from '@/app/actions/auth-reset'
|
||||
import { toast } from 'sonner'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [isDone, setIsSubmittingDone] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
const formData = new FormData(e.currentTarget)
|
||||
const result = await forgotPassword(formData.get('email') as string)
|
||||
setIsSubmitting(false)
|
||||
|
||||
if (result.error) {
|
||||
toast.error(result.error)
|
||||
} else {
|
||||
setIsSubmittingDone(true)
|
||||
}
|
||||
}
|
||||
|
||||
if (isDone) {
|
||||
return (
|
||||
<main className="flex items-center justify-center md:h-screen p-4">
|
||||
<Card className="w-full max-w-[400px]">
|
||||
<CardHeader>
|
||||
<CardTitle>Check your email</CardTitle>
|
||||
<CardDescription>
|
||||
We have sent a password reset link to your email address if it exists in our system.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter>
|
||||
<Link href="/login" className="w-full">
|
||||
<Button variant="outline" className="w-full">Return to Login</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex items-center justify-center md:h-screen p-4">
|
||||
<Card className="w-full max-w-[400px]">
|
||||
<CardHeader>
|
||||
<CardTitle>Forgot Password</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your email address and we'll send you a link to reset your password.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-medium">Email</label>
|
||||
<Input id="email" name="email" type="email" required placeholder="name@example.com" />
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-col gap-4">
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Sending...' : 'Send Reset Link'}
|
||||
</Button>
|
||||
<Link href="/login" className="text-sm text-center underline">
|
||||
Back to login
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
13
keep-notes/app/(auth)/layout.tsx
Normal file
13
keep-notes/app/(auth)/layout.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
export default function AuthLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-zinc-950">
|
||||
<div className="w-full max-w-md p-4">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
17
keep-notes/app/(auth)/login/page.tsx
Normal file
17
keep-notes/app/(auth)/login/page.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { LoginForm } from '@/components/login-form';
|
||||
import { getSystemConfig } from '@/lib/config';
|
||||
|
||||
export default async function LoginPage() {
|
||||
const config = await getSystemConfig();
|
||||
|
||||
// Default to true unless explicitly disabled in DB or Env
|
||||
const allowRegister = config.ALLOW_REGISTRATION !== 'false' && process.env.ALLOW_REGISTRATION !== 'false';
|
||||
|
||||
return (
|
||||
<main className="flex items-center justify-center md:h-screen">
|
||||
<div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
|
||||
<LoginForm allowRegister={allowRegister} />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
20
keep-notes/app/(auth)/register/page.tsx
Normal file
20
keep-notes/app/(auth)/register/page.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { RegisterForm } from '@/components/register-form';
|
||||
import { getSystemConfig } from '@/lib/config';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
export default async function RegisterPage() {
|
||||
const config = await getSystemConfig();
|
||||
const allowRegister = config.ALLOW_REGISTRATION !== 'false' && process.env.ALLOW_REGISTRATION !== 'false';
|
||||
|
||||
if (!allowRegister) {
|
||||
redirect('/login');
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex items-center justify-center md:h-screen">
|
||||
<div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
|
||||
<RegisterForm />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
95
keep-notes/app/(auth)/reset-password/page.tsx
Normal file
95
keep-notes/app/(auth)/reset-password/page.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
'use client'
|
||||
|
||||
import { useState, Suspense } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { resetPassword } from '@/app/actions/auth-reset'
|
||||
import { toast } from 'sonner'
|
||||
import { useSearchParams, useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
|
||||
function ResetPasswordForm() {
|
||||
const searchParams = useSearchParams()
|
||||
const router = useRouter()
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const token = searchParams.get('token')
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
if (!token) return
|
||||
|
||||
const formData = new FormData(e.currentTarget)
|
||||
const password = formData.get('password') as string
|
||||
const confirm = formData.get('confirmPassword') as string
|
||||
|
||||
if (password !== confirm) {
|
||||
toast.error("Passwords don't match")
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
const result = await resetPassword(token, password)
|
||||
setIsSubmitting(false)
|
||||
|
||||
if (result.error) {
|
||||
toast.error(result.error)
|
||||
} else {
|
||||
toast.success('Password reset successfully. You can now login.')
|
||||
router.push('/login')
|
||||
}
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
return (
|
||||
<Card className="w-full max-w-[400px]">
|
||||
<CardHeader>
|
||||
<CardTitle>Invalid Link</CardTitle>
|
||||
<CardDescription>This password reset link is invalid or has expired.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter>
|
||||
<Link href="/forgot-password" title="Try again" className="w-full">
|
||||
<Button variant="outline" className="w-full">Request new link</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-[400px]">
|
||||
<CardHeader>
|
||||
<CardTitle>Reset Password</CardTitle>
|
||||
<CardDescription>Enter your new password below.</CardDescription>
|
||||
</CardHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="password">New Password</label>
|
||||
<Input id="password" name="password" type="password" required minLength={6} autoFocus />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="confirmPassword">Confirm New Password</label>
|
||||
<Input id="confirmPassword" name="confirmPassword" type="password" required minLength={6} />
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Resetting...' : 'Reset Password'}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
return (
|
||||
<main className="flex items-center justify-center md:h-screen p-4">
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<ResetPasswordForm />
|
||||
</Suspense>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user