Modal component

2 files changed, 69 insertions, 8 deletions

diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js
index f35a932d..c332de14 100644
--- a/vnext/src/components/LoginButton.js
+++ b/vnext/src/components/LoginButton.js
@@ -1,24 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from './Icon';
+import Modal from './Modal';
 
 
 export default class LoginButton extends React.Component {
   constructor(props) {
     super(props);
-    window.addEventListener('message', (event) => {
-      this.props.onAuth(event.data);
-    }, false);
+    this.state = { isOpen: false };
   }
-  login(event) {
-    event.preventDefault();
-    let loginWindow = window.open('https://juick.com/login?redirect=false', 'Login to Juick', 'width=400,height=300,resizeable=no,menubar=no,toolbar=no,scrollbars=no');
-    loginWindow.window.focus();
+  toggleModal(event) {
+    event.preventDefault()
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
   }
 
   render() {
     return (
-      <a href="/login" onClick={this.login}><Icon name="ei-user" size="s"/>{this.props.title}</a>
+      <React.Fragment>
+        <a onClick={this.toggleModal.bind(this)}><Icon name="ei-user" size="s" />{this.props.title}</a>
+        <Modal show={this.state.isOpen}
+          onClose={this.toggleModal.bind(this)}>
+          <div className="dialoglogin">
+            <p>Please, introduce yourself:</p>
+            <a href="/_fblogin" id="signfb"><Icon name="ei-sc-facebook" size="s" />Login with facebook</a>
+            <a href="/_vklogin" id="signvk"><Icon name="ei-sc-vk" size="s" />Login with VK</a>
+            <p>Already registered?</p>
+            <form action="/login" method="POST">
+              <input className="signinput" type="text" name="username" placeholder="Username..." /><br />
+              <input className="signinput" type="password" name="password" placeholder="Password..." /><br />
+              <input className="signsubmit" type="submit" value="OK" />
+            </form>
+          </div>
+        </Modal>
+      </React.Fragment>
     );
   }
 }
diff --git a/vnext/src/components/Modal.js b/vnext/src/components/Modal.js
new file mode 100644
index 00000000..296f7911
--- /dev/null
+++ b/vnext/src/components/Modal.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from './Icon';
+
+class Modal extends React.Component {
+    render() {
+        // Render nothing if the "show" prop is false
+        if (!this.props.show) {
+            return null;
+        }
+
+        // The gray background
+        const backdropStyle = {
+            position: 'fixed',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: 'rgba(0,0,0,0.3)',
+            padding: 50
+        };
+
+        return (
+            <div id="dialogt" style={backdropStyle}>
+                <div id="dialogw">
+                    <div id="dialog_header">
+                        <div id="dialogc" onClick={this.props.onClose}>
+                            <Icon name="ei-close" size="s" />
+                        </div>
+                    </div>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+Modal.propTypes = {
+    onClose: PropTypes.func.isRequired,
+    show: PropTypes.bool,
+    children: PropTypes.node
+};
+
+export default Modal;
\ No newline at end of file