Skip to content

Commit 09d7b78

Browse files
Karannnnn614Karannnnn614
committed
Refactor profile edit modal and script for improved user experience
1 parent af8a091 commit 09d7b78

File tree

3 files changed

+410
-324
lines changed
  • jobsdoor360-website/src/main/ejs/main-files/myaccount/personalprofile
  • myaccount/personalprofile
  • staticfiles/mainfiles/myaccount/personalprofile

3 files changed

+410
-324
lines changed

‎jobsdoor360-website/src/main/ejs/main-files/myaccount/personalprofile/index.ejs‎

Lines changed: 178 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -10,172 +10,200 @@
1010
<body>
1111
<%- include('../../../partials/navbar.ejs') %>
1212
<div
13-
class="modal fade"
14-
id="editModal"
15-
tabindex="-1"
16-
aria-labelledby="editModalLabel"
17-
aria-hidden="true"
18-
>
19-
<div class="modal-dialog">
20-
<div class="modal-content">
21-
<div class="modal-header">
22-
<h5 class="modal-title" id="editModalLabel">Edit Profile</h5>
23-
<button
24-
type="button"
25-
class="btn-close"
26-
data-bs-dismiss="modal"
27-
aria-label="Close"
28-
></button>
29-
</div>
30-
<div class="modal-body">
31-
<form id="edit-profile-form">
32-
<div class="mb-3">
33-
<label for="edit-name" class="form-label">Name:</label>
34-
<input
35-
type="text"
36-
class="form-control"
37-
id="edit-name"
38-
name="ename"
39-
placeholder="John Doe"
40-
required
41-
/>
13+
class="modal fade"
14+
id="editModal"
15+
tabindex="-1"
16+
aria-labelledby="editModalLabel"
17+
aria-hidden="true"
18+
>
19+
<div class="modal-dialog">
20+
<div class="modal-content">
21+
<div class="modal-header">
22+
<h5 class="modal-title" id="editModalLabel">Edit Profile</h5>
23+
<button
24+
type="button"
25+
class="btn-close"
26+
data-bs-dismiss="modal"
27+
aria-label="Close"
28+
></button>
4229
</div>
43-
<div class="mb-3">
44-
<label for="edit-email" class="form-label">Email:</label>
45-
<input
46-
type="text"
47-
class="form-control"
48-
id="edit-email"
49-
name="eemail"
50-
placeholder="[email protected]"
51-
disabled
52-
/>
30+
<div class="modal-body">
31+
<form id="edit-profile-form">
32+
<div class="mb-3">
33+
<label for="edit-name" class="form-label">Name:</label>
34+
<input
35+
type="text"
36+
class="form-control"
37+
id="edit-name"
38+
name="ename"
39+
placeholder="John Doe"
40+
required
41+
/>
42+
</div>
43+
<div class="mb-3">
44+
<label for="edit-email" class="form-label">Email:</label>
45+
<input
46+
type="text"
47+
class="form-control"
48+
id="edit-email"
49+
name="eemail"
50+
placeholder="[email protected]"
51+
disabled
52+
/>
53+
</div>
54+
<div class="mb-3">
55+
<label for="edit-phone" class="form-label">Phone No:</label>
56+
<input
57+
type="text"
58+
class="form-control"
59+
id="edit-phone"
60+
name="ephone"
61+
placeholder="1234567890"
62+
disabled
63+
/>
64+
</div>
65+
<div class="mb-3">
66+
<label class="form-label">Gender:</label>
67+
<div class="d-flex gap-4">
68+
<div class="form-check">
69+
<input
70+
class="form-check-input"
71+
type="radio"
72+
name="gender-option"
73+
id="gender-male"
74+
value="Male"
75+
required
76+
/>
77+
<label class="form-check-label" for="gender-male">
78+
Male
79+
</label>
80+
</div>
81+
<div class="form-check">
82+
<input
83+
class="form-check-input"
84+
type="radio"
85+
name="gender-option"
86+
id="gender-female"
87+
value="Female"
88+
/>
89+
<label class="form-check-label" for="gender-female">
90+
Female
91+
</label>
92+
</div>
93+
<div class="form-check">
94+
<input
95+
class="form-check-input"
96+
type="radio"
97+
name="gender-option"
98+
id="gender-other"
99+
value="Other"
100+
/>
101+
<label class="form-check-label" for="gender-other">
102+
Other
103+
</label>
104+
</div>
105+
</div>
106+
<input type="hidden" id="edit-gender" name="egender" value="" />
107+
</div>
108+
<div class="mb-3">
109+
<label for="edit-dob" class="form-label">Date of Birth:</label>
110+
<input
111+
type="text"
112+
class="form-control"
113+
id="edit-dob"
114+
name="edob"
115+
placeholder="2003-01-01"
116+
required
117+
/>
118+
</div>
119+
<div class="mb-3">
120+
<label for="file-input" class="form-label"
121+
>Upload Profile</label
122+
>
123+
<input
124+
type="file"
125+
class="form-control"
126+
id="file-input"
127+
accept="image/*"
128+
/>
129+
</div>
130+
</form>
53131
</div>
54-
<div class="mb-3">
55-
<label for="edit-phone" class="form-label">Phone No:</label>
56-
<input
57-
type="text"
58-
class="form-control"
59-
id="edit-phone"
60-
name="ephone"
61-
placeholder="1234567890"
62-
disabled
63-
/>
132+
<div class="modal-footer">
133+
<button
134+
type="button"
135+
class="btn btn-secondary"
136+
data-bs-dismiss="modal"
137+
id="cancel-button"
138+
>
139+
Cancel
140+
</button>
141+
<button type="button" class="btn btn-primary" id="save-button">
142+
Save
143+
</button>
64144
</div>
65-
<div class="mb-3">
66-
<label for="edit-gender" class="form-label">Gender:</label>
67-
<input
68-
type="text"
69-
class="form-control"
70-
id="edit-gender"
71-
name="egender"
72-
placeholder="Male/Female"
73-
required
74-
/>
75-
</div>
76-
<div class="mb-3">
77-
<label for="edit-dob" class="form-label">Date of Birth:</label>
78-
<input
79-
type="text"
80-
class="form-control"
81-
id="edit-dob"
82-
name="edob"
83-
placeholder="2003-01-01"
84-
required
85-
/>
86-
</div>
87-
<div class="mb-3">
88-
<label for="file-input" class="form-label">Upload Profile</label>
89-
<input
90-
type="file"
91-
class="form-control"
92-
id="file-input"
93-
accept="image/*"
94-
/>
95-
</div>
96-
</form>
97-
</div>
98-
<div class="modal-footer">
99-
<button
100-
type="button"
101-
class="btn btn-secondary"
102-
data-bs-dismiss="modal"
103-
id="cancel-button"
104-
>
105-
Cancel
106-
</button>
107-
<button
108-
type="button"
109-
class="btn btn-primary"
110-
id="save-button"
111-
>
112-
Save
113-
</button>
145+
</div>
114146
</div>
115147
</div>
116-
</div>
117-
</div>
118-
119-
<section class="pt-5 pb-5">
120-
<div class="container">
121-
<div class="row align-items-center">
122-
<!-- Image Section -->
123-
<div class="col-12 col-md-3 text-center mb-4 mb-md-0">
124-
<img
125-
src="https://www.pngall.com/wp-content/uploads/5/Profile.png"
126-
alt="user-avatar-image"
127-
class="border rounded-circle img-fluid shadow-sm"
128-
style="height: 120px; width: 120px;"
129-
id="show_image"
130-
/>
131-
</div>
132148

