Lekce 22 - Databázový klient v React - Komponenta přihlašovací stránky

V minulé lekci, Databázový klient v React - Zobrazení přihlášeného uživatele, jsme vytvořili provider k našemu kontextu a zobrazili email aktuálně přihlášeného uživatele v hlavičce stránky.

V dnešním React tutoriálu si vytvoříme přihlašovací stránku, na které se přihlásíme za nově registrovaného uživatele. Tohoto uživatele také pak uvidíme vypsaného v záhlaví stránky díky připravenému kontextu.

Komponenta přihlašovací stránky

Tvorba stránky s přihlašovacím formulářem bude velmi podobná tvorbě té s registrací. Ve složce src/ si vytvoříme novou podsložku login/. V té pak vytvoříme nový soubor LoginPage.jsx.

Importy

Na začátku souboru jako vždy prvně importujeme potřebné komponenty a hooky:

import FlashMessage from "../components/FlashMessage";
import InputField from "../components/InputField";
import { useEffect, useState } from "react";
import { useSession } from "../contexts/session";
import { useNavigate } from "react-router-dom";
import { apiPost, HttpRequestError } from "../utils/api";

JSX

Na stránce bude opět formulář s

...konec náhledu článku...
Pokračuj dál