add endpoint and UI for users to update their own username

static/style.css

@@ -197,8 +197,11 @@ input:focus {
 .btn-primary {
     background-color: var(--primary);
     color: white;
+}
+
+.login-card .btn-primary {
     width: 100%;
-    margin-top: 0.5rem;
+    margin-top: 1rem;
 }
 
 .btn-primary:hover {
@@ -440,6 +443,23 @@ input:focus {
     color: var(--text-muted);
 }
 
+.profile-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    max-width: 400px;
+}
+
+.profile-form .btn-primary {
+    align-self: flex-start;
+}
+
+.divider {
+    height: 1px;
+    background-color: var(--border-color);
+    margin: 2rem 0;
+}
+
 .success-msg {
     color: var(--status-online);
     text-align: center;