133-
<!-- User Details Section -->
134-
<div class="col-12 col-md-9">
135-
<div class="row">
136-
<div class="col-12 col-sm-6 mb-2">
137-
<h6 class="fw-bold">Name:</h6>
138-
<p class="fw-normal text-muted mb-0" id="fullname">John Doe</p>
139-
</div>
140-
<div class="col-12 col-sm-6 mb-2">
141-
<h6 class="fw-bold">Email:</h6>
142-
<p class="fw-normal text-muted mb-0" id="email">[email protected]</p>
143-
</div>
144-
<div class="col-12 col-sm-6 mb-2">
145-
<h6 class="fw-bold">DOB:</h6>
146-
<p class="fw-normal text-muted mb-0" id="dob">2000-01-01</p>
147-
</div>
148-
<div class="col-12 col-sm-6 mb-2">
149-
<h6 class="fw-bold">Gender:</h6>
150-
<p class="fw-normal text-muted mb-0" id="gender">Male</p>
149+
<section class="pt-5 pb-5">
150+
<div class="container">
151+
<div class="row align-items-center">
152+
<!-- Image Section -->
153+
<div class="col-12 col-md-3 text-center mb-4 mb-md-0">
154+
<img
155+
src="https://www.pngall.com/wp-content/uploads/5/Profile.png"
156+
alt="user-avatar-image"
157+
class="border rounded-circle img-fluid shadow-sm"
158+
style="height: 120px; width: 120px"
159+
id="show_image"
160+
/>
151161
</div>
152-
<div class="col-12 col-sm-6 mb-2">
153-
<h6 class="fw-bold">Phone No:</h6>
154-
<p class="fw-normal text-muted mb-0" id="mob">1234567890</p>
162+
163+
<!-- User Details Section -->
164+
<div class="col-12 col-md-9">
165+
<div class="row">
166+
<div class="col-12 col-sm-6 mb-2">
167+
<h6 class="fw-bold">Name:</h6>
168+
<p class="fw-normal text-muted mb-0" id="fullname">John Doe</p>
169+
</div>
170+
<div class="col-12 col-sm-6 mb-2">
171+
<h6 class="fw-bold">Email:</h6>
172+
<p class="fw-normal text-muted mb-0" id="email">
173+
[email protected]
174+
</p>
175+
</div>
176+
<div class="col-12 col-sm-6 mb-2">
177+
<h6 class="fw-bold">DOB:</h6>
178+
<p class="fw-normal text-muted mb-0" id="dob">2000-01-01</p>
179+
</div>
180+
<div class="col-12 col-sm-6 mb-2">
181+
<h6 class="fw-bold">Gender:</h6>
182+
<p class="fw-normal text-muted mb-0" id="gender">Male</p>
183+
</div>
184+
<div class="col-12 col-sm-6 mb-2">
185+
<h6 class="fw-bold">Phone No:</h6>
186+
<p class="fw-normal text-muted mb-0" id="mob">1234567890</p>
187+
</div>
188+
</div>
155189
</div>
156190
</div>
157-
</div>
158-
</div>
159191

160-
<!-- Edit Button -->
161-
<div class="row mt-4">
162-
<div class="col-12 text-center">
163-
<button class="btn btn-primary" id="edit-button">
164-
<i class="bi bi-pencil"></i> Edit Profile
165-
</button>
192+
<!-- Edit Button -->
193+
<div class="row mt-4">
194+
<div class="col-12 text-center">
195+
<button class="btn btn-primary" id="edit-button">
196+
<i class="bi bi-pencil"></i> Edit Profile
197+
</button>
198+
</div>
199+
</div>
166200
</div>
167-
</div>
168-
</div>
169-
</section>
170-
171-
172-
201+
</section>
173202

174203
<%- include('../../../partials/footer.ejs') %>
175204
<script
176205
type="module"
177206
src="/staticfiles/mainfiles/myaccount/personalprofile/script.js"
178207
></script>
179-
180208
</body>
181209
</html>

0 commit comments

Comments
 (0)