initial commit

pages/settings.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react'; 
+import { connect } from 'react-redux'; 
+import fetch from 'isomorphic-unfetch'; 
+import Page from '../comps/Page'; 
+import PaddedRow from '../comps/PaddedRow'; 
+import Spinner from '../comps/Spinner'; 
+import updStateFromId from '../util/updStateFromId'; 
+import mapUser from '../util/mapUser'; 
+import getUrl from '../util/getUrl'; 
+import getJwt from '../util/getJwt'; 
+
+class Settings extends Component {
+  state = {
+    pending: false,
+    passErr: null,
+    curPass: '',
+    newPass: '',
+    confPass: ''
+  }
+  updVal = updStateFromId.bind(this); 
+  submit = async e => {
+    e.preventDefault(); 
+    const { pending, curPass, newPass, confPass } = this.state;
+    const { email, _id } = this.props.user; 
+    if(pending) return; 
+    const doErr = passErr => this.setState({ pending: false, passErr }); 
+    const vals = { 
+      'Current password': curPass, 
+      'New password': newPass, 
+      'Confirm new password': confPass 
+    }; 
+    const keys = Object.keys(vals); 
+    for(let i = 0; i < keys.length; i++) {
+      let key = keys[i], val = vals[key]; 
+      if(val.length === 0) return doErr(`${key} is required`); 
+    }
+    if(newPass !== confPass) return doErr('New passwords don\'t match');
+    
+    this.setState({ passErr: null, pending: true }); 
+    const updRes = await fetch(getUrl('users/' + _id), {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json', Authorization: getJwt() },
+      body: JSON.stringify({ email, password: curPass, newPassword: newPass })
+    }).catch(doErr); 
+    if(updRes.ok) {
+      this.setState({ 
+        curPass: '', newPass: '', confPass: '',
+        passErr: 'Password updated successfully', 
+        pending: false 
+      }); 
+    } else {
+      let message = 'failed to update password';
+      try { 
+        const data = await updRes.json(); 
+        message = data.message || message; 
+      } catch (err) { doErr(err.message); }
+      doErr(message); 
+    }
+  }
+  render() {
+    const { 
+      pending, passErr, curPass, 
+      newPass, confPass 
+    } = this.state; 
+    
+    return (
+      <Page>
+        <PaddedRow amount={25}>
+          <h3>Account settings</h3>
+          <hr />
+          <form noValidate style={{ padding: '0 0 45px' }}>
+            <h4>Change password</h4>
+            <fieldset>
+              <label htmlFor='curPass'>Current Password</label>
+              <input type='password' id='curPass' onChange={this.updVal} 
+                placeholder='Current super secret password...' value={curPass}
+              />
+              <label htmlFor='newPass'>New Password</label>
+              <input type='password' id='newPass' onChange={this.updVal} 
+                placeholder='New super secret password...' value={newPass}
+              />
+              <label htmlFor='confPass'>Confirm New Password</label>
+              <input type='password' id='confPass' onChange={this.updVal} 
+                placeholder='Confirm new super secret password...' value={confPass}
+              />
+            </fieldset>
+            <button onClick={this.submit}
+              className={'float-right' + (pending ? ' disabled' : '')}
+            >
+              {pending ? <Spinner /> : 'Submit'}
+            </button>
+            {!passErr ? null : <p>{passErr}</p>}
+          </form>
+        </PaddedRow>
+      </Page>
+    ); 
+  }
+}
+export default connect(mapUser)(Settings);