106 lines
3.2 KiB
JavaScript
106 lines
3.2 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>
|
|
)
|
|
}
|
|
}
|