ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

login pimpout

Browse Source
This commit is contained in:
ntr
2019-08-12 14:11:53 +10:00
parent b15a494a4b
commit b4dccf9f1c
11 changed files with 98 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/assets/styles/nav.less
+1
View File
@@ -6,6 +6,7 @@ nav {
h1 {
margin-bottom: 0.5em;
letter-spacing: 0.05em;
}
h2:first-child {
client/assets/styles/styles.less
+9 -1
View File
@@ -43,6 +43,9 @@ html {
h1 {
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
letter-spacing: 0.05em;
}
h2 {
@@ -175,9 +178,14 @@ button[disabled] {
*/
.login {
width: 25%;
width: 50%;
display: flex;
flex-flow: column;
margin-bottom: 2em;
h2 {
margin-bottom: 0.5em;
}
}
#mnml input, #mnml select {
client/assets/styles/styles.mobile.css
+1 -1
View File
@@ -50,7 +50,7 @@
main {
overflow-x: hidden;
padding: 0;
padding: 0 0.5em;
}
.login {
client/index.html
+1 -1
View File
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>mnml.gg</title>
<title>mnml - abstract strategy</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name=apple-mobile-web-app-capable content=yes>
client/package.json
+1
View File
@@ -21,6 +21,7 @@
"docco": "^0.7.0",
"izitoast": "^1.4.0",
"keymaster": "^1.6.2",
"linkstate": "^1.1.1",
"lodash": "^4.17.15",
"node-sass": "^4.12.0",
"parcel": "^1.12.3",
client/src/components/account.management.jsx
+2 -2
View File
@@ -16,7 +16,7 @@ const addState = connect(
function logout() {
postData('/logout').then(() => window.location.reload(true));
postData('/account/logout').then(() => window.location.reload(true));
}
function sendConstructSpawn(name) {
@@ -71,7 +71,7 @@ function AccountStatus(args) {
<button>Update</button>
</form>
<form>
<label for="password">Change Password:</label>
<label for="current">Change Password:</label>
<input
class="login-input"
type="password"
client/src/components/controls.jsx
+5
View File
@@ -10,12 +10,14 @@ const addState = connect(
function receiveState(state) {
const {
ws,
account,
game,
instance,
nav,
} = state;
return {
account,
game,
instance,
nav,
@@ -26,11 +28,14 @@ const addState = connect(
function Controls(args) {
const {
game,
account,
instance,
nav,
sendGameReady,
} = args;
if (!account) return false;
if (game) return <GameCtrl />;
if (instance) return <InstanceCtrl />;
if (nav === 'play' || !nav) return <PlayCtrl />
client/src/components/login.jsx
+69 -39
View File
@@ -2,6 +2,7 @@
const preact = require('preact');
const { Component } = require('preact')
const { connect } = require('preact-redux');
const linkState = require('linkstate').default;
const { postData, errorToast } = require('../utils');
@@ -11,7 +12,7 @@ const addState = connect(
ws
} = state;
function submitLogin(name, password) {
postData('/login', { name, password })
postData('/account/login', { name, password })
.then(res => res.json())
.then(data => {
if (!data.success) return errorToast(data.error_message);
@@ -22,7 +23,7 @@ const addState = connect(
}
function submitRegister(name, password, code) {
postData('/register', { name, password, code })
postData('/account/register', { name, password, code })
.then(res => res.json())
.then(data => {
if (!data.success) return errorToast(data.error_message);
@@ -43,70 +44,64 @@ class Login extends Component {
constructor(props) {
super(props);
this.state = { name: '', password: '', code: ''};
this.state = {
login: { name: '', password: '', code: ''},
register: { name: '', password: '', confirm: '', 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: '' });
this.props.submitLogin(this.state.login.name, this.state.login.password);
this.setState({ login: { 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: ''});
this.props.submitRegister(this.state.register.name, this.state.register.password, this.state.register.code);
this.setState({ register: { name: '', password: '', confirm: '', code: ''}});
}
render() {
const registerConfirm = () =>
this.state.register.password === this.state.register.confirm;
const registerDisabled = () => {
const { password, name, code } = this.state.register;
return !(registerConfirm() && password && name && code);
}
return (
<main>
<h1 class="mobile-title" >mnml.gg</h1>
<h1>mnml.gg</h1>
<div class="login">
<div>mnml is an abstract turn based strategy game.</div>
<div>free to play</div>
<div>no email required</div>
</div>
<div class="login">
<h2>Login</h2>
<label for="username">Username</label>
<input
class="login-input"
type="email"
placeholder="username"
tabIndex={1}
value={this.state.name}
onInput={this.nameInput}
value={this.state.login.name}
onInput={linkState(this, 'login.name')}
/>
<label for="password">Password</label>
<input
class="login-input"
type="password"
placeholder="password"
tabIndex={2}
value={this.state.password}
onInput={this.passwordInput}
/>
<input
class="login-input"
type="text"
placeholder="code"
tabIndex={3}
value={this.state.code}
onInput={this.codeInput}
value={this.state.login.password}
onInput={linkState(this, 'login.password')}
/>
<button
class="login-btn"
@@ -114,16 +109,51 @@ class Login extends Component {
onClick={this.loginSubmit}>
Login
</button>
</div>
<div class="login">
<h2>Register</h2>
<label for="username">Username</label>
<input
class="login-input"
type="email"
placeholder="username"
value={this.state.register.name}
onInput={linkState(this, 'register.name')}
/>
<label for="password">Password - min 12 chars</label>
<input
class="login-input"
type="password"
placeholder="password"
value={this.state.register.password}
onInput={linkState(this, 'register.password')}
/>
<label for="confirm">Confirm Password</label>
<input
class={`${registerConfirm() ? '' : 'red'} login-input`}
type="password"
placeholder="confirm"
value={this.state.register.confirm}
onInput={linkState(this, 'register.confirm')}
/>
<label for="code">Access Code</label>
<input
class="login-input"
type="text"
placeholder="code"
value={this.state.register.code}
onInput={linkState(this, 'register.code')}
/>
<button
class="login-btn"
tabIndex={5}
disabled={registerDisabled()}
onClick={this.registerSubmit}>
Register
</button>
<button
class="login-btn"
onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
Discord + Invites
Discord + Codes
</button>
</div>
</main>
client/src/components/nav.jsx
+3
View File
@@ -69,6 +69,8 @@ function Nav(args) {
hideNav,
} = args;
if (!account) return false;
function navTo(p) {
return setNav(p);
}
@@ -90,6 +92,7 @@ function Nav(args) {
const canJoin = team.some(c => !c);
return (
<nav onClick={hideNav} >
<h1 class="header-title">mnml.gg</h1>