PS #4: wyświetlanie strony użytkownika

rejestracja użytkowników

Dzisiaj zaimplementujemy wyświetlanie strony użytkownika, na której dostępne będą dane zapisane w bazie. Każdy użytkownika będzie miał dostęp do swojego konta oraz możliwość edycji, natomiast administrator będzie mieć dostęp do stron wszystkich użytkowników wraz z możliwością edycji oraz zmiany roli danego użytkownika.

Wyświetlanie profilu

W celu wyświetlania danych użytkownika będziemy wykorzystywać Thymeleaf’a, więc jeżeli nie miałeś nigdy wcześniej z nim do czynienia, to odsyłam do artykułu wprowadzającego 😉 Strona profilowa (w naszej aplikacji będzie dostępna pod adresem „/account”, dlatego tworzymy odpowiednie mapowanie zapytania w klasie UserController) powinna być dostępna tylko dla zalogowanych użytkowników. Takie zabezpieczenie po stronie back-endu ustawiamy w klasie SecurityConfig, natomiast po stronie front-endu odpowiedni odnośnik na pasku nawigacji będziemy wyświetlać zalogowanym użytkownikom:

 <a th:href="@{/account}" sec:authorize="isAuthenticated()">

W klasie UserController implementujemy motedę getMyAccountDetailsPage(), która będzie wywoływana przez wprowadzenie w adresie przeglądarki strony „~/account”.

@RequestMapping("/account")
public String getMyAccountDetailsPage(Model model, Principal principal) {
    model.addAttribute("user", userDao.findByEmail(principal.getName()));
    return "account";
}

Do widoku przesyłamy atrybut o nazwie „user”, pod którym kryje się pobrany z repozytorium zalogowany Użytkownik. Metoda Principal.getName() zwraca nazwę zalogowanego użytkownika (w naszej aplikacji nazwą jest adres email).

Teraz możemy na stronie wyświetlić dane użytkownika. Będziemy chcieli udostępnić użytkownikowi przycisk, który będzie odnosił na adres „~/account/edit” – do formularza edycji. Zwróćmy jednak uwagę, że taki sam przycisk będziemy udostępniać administratorowi, jednak w tym przypadku będziemy odsyłać na stronę „~/user/{id}/edit”. To rozróżnienie wprowadzamy w linijce 51:

<a th:href="@{/account/edit}" class="btn btn-warning" 
sec:authorize="!hasRole('ADMIN')">Edit</a>
<a th:href="@{'/user/' + ${user.id} + '/edit'}" class="btn btn-warning" 
sec:authorize="hasRole('ADMIN')">Edit</a>

Edycja danych

Po wciśnięciu przycisku „Edit” na naszej stronie profilowej zostaniemy przekierowani na stronę z formularzem edycji („~/account/edit”). Podobnie jak w przypadku strony profilowej pod atrybutem o nazwie „user” przesyłamy dane zalogowanego użytkownika. Przejdźmy do strony edit-account.html. Aby uzupełnić nasz formularz o domyślne wartości w postaci aktualnych danych użytkownika w odpowiednich znacznikach dodajmy parametry th:value=””, których wartościami będą odpowiednie dane. W przypadku informacji, których nie udostępniamy użytkownikowi do edycji (id, role) wykorzystamy znacznik input z parametrem type=”hidden”

<input type="hidden" th:value="${user.id}" th:name="id" />
<input type="hidden" th:value="${user.role}" th:name="role" 
sec:authorize="!hasRole('ADMIN')" />

Z poziomu administratora

W przypadku edycji danych przez administratora będziemy chcieli udostępnić możliwość zmiany roli użytkownika na stronie. Zwróć uwagę, że w znaczniku input z type=”hidden” zmienną role przesyłamy tylko w przypadku, jeżeli dane nie są edytowane przez administratora. W linijce 54 tworzymy odpowiedni div, pod którym znajduje się opcja zmiany roli.

<div class="radio" th:each="type : ${T(pl.mocode.model.User.Role).values()}">
    <input type="radio" id="role" th:name="role" th:value="${type.name()}"
    th:text="${type.name()}" th:checked="${user.role == type}" />
</div>

Skorzystamy z iteracji po wszystkich wartościach enum’a Role w klasie User, co pozwoli nam w prosty sposób dodawać kolejne role w naszej aplikacji (wystarczy dodać nową wartość w enum’ie Role). Iterując tworzymy dla każdej roli input z parametrem type=”radio” , natomiast poprzez znacznik th:checked=”${user.role == type}” domyślnie zaznaczymy opcję roli, którą aktualnie posiada edytowany przez nas użytkownik.

1 komentarz

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *