updated format and lint scripts and applied them
This commit is contained in:
128
comps/Setup.js
128
comps/Setup.js
@@ -1,97 +1,105 @@
|
||||
import React, { Component } from 'react';
|
||||
import { doLogin } from '../redux/actions/userAct';
|
||||
import PaddedRow from './PaddedRow';
|
||||
import Spinner from './Spinner';
|
||||
import getUrl from '../util/getUrl';
|
||||
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
|
||||
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);
|
||||
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);
|
||||
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' });
|
||||
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';
|
||||
|
||||
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 })
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password, admin: true }),
|
||||
})
|
||||
.then(res => {
|
||||
if(res.ok) {
|
||||
return doLogin({ email, password }, null, true);
|
||||
}
|
||||
if (res.ok) {
|
||||
return doLogin({ email, password }, null, true)
|
||||
}
|
||||
res.json().then(({ message }) => {
|
||||
const error = message || defaultErr;
|
||||
this.setState({ pending: false, error });
|
||||
});
|
||||
const error = message || defaultErr
|
||||
this.setState({ pending: false, error })
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
const error = err.message || defaultErr;
|
||||
this.setState({ pending: false, error });
|
||||
});
|
||||
const error = err.message || defaultErr
|
||||
this.setState({ pending: false, error })
|
||||
})
|
||||
}
|
||||
render() {
|
||||
const { pending, error } = this.state;
|
||||
return(
|
||||
<div className='container content'>
|
||||
const { pending, error } = this.state
|
||||
return (
|
||||
<div className="container content">
|
||||
<PaddedRow amount={25} vCenter>
|
||||
<div className='column'>
|
||||
<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)'}
|
||||
<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'
|
||||
<label htmlFor="pass">Password:</label>
|
||||
<input
|
||||
type="password"
|
||||
id="pass"
|
||||
maxLength={512}
|
||||
placeholder="A super secret password"
|
||||
onChange={this.updVal}
|
||||
/>
|
||||
<button className='float-right'
|
||||
onClick={this.submit}
|
||||
>
|
||||
<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>}
|
||||
{!error ? null : <p className="danger">{error}</p>}
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</PaddedRow>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user