initial commit

comps/Setup.js

@@ -0,0 +1,97 @@
+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>
+    );
+  }
+}