[V0_FILE]typescriptreact:file="app/actions/auth.ts" 'use server' import { redirect } from 'next/navigation' export async function login(prevState: any, formData: FormData) { const email = formData.get('email') const password = formData.get('password') // Here you would typically validate the user credentials // For this example, we'll just check if the email and password are not empty if (!email || !password) { return { error: 'Email and password are required' } } // Simulate a delay as if we're checking the credentials await new Promise(resolve => setTimeout(resolve, 1000)) // For demonstration, let's consider the login successful if the email contains '@' // In a real application, you'd check against your user database if (email.toString().includes('@')) { // Redirect to a dashboard or home page after successful login redirect('/dashboard') } else { return { error: 'Invalid email or password' } } } [V0_FILE]typescriptreact:file="app/components/login-form.tsx" 'use client' import { useState } from 'react' import { useActionState } from 'react' import { login } from '../actions/auth' import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { AlertCircle } from 'lucide-react' export function LoginForm() { const [state, formAction, isPending] = useActionState(login) const [email, setEmail] = useState('') const [password, setPassword] = useState('') return ( Login Enter your email and password to access your account. ) } [V0_FILE]typescriptreact:file="app/login/page.tsx" import { LoginForm } from '../components/login-form' export default function LoginPage() { return (

) }

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This