Merge pull request #121 from djedi/feat/change-password

feat: add password change in settings

Author: djedi

app/routes.py

@@ -792,6 +792,57 @@ async def get_profile():
     )
 
 
+@app.route("/api/settings/password", methods=["PUT"])
+@jwt_required()
+async def change_password():
+    """
+    Change user's password.
+
+    Request body:
+        - current_password: Current password for verification
+        - new_password: New password to set
+
+    Returns:
+        - 200: Password changed successfully
+        - 400: Missing fields or password too short
+        - 401: Current password is incorrect
+    """
+    req = await request.get_json()
+    current_password = req.get("current_password", "")
+    new_password = req.get("new_password", "")
+
+    username = get_jwt_identity()
+
+    if not username:
+        abort(401)
+
+    user = User.query.filter_by(username=username.lower()).first()
+
+    if not user:
+        abort(400)
+
+    # Validate inputs
+    if not current_password:
+        return jsonify(error="Current password is required"), 400
+
+    if not new_password:
+        return jsonify(error="New password is required"), 400
+
+    if len(new_password) < 4:
+        return jsonify(error="Password must be at least 4 characters"), 400
+
+    # Verify current password
+    if not argon2.check_password_hash(user.password_hash, current_password):
+        return jsonify(error="Current password is incorrect"), 401
+
+    # Update password
+    user.password_hash = argon2.generate_password_hash(new_password)
+    db.session.add(user)
+    db.session.commit()
+
+    return jsonify(message="Password changed successfully"), 200
+
+
 @app.route("/api/settings/email", methods=["PUT"])
 @jwt_required()
 async def update_email():

client/src/components/Settings.vue

@@ -91,6 +91,61 @@
                 </div>
               </div>
             </div>
+
+            <div class="password-section">
+              <div class="password-header">
+                <span class="password-label">Password</span>
+                <b-button
+                  v-if="!showChangePassword"
+                  size="is-small"
+                  @click="showChangePassword = true"
+                >
+                  Change Password
+                </b-button>
+              </div>
+              <div v-if="showChangePassword" class="password-change-form">
+                <b-field label="Current password">
+                  <b-input
+                    v-model="currentPassword"
+                    type="password"
+                    placeholder="Enter current password"
+                    size="is-small"
+                    password-reveal
+                  />
+                </b-field>
+                <b-field label="New password">
+                  <b-input
+                    v-model="newPassword"
+                    type="password"
+                    placeholder="Enter new password"
+                    size="is-small"
+                    password-reveal
+                  />
+                </b-field>
+                <b-field label="Confirm new password">
+                  <b-input
+                    v-model="confirmPassword"
+                    type="password"
+                    placeholder="Confirm new password"
+                    size="is-small"
+                    password-reveal
+                  />
+                </b-field>
+                <div class="password-change-actions">
+                  <b-button
+                    size="is-small"
+                    type="is-primary"
+                    @click="changePassword"
+                    :loading="passwordSaving"
+                  >
+                    Update Password
+                  </b-button>
+                  <b-button size="is-small" @click="cancelChangePassword">
+                    Cancel
+                  </b-button>
+                </div>
+              </div>
+            </div>
           </div>
 
           <div class="settings-card">
@@ -311,6 +366,13 @@ const emailLoading = ref(false);
 const emailSaving = ref(false);
 const showChangeEmail = ref(false);
 
+// Password change
+const showChangePassword = ref(false);
+const currentPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const passwordSaving = ref(false);
+
 const themeOptions = [
   { value: 'light', label: 'Light', icon: 'fas fa-sun' },
   { value: 'dark', label: 'Dark', icon: 'fas fa-moon' },
@@ -449,6 +511,79 @@ const removeEmail = async () => {
   }
 };
 
+const changePassword = async () => {
+  // Validate inputs
+  if (!currentPassword.value) {
+    buefy?.toast.open({
+      message: 'Please enter your current password',
+      type: 'is-danger',
+      duration: 3000,
+    });
+    return;
+  }
+
+  if (!newPassword.value) {
+    buefy?.toast.open({
+      message: 'Please enter a new password',
+      type: 'is-danger',
+      duration: 3000,
+    });
+    return;
+  }
+
+  if (newPassword.value.length < 4) {
+    buefy?.toast.open({
+      message: 'Password must be at least 4 characters',
+      type: 'is-danger',
+      duration: 3000,
+    });
+    return;
+  }
+
+  if (newPassword.value !== confirmPassword.value) {
+    buefy?.toast.open({
+      message: 'New passwords do not match',
+      type: 'is-danger',
+      duration: 3000,
+    });
+    return;
+  }
+
+  passwordSaving.value = true;
+  try {
+    await Requests.put('/settings/password', {
+      current_password: currentPassword.value,
+      new_password: newPassword.value,
+    });
+    // Clear form and hide it
+    currentPassword.value = '';
+    newPassword.value = '';
+    confirmPassword.value = '';
+    showChangePassword.value = false;
+    buefy?.toast.open({
+      message: 'Password changed successfully',
+      type: 'is-success',
+      duration: 2000,
+    });
+  } catch (e: unknown) {
+    const error = e as { response?: { data?: { error?: string } } };
+    buefy?.toast.open({
+      message: error?.response?.data?.error || 'Unable to change password',
+      type: 'is-danger',
+      duration: 3000,
+    });
+  } finally {
+    passwordSaving.value = false;
+  }
+};
+
+const cancelChangePassword = () => {
+  currentPassword.value = '';
+  newPassword.value = '';
+  confirmPassword.value = '';
+  showChangePassword.value = false;
+};
+
 const onAutoSaveChange = (value: boolean) => {
   // Update the setting immediately
   sidebar.toggleAutoSave(value);
@@ -1144,4 +1279,37 @@ const close = () => {
   display: flex;
   gap: 8px;
 }
+
+/* Password management */
+.password-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-color);
+}
+
+.password-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.password-label {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.password-change-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-color);
+}
+
+.password-change-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+}
 </style>