diff --git a/src/app/features/settings/account/Account.tsx b/src/app/features/settings/account/Account.tsx
index c4b56e4754..d5276fc44e 100644
--- a/src/app/features/settings/account/Account.tsx
+++ b/src/app/features/settings/account/Account.tsx
@@ -5,6 +5,7 @@ import { MatrixId } from './MatrixId';
import { Profile } from './Profile';
import { ContactInformation } from './ContactInfo';
import { IgnoredUserList } from './IgnoredUserList';
+import { ChangePassword } from './ChangePassword';
type AccountProps = {
requestClose: () => void;
@@ -33,6 +34,7 @@ export function Account({ requestClose }: AccountProps) {
+
diff --git a/src/app/features/settings/account/ChangePassword.tsx b/src/app/features/settings/account/ChangePassword.tsx
new file mode 100644
index 0000000000..80f2388fd7
--- /dev/null
+++ b/src/app/features/settings/account/ChangePassword.tsx
@@ -0,0 +1,380 @@
+import to from 'await-to-js';
+import React, { FormEventHandler, useCallback, useState, useEffect } from 'react';
+import {
+ Box,
+ Checkbox,
+ Text,
+ Button,
+ Overlay,
+ OverlayBackdrop,
+ OverlayCenter,
+ Dialog,
+ Header,
+ Icon,
+ IconButton,
+ Icons,
+ config,
+ Spinner,
+ color,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { PasswordDict, IAuthData, MatrixClient, MatrixError } from 'matrix-js-sdk';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { PasswordInput } from '../../../components/password-input';
+import { ConfirmPasswordMatch } from '../../../components/ConfirmPasswordMatch';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { ActionUIA, ActionUIAFlowsLoader } from '../../../components/ActionUIA';
+import { useCapabilities } from '../../../hooks/useCapabilities';
+
+type ChangePasswordResponse = Record;
+type ChangePasswordResult = [IAuthData, undefined] | [undefined, ChangePasswordResponse];
+type ChangePasswordFormProps = {
+ onCancel: () => void;
+ onSuccess: () => void;
+};
+
+type ChangePasswordData = {
+ newPassword: string;
+ logoutDevices: boolean;
+};
+
+export function ChangePassword() {
+ const [showDialog, setShowDialog] = useState(false);
+ const [showSuccess, setShowSuccess] = useState(false);
+ const capabilities = useCapabilities();
+
+ // Check if password change is disabled by server capabilities
+ const disableChangePassword = capabilities['m.change_password']?.enabled === false;
+
+ const handleOpenDialog = () => setShowDialog(true);
+ const handleCloseDialog = () => {
+ setShowDialog(false);
+ setShowSuccess(false);
+ };
+ const handleSuccess = () => {
+ setShowDialog(false);
+ setShowSuccess(true);
+ };
+
+ if (disableChangePassword) {
+ return (
+ <>
+
+ Account Security
+
+
+ Change
+
+ }
+ />
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+ Account Security
+
+
+ Change
+
+ }
+ />
+
+
+
+ {showDialog && }
+ {showSuccess && }
+
+ );
+}
+
+function ChangePasswordForm({ onCancel, onSuccess }: ChangePasswordFormProps) {
+ const mx = useMatrixClient();
+ const [formData, setFormData] = useState(null);
+
+ const [changePasswordState, attemptPasswordChange] = useAsyncCallback<
+ ChangePasswordResult,
+ Error,
+ [AuthDict | null, string, boolean]
+ >(
+ useCallback(async (authDict, newPassword, logoutDevices) => {
+ // For the initial request, pass undefined instead of null
+ // This ensures the auth field is omitted from the request body
+ const [err, res] = await to(
+ mx.setPassword(authDict, newPassword, logoutDevices)
+ );
+
+ if (err) {
+ console.error('Password change error:', err.httpStatus, err.data);
+ // If we get a 401, it means we need to perform UIA
+ if (err.httpStatus === 401) {
+ const authData = err.data as IAuthData;
+ return [authData, undefined];
+ }
+ // Any other error should be thrown
+ throw err;
+ }
+
+ return [undefined, res];
+ }, [mx])
+ );
+
+ const [ongoingAuthData, changePasswordResult] =
+ changePasswordState.status === AsyncStatus.Success
+ ? changePasswordState.data
+ : [undefined, undefined];
+
+ // Handle successful completion
+ useEffect(() => {
+ if (changePasswordResult && !ongoingAuthData) {
+ onSuccess();
+ }
+ }, [changePasswordResult, ongoingAuthData, onSuccess]);
+
+ // Don't show success dialog in this component - let parent handle it
+ if (changePasswordResult && !ongoingAuthData) {
+ return null; // Success state handled by parent component
+ }
+
+ // Show UIA flow if we have auth data
+ if (ongoingAuthData) {
+ return (
+ (
+ }>
+
+
+
+
+
+
+ )}
+ >
+ {(ongoingFlow) => (
+ {
+ if (formData) {
+ attemptPasswordChange(authDict, formData.newPassword, formData.logoutDevices);
+ } else {
+ onCancel();
+ }
+ }}
+ onCancel={onCancel}
+ />
+ )}
+
+ );
+ }
+
+ const isLoading = changePasswordState.status === AsyncStatus.Loading;
+ const error = changePasswordState.status === AsyncStatus.Error ? changePasswordState.error : undefined;
+ const handleFormSubmit: FormEventHandler = (evt) => {
+ evt.preventDefault();
+
+ const formDataObj = new FormData(evt.currentTarget);
+ const newPassword = formDataObj.get('newPassword') as string;
+ const confirmPassword = formDataObj.get('confirmPassword') as string;
+ const logoutDevices = formDataObj.get('logoutDevices') === 'on';
+
+ if (!newPassword || !confirmPassword || newPassword !== confirmPassword) {
+ return;
+ }
+
+ // Store form data for UIA completion
+ setFormData({ newPassword, logoutDevices });
+
+ // Try to set password without authentication.
+ // Response will contain authData for UIA to proceed.
+ // TODO: is there ANY way to do UIA before asking the user for their new password?
+ attemptPasswordChange(null, newPassword, logoutDevices);
+ };
+
+ return (
+ }>
+
+
+
+
+
+
+ );
+}
+
+function ChangePasswordSuccess({ onClose }: { onClose: () => void }) {
+ return (
+ }>
+
+
+
+
+
+
+ );
+}