From fe27fae80f15a6b69fdbd650182756f06592d9e1 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 14 Nov 2018 17:59:24 -0700 Subject: [PATCH 1/5] Add m.login.terms to the ILAG-compatible flows Otherwise we get "Registration Required" instead of "Pick a username" Part of https://github.com/vector-im/riot-web/issues/7700 --- src/Registration.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Registration.js b/src/Registration.js index 070178fecb..f86c9cc618 100644 --- a/src/Registration.js +++ b/src/Registration.js @@ -45,7 +45,7 @@ export async function startAnyRegistrationFlow(options) { // caution though. const hasIlagFlow = flows.some((flow) => { return flow.stages.every((stage) => { - return ['m.login.dummy', 'm.login.recaptcha'].includes(stage); + return ['m.login.dummy', 'm.login.recaptcha', 'm.login.terms'].includes(stage); }); }); From 2ffc024fabed87b3a8f8d7f85e9dac023905e7e6 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 14 Nov 2018 18:26:08 -0700 Subject: [PATCH 2/5] 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 --- .../_InteractiveAuthEntryComponents.scss | 4 +++ src/components/structures/InteractiveAuth.js | 12 +++++++ src/components/views/dialogs/SetMxIdDialog.js | 5 +++ .../login/InteractiveAuthEntryComponents.js | 32 +++++++++++++++---- src/i18n/strings/en_EN.json | 1 + 5 files changed, 47 insertions(+), 7 deletions(-) diff --git a/res/css/views/login/_InteractiveAuthEntryComponents.scss b/res/css/views/login/_InteractiveAuthEntryComponents.scss index 183b5cd251..af240498b4 100644 --- a/res/css/views/login/_InteractiveAuthEntryComponents.scss +++ b/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; +} \ No newline at end of file diff --git a/src/components/structures/InteractiveAuth.js b/src/components/structures/InteractiveAuth.js index 8428e3c714..39e015f42e 100644 --- a/src/components/structures/InteractiveAuth.js +++ b/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} /> ); }, diff --git a/src/components/views/dialogs/SetMxIdDialog.js b/src/components/views/dialogs/SetMxIdDialog.js index c6427001ad..fb892c4a0a 100644 --- a/src/components/views/dialogs/SetMxIdDialog.js +++ b/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({ diff --git a/src/components/views/login/InteractiveAuthEntryComponents.js b/src/components/views/login/InteractiveAuthEntryComponents.js index 481cdc60b2..dce718d3bc 100644 --- a/src/components/views/login/InteractiveAuthEntryComponents.js +++ b/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( -