97 lines
3.1 KiB
JavaScript
97 lines
3.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { doLogin } from '../redux/actions/userAct';
|
|
import PaddedRow from './PaddedRow';
|
|
import Spinner from './Spinner';
|
|
import getUrl from '../util/getUrl';
|
|
|
|
export default class Setup extends Component {
|
|
state = {
|
|
email: '',
|
|
password: '',
|
|
confirmPass: '',
|
|
pending: false,
|
|
error: null
|
|
}
|
|
updVal = e => {
|
|
const el = e.target;
|
|
let key = 'email';
|
|
if(el.id === 'pass') key = 'password';
|
|
else if(el.id === 'pass2') key = 'confirmPass';
|
|
const obj = {};
|
|
obj[key] = el.value;
|
|
this.setState(obj);
|
|
}
|
|
submit = e => {
|
|
e.preventDefault();
|
|
let { email, password, confirmPass, pending } = this.state;
|
|
if(pending) return;
|
|
email = email.trim();
|
|
password = password.trim();
|
|
confirmPass = confirmPass.trim();
|
|
const hasEmpty = [ email, password, confirmPass ]
|
|
.some(val => val.length === 0);
|
|
|
|
if(hasEmpty) return;
|
|
if(password.toLowerCase() !== confirmPass.toLowerCase()) {
|
|
return this.setState({ error: 'Passwords don\'t match' });
|
|
}
|
|
this.setState({ pending: true, error: null });
|
|
const defaultErr = 'Could not create account';
|
|
|
|
fetch(getUrl('users'), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, password, admin: true })
|
|
})
|
|
.then(res => {
|
|
if(res.ok) {
|
|
return doLogin({ email, password }, null, true);
|
|
}
|
|
res.json().then(({ message }) => {
|
|
const error = message || defaultErr;
|
|
this.setState({ pending: false, error });
|
|
});
|
|
})
|
|
.catch(err => {
|
|
const error = err.message || defaultErr;
|
|
this.setState({ pending: false, error });
|
|
});
|
|
}
|
|
render() {
|
|
const { pending, error } = this.state;
|
|
return(
|
|
<div className='container content'>
|
|
<PaddedRow amount={25} vCenter>
|
|
<div className='column'>
|
|
<h3>Setup account</h3>
|
|
<form noValidate>
|
|
<fieldset>
|
|
<label htmlFor='email'>Email:</label>
|
|
<input type='email' autoFocus id='email'
|
|
placeholder={'Your email (does\'t have to be actual email)'}
|
|
onChange={this.updVal}
|
|
/>
|
|
<label htmlFor='pass'>Password:</label>
|
|
<input type='password' id='pass' maxLength={512}
|
|
placeholder='A super secret password'
|
|
onChange={this.updVal}
|
|
/>
|
|
<label htmlFor='pass2'>Confirm Password:</label>
|
|
<input type='password' id='pass2' maxLength={512}
|
|
placeholder='Confirm your super secret password'
|
|
onChange={this.updVal}
|
|
/>
|
|
<button className='float-right'
|
|
onClick={this.submit}
|
|
>
|
|
{pending ? <Spinner /> : 'Submit'}
|
|
</button>
|
|
{!error ? null : <p className='danger'>{error}</p>}
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</PaddedRow>
|
|
</div>
|
|
);
|
|
}
|
|
} |