Merge pull request #6928 from matrix-org/t3chguy/fix/18883

src/components/structures/InteractiveAuth.tsx

@@ -84,7 +84,7 @@ interface IState {
     stageState?: IStageStatus;
     busy: boolean;
     errorText?: string;
-    stageErrorText?: string;
+    errorCode?: string;
     submitButtonEnabled: boolean;
 }
 
@@ -103,7 +103,7 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
             authStage: null,
             busy: false,
             errorText: null,
-            stageErrorText: null,
+            errorCode: null,
             submitButtonEnabled: false,
         };
 
@@ -145,6 +145,7 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
             const msg = error.message || error.toString();
             this.setState({
                 errorText: msg,
+                errorCode: error.errcode,
             });
         });
     }
@@ -186,6 +187,7 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
             authStage: stageType,
             stageState: stageState,
             errorText: stageState.error,
+            errorCode: stageState.errcode,
         }, () => {
             if (oldStage !== stageType) {
                 this.setFocus();
@@ -208,7 +210,7 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
             this.setState({
                 busy: true,
                 errorText: null,
-                stageErrorText: null,
+                errorCode: null,
             });
         }
         // The JS SDK eagerly reports itself as "not busy" right after any
@@ -235,7 +237,15 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
         this.props.onAuthFinished(false, ERROR_USER_CANCELLED);
     };
 
-    private renderCurrentStage(): JSX.Element {
+    private onAuthStageFailed = (e: Error): void => {
+        this.props.onAuthFinished(false, e);
+    };
+
+    private setEmailSid = (sid: string): void => {
+        this.authLogic.setEmailSid(sid);
+    };
+
+    render() {
         const stage = this.state.authStage;
         if (!stage) {
             if (this.state.busy) {
@@ -255,7 +265,8 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
                 clientSecret={this.authLogic.getClientSecret()}
                 stageParams={this.authLogic.getStageParams(stage)}
                 submitAuthDict={this.submitAuthDict}
-                errorText={this.state.stageErrorText}
+                errorText={this.state.errorText}
+                errorCode={this.state.errorCode}
                 busy={this.state.busy}
                 inputs={this.props.inputs}
                 stageState={this.state.stageState}
@@ -269,32 +280,4 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
             />
         );
     }
-
-    private onAuthStageFailed = (e: Error): void => {
-        this.props.onAuthFinished(false, e);
-    };
-
-    private setEmailSid = (sid: string): void => {
-        this.authLogic.setEmailSid(sid);
-    };
-
-    render() {
-        let error = null;
-        if (this.state.errorText) {
-            error = (
-                <div className="error">
-                    { this.state.errorText }
-                </div>
-            );
-        }
-
-        return (
-            <div>
-                <div>
-                    { this.renderCurrentStage() }
-                    { error }
-                </div>
-            </div>
-        );
-    }
 }

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -41,7 +41,7 @@ import { logger } from "matrix-js-sdk/src/logger";
  *
  * matrixClient:           A matrix client. May be a different one to the one
  *                         currently being used generally (eg. to register with
- *                         one HS whilst beign a guest on another).
+ *                         one HS whilst being a guest on another).
  * loginType:              the login type of the auth stage being attempted
  * authSessionId:          session id from the server
  * clientSecret:           The client secret in use for identity server auth sessions
@@ -84,6 +84,7 @@ interface IAuthEntryProps {
     loginType: string;
     authSessionId: string;
     errorText?: string;
+    errorCode?: string;
     // Is the auth logic currently waiting for something to happen?
     busy?: boolean;
     onPhaseChange: (phase: number) => void;
@@ -427,18 +428,29 @@ export class EmailIdentityAuthEntry extends React.Component<IEmailIdentityAuthEn
     }
 
     render() {
+        let errorSection;
+        // ignore the error when errcode is M_UNAUTHORIZED as we expect that error until the link is clicked.
+        if (this.props.errorText && this.props.errorCode !== "M_UNAUTHORIZED") {
+            errorSection = (
+                <div className="error" role="alert">
+                    { this.props.errorText }
+                </div>
+            );
+        }
+
         // This component is now only displayed once the token has been requested,
         // so we know the email has been sent. It can also get loaded after the user
         // has clicked the validation link if the server takes a while to propagate
         // the validation internally. If we're in the session spawned from clicking
         // the validation link, we won't know the email address, so if we don't have it,
         // assume that the link has been clicked and the server will realise when we poll.
-        if (this.props.inputs.emailAddress === undefined) {
-            return <Spinner />;
-        } else if (this.props.stageState?.emailSid) {
-            // we only have a session ID if the user has clicked the link in their email,
-            // so show a loading state instead of "an email has been sent to..." because
-            // that's confusing when you've already read that email.
+        // We only have a session ID if the user has clicked the link in their email,
+        // so show a loading state instead of "an email has been sent to..." because
+        // that's confusing when you've already read that email.
+        if (this.props.inputs.emailAddress === undefined || this.props.stageState?.emailSid) {
+            if (errorSection) {
+                return errorSection;
+            }
             return <Spinner />;
         } else {
             return (
@@ -448,6 +460,7 @@ export class EmailIdentityAuthEntry extends React.Component<IEmailIdentityAuthEn
                     ) }
                     </p>
                     <p>{ _t("Open the link in the email to continue registration.") }</p>
+                    { errorSection }
                 </div>
             );
         }