1. Rejestracja konta użytkownika
Przygotuj formularz, który będzie służył do zakładania konta użytkownika. Niech formularz składa się z 3 pól:
- hasło
- potwierdź hasło
Logika, jaka za tym stoi powinna sprawdzać, czy wprowadzone hasło:
- zawiera co najmniej jedną małą literę
- zwiera co najmniej jedną dużą literę
- zawiera co najmniej jedną liczbę
- zawiera co najmniej jeden znak specjalny (np. # $ %)
- jego długość to co najmniej 8 znaków
Jeśli hasło nie spełnia poniższych kryteriów wyświetl o tym informacje w postaci:
v hasło zawiera co najmniej jedną małą literę
x hasło nie zawiera przynajmniej jednej dużej litery
v hasło zawiera co najmniej jedną liczbę
x hasło nie zawiera znaków specjalnych
x hasło powinno składać się z co najmniej 8 znaków
Pole "potwierdź hasło" służy do sprawdzenia, czy w tym polu wprowadziliśmy takie samo hasło jak w polu poprzednim.
Walidacja:
Po kliknięciu przycisku submit niech aplikacja sprawdzi, czy w bazie istnieje użytkownik o podanym adresie e-mail. Ponieważ nie mieliśmy jeszcze mockowania, to możemy zasymulować w aplikacji, że łączymy się za backendem i otrzymujemy odpowiedź, czyli np. wprowadzić gdzieś na sztywno taką informację w kodzie aplikacji.
Modyfikacja:
Do formularza stworzonego w poprzednim kroku dodaj walidację adresu e-mail zaraz po wyjściu z pola (blur). Jeśli taki adres e-mail istnieje już w bazie (podobnie jak wyżej), to niech pola z hasłem będą wyłączone (disabled), a gdy wprowadzi się poprawny format adresu e-mail, to niech się odblokują.
2. Formularz krokowy
Stwórz formularz, który będzie posiadał swój stan i będzie dzielił się na 3 kroki
W kroku pierwszym twórz pola:
- imię
W drugim kroku:
- wiek
W trzecim kroku:
- zainteresowania (lista wyboru)
Po przejściu kroku 3 wyświetl ekran z podsumowaniem, czyli wyświetl wprowadzone dane oraz dodaj przycisk submit, który "wyśle" wprowadzone dane.
Modyfikacja
Przygotuj stan początkowy formularza w przypadku, gdy ktoś będzie chciał modyfikować już poprzednio wprowadzone dane tzn. po załadowaniu komponentu niech komponent posiada już wypełnione pola imię, wiek i zainteresowania.
3. Formularz z captcha
Przygotuj formularz z kilkoma polami (wg uznania). Następnie dodaj pole sprawdzenie Captcha - może być reCaptcha (https://www.google.com/recaptcha/about/)
Powodzenia!
1. Rejestracja konta użytkownika
Przygotuj formularz, który będzie służył do zakładania konta użytkownika. Niech formularz składa się z 3 pól:
- hasło
- potwierdź hasło
Logika, jaka za tym stoi powinna sprawdzać, czy wprowadzone hasło:
- zawiera co najmniej jedną małą literę
- zwiera co najmniej jedną dużą literę
- zawiera co najmniej jedną liczbę
- zawiera co najmniej jeden znak specjalny (np. # $ %)
- jego długość to co najmniej 8 znaków
Jeśli hasło nie spełnia poniższych kryteriów wyświetl o tym informacje w postaci:
v hasło zawiera co najmniej jedną małą literę
x hasło nie zawiera przynajmniej jednej dużej litery
v hasło zawiera co najmniej jedną liczbę
x hasło nie zawiera znaków specjalnych
x hasło powinno składać się z co najmniej 8 znaków
Pole "potwierdź hasło" służy do sprawdzenia, czy w tym polu wprowadziliśmy takie samo hasło jak w polu poprzednim.
Walidacja:
Po kliknięciu przycisku submit niech aplikacja sprawdzi, czy w bazie istnieje użytkownik o podanym adresie e-mail. Ponieważ nie mieliśmy jeszcze mockowania, to możemy zasymulować w aplikacji, że łączymy się za backendem i otrzymujemy odpowiedź, czyli np. wprowadzić gdzieś na sztywno taką informację w kodzie aplikacji.
Modyfikacja:
Do formularza stworzonego w poprzednim kroku dodaj walidację adresu e-mail zaraz po wyjściu z pola (blur). Jeśli taki adres e-mail istnieje już w bazie (podobnie jak wyżej), to niech pola z hasłem będą wyłączone (disabled), a gdy wprowadzi się poprawny format adresu e-mail, to niech się odblokują.
2. Formularz krokowy
Stwórz formularz, który będzie posiadał swój stan i będzie dzielił się na 3 kroki
W kroku pierwszym twórz pola:
- imię
W drugim kroku:
- wiek
W trzecim kroku:
- zainteresowania (lista wyboru)
Po przejściu kroku 3 wyświetl ekran z podsumowaniem, czyli wyświetl wprowadzone dane oraz dodaj przycisk submit, który "wyśle" wprowadzone dane.
Modyfikacja
Przygotuj stan początkowy formularza w przypadku, gdy ktoś będzie chciał modyfikować już poprzednio wprowadzone dane tzn. po załadowaniu komponentu niech komponent posiada już wypełnione pola imię, wiek i zainteresowania.
3. Formularz z captcha
Przygotuj formularz z kilkoma polami (wg uznania). Następnie dodaj pole sprawdzenie Captcha - może być reCaptcha (https://www.google.com/recaptcha/about/)
Powodzenia!
1. Rejestracja konta użytkownika
Przygotuj formularz, który będzie służył do zakładania konta użytkownika. Niech formularz składa się z 3 pól:
- hasło
- potwierdź hasło
Logika, jaka za tym stoi powinna sprawdzać, czy wprowadzone hasło:
- zawiera co najmniej jedną małą literę
- zwiera co najmniej jedną dużą literę
- zawiera co najmniej jedną liczbę
- zawiera co najmniej jeden znak specjalny (np. # $ %)
- jego długość to co najmniej 8 znaków
Jeśli hasło nie spełnia poniższych kryteriów wyświetl o tym informacje w postaci:
v hasło zawiera co najmniej jedną małą literę
x hasło nie zawiera przynajmniej jednej dużej litery
v hasło zawiera co najmniej jedną liczbę
x hasło nie zawiera znaków specjalnych
x hasło powinno składać się z co najmniej 8 znaków
Pole "potwierdź hasło" służy do sprawdzenia, czy w tym polu wprowadziliśmy takie samo hasło jak w polu poprzednim.
Walidacja:
Po kliknięciu przycisku submit niech aplikacja sprawdzi, czy w bazie istnieje użytkownik o podanym adresie e-mail. Ponieważ nie mieliśmy jeszcze mockowania, to możemy zasymulować w aplikacji, że łączymy się za backendem i otrzymujemy odpowiedź, czyli np. wprowadzić gdzieś na sztywno taką informację w kodzie aplikacji.
Modyfikacja:
Do formularza stworzonego w poprzednim kroku dodaj walidację adresu e-mail zaraz po wyjściu z pola (blur). Jeśli taki adres e-mail istnieje już w bazie (podobnie jak wyżej), to niech pola z hasłem będą wyłączone (disabled), a gdy wprowadzi się poprawny format adresu e-mail, to niech się odblokują.
2. Formularz krokowy
Stwórz formularz, który będzie posiadał swój stan i będzie dzielił się na 3 kroki
W kroku pierwszym twórz pola:
- imię
W drugim kroku:
- wiek
W trzecim kroku:
- zainteresowania (lista wyboru)
Po przejściu kroku 3 wyświetl ekran z podsumowaniem, czyli wyświetl wprowadzone dane oraz dodaj przycisk submit, który "wyśle" wprowadzone dane.
Modyfikacja
Przygotuj stan początkowy formularza w przypadku, gdy ktoś będzie chciał modyfikować już poprzednio wprowadzone dane tzn. po załadowaniu komponentu niech komponent posiada już wypełnione pola imię, wiek i zainteresowania.
3. Formularz z captcha
Przygotuj formularz z kilkoma polami (wg uznania). Następnie dodaj pole sprawdzenie Captcha - może być reCaptcha (https://www.google.com/recaptcha/about/)
Powodzenia!
Uwaga! Istnieje nowa wersja tego Kursu - Szkoła Reacta 2.0. Sprawdź, czy program z tego kursu jest dla Ciebie odpowiedni - jeśli pracujesz z legacy aplikacjami, to na pewno skorzystasz. Jeśli interesuje Cię bardziej nowoczesny stack, wybierz Szkołę Reacta 2.0.
- Nauczysz się Reacta krok po kroku, od podstaw aż po zaawansowane zagadnienia
- Zdobędziesz umiejętności potrzebne do awansu i podwyżki
- Jeśli dopiero zaczynasz karierę w IT, to zmienisz pracę na lepszą - zdobędziesz wymagane doświadczenie
.jpg){kind=avatar}
Jestem Senior Fullstack Developerem specjalizującym się w tworzeniu aplikacji internetowych w stacku TypeScript, React, Next.js, NestJS. Realizowałem wiele ciekawych i wymagających projektów m. in. dla znanej akademii filmowej z USA oraz startupów z Doliny Krzemowej.
Od 8 lat dzielę się swoją wiedzą jako ekspert na konferencjach i trener IT. Prowadzę też szkolenia dla programistów w Bottega IT Minds, firmie która zrzesza najlepszych ekspertów IT. Jestem także pomysłodawcą i założycielem Szkoły Reacta oraz kanału Web Amigos na YouTube.
Na codzień oprócz kodowania, zajmuję się weryfikacją IT, czyli w trakcie procesów rekrutacyjnych sprawdza poziom wiedzy kandydatów na stanowiska Junior, Regular, jak i Senior developerów.