From 445f9d694df84bf6a4aedbeae47f8df7baa55c29 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Sat, 16 Jun 2018 19:38:51 +0300 Subject: Modal component --- vnext/src/components/LoginButton.js | 32 +++++++++++++++++++------- vnext/src/components/Modal.js | 45 +++++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 8 deletions(-) create mode 100644 vnext/src/components/Modal.js (limited to 'vnext/src/components') 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 ( - {this.props.title} + + {this.props.title} + +
+

Please, introduce yourself:

+ Login with facebook + Login with VK +

Already registered?

+
+
+
+ +
+
+
+
); } } 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 ( +
+
+
+
+ +
+
+ {this.props.children} +
+
+ ); + } +} + +Modal.propTypes = { + onClose: PropTypes.func.isRequired, + show: PropTypes.bool, + children: PropTypes.node +}; + +export default Modal; \ No newline at end of file -- cgit v1.2.3