Scribd
Upload
14 views3 pages

Auth Component - TSX

The document is a React component called AuthPages that manages user authentication through login and signup forms. It utilizes state management for form data and page transitions, with automatic focus on the first input field when the page changes. The component renders either a login or signup form based on the current page state, allowing users to switch between the two forms easily.

Uploaded by

ewrgirlfaria
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views3 pages

Auth Component - TSX

The document is a React component called AuthPages that manages user authentication through login and signup forms. It utilizes state management for form data and page transitions, with automatic focus on the first input field when the page changes. The component renders either a login or signup form based on the current page state, allowing users to switch between the two forms easily.

Uploaded by

ewrgirlfaria
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React, { useState, useRef, useEffect } from 'react';

const AuthPages = () => {


const [currentPage, setCurrentPage] = useState('login');
const [formData, setFormData] = useState({
email: '',
password: '',
name: '',
confirmPassword: '',
role: ''
});
const inputRef = useRef(null);

useEffect(() => {
// Automatically focus the first input when the page changes
if (inputRef.current) {
inputRef.current.focus();
}
}, [currentPage]);

const handleInputChange = (e) => {


const { name, value } = e.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
};

const handleSubmit = (e) => {


e.preventDefault();
console.log('Form submitted:', formData);
};

const LoginForm = () => (


<form onSubmit={handleSubmit} className="space-y-4 w-full">
<input
ref={inputRef}
type="email"
name="email"
value={formData.email}
onChange={handleInputChange}
placeholder="Email"
className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2
focus:ring-blue-500"
required
/>
<input
type="password"
name="password"
value={formData.password}
onChange={handleInputChange}
placeholder="Password"
className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2
focus:ring-blue-500"
required
/>
<button
type="submit"
className="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700"
>
Sign In
</button>
<div className="text-center">
<button
type="button"
onClick={() => setCurrentPage('signup')}
className="text-blue-600 hover:underline"
>
Create Account
</button>
</div>
</form>
);

const SignupForm = () => (


<form onSubmit={handleSubmit} className="space-y-4 w-full">
<input
ref={inputRef}
type="text"
name="name"
value={formData.name}
onChange={handleInputChange}
placeholder="Full Name"
className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2
focus:ring-blue-500"
required
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleInputChange}
placeholder="Email"
className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2
focus:ring-blue-500"
required
/>
<select
name="role"
value={formData.role}
onChange={handleInputChange}
className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2
focus:ring-blue-500"
required
>
<option value="">Select Role</option>
<option value="author">Author</option>
<option value="reviewer">Reviewer</option>
<option value="reader">Reader</option>
</select>
<input
type="password"
name="password"
value={formData.password}
onChange={handleInputChange}
placeholder="Password"
className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2
focus:ring-blue-500"
required
/>
<input
type="password"
name="confirmPassword"
value={formData.confirmPassword}
onChange={handleInputChange}
placeholder="Confirm Password"
className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2
focus:ring-blue-500"
required
/>
<button
type="submit"
className="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700"
>
Sign Up
</button>
<div className="text-center">
<button
type="button"
onClick={() => setCurrentPage('login')}
className="text-blue-600 hover:underline"
>
Already have an account?
</button>
</div>
</form>
);

return (
<div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
<div className="w-full max-w-md bg-white p-6 rounded-lg shadow-md">
<h1 className="text-2xl font-bold text-center mb-6 text-blue-600">
{currentPage === 'login' ? 'Welcome Back' : 'Create Account'}
</h1>
{currentPage === 'login' ? <LoginForm /> : <SignupForm />}
</div>
</div>
);
};

export default AuthPages;

You might also like