From 2bec44a517ca9c04583f6c66eb54ceff6c127102 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 19 May 2017 10:03:51 +0100
Subject: [PATCH] Remove suffix and prefix from login input username

This is an attempt reduce confusion when entering a custom home server: https://github.com/vector-im/riot-web/issues/3736
---
 src/components/structures/login/Login.js    |  8 -----
 src/components/views/login/PasswordLogin.js | 37 ++++++---------------
 2 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js
index a3635177e2..63aeb35687 100644
--- a/src/components/structures/login/Login.js
+++ b/src/components/structures/login/Login.js
@@ -19,7 +19,6 @@ limitations under the License.
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import url from 'url';
 import sdk from '../../../index';
 import Login from '../../../Login';
 
@@ -242,12 +241,6 @@ module.exports = React.createClass({
         switch (step) {
             case 'm.login.password':
                 const PasswordLogin = sdk.getComponent('login.PasswordLogin');
-                // HSs that are not matrix.org may not be configured to have their
-                // domain name === domain part.
-                let hsDomain = url.parse(this.state.enteredHomeserverUrl).hostname;
-                if (hsDomain !== 'matrix.org') {
-                    hsDomain = null;
-                }
                 return (
                     <PasswordLogin
                         onSubmit={this.onPasswordLogin}
@@ -259,7 +252,6 @@ module.exports = React.createClass({
                         onPhoneNumberChanged={this.onPhoneNumberChanged}
                         onForgotPasswordClick={this.props.onForgotPasswordClick}
                         loginIncorrect={this.state.loginIncorrect}
-                        hsDomain={hsDomain}
                     />
                 );
             case 'm.login.cas':
diff --git a/src/components/views/login/PasswordLogin.js b/src/components/views/login/PasswordLogin.js
index 46c9598751..55817043ee 100644
--- a/src/components/views/login/PasswordLogin.js
+++ b/src/components/views/login/PasswordLogin.js
@@ -121,32 +121,16 @@ class PasswordLogin extends React.Component {
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
-                const mxidInputClasses = classNames({
-                    "mx_Login_field": true,
-                    "mx_Login_username": true,
-                    "mx_Login_field_has_prefix": true,
-                    "mx_Login_field_has_suffix": Boolean(this.props.hsDomain),
-                });
-                let suffix = null;
-                if (this.props.hsDomain) {
-                    suffix = <div className="mx_Login_field_suffix">
-                        :{this.props.hsDomain}
-                    </div>;
-                }
-                return <div className="mx_Login_field_group">
-                    <div className="mx_Login_field_prefix">@</div>
-                    <input
-                        className={mxidInputClasses}
-                        key="username_input"
-                        type="text"
-                        name="username" // make it a little easier for browser's remember-password
-                        onChange={this.onUsernameChanged}
-                        placeholder="username"
-                        value={this.state.username}
-                        autoFocus
-                    />
-                    {suffix}
-                </div>;
+                return <input
+                    className="mx_Login_field mx_Login_username"
+                    key="username_input"
+                    type="text"
+                    name="username" // make it a little easier for browser's remember-password
+                    onChange={this.onUsernameChanged}
+                    placeholder="username"
+                    value={this.state.username}
+                    autoFocus
+                />;
             case PasswordLogin.LOGIN_FIELD_PHONE:
                 const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
                 return <div className="mx_Login_phoneSection">
@@ -237,7 +221,6 @@ PasswordLogin.propTypes = {
     onPhoneNumberChanged: React.PropTypes.func,
     onPasswordChanged: React.PropTypes.func,
     loginIncorrect: React.PropTypes.bool,
-    hsDomain: React.PropTypes.string,
 };
 
 module.exports = PasswordLogin;