Next.js 13 w Praktyce: Button SignIn i SignUp

0:01Jeżeli chodzi o komponent z dwoma guzikami

0:04to logowania się i to zakładania konta to chciałbym żeby

0:08logika była taka, że jeżeli użytkownik jest zalogowany to chcemy mu

0:12pokazać tutaj guzik z jego kontem z możliwością modyfikacji jego konta.

0:19I tak się składa, że CLR dostarcza nam komponent o nazwie User

0:23button, który pozwala nam wchodzić w interakcje z kontem danego użytkownika.

0:31Użytkownik ma możliwość tam zmiany różnych

0:34opcji, dlatego teraz wykorzystamy ten komponent.

0:37Zacznijmy od tego, że będziemy mieć tutaj osobnego diva w tej nawigacji.

0:42I tutaj generalnie rzecz biorąc chcemy mieć dwie rzeczy.

0:45Na pewno chcemy sprawdzić, czy użytkownik jest zalogowany, czyli jest signed in.

0:53Zrobiłem sobie dwukrotnie dwukropek i jest git.

0:58Musisz skądś pochodzić.

0:59Generalnie rzecz biorąc kler wykorzystuje do tego huki.

1:03I w tym momencie potrzebujemy Chucka.

1:06Juz uzyl const i signed in.

1:11I tutaj jako Chuck użyjemy juz use.

1:14To jak widzisz pochodzi z kleryka.

1:17I jest jeden problem.

1:19Mianowicie dostaniemy.

1:23Może najpierw sobie montujemy to wszystko? I zobacz.

1:27A tamten to juz Józef from the server to on the client.

1:31Czyli jak wiesz domyślnie komponenty w next są komponentami po stronie serwera.

1:38Dlatego prawdopodobnie tutaj nasze guziki dobrze byłoby zrobić jako osobny

1:43komponent, jako komponent po stronie klienta.

1:46I to sobie teraz właśnie zrobimy.

1:48Stworzymy.

1:49W katalogu głównym zrobimy sobie katalog komponent.

1:55Tutaj stworzymy nowy komponent.

1:58Niech to będzie komponent o nazwie Homepage Buttons tez X.

2:05I tutaj już będziemy mogli sobie użyć

2:07naszego komponentu Homepage patrząc czy eksport.

2:11Home Page buttons.

2:13Niech to będzie zwyczajna funkcja.

2:17Tutaj w środku będziemy potrzebowali

2:19logiki naszej funkcji, czyli kopiujemy użycie naszego kółka.

2:24Wyrzucimy to stąd? Kopiujemy.

2:26Tutaj.

2:27Generalnie rzecz biorąc musimy oczywiście

2:29zamienić ten komponent w komponent po stronie klienta, czyli w Next.

2:33Robimy to za pomocą US Klient.

2:36Zapiszemy sobie.

2:37Musimy zaimportować znowu sobie tego hooka tutaj.

2:41I tutaj od razu postaramy się wrzucić ten nasz nowy komponent Homepage Buttons.

2:49Zapiszemy to sobie.

2:50Ten kupisz możemy stąd wrzucić.

2:52I tak na razie nie mamy żadnych, żadnych

2:54elementów, które tutaj sprawia nam problemy.

2:57Musimy sobie coś zrzucić z tego komponentu.

3:00Czy zrobimy sobie return?

3:02I otworzymy.

3:04Nawet teraz potrzebujemy TÜV, który będzie

3:06wydawał nasze, nasze batony, nasze linki tutaj.

3:09Teraz w środku chcemy otworzyć logikę dla

3:13nas, żeby sprawdzić, czy użytkownik jest zalogowany.

3:16Jeżeli jest zalogowany,

3:17to chcemy mu zwrócić komponent w postaci takiej, że mamy tutaj

3:22jeden link to będzie link to do strony Dashboard.

3:28Tak to jest user jest zalogowany, chcemy

3:30mu pokazać link do strony Dashboard, czyli możemy sobie spokojnie sobie zrobić.

3:35Zobacz, mamy statycznie typowane linki, możemy zaznaczyć dashboard i podpisać też.

3:42Dashboard to będzie jeden link, który user będzie miał dostępny oczywiście tutaj.

