LoginApp: Building the Registration Form

Published: October 10, 2025

After refining the login form in the previous post, the next step was to add a registration page. I wanted it to feel like a natural extension of the login page, both in layout and interaction, while introducing the additional inputs needed to create an account.

I began by creating a new /register route and used the same layout as the login form:

export default function RegisterPage() {
  return (
    <main className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-400 to-purple-400 font-sans">
      <div className="bg-white rounded-xl shadow-lg w-full max-w-md text-center">
        <h1 className="text-2xl font-bold text-blue-500 mb-6">
          Register
        </h1>
      </div>
    </main>
  );
}
            

Since I already had Username and Password fields in the login form, I reused the same floating label pattern for consistent styling. The only new fields on the registration page were Email and Confirm Password.

Here’s the structure I used for each input:

<div className="relative mb-4">
  <input
    type="text"
    placeholder=" "
    className="peer w-full border rounded-md p-2 pt-4 text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-400"
  />
  <label className="absolute left-3 -top-2 bg-white px-1 text-blue-500 text-sm transition-all peer-placeholder-shown:top-4 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-base peer-focus:-top-2 peer-focus:text-blue-500 peer-focus:text-sm">
    Username
  </label>
</div>
            

I used this same structure for all form fields, changing only the type and label for each one:

• Username (text)
• Email (email)
• Password (password)
• Confirm Password (password)

By setting the correct type attributes (email and password), I enabled built-in HTML validation. This prevents invalid data from being submitted before I add real backend validation. It's not secure by itself, but it's a good first layer of form handling.

The registration form now also includes:

• A Submit button (Register)
• A link back to the Login page