From 7ddac8d475e913600412f44ae64a81a65d6e261e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 11 Sep 2019 12:20:36 +0100
Subject: [PATCH] Login: Add way to change HS from SSO Homeserver

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/auth/Login.js    |  8 ++-
 src/components/views/auth/PasswordLogin.js | 35 ++----------
 src/components/views/auth/SignInToText.js  | 62 ++++++++++++++++++++++
 3 files changed, 72 insertions(+), 33 deletions(-)
 create mode 100644 src/components/views/auth/SignInToText.js

diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js
index 4fe0a37c66..7b8fd0db4f 100644
--- a/src/components/structures/auth/Login.js
+++ b/src/components/structures/auth/Login.js
@@ -567,6 +567,7 @@ module.exports = React.createClass({
     },
 
     _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
@@ -575,9 +576,12 @@ module.exports = React.createClass({
         // If this bug gets fixed, it will break SSO since it will open the SSO page in the
         // user's browser, let them log into their SSO provider, then redirect their browser
         // to vector://vector which, of course, will not work.
-        return (
+        return <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>;
     },
 
     render: function() {
diff --git a/src/components/views/auth/PasswordLogin.js b/src/components/views/auth/PasswordLogin.js
index 59acf0a034..63e77a938d 100644
--- a/src/components/views/auth/PasswordLogin.js
+++ b/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}
-                    {editLink}
-                </h3>
+                <SignInToText serverConfig={this.props.serverConfig}
+                    onEditServerDetailsClick={this.props.onEditServerDetailsClick} />
                 <form onSubmit={this.onSubmitForm}>
                     {loginType}
                     {loginField}
diff --git a/src/components/views/auth/SignInToText.js b/src/components/views/auth/SignInToText.js
new file mode 100644
index 0000000000..edbe2fd661
--- /dev/null
+++ b/src/components/views/auth/SignInToText.js
@@ -0,0 +1,62 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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>;
+    }
+}