Add a dedicated "Continue" button to the terms auth stage

The button itself is conditionally enabled because the ILAG dialog already has a continue button. It'd be confusing to users to have 2 continue buttons on the same dialog, so this commit adds the structure required to pass along clicks from the dialog's button down to the UI auth component. 

The other place the continue button would appear is on the register page (not ILAG). The button's style is different here, however that will be improved in a later commit. 

Part of https://github.com/vector-im/riot-web/issues/7700

res/css/views/login/_InteractiveAuthEntryComponents.scss

@@ -40,3 +40,7 @@ limitations under the License.
     background-color: $light-fg-color;
     cursor: default;
 }
+
+.mx_InteractiveAuthEntryComponents_termsPolicy {
+    display: block;
+}

src/components/structures/InteractiveAuth.js

@@ -68,6 +68,11 @@ export default React.createClass({
         // If true, poll to see if the auth flow has been completed
         // out-of-band
         poll: PropTypes.bool,
+
+        // If true, components will be told that the 'Continue' button
+        // is managed by some other party and should not be managed by
+        // the component itself.
+        continueIsManaged: PropTypes.bool,
     },
 
     getInitialState: function() {
@@ -128,6 +133,12 @@ export default React.createClass({
         }
     },
 
+    tryContinue: function() {
+        if (this.refs.stageComponent && this.refs.stageComponent.tryContinue) {
+            this.refs.stageComponent.tryContinue();
+        }
+    },
+
     _authStateUpdated: function(stageType, stageState) {
         const oldStage = this.state.authStage;
         this.setState({
@@ -192,6 +203,7 @@ export default React.createClass({
                 fail={this._onAuthStageFailed}
                 setEmailSid={this._setEmailSid}
                 makeRegistrationUrl={this.props.makeRegistrationUrl}
+                hideContinue={this.props.continueIsManaged}
             />
         );
     },

src/components/views/dialogs/SetMxIdDialog.js

@@ -101,6 +101,9 @@ export default React.createClass({
     },
 
     onSubmit: function(ev) {
+        if (this.refs.uiAuth) {
+            this.refs.uiAuth.tryContinue();
+        }
         this.setState({
             doingUIAuth: true,
         });
@@ -217,6 +220,8 @@ export default React.createClass({
                 onAuthFinished={this._onUIAuthFinished}
                 inputs={{}}
                 poll={true}
+                ref="uiAuth"
+                continueIsManaged={true}
             />;
         }
         const inputClasses = classnames({

src/components/views/login/InteractiveAuthEntryComponents.js

@@ -222,6 +222,7 @@ export const TermsAuthEntry = React.createClass({
         stageParams: PropTypes.object.isRequired,
         errorText: PropTypes.string,
         busy: PropTypes.bool,
+        hideContinue: PropTypes.bool,
     },
 
     componentWillMount: function() {
@@ -275,19 +276,30 @@ export const TermsAuthEntry = React.createClass({
         });
     },
 
-    _trySubmit: function(policyId) {
+    tryContinue: function() {
+        this._trySubmit();
+    },
+
+    _togglePolicy: function(policyId) {
         const newToggles = {};
-        let allChecked = true;
         for (const policy of this.state.policies) {
             let checked = this.state.toggledPolicies[policy.id];
             if (policy.id === policyId) checked = !checked;
 
             newToggles[policy.id] = checked;
+        }
+        this.setState({"toggledPolicies": newToggles});
+    },
+
+    _trySubmit: function() {
+        let allChecked = true;
+        for (const policy of this.state.policies) {
+            let checked = this.state.toggledPolicies[policy.id];
             allChecked = allChecked && checked;
         }
 
-        this.setState({"toggledPolicies": newToggles});
         if (allChecked) this.props.submitAuthDict({type: TermsAuthEntry.LOGIN_TYPE});
+        else this.setState({errorText: _t("Please review and accept all of the homeserver's policies")});
     },
 
     render: function() {
@@ -303,27 +315,33 @@ export const TermsAuthEntry = React.createClass({
             allChecked = allChecked && checked;
 
             checkboxes.push(
-                <label key={"policy_checkbox_" + policy.id}>
-                    <input type="checkbox" onClick={() => this._trySubmit(policy.id)} checked={checked} />
+                <label key={"policy_checkbox_" + policy.id} className="mx_InteractiveAuthEntryComponents_termsPolicy">
+                    <input type="checkbox" onClick={() => this._togglePolicy(policy.id)} checked={checked} />
                     <a href={policy.url} target="_blank" rel="noopener">{ policy.name }</a>
                 </label>,
             );
         }
 
         let errorSection;
-        if (this.props.errorText) {
+        if (this.props.errorText || this.state.errorText) {
             errorSection = (
                 <div className="error" role="alert">
-                    { this.props.errorText }
+                    { this.props.errorText || this.state.errorText }
                 </div>
             );
         }
 
+        let submitButton;
+        if (!this.props.hideContinue) {
+            submitButton = <button className="mx_textButton" onClick={this._trySubmit}>{_t("Continue")}</button>;
+        }
+
         return (
             <div>
                 <p>{_t("Please review and accept the policies of this homeserver:")}</p>
                 { checkboxes }
                 { errorSection }
+                { submitButton }
             </div>
         );
     },

src/i18n/strings/en_EN.json

@@ -646,6 +646,7 @@
     "Dismiss": "Dismiss",
     "To continue, please enter your password.": "To continue, please enter your password.",
     "Password:": "Password:",
+    "Please review and accept all of the homeserver's policies": "Please review and accept all of the homeserver's policies",
     "Please review and accept the policies of this homeserver:": "Please review and accept the policies of this homeserver:",
     "An email has been sent to %(emailAddress)s": "An email has been sent to %(emailAddress)s",
     "Please check your email to continue registration.": "Please check your email to continue registration.",