· 6 months ago · Apr 10, 2025, 09:50 AM
1<!DOCTYPE html>
2<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
3 xmlns:th="http://www.thymeleaf.org">
4<head th:replace="~{fragments/commons::head}">
5 <title>Edit Profile</title>
6</head>
7<body>
8<main>
9 <section class="section full-height">
10
11 <form class="welcome login"
12 th:action="@{/users/{id}/profile(id=${userId})}"
13 th:method="post"
14 th:object="${userProfileDTO}">
15
16 <div class="form-group">
17 <h3>Edit Profile</h3>
18 <div class="label-holder text-white d-flex justify-content-center">
19 <label for="firstName" class="h3 mb-2">First Name</label>
20 </div>
21 <input type="text"
22 id="firstName"
23 placeholder="Enter your first name" th:field="*{firstName}">
24 <p class="text-light" th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}"></p>
25 </div>
26
27 <div class="form-group">
28 <div class="label-holder text-white d-flex justify-content-center">
29 <label for="lastName" class="h3 mb-2">Last Name</label>
30 </div>
31 <input type="text"
32 id="lastName"
33 placeholder="Enter your last name" th:field="*{lastName}">
34 <p class="text-light" th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}"></p>
35 </div>
36
37 <div class="form-group">
38 <div class="label-holder text-white d-flex justify-content-center">
39 <label for="email" class="h3 mb-2">Email</label>
40
41 </div>
42 <input type="text"
43 id="email"
44 placeholder="Enter your email" th:field="*{email}">
45 <p class="text-light" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></p>
46 </div>
47
48 <div class="form-group">
49 <div class="label-holder text-white d-flex justify-content-center">
50 <label for="password" class="h3 mb-2">Change password</label>
51
52 </div>
53 <input type="password"
54 id="password"
55 placeholder="Enter your password" th:field="*{password}">
56 <p class="text-light" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></p>
57 </div>
58
59 <div class="form-group">
60 <div class="label-holder text-white d-flex justify-content-center">
61 <label for="profilePicture" class="h3 mb-2">Profile Picture URL</label>
62 </div>
63 <input type="text"
64 id="profilePicture" th:field="*{profilePicture}">
65 <p class="text-light" th:if="${#fields.hasErrors('profilePicture')}" th:errors="*{profilePicture}"></p>
66 </div>
67 <button class="profile-actions-button">
68 Save
69 </button>
70 </form>
71
72 </section>
73</main>
74<footer th:replace="~{fragments/commons::footer}"></footer>
75</body>
76</html>