Split out logic/UI for logging in

- Add 'PasswordLogin' UI component
- Add 'LoginPage' wire component which, along with Signup from react SDK,
  replaces the 'Login' page.
- Move UI code (state/props) from ServerConfig which was lobotomoised in the
  React SDK.

Unfinished.
This commit is contained in:
Kegan Dougal 2015-11-12 11:57:33 +00:00
parent 2cae5e7a00
commit 05eda88ea2
5 changed files with 367 additions and 15 deletions

View file

@ -71,6 +71,7 @@ skin['molecules.voip.CallView'] = require('./views/molecules/voip/CallView');
skin['molecules.voip.IncomingCallBox'] = require('./views/molecules/voip/IncomingCallBox');
skin['molecules.voip.VideoView'] = require('./views/molecules/voip/VideoView');
skin['organisms.CasLogin'] = require('./views/organisms/CasLogin');
skin['organisms.PasswordLogin'] = require('./views/organisms/PasswordLogin');
skin['organisms.CreateRoom'] = require('./views/organisms/CreateRoom');
skin['organisms.ErrorDialog'] = require('./views/organisms/ErrorDialog');
skin['organisms.LeftPanel'] = require('./views/organisms/LeftPanel');
@ -87,6 +88,7 @@ skin['organisms.UserSettings'] = require('./views/organisms/UserSettings');
skin['organisms.ViewSource'] = require('./views/organisms/ViewSource');
skin['pages.CompatibilityPage'] = require('./views/pages/CompatibilityPage');
skin['pages.MatrixChat'] = require('./views/pages/MatrixChat');
skin['pages.LoginPage'] = require('./views/pages/LoginPage');
skin['templates.Login'] = require('./views/templates/Login');
skin['templates.Register'] = require('./views/templates/Register');

View file

@ -20,37 +20,142 @@ var React = require('react');
var Modal = require('matrix-react-sdk/lib/Modal');
var sdk = require('matrix-react-sdk')
var ServerConfigController = require('matrix-react-sdk/lib/controllers/molecules/ServerConfig')
/**
* A pure UI component which displays the HS and IS to use.
*/
module.exports = React.createClass({
displayName: 'ServerConfig',
mixins: [ServerConfigController],
propTypes: {
onHsUrlChanged: React.PropTypes.func,
onIsUrlChanged: React.PropTypes.func,
defaultHsUrl: React.PropTypes.string,
defaultIsUrl: React.PropTypes.string,
withToggleButton: React.PropTypes.bool,
delayTimeMs: React.PropTypes.number // time to wait before invoking onChanged
},
getDefaultProps: function() {
return {
onHsUrlChanged: function() {},
onIsUrlChanged: function() {},
withToggleButton: false,
delayTimeMs: 0
};
},
getInitialState: function() {
return {
hs_url: this.props.defaultHsUrl,
is_url: this.props.defaultIsUrl,
original_hs_url: this.props.defaultHsUrl,
original_is_url: this.props.defaultIsUrl,
// no toggle button = show, toggle button = hide
configVisible: !this.props.withToggleButton
}
},
onHomeserverChanged: function(ev) {
this.setState({hs_url: ev.target.value}, function() {
this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, function() {
this.props.onHsUrlChanged(this.state.hs_url);
});
});
},
onIdentityServerChanged: function(ev) {
this.setState({is_url: ev.target.value}, function() {
this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, function() {
this.props.onIsUrlChanged(this.state.is_url);
});
});
},
_waitThenInvoke: function(existingTimeoutId, fn) {
if (existingTimeoutId) {
clearTimeout(existingTimeoutId);
}
return setTimeout(fn.bind(this), this.props.delayTimeMs);
},
getHsUrl: function() {
return this.state.hs_url;
},
getIsUrl: function() {
return this.state.is_url;
},
onServerConfigVisibleChange: function(ev) {
this.setState({
configVisible: ev.target.checked
});
},
showHelpPopup: function() {
var ErrorDialog = sdk.getComponent('organisms.ErrorDialog');
Modal.createDialog(ErrorDialog, {
title: 'Custom Server Options',
description: <span>
You can use the custom server options to log into other Matrix servers by specifying a different Home server URL.<br/>
This allows you to use Vector with an existing Matrix account on a different Home server.<br/>
You can use the custom server options to log into other Matrix
servers by specifying a different Home server URL.
<br/>
You can also set a custom Identity server but this will affect people's ability to find you
if you use a server in a group other than the main Matrix.org group.
This allows you to use Vector with an existing Matrix account on
a different Home server.
<br/>
<br/>
You can also set a custom Identity server but this will affect
people's ability to find you if you use a server in a group other
than the main Matrix.org group.
</span>,
button: "Dismiss",
focus: true,
focus: true
});
},
render: function() {
var serverConfigStyle = {};
serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
var toggleButton;
if (this.props.withToggleButton) {
toggleButton = (
<div>
<input className="mx_Login_checkbox" id="advanced" type="checkbox"
checked={this.state.configVisible}
onChange={this.onServerConfigVisibleChange} />
<label className="mx_Login_label" htmlFor="advanced">
Use custom server options (advanced)
</label>
</div>
);
}
return (
<div className="mx_ServerConfig">
<label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">Home server URL</label>
<input className="mx_Login_field" id="hsurl" type="text" placeholder={this.state.original_hs_url} value={this.state.hs_url} onChange={this.hsChanged} />
<label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">Identity server URL</label>
<input className="mx_Login_field" id="isurl" type="text" placeholder={this.state.original_is_url} value={this.state.is_url} onChange={this.isChanged} />
<a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>What does this mean?</a>
<div>
{toggleButton}
<div style={serverConfigStyle}>
<div className="mx_ServerConfig">
<label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">
Home server URL
</label>
<input className="mx_Login_field" id="hsurl" type="text"
placeholder={this.state.original_hs_url}
value={this.state.hs_url}
onChange={this.onHomeserverChanged} />
<label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">
Identity server URL
</label>
<input className="mx_Login_field" id="isurl" type="text"
placeholder={this.state.original_is_url}
value={this.state.is_url}
onChange={this.onIdentityServerChanged} />
<a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
What does this mean?
</a>
</div>
</div>
</div>
);
}
});

