GPT

Usage Examples

'use client'; import { useState } from 'react'; import { useRouter } from 'next/navigation'; export default function Auth() { const router = useRouter(); const [isLoading, setIsLoading] = useState(false); const [err

Prompt text

Original English text. Replace placeholders with your own details.

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function Auth() {
 const router = useRouter();
 const [isLoading, setIsLoading] = useState(false);
 const [error, setError] = useState('');
 const [isRegistering, setIsRegistering] = useState(false);

 const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 e.preventDefault();
 setIsLoading(true);
 setError('');

 const formData = new FormData(e.currentTarget);
 const email = formData.get('email') as string;
 const password = formData.get('password') as string;
 const name = formData.get('name') as string;

 try {
 const response = await fetch('/api/auth/route', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 },
 body: JSON.stringify({
 email,
 password,
 name,
 action: isRegistering ? 'register' : 'login',
 }),
 });

 if (!response.ok) {
 const data = await response.json();
 throw new Error(data.error);
 }

 router.push('/dashboard');
 } catch (err: any) {
 setError(err.message);
 } finally {
 setIsLoading(false);
 }
 };

 return (
 <div className="auth-container">
 <h1>{isRegistering ? 'Register' : 'Login'}</h1>
 <form onSubmit={handleSubmit}>
 <div>
 <label htmlFor="email">Email</label>
 <input
 id="email"
 name="email"
 type="email"
 required
 />
 </div>
 <div>
 <label htmlFor="password">Password</label>
 <input
 id="password"
 name="password"
 type="password"
 required
 />
 </div>
 {isRegistering && (
 <div>
 <label htmlFor="name">Name</label>
 <input
 id="name"
 name="name"
 type="text"
 required
 />
 </div>
 )}
 {error && <div className="error">{error}</div>}
 <button type="submit" disabled={isLoading}>
 {isLoading ? 'Loading...' : (isRegistering ? 'Register' : 'Login')}
 </button>
 <button
 type="button"
 onClick={() => setIsRegistering(!isRegistering)}
 >
 {isRegistering ? 'Switch to Login' : 'Switch to Register'}
 </button>
 </form>
 </div>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →