Skip to content

Commit af1e337

Browse files
kegsaykegsay
committed
Merge pull request element-hq#355 from vector-im/kegan/login-refactor
Refactor login page
2 parents bf91155 + b143835 commit af1e337

File tree

6 files changed

+325
-272
lines changed

6 files changed

+325
-272
lines changed

‎src/skins/vector/skindex.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ skin['molecules.UserSelector'] = require('./views/molecules/UserSelector');
7070
skin['molecules.voip.CallView'] = require('./views/molecules/voip/CallView');
7171
skin['molecules.voip.IncomingCallBox'] = require('./views/molecules/voip/IncomingCallBox');
7272
skin['molecules.voip.VideoView'] = require('./views/molecules/voip/VideoView');
73-
skin['organisms.CasLogin'] = require('./views/organisms/CasLogin');
7473
skin['organisms.CreateRoom'] = require('./views/organisms/CreateRoom');
7574
skin['organisms.ErrorDialog'] = require('./views/organisms/ErrorDialog');
7675
skin['organisms.LeftPanel'] = require('./views/organisms/LeftPanel');
@@ -87,7 +86,7 @@ skin['organisms.UserSettings'] = require('./views/organisms/UserSettings');
8786
skin['organisms.ViewSource'] = require('./views/organisms/ViewSource');
8887
skin['pages.CompatibilityPage'] = require('./views/pages/CompatibilityPage');
8988
skin['pages.MatrixChat'] = require('./views/pages/MatrixChat');
90-
skin['templates.Login'] = require('./views/templates/Login');
89+
skin['pages.Login'] = require('./views/pages/Login');
9190
skin['templates.Register'] = require('./views/templates/Register');
9291

9392
module.exports = skin;

‎src/skins/vector/views/molecules/ServerConfig.js‎

Lines changed: 119 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,37 +20,142 @@ var React = require('react');
2020
var Modal = require('matrix-react-sdk/lib/Modal');
2121
var sdk = require('matrix-react-sdk')
2222

23-
var ServerConfigController = require('matrix-react-sdk/lib/controllers/molecules/ServerConfig')
24-
23+
/**
24+
* A pure UI component which displays the HS and IS to use.
25+
*/
2526
module.exports = React.createClass({
2627
displayName: 'ServerConfig',
27-
mixins: [ServerConfigController],
28+
29+
propTypes: {
30+
onHsUrlChanged: React.PropTypes.func,
31+
onIsUrlChanged: React.PropTypes.func,
32+
defaultHsUrl: React.PropTypes.string,
33+
defaultIsUrl: React.PropTypes.string,
34+
withToggleButton: React.PropTypes.bool,
35+
delayTimeMs: React.PropTypes.number // time to wait before invoking onChanged
36+
},
37+
38+
getDefaultProps: function() {
39+
return {
40+
onHsUrlChanged: function() {},
41+
onIsUrlChanged: function() {},
42+
withToggleButton: false,
43+
delayTimeMs: 0
44+
};
45+
},
46+
47+
getInitialState: function() {
48+
return {
49+
hs_url: this.props.defaultHsUrl,
50+
is_url: this.props.defaultIsUrl,
51+
original_hs_url: this.props.defaultHsUrl,
52+
original_is_url: this.props.defaultIsUrl,
53+
// no toggle button = show, toggle button = hide
54+
configVisible: !this.props.withToggleButton
55+
}
56+
},
57+
58+
onHomeserverChanged: function(ev) {
59+
this.setState({hs_url: ev.target.value}, function() {
60+
this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, function() {
61+
this.props.onHsUrlChanged(this.state.hs_url);
62+
});
63+
});
64+
},
65+
66+
onIdentityServerChanged: function(ev) {
67+
this.setState({is_url: ev.target.value}, function() {
68+
this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, function() {
69+
this.props.onIsUrlChanged(this.state.is_url);
70+
});
71+
});
72+
},
73+
74+
_waitThenInvoke: function(existingTimeoutId, fn) {
75+
if (existingTimeoutId) {
76+
clearTimeout(existingTimeoutId);
77+
}
78+
return setTimeout(fn.bind(this), this.props.delayTimeMs);
79+
},
80+
81+
getHsUrl: function() {
82+
return this.state.hs_url;
83+
},
84+
85+
getIsUrl: function() {
86+
return this.state.is_url;
87+
},
88+
89+
onServerConfigVisibleChange: function(ev) {
90+
this.setState({
91+
configVisible: ev.target.checked
92+
});
93+
},
2894

2995
showHelpPopup: function() {
3096
var ErrorDialog = sdk.getComponent('organisms.ErrorDialog');
3197
Modal.createDialog(ErrorDialog, {
3298
title: 'Custom Server Options',
3399
description: <span>
34-
You can use the custom server options to log into other Matrix servers by specifying a different Home server URL.<br/>
35-
This allows you to use Vector with an existing Matrix account on a different Home server.<br/>
100+
You can use the custom server options to log into other Matrix
101+
servers by specifying a different Home server URL.
102+
<br/>
103+
This allows you to use Vector with an existing Matrix account on
104+
a different Home server.
36105
<br/>
37-
You can also set a custom Identity server but this will affect people's ability to find you
38-
if you use a server in a group other than the main Matrix.org group.
106+
<br/>
107+
You can also set a custom Identity server but this will affect
108+
people&#39;s ability to find you if you use a server in a group other
109+
than the main Matrix.org group.
39110
</span>,
40111
button: "Dismiss",
41-
focus: true,
112+
focus: true
42113
});
43114
},
44115

45116
render: function() {
117+
var serverConfigStyle = {};
118+
serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
119+
120+
var toggleButton;
121+
if (this.props.withToggleButton) {
122+
toggleButton = (
123+
<div>
124+
<input className="mx_Login_checkbox" id="advanced" type="checkbox"
125+
checked={this.state.configVisible}
126+
onChange={this.onServerConfigVisibleChange} />
127+
<label className="mx_Login_label" htmlFor="advanced">
128+
Use custom server options (advanced)
129+
</label>
130+
</div>
131+
);
132+
}
133+
46134
return (
47-
<div className="mx_ServerConfig">
48-
<label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">Home server URL</label>
49-
<input className="mx_Login_field" id="hsurl" type="text" placeholder={this.state.original_hs_url} value={this.state.hs_url} onChange={this.hsChanged} />
50-
<label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">Identity server URL</label>
51-
<input className="mx_Login_field" id="isurl" type="text" placeholder={this.state.original_is_url} value={this.state.is_url} onChange={this.isChanged} />
52-
<a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>What does this mean?</a>
135+
<div>
136+
{toggleButton}
137+
<div style={serverConfigStyle}>
138+
<div className="mx_ServerConfig">
139+
<label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">
140+
Home server URL
141+
</label>
142+
<input className="mx_Login_field" id="hsurl" type="text"
143+
placeholder={this.state.original_hs_url}
144+
value={this.state.hs_url}
145+
onChange={this.onHomeserverChanged} />
146+
<label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">
147+
Identity server URL
148+
</label>
149+
<input className="mx_Login_field" id="isurl" type="text"
150+
placeholder={this.state.original_is_url}
151+
value={this.state.is_url}
152+
onChange={this.onIdentityServerChanged} />
153+
<a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
154+
What does this mean?
155+
</a>
156+
</div>
53157
</div>
158+
</div>
54159
);
55160
}
56161
});

‎src/skins/vector/views/organisms/CasLogin.js‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

0 commit comments

Comments
 (0)