125 lines
3.3 KiB
JavaScript
125 lines
3.3 KiB
JavaScript
var sha256 = require('js-sha256').sha256;
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import Button from 'material-ui/Button';
|
|
import TextField from 'material-ui/TextField';
|
|
import { withStyles } from 'material-ui/styles';
|
|
import PropTypes from 'prop-types';
|
|
import Modal from 'material-ui/Modal';
|
|
import Dialog, {
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
} from 'material-ui/Dialog';
|
|
import InsertLinkIcon from 'material-ui-icons/Link';
|
|
import ReactTooltip from 'react-tooltip'
|
|
import Icon from 'material-ui/Icon';
|
|
import IconButton from 'material-ui/IconButton';
|
|
|
|
|
|
|
|
const button = {
|
|
fontSize: '60px',
|
|
marginRight: '20px',
|
|
}
|
|
|
|
const inlineStyle = {
|
|
display: 'inline-block',
|
|
backdrop: 'static',
|
|
}
|
|
|
|
const errorStyle = {
|
|
color: 'red',
|
|
}
|
|
|
|
export default class Login extends React.Component {
|
|
|
|
state = {
|
|
open: false,
|
|
username: "",
|
|
password: "",
|
|
wrongPasswordMessage: "",
|
|
};
|
|
|
|
|
|
componentWillMount() {
|
|
if ((LoginRequired) && (this.props.loggedin == false)) {
|
|
this.setState({open: true})
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
document.addEventListener('keydown', this.handleKeySubmit); // if the user presses enter, submit the form
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
document.removeEventListener('keydown', this.handleKeySubmit);
|
|
}
|
|
|
|
handleKeySubmit = (e) => {
|
|
if (e.keyCode === 13) {
|
|
this.handleSubmit()
|
|
}
|
|
}
|
|
|
|
handleSubmit = () => {
|
|
let hashedPass = sha256(this.state.password) //hash the password to match it with the hashed one in the kickwebsocket
|
|
if ((this.state.username == ClientUsername) && (hashedPass == ClientPassword)) {
|
|
this.setState({ open: false, username: "", password: "" });
|
|
this.props.changeLoggedin(true)
|
|
} else {
|
|
this.setState({wrongPasswordMessage: "Wrong Username/Password!"})
|
|
}
|
|
}
|
|
|
|
handleRequestClose = () => {
|
|
ws.close()
|
|
}
|
|
|
|
setUserNameValue = (event) => {
|
|
this.setState({username: event.target.value});
|
|
}
|
|
|
|
setPasswordValue = (event) => {
|
|
this.setState({password: event.target.value})
|
|
}
|
|
|
|
render() {
|
|
const { classes, onRequestClose, handleRequestClose, handleSubmit } = this.props;
|
|
return (
|
|
<Dialog open={this.state.open} onClose={this.handleRequestClose} ignoreBackdropClick={true} disableBackdrop={true}>
|
|
<DialogTitle>Login Here</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>
|
|
Enter a username and password to connect
|
|
</DialogContentText>
|
|
<br />
|
|
<DialogContentText style={errorStyle}>
|
|
{this.state.wrongPasswordMessage}
|
|
</DialogContentText>
|
|
<TextField
|
|
autoFocus
|
|
margin="dense"
|
|
id="name"
|
|
label="User Name"
|
|
type="text"
|
|
placeholder="Username"
|
|
fullWidth
|
|
onChange={this.setUserNameValue}
|
|
/>
|
|
<TextField id="password" type="password" label="Password" placeholder="Password" fullWidth onChange={this.setPasswordValue} />
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={this.handleRequestClose} color="primary">
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={this.handleSubmit} color="primary">
|
|
Submit
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|
|
};
|