Disable 3pid fields in settings when m.3pid_changes capability is disabled

src/components/views/settings/account/EmailAddresses.tsx

@@ -44,6 +44,10 @@ that is available.
 interface IExistingEmailAddressProps {
     email: ThirdPartyIdentifier;
     onRemoved: (emails: ThirdPartyIdentifier) => void;
+    /**
+     * Disallow removal of this email address when truthy
+     */
+    disabled?: boolean;
 }
 
 interface IExistingEmailAddressState {
@@ -121,7 +125,7 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
                 <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
                     {this.props.email.address}
                 </span>
-                <AccessibleButton onClick={this.onRemove} kind="danger_sm">
+                <AccessibleButton onClick={this.onRemove} kind="danger_sm" disabled={this.props.disabled}>
                     {_t("Remove")}
                 </AccessibleButton>
             </div>
@@ -132,6 +136,10 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
 interface IProps {
     emails: ThirdPartyIdentifier[];
     onEmailsChange: (emails: ThirdPartyIdentifier[]) => void;
+    /**
+     * Adding or removing emails is disabled when truthy
+     */
+    disabled?: boolean;
 }
 
 interface IState {
@@ -248,11 +256,18 @@ export default class EmailAddresses extends React.Component<IProps, IState> {
 
     public render(): React.ReactNode {
         const existingEmailElements = this.props.emails.map((e) => {
-            return <ExistingEmailAddress email={e} onRemoved={this.onRemoved} key={e.address} />;
+            return (
+                <ExistingEmailAddress
+                    email={e}
+                    onRemoved={this.onRemoved}
+                    key={e.address}
+                    disabled={this.props.disabled}
+                />
+            );
         });
 
         let addButton = (
-            <AccessibleButton onClick={this.onAddClick} kind="primary">
+            <AccessibleButton onClick={this.onAddClick} kind="primary" disabled={this.props.disabled}>
                 {_t("Add")}
             </AccessibleButton>
         );
@@ -283,7 +298,7 @@ export default class EmailAddresses extends React.Component<IProps, IState> {
                         type="text"
                         label={_t("Email Address")}
                         autoComplete="email"
-                        disabled={this.state.verifying}
+                        disabled={this.props.disabled || this.state.verifying}
                         value={this.state.newEmailAddress}
                         onChange={this.onChangeNewEmailAddress}
                     />

src/components/views/settings/account/PhoneNumbers.tsx

@@ -39,6 +39,10 @@ This is a copy/paste of EmailAddresses, mostly.
 interface IExistingPhoneNumberProps {
     msisdn: ThirdPartyIdentifier;
     onRemoved: (phoneNumber: ThirdPartyIdentifier) => void;
+    /**
+     * Disable removing phone number
+     */
+    disabled?: boolean;
 }
 
 interface IExistingPhoneNumberState {
@@ -116,7 +120,7 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
                 <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
                     +{this.props.msisdn.address}
                 </span>
-                <AccessibleButton onClick={this.onRemove} kind="danger_sm">
+                <AccessibleButton onClick={this.onRemove} kind="danger_sm" disabled={this.props.disabled}>
                     {_t("Remove")}
                 </AccessibleButton>
             </div>
@@ -127,6 +131,10 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
 interface IProps {
     msisdns: ThirdPartyIdentifier[];
     onMsisdnsChange: (phoneNumbers: ThirdPartyIdentifier[]) => void;
+    /**
+     * Adding or removing phone numbers is disabled when truthy
+     */
+    disabled?: boolean;
 }
 
 interface IState {
@@ -251,11 +259,18 @@ export default class PhoneNumbers extends React.Component<IProps, IState> {
 
     public render(): React.ReactNode {
         const existingPhoneElements = this.props.msisdns.map((p) => {
-            return <ExistingPhoneNumber msisdn={p} onRemoved={this.onRemoved} key={p.address} />;
+            return (
+                <ExistingPhoneNumber
+                    msisdn={p}
+                    onRemoved={this.onRemoved}
+                    key={p.address}
+                    disabled={this.props.disabled}
+                />
+            );
         });
 
         let addVerifySection = (
-            <AccessibleButton onClick={this.onAddClick} kind="primary">
+            <AccessibleButton onClick={this.onAddClick} kind="primary" disabled={this.props.disabled}>
                 {_t("Add")}
             </AccessibleButton>
         );
@@ -277,14 +292,18 @@ export default class PhoneNumbers extends React.Component<IProps, IState> {
                             type="text"
                             label={_t("Verification code")}
                             autoComplete="off"
-                            disabled={this.state.continueDisabled}
+                            disabled={this.props.disabled || this.state.continueDisabled}
                             value={this.state.newPhoneNumberCode}
                             onChange={this.onChangeNewPhoneNumberCode}
                         />
                         <AccessibleButton
                             onClick={this.onContinueClick}
                             kind="primary"
-                            disabled={this.state.continueDisabled || this.state.newPhoneNumberCode.length === 0}
+                            disabled={
+                                this.props.disabled ||
+                                this.state.continueDisabled ||
+                                this.state.newPhoneNumberCode.length === 0
+                            }
                         >
                             {_t("Continue")}
                         </AccessibleButton>
@@ -313,7 +332,7 @@ export default class PhoneNumbers extends React.Component<IProps, IState> {
                             type="text"
                             label={_t("Phone Number")}
                             autoComplete="tel-national"
-                            disabled={this.state.verifying}
+                            disabled={this.props.disabled || this.state.verifying}
                             prefixComponent={phoneCountry}
                             value={this.state.newPhoneNumber}
                             onChange={this.onChangeNewPhoneNumber}

src/components/views/settings/discovery/EmailAddresses.tsx

@@ -46,6 +46,7 @@ TODO: Reduce all the copying between account vs. discovery components.
 
 interface IEmailAddressProps {
     email: ThirdPartyIdentifier;
+    disabled?: boolean;
 }
 
 interface IEmailAddressState {
@@ -194,6 +195,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
                     className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     kind="danger_sm"
                     onClick={this.onRevokeClick}
+                    disabled={this.props.disabled}
                 >
                     {_t("Revoke")}
                 </AccessibleButton>
@@ -204,6 +206,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
                     className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     kind="primary_sm"
                     onClick={this.onShareClick}
+                    disabled={this.props.disabled}
                 >
                     {_t("Share")}
                 </AccessibleButton>
@@ -221,6 +224,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
 interface IProps {
     emails: ThirdPartyIdentifier[];
     isLoading?: boolean;
+    disabled?: boolean;
 }
 
 export default class EmailAddresses extends React.Component<IProps> {
@@ -230,7 +234,7 @@ export default class EmailAddresses extends React.Component<IProps> {
             content = <InlineSpinner />;
         } else if (this.props.emails.length > 0) {
             content = this.props.emails.map((e) => {
-                return <EmailAddress email={e} key={e.address} />;
+                return <EmailAddress email={e} key={e.address} disabled={this.props.disabled} />;
             });
         }
 

src/components/views/settings/discovery/PhoneNumbers.tsx

@@ -38,6 +38,7 @@ This is a copy/paste of EmailAddresses, mostly.
 
 interface IPhoneNumberProps {
     msisdn: ThirdPartyIdentifier;
+    disabled?: boolean;
 }
 
 interface IPhoneNumberState {
@@ -202,6 +203,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
                     className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     kind="danger_sm"
                     onClick={this.onRevokeClick}
+                    disabled={this.props.disabled}
                 >
                     {_t("Revoke")}
                 </AccessibleButton>
@@ -212,6 +214,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
                     className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     kind="primary_sm"
                     onClick={this.onShareClick}
+                    disabled={this.props.disabled}
                 >
                     {_t("Share")}
                 </AccessibleButton>
@@ -230,6 +233,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
 interface IProps {
     msisdns: ThirdPartyIdentifier[];
     isLoading?: boolean;
+    disabled?: boolean;
 }
 
 export default class PhoneNumbers extends React.Component<IProps> {
@@ -239,7 +243,7 @@ export default class PhoneNumbers extends React.Component<IProps> {
             content = <InlineSpinner />;
         } else if (this.props.msisdns.length > 0) {
             content = this.props.msisdns.map((e) => {
-                return <PhoneNumber msisdn={e} key={e.address} />;
+                return <PhoneNumber msisdn={e} key={e.address} disabled={this.props.disabled} />;
             });
         }
 

src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

@@ -90,6 +90,7 @@ interface IState {
     canChangePassword: boolean;
     idServerName?: string;
     externalAccountManagementUrl?: string;
+    canMake3pidChanges: boolean;
 }
 
 export default class GeneralUserSettingsTab extends React.Component<IProps, IState> {
@@ -119,6 +120,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             msisdns: [],
             loading3pids: true, // whether or not the emails and msisdns have been loaded
             canChangePassword: false,
+            canMake3pidChanges: false,
         };
 
         this.dispatcherRef = dis.register(this.onAction);
@@ -174,8 +176,10 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
         const delegatedAuthConfig = M_AUTHENTICATION.findIn<IDelegatedAuthConfig | undefined>(cli.getClientWellKnown());
         const externalAccountManagementUrl = delegatedAuthConfig?.account;
+        // https://spec.matrix.org/v1.7/client-server-api/#m3pid_changes-capability
+        const canMake3pidChanges = capabilities["m.3pid_changes"]?.enabled === true;
 
-        this.setState({ canChangePassword, externalAccountManagementUrl });
+        this.setState({ canChangePassword, externalAccountManagementUrl, canMake3pidChanges });
     }
 
     private async getThreepidState(): Promise<void> {
@@ -323,12 +327,20 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             const emails = this.state.loading3pids ? (
                 <InlineSpinner />
             ) : (
-                <AccountEmailAddresses emails={this.state.emails} onEmailsChange={this.onEmailsChange} />
+                <AccountEmailAddresses
+                    emails={this.state.emails}
+                    onEmailsChange={this.onEmailsChange}
+                    disabled={!this.state.canMake3pidChanges}
+                />
             );
             const msisdns = this.state.loading3pids ? (
                 <InlineSpinner />
             ) : (
-                <AccountPhoneNumbers msisdns={this.state.msisdns} onMsisdnsChange={this.onMsisdnsChange} />
+                <AccountPhoneNumbers
+                    msisdns={this.state.msisdns}
+                    onMsisdnsChange={this.onMsisdnsChange}
+                    disabled={!this.state.canMake3pidChanges}
+                />
             );
             threepidSection = (
                 <>
@@ -463,8 +475,16 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
         const threepidSection = this.state.haveIdServer ? (
             <>
-                <DiscoveryEmailAddresses emails={this.state.emails} isLoading={this.state.loading3pids} />
-                <DiscoveryPhoneNumbers msisdns={this.state.msisdns} isLoading={this.state.loading3pids} />
+                <DiscoveryEmailAddresses
+                    emails={this.state.emails}
+                    isLoading={this.state.loading3pids}
+                    disabled={!this.state.canMake3pidChanges}
+                />
+                <DiscoveryPhoneNumbers
+                    msisdns={this.state.msisdns}
+                    isLoading={this.state.loading3pids}
+                    disabled={!this.state.canMake3pidChanges}
+                />
             </>
         ) : null;