Part 61: Enhancing Our Sign-In Page with React Functionality

[Pages] Authentication

[Pages] Authentication

In this blog post, we'll take our previously designed Sign-In page and add some essential functionality using React. By the end of this tutorial, our form will manage input fields as controlled components, handle form submissions, and perform basic validation.

Step 1: Setting Up State Management

To begin with, we need to manage our form data using React's state management. This involves creating state variables for each input field.

Managing State with useState

We'll create state variables for both the email and password fields using the useState hook.

// pages/sign-in.js

import { useState } from 'react';
import Button from '../components/Button';
import Field from '../components/Field';
import Input from '../components/Input';
import Page from '../components/Page';

function SignInPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('should submit:', { email, password });
  };

  return (
    <Page title="Sign In">
      <form onSubmit={handleSubmit}>
        <Field label="Email">
          <Input type="email" required value={email}
            onChange={(event) => setEmail(event.target.value)}
          />
        </Field>
        <Field label="Password">
          <Input type="password" required value={password}
            onChange={(event) => setPassword(event.target.value)}
          />
        </Field>
        <Button type="submit">
          Sign In
        </Button>
      </form>
    </Page>
  );
}

export default SignInPage;

Explanation:

• State Variables: We've introduced email and password state variables to store the user's input.

• Controlled Components: The value and onChange props in the Input component ensure that each input field is controlled by React.

Step 2: Updating the Input Component

Our custom Input component needs to accept additional props to handle controlled inputs properly.

// components/Input.js

function Input({ type, required, value, onChange }) {
  return (
    <input type={type} required={required}
      value={value} onChange={onChange}
      className="border rounded px-3 py-1 w-80"
    />
  );
}

export default Input;

Explanation:

• Props Handling: The Input component now accepts required, value, and onChange props to manage form inputs effectively.

Step 3: Handling Form Submission

Next, let's add functionality to handle form submissions. We'll log the input values to the console for now.

Handling Submit

// pages/sign-in.js

const handleSubmit = (event) => {
  event.preventDefault();
  console.log('should submit:', { email, password });
};

Explanation:

• Prevent Default Behavior: We use event.preventDefault() to stop the default form submission, allowing us to handle it manually.

• Logging Values: Currently, we're logging the email and password to verify that our state variables are updating correctly.

Step 4: Adding Validation

Lastly, we'll ensure that our input fields are validated before submission.

Validation in React

By adding a required prop to our Input component, we enforce that users must enter a value before submission.

• Email Validation: The browser automatically validates the email format due to the type="email" attribute.

• Required Fields: Both the email and password fields are marked as required, preventing submission if they're empty.

Conclusion

With these enhancements, our Sign-In page is now interactive and user-friendly. We've integrated state management with React hooks, handled form submissions, and added basic validation. In the next phase, we'll connect our form to an API to perform the actual login process. Stay tuned for more exciting updates!