Make it log in

7 years ago · f487b9ba04
5 changed files with 46 additions and 0 deletions
--- a/css/common.css
+++ b/css/common.css
@ -0,0 +1,3 @@
+div.error {
+    color: red;
+}
--- a/css/molecules/ProgressBar.css
+++ b/css/molecules/ProgressBar.css
@ -0,0 +1,12 @@
+.mx_ProgressBar {
+    height: 5px;
+    border-radius: 5px;
+    border: 1px solid black;
+    margin-bottom: 10px;
+}
+
+.mx_ProgressBar_fill {
+    height: 100%;
+    background-color: #666;
+    transition: width 0.1s ease;
+}
--- a/css/templates/Login.css
+++ b/css/templates/Login.css
@ -0,0 +1,11 @@
+.mx_Login {
+    width: 600px;
+    height: 350px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 10px;
+    text-align: center;
+    background-color: #eee;
+    border: 1px solid black;
+}
+
--- a/example/index.html
+++ b/example/index.html
@ -7,5 +7,6 @@
  <body>
    <section id="matrixchat"></section>
    <script src="bundle.js"></script>
+    <link rel="stylesheet" href="bundle.css">
  </body>
 </html>
--- a/src/molecules/ProgressBar.js
+++ b/src/molecules/ProgressBar.js
@ -0,0 +1,19 @@
+var React = require('react');
+
+module.exports = React.createClass({
+    propTypes: {
+        value: React.PropTypes.number,
+        max: React.PropTypes.number
+    },
+
+    render: function() {
+        // Would use an HTML5 progress tag but if that doesn't animate if you
+        // use the HTML attributes rather than styles
+        var progressStyle = {
+            width: ((this.props.value / this.props.max) * 100)+"%"
+        };
+        return (
+            <div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
+        );
+    }
+});