Blok 4 · rozdział 10
Konta użytkowników — Breeze
Rejestrację i logowanie dodasz gotowym szkieletem Breeze, w widokach Blade.
Haseł nie piszesz od zera. Z PAI wiesz już, że w bazie zostaje skrót, a nie hasło otwartym tekstem.
Tutaj zobaczysz, jak Laravel trzyma sesję i jak działa middleware auth.
Po tym rozdziale powinieneś umieć
- doinstalować Breeze ze stosem
bladedo istniejącego projektu; - założyć konto, wylogować się i zalogować ponownie;
- pokazać w menu inne linki gościowi i zalogowanemu;
- wskazać plik tras logowania i powiedzieć, czego w Breeze nie przepisujesz.
1. Po co Breeze
Konto to powtarzalny kawałek: formularz, walidacja e-maila, skrót hasła, sesja, wylogowanie.
Laravel Breeze generuje te pliki do Twojego projektu. Są Twoje — leżą w app i resources/views, nie są zamkniętą usługą w chmurze.
2. Instalacja stosu Blade
Serwer artisan serve na czas instalacji zatrzymaj (Ctrl+C). W katalogu korona:
composer require laravel/breeze --dev
php artisan breeze:install blade
php artisan migrate
Gdy instalator pyta o testy albo ciemny motyw, możesz odmówić — na tym kursie nie są potrzebne.
migrate dopisze kolumny, których Breeze oczekuje przy użytkowniku (m.in. weryfikacja e-maila w schemacie, nawet jeśli maili nie wysyłamy).
resources/views/layouts/app.blade.php, layouts/guest.blade.php
i nawigację. Twoje layouts/korona.blade.php nie powinno zostać nadpisane.
Strony szczytów dalej mogą rozszerzać korona. W podrozdziale 4 dopniesz do nich linki konta
albo przeniesiesz menu. Wybierz jedno i trzymaj się go do końca bloku.
3. Node i Tailwind
Widoki Breeze używają klas Tailwind. Trzeba je raz skompilować:
npm install
npm run buildPotem znowu:
php artisan serve
Wejdź na /register, załóż konto (prawdziwy kształt e-maila, hasło zgodne z podpowiedzią formularza),
zobacz kokpit /dashboard, wyloguj się, zaloguj na /login.
public/build.
To nie jest aplikacja w React. Uczeń nie dopisuje tu JavaScriptu.
Gdy później zmienisz klasy w widoku Breeze i wygląd stoi w miejscu, w drugim terminalu uruchom npm run dev i zostaw go obok artisan serve.
Reset hasła jest w kodzie, ale wymaga poczty. Na kursie go nie konfigurujemy. Zaliczenie obejmuje rejestrację, logowanie i wylogowanie.
4. Menu i @auth
W układzie korona, w nawigacji:
@auth
<a href="{{ route('dashboard') }}">Konto</a>
<form method="post" action="{{ route('logout') }}">
@csrf
<button type="submit">Wyloguj</button>
</form>
@else
<a href="{{ route('login') }}">Logowanie</a>
<a href="{{ route('register') }}">Rejestracja</a>
@endauth
W nawigacji Breeze (resources/views/layouts/navigation.blade.php) dopisz link do listy:
route('szczyty.index'). Po zalogowaniu wrócisz wtedy do szczytów bez wpisywania adresu.
Route::middleware('auth').
Style Breeze i korona.css mogą stać obok siebie. Do układu app możesz dopisać
<link rel="stylesheet" href="{{ asset('css/korona.css') }}">,
jeśli przeniesiesz listę szczytów na @extends('layouts.app').
Prostszą drogą na 8 godzin jest zostawić szczyty w układzie korona i mieć w nim linki logowania.
5. Co wolno przeczytać
Otwórz routes/auth.php i znajdź trasę logowania oraz wylogowania. Otwórz kontroler, który przyjmuje POST logowania, i znajdź miejsce sprawdzenia hasła. Nie przepisuj tych klas.
| Zostawiasz z Breeze | Dopisujesz sam w rozdziale 11 |
|---|---|
| Rejestracja, logowanie, wylogowanie, profil | Tabela zdobycia, formularz na karcie, strona postępu |
password ma być długim skrótem, nie hasłem, które wpisałeś w formularzu.
To ten sam pomysł co password_hash z PAI. Breeze woła mechanizm Laravela przy rejestracji.
Gdy da się założyć konto, wylogować i zalogować:
git add .
git status
git commit -m "Konta Breeze"Przed commitem git status nie pokazuje .env. Katalog node_modules też zostaje poza historią.