react register and login page example

react

Here is an example of how you might create a simple login and registration page using React:

import React, {useState} from 'react';

const LoginPage = () => {
    const [formState, setFormState] = useState({
        username: '',
        password: '',
        confirmPassword: '',
        isRegistering: false,
    });

    const handleInputChange = (event) => {
        const {name, value} = event.target;
        setFormState((prevState) => ({...prevState, [name]: value}));
    };

    const handleFormSubmit = (event) => {
        event.preventDefault();

        if (formState.isRegistering) {
            // handle registration
        } else {
            // handle login
        }
    };

    const handleToggleForm = () => {
        setFormState((prevState) => ({...prevState, isRegistering: !prevState.isRegistering}));
    };

    return (
        <form onSubmit={handleFormSubmit}>
            <label htmlFor="username">Username:</label>
            <input
                type="text"
                name="username"
                id="username"
                value={formState.username}
                onChange={handleInputChange}
            />
            <br/>
            <label htmlFor="password">Password:</label>
            <input
                type="password"
                name="password"
                id="password"
                value={formState.password}
                onChange={handleInputChange}
            />
            {formState.isRegistering && (
                <>
                    <br/>
                    <label htmlFor="confirmPassword">Confirm Password:</label>
                    <input
                        type="password"
                        name="confirmPassword"
                        id="confirmPassword"
                        value={formState.confirmPassword}
                        onChange={handleInputChange}
                    />
                </>
            )}
            <br/>
            <button type="submit">{formState.isRegistering ? 'Register' : 'Log In'}</button>
            <button type="button" onClick={handleToggleForm}>
                {formState.isRegistering ? 'Log In' : 'Register'}
            </button>
        </form>
    );
};

export default LoginPage;

In this example, we use a state variable to track the form data and whether the user is currently in the login or registration form. The handleInputChange function is used to update the form state when the user types in the input fields, and the handleFormSubmit function is used to handle the form submission. The handleToggleForm function is used to switch between the login and registration forms.

This is just one way to implement a login and registration page using React, and there are many other ways you can do it as well. You may want to consider adding additional features such as error handling, password validation, and secure authentication.