import TradeHubLogo from '@/app/ui/tradehub-logo';
import LoginForm from '@/app/ui/login-form';

export default function LoginPage() {
  return (
    <main className="flex items-center justify-center md:h-screen">
      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
        <div className="flex h-20 w-full items-end rounded-lg bg-sky-700 p-3 md:h-36">
          <div className="w-32 text-white md:w-36">
            <TradeHubLogo />
          </div>
        </div>
        <LoginForm />
      </div>
    </main>
  );
}

The LoginForm component plays the primary role here. We will reach it out later.

If you take a trip on the following route http://localhost:3000/login, you should be able to see a similar view.

In Practice

Everything was clear?

Section 7. Chapter 2

Course Content

Next.js 14

1. Introduction

Welcome Project Overview Course Prerequisites How the Course Works

2. Basic Concepts

3. Pages and Layouts

How Routing Works Challenge: Creating Page Creating a Common Layout Navigation Optimization Creating Active Links

4. Deployment and Database

Accounts Set Up Project Deployment Project Database Data Population

5. Working with Data

6. Advanced Features

Invoices Page Search Functionality Pagination Server Actions Creating Item Updating Item Deleting Item Challenge: Form Validation

7. Authentication

Next.js 14

Login Route

Back to the Project

Let's create a route /login and paste there the following code:

app/login/page.tsx

import TradeHubLogo from '@/app/ui/tradehub-logo';
import LoginForm from '@/app/ui/login-form';

export default function LoginPage() {
  return (
    <main className="flex items-center justify-center md:h-screen">
      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
        <div className="flex h-20 w-full items-end rounded-lg bg-sky-700 p-3 md:h-36">
          <div className="w-32 text-white md:w-36">
            <TradeHubLogo />
          </div>
        </div>
        <LoginForm />
      </div>
    </main>
  );
}

The LoginForm component plays the primary role here. We will reach it out later.

If you take a trip on the following route http://localhost:3000/login, you should be able to see a similar view.

In Practice

Everything was clear?

Section 7. Chapter 2