120 lines
3.6 KiB
JavaScript
120 lines
3.6 KiB
JavaScript
// eslint-disable-next-line
|
|
const preact = require('preact');
|
|
const { Component } = require('preact')
|
|
const { connect } = require('preact-redux');
|
|
|
|
const { postData } = require('../utils');
|
|
|
|
const addState = connect(
|
|
(state) => {
|
|
const {
|
|
ws
|
|
} = state;
|
|
function submitLogin(name, password) {
|
|
postData('/login', { name, password })
|
|
.then(data => ws.connect())
|
|
.catch(error => console.error(error));
|
|
}
|
|
|
|
function submitRegister(name, password, code) {
|
|
postData('/register', { name, password, code })
|
|
.then(data => ws.connect())
|
|
.catch(error => console.error(error));
|
|
}
|
|
|
|
return {
|
|
submitLogin,
|
|
submitRegister,
|
|
}
|
|
},
|
|
);
|
|
|
|
class Login extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = { name: '', password: '', code: ''};
|
|
|
|
this.nameInput = this.nameInput.bind(this);
|
|
this.passwordInput = this.passwordInput.bind(this);
|
|
this.codeInput = this.codeInput.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 });
|
|
}
|
|
|
|
codeInput(event) {
|
|
this.setState({ code: 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, this.state.code);
|
|
console.log(this.state);
|
|
this.setState({ name: '', password: '', code: ''});
|
|
}
|
|
|
|
|
|
render() {
|
|
return (
|
|
<main>
|
|
<h1 class="mobile-title" >mnml.gg</h1>
|
|
<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}
|
|
/>
|
|
<input
|
|
class="login-input"
|
|
type="text"
|
|
placeholder="code"
|
|
value={this.state.code}
|
|
onInput={this.codeInput}
|
|
/>
|
|
<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);
|