settings.ejs
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Settings - <!= user.Username !></title>
7
8 <!-- Bootstrap CSS -->
9 <link
10 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
11 rel="stylesheet"
12 integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
13 crossorigin="anonymous"
14 />
15
16 <!-- Custom CSS for additional styling -->
17 <style>
18 .settings-header {
19 margin: 20px 0;
20 text-align: center;
21 }
22 .settings-form {
23 max-width: 700px;
24 margin: 0 auto;
25 }
26 .form-control:focus {
27 box-shadow: none;
28 }
29 .form-section {
30 margin-bottom: 30px;
31 }
32 .profile-pic {
33 width: 150px;
34 height: 150px;
35 object-fit: cover;
36 margin-bottom: 20px;
37 }
38 </style>
39 </head>
40 <body>
41 <%- include('_partials/header') %>
42 <div class="container mt-5">
43 <!-- Settings Header -->
44 <div class="settings-header">
45 <h2>Account Settings</h2>
46 <p>Manage your profile information and account settings.</p>
47
48 <% if (error != null) { %>
49 <div class="alert alert-danger" role="alert"><%= error %></div>
50 <% } %>
51 </div>
52
53 <!-- Settings Form -->
54 <form
55 class="settings-form"
56 action="/settings"
57 method="POST"
58 enctype="multipart/form-data"
59 >
60 <!-- Profile Picture Update -->
61 <div class="form-section text-center">
62 <img
63 src="/avatars/<%= user.ProfilePicture %>"
64 alt="Profile Picture of <%= user.Username %>"
65 class="rounded-circle profile-pic"
66 />
67 <div class="mb-3">
68 <label for="avatar" class="form-label"
69 >Change Profile Picture</label
70 >
71 <input
72 type="file"
73 class="form-control"
74 id="avatar"
75 name="avatar"
76 accept="image/*"
77 />
78 </div>
79 </div>
80
81 <!-- Profile Information -->
82 <div class="form-section">
83 <h4>Profile Information</h4>
84 <div class="mb-3">
85 <label for="username" class="form-label">Username</label>
86 <input
87 type="text"
88 class="form-control"
89 id="username"
90 name="username"
91 value="<%= user.Username %>"
92 required
93 />
94 </div>
95 <div class="mb-3">
96 <label for="bio" class="form-label">Bio</label>
97 <textarea class="form-control" id="bio" name="bio" rows="3">
98<%= user.Bio %></textarea
99 >
100 </div>
101 </div>
102
103 <!-- Save Button -->
104 <div class="text-center">
105 <button type="submit" class="btn btn-primary">Save Changes</button>
106 </div>
107 </form>
108 </div>
109
110 <!-- Bootstrap JS and Popper.js -->
111 <script
112 src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
113 integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
114 crossorigin="anonymous"
115 defer
116 ></script>
117 <script
118 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
119 integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
120 crossorigin="anonymous"
121 defer
122 ></script>
123 </body>
124</html>
125