Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #2539 from jryans/auth-less-annoying
Browse files Browse the repository at this point in the history 
Make auth validation less annoying
  • Loading branch information
@jryans
jryans authored Jan 31, 2019
2 parents f60cfe5 + 346f73b commit 21b7e7f
Show file tree
Hide file tree
Showing 12 changed files with 143 additions and 150 deletions.
12 changes: 6 additions & 6 deletions res/css/views/auth/_AuthBody.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ limitations under the License.
color: $primary-fg-color;
}

.mx_Auth_editServerDetails {
.mx_AuthBody_editServerDetails {
padding-left: 1em;
font-size: 12px;
font-weight: normal;
Expand All @@ -47,21 +47,21 @@ limitations under the License.
box-sizing: border-box;
}

.mx_Auth_fieldRow {
.mx_AuthBody_fieldRow {
display: flex;
margin-bottom: 10px;
}

.mx_Auth_fieldRow > * {
.mx_AuthBody_fieldRow > * {
margin: 0 5px;
flex: 1;
}

.mx_Auth_fieldRow > *:first-child {
.mx_AuthBody_fieldRow > *:first-child {
margin-left: 0;
}

.mx_Auth_fieldRow > *:last-child {
.mx_AuthBody_fieldRow > *:last-child {
margin-right: 0;
}

Expand All @@ -72,7 +72,7 @@ limitations under the License.
text-decoration: none;
}

.mx_Auth_changeFlow {
.mx_AuthBody_changeFlow {
display: block;
text-align: center;
width: 100%;
Expand Down
6 changes: 3 additions & 3 deletions res/css/views/auth/_LanguageSelector.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_Auth_language {
.mx_AuthBody_language {
width: 100%;
}

.mx_Auth_language .mx_Dropdown_input {
.mx_AuthBody_language .mx_Dropdown_input {
border: none;
font-size: 14px;
font-weight: 600;
color: $authpage-lang-color;
}

.mx_Auth_language .mx_Dropdown_arrow {
.mx_AuthBody_language .mx_Dropdown_arrow {
background: $authpage-lang-color;
}
27 changes: 0 additions & 27 deletions src/UiEffects.js
View file

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/structures/MatrixChat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1892,7 +1892,6 @@ export default React.createClass({
idSid={this.state.register_id_sid}
email={this.props.startingFragmentQueryParams.email}
referrer={this.props.startingFragmentQueryParams.referrer}
defaultServerName={this.getDefaultServerName()}
defaultServerDiscoveryError={this.state.defaultServerDiscoveryError}
defaultHsUrl={this.getDefaultHsUrl()}
defaultIsUrl={this.getDefaultIsUrl()}
Expand Down Expand Up @@ -1932,7 +1931,6 @@ export default React.createClass({
<Login
onLoggedIn={Lifecycle.setLoggedIn}
onRegisterClick={this.onRegisterClick}
defaultServerName={this.getDefaultServerName()}
defaultServerDiscoveryError={this.state.defaultServerDiscoveryError}
defaultHsUrl={this.getDefaultHsUrl()}
defaultIsUrl={this.getDefaultIsUrl()}
Expand Down
2 changes: 1 addition & 1 deletion src/components/structures/auth/ForgotPassword.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ module.exports = React.createClass({
</form>
{ serverConfigSection }
{ errorText }
<a className="mx_Auth_changeFlow" onClick={this.onLoginClick} href="#">
<a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
{ _t('Sign in instead') }
</a>
</div>
Expand Down
37 changes: 21 additions & 16 deletions src/components/structures/auth/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,6 @@ module.exports = React.createClass({
// different home server without confusing users.
fallbackHsUrl: PropTypes.string,

// The default server name to use when the user hasn't specified
// one. This is used when displaying the defaultHsUrl in the UI.
defaultServerName: PropTypes.string,

// An error passed along from higher up explaining that something
// went wrong when finding the defaultHsUrl.
defaultServerDiscoveryError: PropTypes.string,
Expand Down Expand Up @@ -265,7 +261,10 @@ module.exports = React.createClass({
},

onUsernameBlur: function(username) {
this.setState({ username: username });
this.setState({
username: username,
discoveryError: null,
});
if (username[0] === "@") {
const serverName = username.split(':').slice(1).join(':');
try {
Expand All @@ -285,16 +284,22 @@ module.exports = React.createClass({
},

onPhoneNumberChanged: function(phoneNumber) {
// Validate the phone number entered
if (!PHONE_NUMBER_REGEX.test(phoneNumber)) {
this.setState({ errorText: _t('The phone number entered looks invalid') });
return;
}

this.setState({
phoneNumber: phoneNumber,
});
},

onPhoneNumberBlur: function(phoneNumber) {
this.setState({
errorText: null,
});

// Validate the phone number entered
if (!PHONE_NUMBER_REGEX.test(phoneNumber)) {
this.setState({
errorText: _t('The phone number entered looks invalid'),
});
}
},

onServerConfigChange: function(config) {
Expand Down Expand Up @@ -571,7 +576,7 @@ module.exports = React.createClass({
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000}
delayTimeMs={250}
/>;
break;
case ServerType.ADVANCED:
Expand All @@ -581,7 +586,7 @@ module.exports = React.createClass({
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000}
delayTimeMs={250}
/>;
break;
}
Expand Down Expand Up @@ -649,10 +654,10 @@ module.exports = React.createClass({
onUsernameBlur={this.onUsernameBlur}
onPhoneCountryChanged={this.onPhoneCountryChanged}
onPhoneNumberChanged={this.onPhoneNumberChanged}
onPhoneNumberBlur={this.onPhoneNumberBlur}
onForgotPasswordClick={this.props.onForgotPasswordClick}
loginIncorrect={this.state.loginIncorrect}
hsUrl={this.state.enteredHomeserverUrl}
hsName={this.props.defaultServerName}
disableSubmit={this.state.findingHomeserver}
/>
);
Expand Down Expand Up @@ -684,7 +689,7 @@ module.exports = React.createClass({
let loginAsGuestJsx;
if (this.props.enableGuest) {
loginAsGuestJsx =
<a className="mx_Auth_changeFlow" onClick={this._onLoginAsGuestClick} href="#">
<a className="mx_AuthBody_changeFlow" onClick={this._onLoginAsGuestClick} href="#">
{ _t('Try the app first') }
</a>;
}
Expand All @@ -709,7 +714,7 @@ module.exports = React.createClass({
{ errorTextSection }
{ this.renderServerComponentForStep() }
{ this.renderLoginComponentForStep() }
<a className="mx_Auth_changeFlow" onClick={this.onRegisterClick} href="#">
<a className="mx_AuthBody_changeFlow" onClick={this.onRegisterClick} href="#">
{ _t('Create account') }
</a>
{ loginAsGuestJsx }
Expand Down
14 changes: 6 additions & 8 deletions src/components/structures/auth/Registration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,6 @@ module.exports = React.createClass({
email: PropTypes.string,
referrer: PropTypes.string,

// The default server name to use when the user hasn't specified
// one. This is used when displaying the defaultHsUrl in the UI.
defaultServerName: PropTypes.string,

// An error passed along from higher up explaining that something
// went wrong when finding the defaultHsUrl.
defaultServerDiscoveryError: PropTypes.string,
Expand Down Expand Up @@ -151,6 +147,9 @@ module.exports = React.createClass({
},

_replaceClient: async function() {
this.setState({
errorText: null,
});
this._matrixClient = Matrix.createClient({
baseUrl: this.state.hsUrl,
idBaseUrl: this.state.isUrl,
Expand Down Expand Up @@ -390,7 +389,7 @@ module.exports = React.createClass({
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000}
delayTimeMs={250}
/>;
break;
case ServerType.ADVANCED:
Expand All @@ -400,7 +399,7 @@ module.exports = React.createClass({
defaultHsUrl={this.props.defaultHsUrl}
defaultIsUrl={this.props.defaultIsUrl}
onServerConfigChange={this.onServerConfigChange}
delayTimeMs={1000}
delayTimeMs={250}
/>;
break;
}
Expand Down Expand Up @@ -470,7 +469,6 @@ module.exports = React.createClass({
onEditServerDetailsClick={onEditServerDetailsClick}
flows={this.state.flows}
hsUrl={this.state.hsUrl}
hsName={this.props.defaultServerName}
/>;
}
},
Expand All @@ -489,7 +487,7 @@ module.exports = React.createClass({
let signIn;
if (!this.state.doingUIAuth) {
signIn = (
<a className="mx_Auth_changeFlow" onClick={this.onLoginClick} href="#">
<a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
{ _t('Sign in instead') }
</a>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/auth/LanguageSelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function LanguageSelector() {
if (SdkConfig.get()['disable_login_language_selector']) return <div />;

const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
return <LanguageDropdown className="mx_Auth_language"
return <LanguageDropdown className="mx_AuthBody_language"
onOptionChange={onChange}
value={getCurrentLanguage()}
/>;
Expand Down
22 changes: 12 additions & 10 deletions src/components/views/auth/ModularServerConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,19 +77,20 @@ export default class ModularServerConfig extends React.PureComponent {
});
}

onHomeserverChanged = (ev) => {
this.setState({hsUrl: ev.target.value}, () => {
this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
let hsUrl = this.state.hsUrl.trim().replace(/\/$/, "");
if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
this.props.onServerConfigChange({
hsUrl: this.state.hsUrl,
isUrl: this.props.defaultIsUrl,
});
onHomeserverBlur = (ev) => {
this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
this.props.onServerConfigChange({
hsUrl: this.state.hsUrl,
isUrl: this.props.defaultIsUrl,
});
});
}

onHomeserverChange = (ev) => {
const hsUrl = ev.target.value;
this.setState({ hsUrl });
}

_waitThenInvoke(existingTimeoutId, fn) {
if (existingTimeoutId) {
clearTimeout(existingTimeoutId);
Expand Down Expand Up @@ -117,7 +118,8 @@ export default class ModularServerConfig extends React.PureComponent {
label={_t("Server Name")}
placeholder={this.props.defaultHsUrl}
value={this.state.hsUrl}
onChange={this.onHomeserverChanged}
onBlur={this.onHomeserverBlur}
onChange={this.onHomeserverChange}
/>
</div>
</div>
Expand Down
Loading

0 comments on commit 21b7e7f

Please sign in to comment.