login page with dummy api

backend/docker-compose.yml

@@ -2,6 +2,6 @@ services:
  web:
  build: .
  ports:
- - "8000:8000"
+ - '8000:8000'
  env_file:
  - .env

frontend/app/(auth)/login/page.tsx

@@ -1,3 +1,57 @@
+'use client'
+
+import { FormEvent } from 'react'
+import { useRouter } from 'next/navigation'
+
 export default function LoginPage() {
- return <p>Login page</p>
+ const router = useRouter()
+
+ async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+ event.preventDefault()
+
+ const formData = new FormData(event.currentTarget)
+ const username = formData.get('username')
+ const password = formData.get('password')
+
+ const response = await fetch(
+ 'https://dummyjson.com/auth/login',
+ {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ username,
+ password,
+ }),
+ },
+ )
+
+ if (response.ok) {
+ alert('Login successful')
+ router.push('/')
+ } else {
+ throw new Error('Failed to login')
+ }
+ }
+
+ return (
+ <form onSubmit={handleSubmit}>
+ <input
+ type='text'
+ name='username'
+ placeholder='Username'
+ value='kminchelle'
+ required
+ />
+ <input
+ type='password'
+ name='password'
+ placeholder='Password'
+ value='0lelplR'
+ required
+ />
+ <button type='submit'>Login</button>
+ </form>
+ )
 }

frontend/app/page.tsx

@@ -49,7 +49,10 @@ export default function Home() {
  <h2>
  Docs <span>-&gt;</span>
  </h2>
- <p>Find in-depth information about Next.js features and API.</p>
+ <p>
+ Find in-depth information about Next.js features and
+ API.
+ </p>
  </a>
 
  <a
@@ -61,7 +64,10 @@ export default function Home() {
  <h2>
  Learn <span>-&gt;</span>
  </h2>
- <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
+ <p>
+ Learn about Next.js in an interactive course
+ with&nbsp;quizzes!
+ </p>
  </a>
 
  <a
@@ -86,7 +92,8 @@ export default function Home() {
  Deploy <span>-&gt;</span>
  </h2>
  <p>
- Instantly deploy your Next.js site to a shareable URL with Vercel.
+ Instantly deploy your Next.js site to a shareable URL
+ with Vercel.
  </p>
  </a>
  </div>