110 lines
3.3 KiB
JavaScript
110 lines
3.3 KiB
JavaScript
// eslint-disable-next-line
|
|
const preact = require('preact');
|
|
const { Component } = require('preact')
|
|
const { connect } = require('preact-redux');
|
|
const linkState = require('linkstate').default;
|
|
|
|
const { postData, errorToast, infoToast } = require('../utils');
|
|
|
|
const addState = connect(
|
|
(state) => {
|
|
const {
|
|
ws
|
|
} = state;
|
|
|
|
function submitRegister(name, password) {
|
|
postData('/account/register', { name, password })
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.error) return errorToast(data.error);
|
|
infoToast(data.message);
|
|
ws.connect();
|
|
})
|
|
.catch(error => errorToast(error));
|
|
}
|
|
|
|
return {
|
|
submitRegister,
|
|
}
|
|
},
|
|
);
|
|
|
|
function Register(args) {
|
|
const {
|
|
submitRegister,
|
|
} = args;
|
|
|
|
const { password, confirm, name, terms } = this.state;
|
|
|
|
const registerSubmit = (event) => {
|
|
event.preventDefault();
|
|
this.setState({ name: '', password: '', confirm: '' });
|
|
submitRegister(name, password);
|
|
}
|
|
|
|
const pwLen = () =>
|
|
!password || password && password.length > 3;
|
|
|
|
const registerConfirm = () =>
|
|
password === confirm;
|
|
|
|
const registerDisabled = () => {
|
|
return !(registerConfirm() && password && name && terms);
|
|
}
|
|
|
|
return (
|
|
<div class="login">
|
|
<label class="login-input" for="username">Username </label>
|
|
<input
|
|
class="login-input"
|
|
type="text"
|
|
placeholder="username"
|
|
value={this.state.name}
|
|
onInput={linkState(this, 'name')}
|
|
/>
|
|
<label
|
|
class={`${pwLen() ? '' : 'red'} login-input`}
|
|
for="password">Password - min 4 chars
|
|
</label>
|
|
<input
|
|
class={`${pwLen() ? '' : 'red'} login-input`}
|
|
type="password"
|
|
placeholder="password"
|
|
autocomplete="new-password"
|
|
value={this.state.password}
|
|
onInput={linkState(this, 'password')}
|
|
/>
|
|
<label
|
|
class={`${registerConfirm() ? '' : 'red'} login-input`}
|
|
for="confirm">Confirm Password
|
|
</label>
|
|
<input
|
|
class={`${registerConfirm() ? '' : 'red'} login-input`}
|
|
type="password"
|
|
placeholder="confirm"
|
|
autocomplete="new-password"
|
|
value={this.state.confirm}
|
|
onInput={linkState(this, 'confirm')}
|
|
/>
|
|
<div>
|
|
<input
|
|
type="checkbox"
|
|
name="terms"
|
|
id="register-terms"
|
|
onInput={linkState(this, 'terms')
|
|
}/>
|
|
<label class="terms" for="register-terms">Confirm agreement to terms of service.</label>
|
|
<button onClick={() => window.open('/tos.html')}>VIEW</button>
|
|
</div>
|
|
<button
|
|
class="login-btn"
|
|
disabled={registerDisabled()}
|
|
onClick={registerSubmit}>
|
|
Register
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Register);
|