mirror of
https://github.com/vector-im/element-web.git
synced 2025-10-31 16:21:46 +01:00
implement login
This commit is contained in:
Matthew Hodgson
parent
1e1f7492d8
commit
d239070adb
31
skins/base/css/molecules/ServerConfig.css
Normal file
31
skins/base/css/molecules/ServerConfig.css
Normal file
@ -0,0 +1,31 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
.mx_ServerConfig {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.mx_ServerConfig .mx_Login_field {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mx_ServerConfig_help:link {
|
||||
opacity: 0.8;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
@ -15,8 +15,81 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_Login {
|
||||
width: 600px;
|
||||
height: 350px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_Login h2 {
|
||||
color: #4a4a4a;
|
||||
font-weight: 300;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mx_Login_box {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.mx_Login_logo {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_Login_field {
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c7c7c7;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
padding: 9px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.mx_Login_submit {
|
||||
margin-top: 35px;
|
||||
margin-bottom: 24px;
|
||||
width: 100%;
|
||||
border-radius: 40px;
|
||||
height: 40px;
|
||||
border: 0px;
|
||||
background-color: #76cfa6;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mx_Login_label {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_Login_advanced_checkbox {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_Login_create {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_Login_error {
|
||||
color: #ff2020;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mx_Login_create:link {
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
|
||||
BIN
skins/base/img/logo.png
Normal file
BIN
skins/base/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -26,17 +26,12 @@ module.exports = React.createClass({
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="HomeServerTextBox">
|
||||
<table className="serverConfig">
|
||||
<tr>
|
||||
<td>Home Server URL</td>
|
||||
<td><input type="text" value={this.state.hs_url} onChange={this.hsChanged} /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Identity Server URL</td>
|
||||
<td><input type="text" value={this.state.is_url} onChange={this.isChanged} /></td>
|
||||
</tr>
|
||||
</table>
|
||||
<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" 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" type="text" value={this.state.is_url} onChange={this.isChanged} />
|
||||
<a className="mx_ServerConfig_help" href="#">What does this mean?</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -111,8 +111,8 @@ module.exports = React.createClass({
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<input type="checkbox" value={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />
|
||||
Use custom server options (advanced)
|
||||
<input className="mx_Login_advanced_checkbox" id="advanced" type="checkbox" value={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />
|
||||
<label className="mx_Login_label" htmlFor="advanced">Use custom server options (advanced)</label>
|
||||
<div style={serverConfigStyle}>
|
||||
<ServerConfig ref="serverConfig"
|
||||
defaultHsUrl={this.customHsUrl} defaultIsUrl={this.customIsUrl}
|
||||
@ -126,10 +126,10 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={this.onUserPassEntered}>
|
||||
<input ref="user" type="text" placeholder="username" /><br />
|
||||
<input ref="pass" type="password" placeholder="password" /><br />
|
||||
<input className="mx_Login_field" ref="user" type="text" placeholder="Email or user name" /><br />
|
||||
<input className="mx_Login_field" ref="pass" type="password" placeholder="Password" /><br />
|
||||
{this.componentForStep('choose_hs')}
|
||||
<input type="submit" value="Log in" />
|
||||
<input className="mx_Login_submit" type="submit" value="Log in" />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
@ -144,10 +144,10 @@ module.exports = React.createClass({
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<h1>Please log in:</h1>
|
||||
<h2>Sign in</h2>
|
||||
{this.componentForStep(this.state.step)}
|
||||
<div className="error">{this.state.errorText}</div>
|
||||
<a onClick={this.showRegister} href="#">Create a new account</a>
|
||||
<div className="mx_Login_error">{this.state.errorText}</div>
|
||||
<a className="mx_Login_create" onClick={this.showRegister} href="#">Create a new account</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -156,8 +156,13 @@ module.exports = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_Login">
|
||||
<div className="mx_Login_box">
|
||||
<div className="mx_Login_logo">
|
||||
<img src="/img/logo.png" width="249" height="76" alt="vector"/>
|
||||
</div>
|
||||
{this.loginContent()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@ -129,7 +129,7 @@ module.exports = React.createClass({
|
||||
case 'stage_m.login.recaptcha':
|
||||
return (
|
||||
<div ref="recaptchaContainer">
|
||||
This Home Server would like to make sure you're not a robot
|
||||
This Home Server would like to make sure you are not a robot
|
||||
<div id="mx_recaptcha"></div>
|
||||
</div>
|
||||
);
|
||||
@ -180,9 +180,14 @@ module.exports = React.createClass({
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_Register">
|
||||
<div className="mx_Login">
|
||||
<div className="mx_Login_box">
|
||||
<div className="mx_Login_logo">
|
||||
<img src="/img/logo.png" width="249" height="76" alt="vector"/>
|
||||
</div>
|
||||
{this.registerContent()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user