View file

@ -0,0 +1,64 @@
/*
Copyright 2015 OpenMarket 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.
*/
var React = require('react');
var ReactDOM = require('react-dom');
/**
* A pure UI component which displays a username/password form.
*/
module.exports = React.createClass({displayName: 'PasswordLogin',
propTypes: {
onSubmit: React.PropTypes.func.isRequired // fn(username, password)
},
getInitialState: function() {
return {
username: "",
password: ""
};
},
onSubmitForm: function() {
this.props.onSubmit(this.state.username, this.state.password);
},
onUsernameChanged: function(ev) {
this.setState({username: ev.target.value});
},
onPasswordChanged: function(ev) {
this.setState({password: ev.target.value});
},
render: function() {
return (
<div>
<form onSubmit={this.onSubmitForm}>
<input className="mx_Login_field" ref="user" type="text"
value={this.state.username} onChange={this.onUsernameChanged}
placeholder="Email or user name" />
<br />
<input className="mx_Login_field" ref="pass" type="password"
value={this.state.password} onChange={this.onPasswordChanged}
placeholder="Password" />
<br />
<input className="mx_Login_submit" type="submit" value="Log in" />
</form>
</div>
);
}
});

View file

@ -0,0 +1,176 @@
/*
Copyright 2015 OpenMarket 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.
*/
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var sdk = require('matrix-react-sdk');
var Signup = require("matrix-react-sdk/lib/Signup");
/**
* A wire component which glues together login UI components and Signup logic
*/
module.exports = React.createClass({displayName: 'LoginPage',
propTypes: {
onLoggedIn: React.PropTypes.func.isRequired,
homeserverUrl: React.PropTypes.string,
identityServerUrl: React.PropTypes.string,
// login shouldn't know or care how registration is done.
onRegisterClick: React.PropTypes.func.isRequired
},
getDefaultProps: function() {
return {
homeserverUrl: 'https://matrix.org/',
identityServerUrl: 'https://matrix.org/'
};
},
getInitialState: function() {
return {
busy: false,
errorText: null,
enteredHomeserverUrl: this.props.homeserverUrl,
enteredIdentityServerUrl: this.props.identityServerUrl
};
},
componentWillMount: function() {
this._initLoginLogic();
},
onPasswordLogin: function(username, password) {
// TODO
console.log("onPasswordLogin %s %s", username, password);
},
onHsUrlChanged: function(newHsUrl) {
console.log("onHsUrlChanged %s", newHsUrl);
this._initLoginLogic(newHsUrl);
},
_initLoginLogic: function(hsUrl, isUrl) {
var self = this;
hsUrl = hsUrl || this.state.enteredHomeserverUrl;
isUrl = isUrl || this.state.enteredIdentityServerUrl;
var loginLogic = new Signup.Login(hsUrl, isUrl);
this._loginLogic = loginLogic;
loginLogic.getFlows().then(function(flows) {
// old behaviour was to always use the first flow without presenting
// options. This works in most cases (we don't have a UI for multiple
// logins so let's skip that for now).
loginLogic.chooseFlow(0);
}, function(err) {
self._setErrorTextFromError(err);
}).finally(function() {
self.setState({
busy: false
});
});
this.setState({
enteredHomeserverUrl: hsUrl,
enteredIdentityServerUrl: isUrl,
busy: true,
errorText: null // reset err messages
});
},
_getCurrentFlowStep: function() {
return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null
},
_setErrorTextFromError: function(err) {
var errCode = err.errcode;
if (!errCode && err.httpStatus) {
errCode = "HTTP " + err.httpStatus;
}
this.setState({
errorText: (
"Error: Problem communicating with the given homeserver " +
(errCode ? "(" + errCode + ")" : "")
)
});
},
componentForStep: function(step) {
switch (step) {
case 'm.login.password':
var PasswordLogin = sdk.getComponent('organisms.PasswordLogin');
return (
<PasswordLogin onSubmit={this.onPasswordLogin} />
);
case 'm.login.cas':
var CasLogin = sdk.getComponent('organisms.CasLogin');
return (
<CasLogin />
);
default:
if (!step) {
return;
}
return (
<div>
Sorry, this homeserver is using a login which is not
recognised by Vector ({step})
</div>
);
}
},
render: function() {
var Loader = sdk.getComponent("atoms.Spinner");
var loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
var ServerConfig = sdk.getComponent("molecules.ServerConfig");
return (
<div className="mx_Login">
<div className="mx_Login_box">
<div className="mx_Login_logo">
<img src="img/logo.png" width="249" height="78" alt="vector"/>
</div>
<div>
<h2>Sign in</h2>
{this.componentForStep(this._getCurrentFlowStep())}
<ServerConfig ref="serverConfig"
withToggleButton={true}
defaultHsUrl={this.props.homeserverUrl}
defaultIsUrl={this.props.identityServerUrl}
onHsUrlChanged={this.onHsUrlChanged}
delayTimeMs={1000}/>
<div className="mx_Login_error">
{ loader }
{this.state.errorText}
</div>
<a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
Create a new account
</a>
<br/>
<div className="mx_Login_links">
<a href="https://medium.com/@Vector">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="https://twitter.com/@VectorCo">twitter</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="https://github.com/vector-im/vector-web">github</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="https://matrix.org">powered by Matrix</a>
</div>
</div>
</div>
</div>
);
}
});

View file

@ -89,6 +89,10 @@ module.exports = React.createClass({
});
},
onRegisterClick: function() {
this.showScreen("register");
},
render: function() {
var LeftPanel = sdk.getComponent('organisms.LeftPanel');
var RoomView = sdk.getComponent('organisms.RoomView');
@ -164,8 +168,9 @@ module.exports = React.createClass({
/>
);
} else {
var LoginPage = sdk.getComponent("pages.LoginPage");
return (
<Login onLoggedIn={this.onLoggedIn} />
<LoginPage onLoggedIn={this.onLoggedIn} onRegisterClick={this.onRegisterClick} />
);
}
}