2019-06-10 14:06:35 +10:00

95 lines
2.8 KiB
JavaScript

// eslint-disable-next-line
const preact = require('preact');
const { Component } = require('preact')
const { connect } = require('preact-redux');
const addState = connect(
(state) => {
const { ws, account } = state;
function submitLogin(name, password) {
return ws.sendAccountLogin(name, password);
}
function submitRegister(name, password) {
console.log(name, password);
return ws.sendAccountCreate(name, password);
}
return { account, submitLogin, submitRegister };
},
);
class Login extends Component {
constructor(props) {
super(props);
this.state = { name: '', password: '' };
this.nameInput = this.nameInput.bind(this);
this.passwordInput = this.passwordInput.bind(this);
this.loginSubmit = this.loginSubmit.bind(this);
this.registerSubmit = this.registerSubmit.bind(this);
}
nameInput(event) {
this.setState({ name: event.target.value });
}
passwordInput(event) {
this.setState({ password: event.target.value });
}
loginSubmit(event) {
event.preventDefault();
console.log(this.state);
this.props.submitLogin(this.state.name, this.state.password);
this.setState({ name: '', password: '' });
}
registerSubmit(event) {
event.preventDefault();
this.props.submitRegister(this.state.name, this.state.password);
console.log(this.state);
this.setState({ name: '', password: '' });
}
render() {
return (
<main>
<div class="login">
<input
class="login-input"
type="email"
placeholder="username"
value={this.state.name}
onInput={this.nameInput}
/>
<input
class="login-input"
type="password"
placeholder="password"
value={this.state.password}
onInput={this.passwordInput}
/>
<button
class="login-btn"
onClick={this.loginSubmit}>
Login
</button>
<button
class="login-btn"
onClick={this.registerSubmit}>
Register
</button>
<button
class="login-btn"
onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
Discord + Invites
</button>
</div>
</main>
);
}
}
module.exports = addState(Login);