diff options
author | 2018-06-16 19:38:51 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | 445f9d694df84bf6a4aedbeae47f8df7baa55c29 (patch) | |
tree | cae8b1c26b2345795a2f62530a2c13e81ae9293c /vnext/src | |
parent | 5bc9a7cc3f45697d7d0c0913b6971fedd87f096b (diff) |
Modal component
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/LoginButton.js | 32 | ||||
-rw-r--r-- | vnext/src/components/Modal.js | 45 |
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 |