implement login

skins/base/css/molecules/ServerConfig.css

@@ -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;
+}

skins/base/css/templates/Login.css

@@ -15,8 +15,81 @@ limitations under the License.
 */
 
 .mx_Login {
-    width: 600px;
+    width: 100%;
-    height: 350px;
+    height: 100%;
-    position: relative;
+    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;
 }
 

skins/base/views/molecules/ServerConfig.js

@@ -26,17 +26,12 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <div className="HomeServerTextBox">
+            <div className="mx_ServerConfig">
-                <table className="serverConfig">
+                <label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">Home server URL</label>
-                <tr>
+                <input className="mx_Login_field" id="hsurl" type="text" value={this.state.hs_url} onChange={this.hsChanged} />
-                <td>Home Server URL</td>
+                <label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">Identity server URL</label>
-                <td><input type="text" value={this.state.hs_url} onChange={this.hsChanged} /></td>
+                <input className="mx_Login_field" type="text" value={this.state.is_url} onChange={this.isChanged} />
-                </tr>
+                <a className="mx_ServerConfig_help" href="#">What does this mean?</a>
-                <tr>
-                <td>Identity Server URL</td>
-                <td><input type="text" value={this.state.is_url} onChange={this.isChanged} /></td>
-                </tr>
-                </table>
             </div>
         );
     }

skins/base/views/templates/Login.js

@@ -111,8 +111,8 @@ module.exports = React.createClass({
                 }
                 return (
                     <div>
-                        <input type="checkbox" value={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />
+                        <input className="mx_Login_advanced_checkbox" id="advanced" type="checkbox" value={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />
-                        Use custom server options (advanced)
+                        <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 className="mx_Login_field" ref="user" type="text" placeholder="Email or user name" /><br />
-                        <input ref="pass" type="password" placeholder="password" /><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>
+                    <div className="mx_Login_error">{this.state.errorText}</div>
-                    <a onClick={this.showRegister} href="#">Create a new account</a>
+                    <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>
         );
     }
 });

skins/base/views/templates/Register.js

@@ -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>
         );
     }
 });