Merge pull request #3417 from matrix-org/t3chguy/nvl/fix_sso_flash

SSO Login: don't assume m.login.password, ask server before showing

src/components/structures/auth/Login.js

@@ -93,7 +93,7 @@ module.exports = createReactClass({
             // Phase of the overall login dialog.
             phase: PHASE_LOGIN,
             // The current login flow, such as password, SSO, etc.
-            currentFlow: "m.login.password",
+            currentFlow: null, // we need to load the flows from the server
 
             // We perform liveliness checks later, but for now suppress the errors.
             // We also track the server dead errors independently of the regular errors so
@@ -372,6 +372,7 @@ module.exports = createReactClass({
 
         this.setState({
             busy: true,
+            currentFlow: null, // reset flow
             loginIncorrect: false,
         });
 
@@ -565,6 +566,7 @@ module.exports = createReactClass({
     },
 
     _renderSsoStep: function(url) {
+        const SignInToText = sdk.getComponent('views.auth.SignInToText');
         // XXX: This link does *not* have a target="_blank" because single sign-on relies on
         // redirecting the user back to a URI once they're logged in. On the web, this means
         // we use the same window and redirect back to riot. On electron, this actually
@@ -574,7 +576,12 @@ module.exports = createReactClass({
         // user's browser, let them log into their SSO provider, then redirect their browser
         // to vector://vector which, of course, will not work.
         return (
-            <a href={url} className="mx_Login_sso_link mx_Login_submit">{ _t('Sign in with single sign-on') }</a>
+            <div>
+                <SignInToText serverConfig={this.props.serverConfig}
+                    onEditServerDetailsClick={this.onEditServerDetailsClick} />
+
+                <a href={url} className="mx_Login_sso_link mx_Login_submit">{ _t('Sign in with single sign-on') }</a>
+            </div>
         );
     },
 

src/components/views/auth/PasswordLogin.js

@@ -31,6 +31,7 @@ export default class PasswordLogin extends React.Component {
     static propTypes = {
         onSubmit: PropTypes.func.isRequired, // fn(username, password)
         onError: PropTypes.func,
+        onEditServerDetailsClick: PropTypes.func,
         onForgotPasswordClick: PropTypes.func, // fn()
         initialUsername: PropTypes.string,
         initialPhoneCountry: PropTypes.string,
@@ -257,6 +258,7 @@ export default class PasswordLogin extends React.Component {
 
     render() {
         const Field = sdk.getComponent('elements.Field');
+        const SignInToText = sdk.getComponent('views.auth.SignInToText');
 
         let forgotPasswordJsx;
 
@@ -273,33 +275,6 @@ export default class PasswordLogin extends React.Component {
             </span>;
         }
 
-        let signInToText = _t('Sign in to your Matrix account on %(serverName)s', {
-            serverName: this.props.serverConfig.hsName,
-        });
-        if (this.props.serverConfig.hsNameIsDifferent) {
-            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
-
-            signInToText = _t('Sign in to your Matrix account on <underlinedServerName />', {}, {
-                'underlinedServerName': () => {
-                    return <TextWithTooltip
-                        class="mx_Login_underlinedServerName"
-                        tooltip={this.props.serverConfig.hsUrl}
-                    >
-                        {this.props.serverConfig.hsName}
-                    </TextWithTooltip>;
-                },
-            });
-        }
-
-        let editLink = null;
-        if (this.props.onEditServerDetailsClick) {
-            editLink = <a className="mx_AuthBody_editServerDetails"
-                href="#" onClick={this.props.onEditServerDetailsClick}
-            >
-                {_t('Change')}
-            </a>;
-        }
-
         const pwFieldClass = classNames({
             error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
         });
@@ -342,10 +317,8 @@ export default class PasswordLogin extends React.Component {
 
         return (
             <div>
-                <h3>
+                <SignInToText serverConfig={this.props.serverConfig}
-                    {signInToText}
+                    onEditServerDetailsClick={this.props.onEditServerDetailsClick} />
-                    {editLink}
-                </h3>
                 <form onSubmit={this.onSubmitForm}>
                     {loginType}
                     {loginField}

src/components/views/auth/SignInToText.js

@@ -0,0 +1,62 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import {_t} from "../../../languageHandler";
+import sdk from "../../../index";
+import PropTypes from "prop-types";
+import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+
+export default class SignInToText extends React.PureComponent {
+    static propTypes = {
+        serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
+        onEditServerDetailsClick: PropTypes.func,
+    };
+
+    render() {
+        let signInToText = _t('Sign in to your Matrix account on %(serverName)s', {
+            serverName: this.props.serverConfig.hsName,
+        });
+        if (this.props.serverConfig.hsNameIsDifferent) {
+            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
+
+            signInToText = _t('Sign in to your Matrix account on <underlinedServerName />', {}, {
+                'underlinedServerName': () => {
+                    return <TextWithTooltip
+                        class="mx_Login_underlinedServerName"
+                        tooltip={this.props.serverConfig.hsUrl}
+                    >
+                        {this.props.serverConfig.hsName}
+                    </TextWithTooltip>;
+                },
+            });
+        }
+
+        let editLink = null;
+        if (this.props.onEditServerDetailsClick) {
+            editLink = <a className="mx_AuthBody_editServerDetails"
+                          href="#" onClick={this.props.onEditServerDetailsClick}
+            >
+                {_t('Change')}
+            </a>;
+        }
+
+        return <h3>
+            {signInToText}
+            {editLink}
+        </h3>;
+    }
+}

src/i18n/strings/en_EN.json

@@ -1471,8 +1471,6 @@
     "Username": "Username",
     "Phone": "Phone",
     "Not sure of your password? <a>Set a new one</a>": "Not sure of your password? <a>Set a new one</a>",
-    "Sign in to your Matrix account on %(serverName)s": "Sign in to your Matrix account on %(serverName)s",
-    "Sign in to your Matrix account on <underlinedServerName />": "Sign in to your Matrix account on <underlinedServerName />",
     "Sign in with": "Sign in with",
     "If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?",
     "No Identity Server is configured so you cannot add add an email address in order to reset your password in the future.": "No Identity Server is configured so you cannot add add an email address in order to reset your password in the future.",
@@ -1508,6 +1506,8 @@
     "Premium": "Premium",
     "Premium hosting for organisations <a>Learn more</a>": "Premium hosting for organisations <a>Learn more</a>",
     "Find other public servers or use a custom server": "Find other public servers or use a custom server",
+    "Sign in to your Matrix account on %(serverName)s": "Sign in to your Matrix account on %(serverName)s",
+    "Sign in to your Matrix account on <underlinedServerName />": "Sign in to your Matrix account on <underlinedServerName />",
     "Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
     "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",
     "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.",

test/components/structures/auth/Login-test.js

@@ -55,6 +55,11 @@ describe('Login', function() {
     it('should show form with change server link', function() {
         const root = render();
 
+        // Set non-empty flows & matrixClient to get past the loading spinner
+        root.setState({
+            currentFlow: "m.login.password",
+        });
+
         const form = ReactTestUtils.findRenderedComponentWithType(
             root,
             sdk.getComponent('auth.PasswordLogin'),
@@ -75,6 +80,11 @@ describe('Login', function() {
 
         const root = render();
 
+        // Set non-empty flows & matrixClient to get past the loading spinner
+        root.setState({
+            currentFlow: "m.login.password",
+        });
+
         const form = ReactTestUtils.findRenderedComponentWithType(
             root,
             sdk.getComponent('auth.PasswordLogin'),