+ {toggleButton}
+
);
}
});
diff --git a/src/skins/vector/views/organisms/PasswordLogin.js b/src/skins/vector/views/organisms/PasswordLogin.js
new file mode 100644
index 00000000..ff277ced
--- /dev/null
+++ b/src/skins/vector/views/organisms/PasswordLogin.js
@@ -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 (
+
+
+
+
+
+
+
+
+ What does this mean?
+
+
+
+
+ );
+ }
+});
\ No newline at end of file
diff --git a/src/skins/vector/views/pages/LoginPage.js b/src/skins/vector/views/pages/LoginPage.js
new file mode 100644
index 00000000..7b4f636f
--- /dev/null
+++ b/src/skins/vector/views/pages/LoginPage.js
@@ -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 (
+
+ Sorry, this homeserver is using a login which is not
+ recognised by Vector ({step})
+
+ );
+ }
+ },
+
+ render: function() {
+ var Loader = sdk.getComponent("atoms.Spinner");
+ var loader = this.state.busy ?
+
+ );
+ }
+});
diff --git a/src/skins/vector/views/pages/MatrixChat.js b/src/skins/vector/views/pages/MatrixChat.js
index 0553c25a..0fea1f36 100644
--- a/src/skins/vector/views/pages/MatrixChat.js
+++ b/src/skins/vector/views/pages/MatrixChat.js
@@ -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 (
-
+
+
+ 
+
+
+
+
+
+ +
+ Sign in
+ {this.componentForStep(this._getCurrentFlowStep())} +
+ { loader }
+ {this.state.errorText}
+
+
+ Create a new account
+
+ + +