# Projekt sklepu język ts ## Wymagania funkcyjne Użytkownik anonimowy (bez logowania) - przeglądanie zawartości sklepu (towary) - proste wyszukiwanie po nazwie/opisie towaru Użytkownik posiadający konto - utworzenie nowego konta (podanie loginu/hasła) - możliwość zalogowania się - w trakcie przeglądania zawartości - możliwość dodania towaru do koszyka - podsumowanie zamówienia z koszyka Administrator - dodawanie/modyfikacja/usuwanie towarów w sklepie - przeglądanie listy użytkowników - przeglądanie listy złożonych/otwartych zamówień ## Widoki ### Landing page - Wyszukiwarka - Lista produktów (zdjęcie, tytuł, opis, cena) - Przycisk logowanie/moje konto - Koszyk ### Logowanie - Email - Hasło ### Rejestracja - Email - Hasło x2 - Imie Nazwisko - Adres ### Koszyk - Lista produktów (zdjęcie, tytuł, opis, cena) - Podsumowanie ceny - Przycisk "Kup" / "Wróć do zakupów" ### Płatności - Wybór metody platności - Wybór adresu(zapisany na koncie/inne) ### Ustawienia konta - Edycja pól z rejestracji - Historia zamówień ### Widok administratora - 3 przyciski #### Lista towarów - Przycisk dodaj nowy towar - Lista istniejących produktów, obok każdego przycisk edytuj(po kliknięciu w przyscisk edytuj pokazuje się formularz do edycji) i usuń ##### Formularz edycji produktu - Formularz z zdjęcie, tytuł, opis, cena - przycisk zapisz anuluj #### Lista użytkowników - Użytkownik: Mail, Imie, Nazwisko, Adres, pokaż liste zamówień #### Lista zamówień - Zamówienie: nazwa użytkownika (+ odnośnik do jego danych), lista produktów, data, otwarte/zamknięte ## Feature'y opcjonalne - Potwierdzenie maila przy rejestracji - Zmiana liczby produktów w koszyku - API stripe do płatności - Sortowanie rekordów po różnych polach w panelu admina ## Projekty intefejsów ### Ekran główny ![](https://i.imgur.com/Qg4GI9q.png) Po scrollowaniu ![](https://i.imgur.com/ZnkqAoK.png) ### Widok pojedynczego produktu - Taki sam ekran do edytowania/dodawania produktów przez admina? ![](https://i.imgur.com/XqkHhfR.png) ### Login ![](https://i.imgur.com/Psnj0wK.png) ### Rejestracja ![](https://i.imgur.com/4ayEKap.png) ### Koszyk - Jeśli w koszyku jest dużo zamówień, to czy kafelek "Do zapłaty" też jest na górze? Wtedy trzeba będzie scrollować sporo do góry, żeby móc przejść do kasy. Może lepiej listować produkty bez zdjęcia (lub z miniaturką zdjęcia), tj. nazwa, ilość, cena, usuń. Wtedy każdy produkt zmieści się w jednej linijce, a "Do zapłaty" może być na samym dole. ![](https://i.imgur.com/1hpCNp9.png) ### Płatności ![](https://i.imgur.com/vKbsVrv.png) ### Ustawienia konta ![](https://i.imgur.com/XHQmbVu.png) ![](https://i.imgur.com/rqnuysx.png) ### Portal admina - Jak wygląda logowanie do portalu admina? Tak samo jak logowanie użytkownika? ![](https://i.imgur.com/SFWRp59.png) ### Lista Użytkowników (admin) ![](https://i.imgur.com/pietmDp.png) ### Lista zamówień (admin) ![](https://i.imgur.com/0J8wqE1.png) ### Lista towarów(admin) ![](https://i.imgur.com/graQbxv.png) ## Tabele w SQL ### Users ``` ID - Number Email - String Password_Hash - String Name - String Surname - String Phone_Number - String Country - String City - String Street - String Postal Code - String OrderIDs - List of Numbers IsAdmin - Boolean ``` ### Products ``` ID - Number Name - String Price - Number Photo_Path - String Details - String ``` ### Baskets ``` UserID - Number ProductIDs - List of Numbers ``` ### Orders ``` ID - Number UserID - Number ProductIDs - List of Numbers OrderPlacementDate - Date OrderFullfilmentDate - Date ``` ## Endpointy ### `/` ##### GET - Sprawdź czy użytkownik jest zalogowany (middleware?) - Pobierz pierwsze n produktów z DB (posortowanych np. po cenie) // Chcemy dodać sortowanie do widoku użytkownika? - Wyświetl Landing page ### `/product/id=?` ##### GET - Pobierz info z DB i wyświetl ### `/login` ##### GET - Jeśli użytkownik zalogowany przekieruj do `/` - W p.p. wyświetl formularz logowania ##### POST - Porównaj hash hasła z zapisanym w DB. - Jeśli pasują - wydaj ciastko i przekieruj do `/` - W p.p. wyświetl wiadomość z błędem ### `/register` ##### GET - Jeśli użytkownik zalogowany przekieruj do `/` - W p.p. Wyświetl stronę ##### POST - Zweryfikuj dane - Jeśli poprawne, wyślij do DB i przkieruj do `/login` - Jeśli niepoprawne - wyświetl błąd ### `/logout` ##### GET - Wydaj nowe ciastko - Przekieruj do `/` ### `/basket` ##### GET - Jeśli użytkownik niezalogowany przekieruj do `/login` - Przeczytaj userId z ciastka i pobierz informacje o jego koszyku z DB - Wyświetl stronę ##### POST - Jeśli użytkownik niezalogowany przekieruj do `/login` - Zależnie od wybranej akcji: - Usuń produkt z koszyka - zaktualizuj DB i przekieruj do `/basket` - Kup - przekieruj do `/checkout` ### `/checkout` ##### GET - Jeśli użytkownik niezalogowany przekieruj do `/login` - Wyświetl formularz z płatnościami ##### POST - Jeśli użytkownik niezalogowany przekieruj do `/login` - Zweryfikuj dane płatności - Dodaj zamówienie do DB - Przekieruj do `/account/history` ### `/account` i `/account/info` ##### GET - Jeśli użytkownik niezalogowany przekieruj do `/login` - Zapytaj DB o dane użytkownika i wyświetl ##### POST - Jeśli użytkownik niezalogowany przekieruj do `/login` - Zaktualizuj DB o przekazane dane użytkownika i przekieruj do `/account/info` ### `/account/history` ##### GET - Jeśli użytkownik niezalogowany przekieruj do `/login` - Zapytaj DB o zamówienia użytkownika i wyświetl ### `/admin` ##### GET - Sprawdź czy użytkownik jest zalogowany i zapytaj DB czy jest adminem - Jeśli nie - przekieruj do `/login` lub `/` - Jeśli tak - wyświetl stronę z trzema przyciskami ### `/admin/users` ##### GET - Zweryfikuj uprawnienia admina i zapytaj DB o użytkowników ### `/admin/orders` ##### GET - Zweryfikuj uprawnienia admina i zapytaj DB o zamówienia ### `/admin/products` ##### GET - Zweryfikuj uprawnienia admina i zapytaj DB o produkty ### `/admin/products/new` ##### GET - Wyświetl formularz nowego produktu ##### POST - Dodaj produkt do DB i przekieruj do `/admin/products` ## Metoda Przechowywania Haseł Zgodnie z zaleceniami OWASP użyjemy algorytmu argon2 soli i piprzu.