aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-16 19:38:51 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:52 +0300
commit445f9d694df84bf6a4aedbeae47f8df7baa55c29 (patch)
treecae8b1c26b2345795a2f62530a2c13e81ae9293c
parent5bc9a7cc3f45697d7d0c0913b6971fedd87f096b (diff)
Modal component
-rw-r--r--vnext/src/components/LoginButton.js32
-rw-r--r--vnext/src/components/Modal.js45
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