LoginApp: Adding Form State and Input Handling

Published: October 17, 2025

After setting up the registration form structure, I wanted to start refining the frontend and making the form more interactive. In this stage, I focused on layout improvements and added state handling for the password fields.

First, I reorganized the layout using Flexbox:

• flex flex-col allows stacking future elements vertically.
• items-center keeps everything centered.
• gap-4 provides clean spacing between elements without manually adding margins.

I also made the card more responsive by using sm:p-6, so it wouldn’t feel cramped on smaller screens. This step wasn’t about changing the visual design; it was about preparing the layout to grow smoothly as new elements are added.

Next, I improved input handling on both the Login and Register pages by adding the built-in required attribute to each input field. This prevents users from submitting empty forms and provides instant browser feedback.

To prepare for password validation, I began tracking user input using React state. React doesn’t automatically remember what users type, so I used useState to store and update the password and confirm password fields. This makes the inputs controlled components, meaning React keeps their values in sync as the user types:

const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
            

With this in place, the form now responds to user input in real time. It sets the foundation for upcoming features like password matching, real-time feedback, and conditional submission.