LoginApp: Applying Layout and Refactoring Inputs

Published: November 17, 2025

After introducing a shared layout and reusable button component, I continued refining the LoginApp by applying the layout to more pages and simplifying form inputs.

To maintain consistency across screens, I wrapped both the login and registration pages in the AppLayout component. This ensures every form appears centered on the gradient background, inside the same styled container.

The form inputs shared a common structure — floating labels, peer-based styling, and focus transitions — so I extracted a reusable InputField component to simplify the markup and reduce repetition.

type Props = {
  label: string;
  type: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
            

This component handles layout, styling, and accessibility for each input. It’s now used for both the Username and Email fields in the registration form.

With InputField in place, I replaced the raw markup for Username and Email with declarative components:

<InputField
  label="Username"
  type="text"
  value={username}
  onChange={(e) => setUsername(e.target.value)}
/>
            

This makes the form easier to read and maintain. By centralizing layout and input logic, I reduce duplication, make future design changes easier and improve readability for myself and others.