3:47W drugim przypadku na razie sobie zrobimy, żeby nie mieć tutaj błędu.

3:51Natomiast jako że nasz user nie jest

3:54zalogowany na chwilę obecną tutaj nie dostajemy jeszcze nic.

3:57Natomiast jeszcze wróćmy do tego i drugim

4:00komponentem, który będziemy chcieli pokazać to jest User Button i to jest

4:04komponent, który pochodzi bezpośrednio z Clarka.

4:07I jeżeli chodzi o prop, który chcemy mu

4:10przekazać, to chcemy mu powiedzieć after sign na odwal, żebyśmy byli przekierowani

4:15na na tą samą stronę, którą jesteśmy tutaj.

4:18Generalnie rzecz biorąc teraz już po

4:19zalogowaniu się powinniśmy mieć te dwa guziki widoczne.

4:22Natomiast jeszcze sprawdźmy sobie tutaj, co będziemy wyświetlać

4:26w momencie, w którym użytkownik nie będzie nie będzie zalogowany.

4:32W tym momencie chcemy wyświetlić dwie rzeczy.

4:34Chcemy wyświetlić sobie tutaj skopiuje ten link dwa linki.

4:37Jeden niech będzie do założenia konta

4:39Czytelnik to będzie sign up i tutaj możemy sobie popisać.

4:44Oczywiście bez literówki od razu dostajemy ostrzeżenie.

4:47Drugi link, który będzie tutaj, to musimy zrobić link do Sign in czyli Slash Sign.

4:55Zapisujemy to sobie. Sprawdźmy co tutaj dostajemy.

4:58Sign napis Not accessibility.

5:00Tutaj mamy problem z malowaniem, że nie ma takich lutów.

5:04To jest po prostu problem z tym, że

5:06ta funkcjonalność statystycznie typowanych lutów jest cały czas w fazie beta.

5:11Bo tak jak widzisz mamy tutaj dostępne tylko i wyłącznie te normalne luty.

5:15Nie mamy tych cache.

5:16Jest to spowodowane tym, że po prostu

5:19mamy jeszcze catch on root, dlatego możemy to obejść.

5:22Na chwilę obecną jesteśmy pewni, że te root istnieją.

5:25Zapiszemy. Już pojawiły się nam dwa przyciski na

5:28naszej stronie, które prowadzą do odpowiednich miejsc.

5:30Mamy stronę sign up, mamy stronę Sign in.

5:34Teraz sprawdźmy sobie logikę, czy rzeczywiście te przyciski zamienią się na

5:38dashboard i na User button jeżeli się logujemy w naszej aplikacji.

5:42W naszym przypadku przechodzimy do Sign in i tutaj wpisujemy nazwę użytkownika,

5:49który jest w naszym systemie i hasło Logujemy się.

5:55Zostajemy przeniesieni na dashboard.

5:56Natomiast my nie chcemy sprawdzić też, bo

5:58my chcemy sprawdzić jak wygląda teraz nasz home.

6:01Jeżeli mamy aktywną sesję zobacz

6:03mamy tutaj zera, możemy sobie zrobić Manage account i

6:08w tym momencie możemy sobie sprawdzić aktywne sesje.

6:10Możemy te sesje wyłączyć, możemy change

6:12username, możemy nawet zmienić zdjęcie profilowe naszego użytkownika.

6:17No to już karanie na chwilę obecną ustawie i mamy Kontynuuj finish.

6:22Zdjęcie zostało datowane.

6:23Nasz użytkownik od razu wygląda tak jak powinien wyglądać.

6:27I teraz jeszcze co powinniśmy zrobić, to

6:29powinniśmy sobie to tutaj fajnie wystylizować.

6:31Czyli proste i niech to będzie flex items center i jakiś gap ustawimy na 4.

6:42I jeszcze lepiej tutaj wygląda.

6:43Możemy się wylogować.

6:46Zostaniemy przeniesieni na tę stronę.

6:48Guziki też są od siebie usunięte.

6:50Tutaj mamy zakładanie konta.

6:52Tutaj mamy sign in, czyli znowu logowanie się do naszego użytkownika.