From d765487635e2bdd78c45ff2172f4cf42964e0a6f Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 5 Mar 2018 23:27:38 -0500
Subject: [PATCH] user editing in jsx

---
 apiProxyMiddleware.js         |   6 +-
 package-lock.json             |  34 +++--
 package.json                  |   1 +
 public/index.html             |  10 +-
 sass/application.scss         |  34 ++---
 server.js                     |   3 +
 src/Metamaps/Account.js       | 112 ----------------
 src/Metamaps/DataFetcher.js   |  14 +-
 src/Metamaps/index.js         |   8 +-
 src/components/AccountMenu.js |   7 +-
 src/components/LoginForm.js   |   3 +-
 src/components/NavBarLink.js  |  11 --
 src/components/UpperLeftUI.js |   3 +-
 src/routes/Admin.js           |   8 +-
 src/routes/Apps.js            |   4 +-
 src/routes/LoggedOutHome.js   |   5 +-
 src/routes/UserSettings.js    | 246 ++++++++++++++++++++++++++++++++++
 src/routes/makeRoutes.js      |   3 +-
 views/users/edit.js           |  89 ------------
 19 files changed, 326 insertions(+), 275 deletions(-)
 delete mode 100644 src/Metamaps/Account.js
 create mode 100644 src/routes/UserSettings.js
 delete mode 100644 views/users/edit.js

diff --git a/apiProxyMiddleware.js b/apiProxyMiddleware.js
index 00cdd517..47c5752a 100644
--- a/apiProxyMiddleware.js
+++ b/apiProxyMiddleware.js
@@ -4,18 +4,18 @@ function apiProxyMiddleware (req, res, next) {
     if (!(req.xhr || req.originalUrl.indexOf('.json') > -1 || req.method !== 'GET')) {
         return next()
     }
-    console.log('xhr request', req.originalUrl)
     const method = req.method.toLowerCase()
     req.pipe(
         request[method](process.env.API + req.originalUrl, {
             headers: {
                 ...req.headers,
-                host: process.env.API
+                cookie: `_Metamaps_session=${req.cookies._Metamaps_session}`,
+                host: 'localhost:3001'
             },
             followRedirect: false
         })
     )
-    .on('error', console.log)
+    .on('error', (err) => console.log(err))
     .pipe(res)
 }
 
diff --git a/package-lock.json b/package-lock.json
index 3c7867bc..527b727e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,9 +67,7 @@
       }
     },
     "action-cable-node": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/action-cable-node/-/action-cable-node-1.2.2.tgz",
-      "integrity": "sha1-KwXl/iR+qqRXfwct2lDOCiEYOS0="
+      "version": "github:Connoropolous/action-cable-node#346d691343251b4148ccc0607f87728d4d97f2cd"
     },
     "after": {
       "version": "0.8.1",
@@ -1909,7 +1907,7 @@
     "content-type": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "integrity": "sha1-4TjMdeBAxyexlm/l5fjJruJW/js=",
       "dev": true
     },
     "content-type-parser": {
@@ -1926,14 +1924,21 @@
     "cookie": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
-      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=",
-      "dev": true
+      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+    },
+    "cookie-parser": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.3.tgz",
+      "integrity": "sha1-D+MfoZ0AC5X0qt8fU/3CuKIDuqU=",
+      "requires": {
+        "cookie": "0.3.1",
+        "cookie-signature": "1.0.6"
+      }
     },
     "cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
-      "dev": true
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
     "copy-descriptor": {
       "version": "0.1.1",
@@ -5479,6 +5484,11 @@
         "jquery": "3.2.1"
       }
     },
+    "js-cookie": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
+      "integrity": "sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -6297,7 +6307,7 @@
     "mime": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
-      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
+      "integrity": "sha1-Eh+evEnjdm8xGnbh+hyAA8SwOqY=",
       "dev": true
     },
     "mime-db": {
@@ -8276,7 +8286,7 @@
     "send": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/send/-/send-0.16.1.tgz",
-      "integrity": "sha512-ElCLJdJIKPk6ux/Hocwhk7NFHpI3pVm/IZOYWqUmoxcgeyM+MpxHHKhb8QmlJDX1pU6WrgaHBkVNm73Sv7uc2A==",
+      "integrity": "sha1-pw4coh0TgsEdDZ9iMd6ygQgNerM=",
       "dev": true,
       "requires": {
         "debug": "2.6.9",
@@ -8320,7 +8330,7 @@
     "serve-static": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.1.tgz",
-      "integrity": "sha512-hSMUZrsPa/I09VYFJwa627JJkNs0NrfL1Uzuup+GqHfToR2KcsXFymXSV90hoyw3M+msjFuQly+YzIH/q0MGlQ==",
+      "integrity": "sha1-TFfVNASnYdjy58HooYpH2/J4pxk=",
       "dev": true,
       "requires": {
         "encodeurl": "1.0.2",
@@ -8368,7 +8378,7 @@
     "setprototypeof": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+      "integrity": "sha1-0L2FU2iHtv58DYGMuWLZ2RxU5lY=",
       "dev": true
     },
     "sha.js": {
diff --git a/package.json b/package.json
index 6300145d..fffa5608 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "backbone": "1.3.3",
     "clipboard-js": "0.3.5",
     "commonmark": "0.28.1",
+    "cookie-parser": "^1.4.3",
     "csv-parse": "1.2.1",
     "emoji-mart": "1.0.1",
     "getscreenmedia": "4.0.1",
diff --git a/public/index.html b/public/index.html
index 50ff301d..a0b79386 100644
--- a/public/index.html
+++ b/public/index.html
@@ -64,8 +64,7 @@
   <![endif]-->
     
 </head>
-<!-- TODO: make 'authenticated' class dynamic -->
-<body class="authenticated">
+<body class="unauthenticated">
     <div class="main">
       <div id="app"></div>
       <div id="loading"></div>
@@ -107,13 +106,6 @@
     <script type="text/javascript">
       Metamaps.ServerData = Metamaps.ServerData || {}
       Metamaps.ServerData.RAILS_ENV = 'development'
-      Metamaps.ServerData.ActiveMapper = {
-        id: 10,
-        name: 'Connor',
-        email: 'co@co.com',
-        admin: false,
-        image: 'https://metamaps-live.s3.amazonaws.com/users/images/555/629/996/sixtyfour/11835c3.png?1417298429'
-      }
       Metamaps.ServerData['junto_spinner_darkgrey.gif'] = '/images/junto_spinner_darkgrey.gif'
       Metamaps.ServerData['user.png'] = '/images/user.png'
       Metamaps.ServerData['icons/wildcard.png'] = '/images/icons/wildcard.png'
diff --git a/sass/application.scss b/sass/application.scss
index f2c0059a..fdfac971 100644
--- a/sass/application.scss
+++ b/sass/application.scss
@@ -1,17 +1,3 @@
-@import 'admin';
-@import 'apps';
-@import 'base';
-@import 'clean';
-@import 'emoji-mart-0.3.5';
-@import 'feedback';
-@import 'jquery-ui';
-@import 'junto';
-@import 'mapcard';
-@import 'mobile';
-@import 'notifications';
-@import 'request_access';
-@import 'search';
-
 /* clear styles */
 
 html,
@@ -243,10 +229,6 @@ button.button.btn-no:hover {
     color:#424242;
 }
 
-.toHide {
-    display:none;
-}
-
 .forgotPassword {
     height: 134px;
     font-family: din-medium;
@@ -327,7 +309,6 @@ button.button.btn-no:hover {
     position: absolute;
     top: 88px;
     left: -18px;
-    display: none;
 }
 .userMenuArrow {
     border-color: transparent;
@@ -436,7 +417,6 @@ button.button.btn-no:hover {
     margin:5px 0px 0px 5px;
 }
 .changeName {
-    display: none;
     margin-top: 24px;
 }
 
@@ -3029,3 +3009,17 @@ script.data-gratipay-username {
     font-size: 13px;
     font-weight: bold;
 }
+
+@import 'admin';
+@import 'apps';
+@import 'base';
+@import 'clean';
+@import 'emoji-mart-0.3.5';
+@import 'feedback';
+@import 'jquery-ui';
+@import 'junto';
+@import 'mapcard';
+@import 'mobile';
+@import 'notifications';
+@import 'request_access';
+@import 'search';
\ No newline at end of file
diff --git a/server.js b/server.js
index f76ff8e7..5f983c2d 100644
--- a/server.js
+++ b/server.js
@@ -1,5 +1,6 @@
 const path = require('path')
 const express = require('express')
+const cookieParser = require('cookie-parser')
 const webpack = require('webpack')
 const socketio = require('socket.io')
 const { createServer } = require('http')
@@ -13,6 +14,8 @@ const server = createServer(app)
 const io = socketio(server)
 realtime(io) // sets up the socketio event listeners
 
+app.use(cookieParser())
+
 // serve the whole public folder as static files
 app.use(express.static(path.join(__dirname, 'public')))
 
diff --git a/src/Metamaps/Account.js b/src/Metamaps/Account.js
deleted file mode 100644
index 19785797..00000000
--- a/src/Metamaps/Account.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/* global $, CanvasLoader */
-
-const Account = {
-  init: function(serverData) {
-    Account.userIconUrl = serverData['user.png']
-  },
-  listenersInitialized: false,
-  userIconUrl: null,
-  initListeners: function() {
-    var self = Account
-
-    $('#user_image').change(self.showImagePreview)
-    self.listenersInitialized = true
-  },
-  toggleChangePicture: function() {
-    var self = Account
-
-    $('.userImageMenu').toggle()
-    if (!self.listenersInitialized) self.initListeners()
-  },
-  openChangePicture: function() {
-    var self = Account
-
-    $('.userImageMenu').show()
-    if (!self.listenersInitialized) self.initListeners()
-  },
-  closeChangePicture: function() {
-    $('.userImageMenu').hide()
-  },
-  showLoading: function() {
-    var loader = new CanvasLoader('accountPageLoading')
-    loader.setColor('#4FC059') // default is '#000000'
-    loader.setDiameter(28) // default is 40
-    loader.setDensity(41) // default is 40
-    loader.setRange(0.9) // default is 1.3
-    loader.show() // Hidden by default
-    $('#accountPageLoading').show()
-  },
-  showImagePreview: function() {
-    var file = $('#user_image')[0].files[0]
-
-    var reader = new window.FileReader()
-
-    reader.onload = function(e) {
-      var $canvas = $('<canvas>').attr({
-        width: 84,
-        height: 84
-      })
-      var context = $canvas[0].getContext('2d')
-      var imageObj = new window.Image()
-
-      imageObj.onload = function() {
-        $('.userImageDiv canvas').remove()
-        $('.userImageDiv img').hide()
-
-        var imgWidth = imageObj.width
-        var imgHeight = imageObj.height
-
-        var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth
-        // draw cropped image
-        var nonZero = Math.abs(imgHeight - imgWidth) / 2
-        var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero
-        var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero
-        var sourceWidth = dimensionToMatch
-        var sourceHeight = dimensionToMatch
-        var destX = 0
-        var destY = 0
-        var destWidth = 84
-        var destHeight = 84
-
-        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)
-        $('.userImageDiv').prepend($canvas)
-      }
-      imageObj.src = reader.result
-    }
-
-    if (file) {
-      reader.readAsDataURL(file)
-      $('.userImageMenu').hide()
-      $('#remove_image').val('0')
-    }
-  },
-  removePicture: function() {
-    var self = Account
-
-    $('.userImageDiv canvas').remove()
-    $('.userImageDiv img').attr('src', self.userIconUrl).show()
-    $('.userImageMenu').hide()
-
-    var input = $('#user_image')
-    input.replaceWith(input.val('').clone(true))
-    $('#remove_image').val('1')
-  },
-  changeName: function() {
-    $('.accountName').hide()
-    $('.changeName').show()
-  },
-  showPass: function() {
-    $('.toHide').show()
-    $('.changePass').hide()
-  },
-  hidePass: function() {
-    $('.toHide').hide()
-    $('.changePass').show()
-
-    $('#current_password').val('')
-    $('#user_password').val('')
-    $('#user_password_confirmation').val('')
-  }
-}
-
-export default Account
diff --git a/src/Metamaps/DataFetcher.js b/src/Metamaps/DataFetcher.js
index 70c083e3..3bea2f2c 100644
--- a/src/Metamaps/DataFetcher.js
+++ b/src/Metamaps/DataFetcher.js
@@ -1,10 +1,20 @@
+function fetchWithCookies(url) {
+  return fetch(url, { credentials: 'same-origin' })
+}
 
 async function getMetacodes() {
-  const res = await fetch('/metacodes.json')
+  const res = await fetchWithCookies('/metacodes.json')
+  const data = await res.json()
+  return data
+}
+
+async function getCurrentUser() {
+  const res = await fetchWithCookies('/users/current.json')
   const data = await res.json()
   return data
 }
 
 module.exports = {
-  getMetacodes
+  getMetacodes,
+  getCurrentUser
 }
\ No newline at end of file
diff --git a/src/Metamaps/index.js b/src/Metamaps/index.js
index a94c7115..5b0c3b02 100644
--- a/src/Metamaps/index.js
+++ b/src/Metamaps/index.js
@@ -1,4 +1,3 @@
-import Account from './Account'
 import Active from './Active'
 import Admin from './Admin'
 import AutoLayout from './AutoLayout'
@@ -32,7 +31,6 @@ import Views from './Views'
 import Visualize from './Visualize'
 
 const Metamaps = window.Metamaps || {}
-Metamaps.Account = Account
 Metamaps.Active = Active
 Metamaps.Admin = Admin
 Metamaps.AutoLayout = AutoLayout
@@ -91,6 +89,12 @@ document.addEventListener('DOMContentLoaded', async function() {
   try {
     const metacodes = await DataFetcher.getMetacodes()
     Metamaps.ServerData.Metacodes = metacodes
+
+    const activeMapper = await DataFetcher.getCurrentUser()
+    if (activeMapper) {
+      Metamaps.ServerData.ActiveMapper = activeMapper
+      $('body').removeClass('unauthenticated').addClass('authenticated')
+    }
     runInitFunctions(Metamaps.ServerData)
   } catch (e) {
     console.log(e)
diff --git a/src/components/AccountMenu.js b/src/components/AccountMenu.js
index f23cda61..50df7154 100644
--- a/src/components/AccountMenu.js
+++ b/src/components/AccountMenu.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'react-router'
 
 import onClickOutsideAddon from 'react-onclickoutside'
 
@@ -22,15 +23,15 @@ class AccountMenu extends Component {
       <ul>
         <li className="accountListItem accountSettings">
           <div className="accountIcon"></div>
-          <a href={`/users/${currentUser.id}/edit`}>Settings</a>
+          <Link to={`/users/${currentUser.id}/edit`}>Settings</Link>
         </li>
         <li className="accountListItem accountAdmin">
           <div className="accountIcon"></div>
-          <a href="/metacodes">Admin</a>
+          <Link to="/metacodes">Admin</Link>
         </li>
         <li className="accountListItem accountApps">
           <div className="accountIcon"></div>
-          <a href="/oauth/authorized_applications">Apps</a>
+          <Link to="/oauth/authorized_applications">Apps</Link>
         </li>
         <li className="accountListItem accountInvite" onClick={onInviteClick}>
           <div className="accountIcon"></div>
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index b692d8cb..c520588a 100644
--- a/src/components/LoginForm.js
+++ b/src/components/LoginForm.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'react-router'
 
 import onClickOutsideAddon from 'react-onclickoutside'
 
@@ -43,7 +44,7 @@ class LoginForm extends Component {
       </div>
       <div className="clearfloat"></div>
       <div className="accountForgotPass">
-          <a href="/users/password/new">Forgot password?</a>
+          <Link to="/users/password/new">Forgot password?</Link>
       </div>
     </form>
   }
diff --git a/src/components/NavBarLink.js b/src/components/NavBarLink.js
index 67feec88..fe701cd0 100644
--- a/src/components/NavBarLink.js
+++ b/src/components/NavBarLink.js
@@ -5,7 +5,6 @@ import _ from 'lodash'
 
 const PROP_LIST = [
   'matchChildRoutes',
-  'hardReload',
   'show',
   'text',
   'href',
@@ -15,7 +14,6 @@ const PROP_LIST = [
 class NavBarLink extends Component {
   static propTypes = {
     matchChildRoutes: PropTypes.bool,
-    hardReload: PropTypes.bool,
     show: PropTypes.bool,
     text: PropTypes.string,
     href: PropTypes.string,
@@ -29,7 +27,6 @@ class NavBarLink extends Component {
   render = () => {
     const {
       matchChildRoutes,
-      hardReload,
       show,
       text,
       href,
@@ -45,14 +42,6 @@ class NavBarLink extends Component {
     if (!show) {
       return null
     }
-    if (hardReload) {
-      return (
-        <a { ...otherProps } href={href} className={classes.join(' ')}>
-          {linkClass && <div className="navBarIcon"></div>}
-          <div className="navBarLinkText">{text}</div>
-        </a>
-      )
-    }
     return (
       <Link { ...otherProps } to={href} className={classes.join(' ')}>
         {linkClass && <div className="navBarIcon"></div>}
diff --git a/src/components/UpperLeftUI.js b/src/components/UpperLeftUI.js
index cbead88e..589432c0 100644
--- a/src/components/UpperLeftUI.js
+++ b/src/components/UpperLeftUI.js
@@ -16,8 +16,7 @@ class UpperLeftUI extends Component {
     const { map, currentUser, userRequested, requestAnswered, requestApproved, onRequestClick } = this.props
     return <div className="upperLeftUI">
       <div className="homeButton">
-        {currentUser && <Link to="/">METAMAPS</Link>}
-        {!currentUser && <a href="/">METAMAPS</a>}
+        <Link to="/">METAMAPS</Link>
       </div>
       <div className="sidebarSearch">
         <input type="text" className="sidebarSearchField" placeholder="Search for topics, maps, and mappers..." />
diff --git a/src/routes/Admin.js b/src/routes/Admin.js
index d48664ef..f715aa1c 100644
--- a/src/routes/Admin.js
+++ b/src/routes/Admin.js
@@ -6,10 +6,10 @@ class Admin extends Component {
   render = () => {
     return (
       <NavBar>
-        <NavBarLink show hardReload href="/metacode_sets" text="Metacode Sets" />
-        <NavBarLink show hardReload href="/metacode_sets/new" text="New Set" />
-        <NavBarLink show hardReload href="/metacodes" text="Metacodes" />
-        <NavBarLink show hardReload href="/metacodes/new" text="New Metacode" />
+        <NavBarLink show href="/metacode_sets" text="Metacode Sets" />
+        <NavBarLink show href="/metacode_sets/new" text="New Set" />
+        <NavBarLink show href="/metacodes" text="Metacodes" />
+        <NavBarLink show href="/metacodes/new" text="New Metacode" />
       </NavBar>
     )
   }
diff --git a/src/routes/Apps.js b/src/routes/Apps.js
index 108bcc43..8a5f7de7 100644
--- a/src/routes/Apps.js
+++ b/src/routes/Apps.js
@@ -9,10 +9,10 @@ class Apps extends Component {
 
     return (
       <NavBar>
-        {currentUser && currentUser.get('admin') && <NavBarLink show hardReload
+        {currentUser && currentUser.get('admin') && <NavBarLink show
           matchChildRoutes href="/oauth/applications" linkClass="activeMaps"
           text="Registered Apps" />}
-        <NavBarLink show hardReload matchChildRoutes
+        <NavBarLink show matchChildRoutes
           href="/oauth/authorized_applications"
           linkClass="authedApps" text="Authorized Apps" />
         <NavBarLink show href="/" linkClass="myMaps" text="Maps" />
diff --git a/src/routes/LoggedOutHome.js b/src/routes/LoggedOutHome.js
index 9ac0e82a..bd5b8520 100644
--- a/src/routes/LoggedOutHome.js
+++ b/src/routes/LoggedOutHome.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { Link } from 'react-router'
 
 class LoggedOutHome extends Component {
   render = () => {
@@ -17,8 +18,8 @@ class LoggedOutHome extends Component {
               <h3>Who finds it useful?</h3>
               <p>Designers, inventors, artists, educators, strategists, consultants, facilitators, entrepreneurs, systems thinkers, changemakers, analysts, students, researchers... maybe you!</p>
               <button type="button" className="button learnMoreCTA" onClick={() => {Metamaps.GlobalUI.openLightbox('about')}}>LEARN MORE</button>
-              <a href="/explore/featured" data-router="true" className="exploreFeaturedCTA">EXPLORE FEATURED MAPS</a>
-              <a href="/request" className="requestInviteCTA">REQUEST INVITE</a>
+              <Link to="/explore/featured" data-router="true" className="exploreFeaturedCTA">EXPLORE FEATURED MAPS</Link>
+              <Link to="/request" className="requestInviteCTA">REQUEST INVITE</Link>
             </div>
             <div className="clearfloat"></div>
           </div>
diff --git a/src/routes/UserSettings.js b/src/routes/UserSettings.js
new file mode 100644
index 00000000..caa8bf77
--- /dev/null
+++ b/src/routes/UserSettings.js
@@ -0,0 +1,246 @@
+import React, { Component } from 'react'
+import Loading from '../components/Loading'
+
+class UserSettings extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      userImageMenuOpen: false,
+      changePasswordOpen: false,
+      changeName: false,
+      loading: false,
+      imagePreview: null,
+      currentPassword: '',
+      newPassword: '',
+      newPasswordConfirmation: '',
+      name: '',
+      email: '',
+      emailsAllowed: false,
+      followTopicOnCreated: false,
+      followTopicOnContributed: false,
+      followMapOnCreated: false,
+      followMapOnContributed: false,
+      removeImage: '0' // can be '0' or '1', 0 means keep, 1 means remove
+    }
+  }
+
+  componentDidMount = () => {
+    this.setState({
+      name: this.props.currentUser.get('name'),
+      email: this.props.currentUser.get('email'),
+      image: this.props.currentUser.get('image'),
+      emailsAllowed: this.props.currentUser.get('emails_allowed'),
+      followTopicOnCreated: this.props.currentUser.get('follow_topic_on_created'),
+      followTopicOnContributed: this.props.currentUser.get('follow_topic_on_contributed'),
+      followMapOnCreated: this.props.currentUser.get('follow_map_on_created'),
+      followMapOnContributed: this.props.currentUser.get('follow_map_on_contributed')
+    })
+  }
+
+  init = (serverData) => {
+    Account.userIconUrl = serverData['user.png']
+  }
+
+  initListeners = () => {
+    /*
+    $('#user_image').change(self.showImagePreview)
+    */
+  }
+
+  toggleChangePicture = () => {
+    this.setState({
+      userImageMenuOpen: !this.state.userImageMenuOpen
+    })
+  }
+
+  openChangePicture = () => {
+    this.setState({
+      userImageMenuOpen: true
+    })
+  }
+
+  closeChangePicture = () => {
+    this.setState({
+      userImageMenuOpen: false
+    })
+  }
+
+  showLoading = () => {
+    this.setState({ loading: true })
+  }
+
+  showImagePreview = () => {
+    var file = $('#user_image')[0].files[0]
+
+    var reader = new window.FileReader()
+
+    reader.onload = function(e) {
+      var $canvas = $('<canvas>').attr({
+        width: 84,
+        height: 84
+      })
+      var context = $canvas[0].getContext('2d')
+      var imageObj = new window.Image()
+
+      imageObj.onload = function() {
+        $('.userImageDiv canvas').remove()
+        $('.userImageDiv img').hide()
+
+        var imgWidth = imageObj.width
+        var imgHeight = imageObj.height
+
+        var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth
+        // draw cropped image
+        var nonZero = Math.abs(imgHeight - imgWidth) / 2
+        var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero
+        var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero
+        var sourceWidth = dimensionToMatch
+        var sourceHeight = dimensionToMatch
+        var destX = 0
+        var destY = 0
+        var destWidth = 84
+        var destHeight = 84
+
+        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)
+        $('.userImageDiv').prepend($canvas)
+      }
+      imageObj.src = reader.result
+    }
+
+    if (file) {
+      reader.readAsDataURL(file)
+      $('.userImageMenu').hide()
+      $('#remove_image').val('0')
+    }
+  }
+
+  removePicture = () => {
+    /*
+    $('.userImageDiv canvas').remove()
+    $('.userImageDiv img').attr('src', '/images/user.png').show()
+    $('.userImageMenu').hide()
+
+    var input = $('#user_image')
+    input.replaceWith(input.val('').clone(true))
+    $('#remove_image').val('1')
+    */
+    this.setState({ removeImage: '1' })
+  }
+
+  changeName = () => {
+    this.setState({ changeName: true })
+  }
+
+  showPass = () => {
+    this.setState({ changePasswordOpen: true })
+  }
+
+  hidePass = () => {
+    this.setState({
+      changePasswordOpen: false,
+      currentPassword: '',
+      newPassword: '',
+      newPasswordConfirmation: ''
+    })
+  }
+
+  updateForKey = (key) => {
+    return (event) => {
+      const newState = {}
+      if (event.target.type === 'checkbox') {
+        newState[key] = !this.state[key]
+      } else {
+        newState[key] = event.target.value  
+      }
+      this.setState(newState)
+    }
+  }
+
+  render = () => {
+    const id = this.props.currentUser.get('id')
+    const name = this.props.currentUser.get('name')
+    return (
+      <div id="yield">
+        <form className="edit_user centerGreyForm" id={`edit_user_${id}`} encType="multipart/form-data" action={`/users/${id}`} acceptCharset="UTF-8" method="patch">
+          <input name="utf8" type="hidden" value="✓" />
+          <h3>Edit Settings</h3>
+          <div className="userImage">
+            <div className="userImageDiv" onClick={this.toggleChangePicture}>
+              <img src={this.state.image} alt="11835c3" width="84" height="84" />
+              <div className="editPhoto"></div>
+            </div>
+            {this.state.userImageMenuOpen && <div className="userImageMenu">
+              <div className="userMenuArrow"></div>
+              <ul>
+                <li className="upload">
+                  Upload Photo
+                  <input type="hidden" name="remove_image" id="remove_image" value={this.state.removeImage} />
+                  <input type="file" name="user[image]" id="user_image" />
+                  <label htmlFor="user_image">Image</label>
+                </li>
+                <li className="remove" onClick={this.removePicture}>Remove</li>
+                <li className="cancel" onClick={this.closeChangePicture}>Cancel</li>
+              </ul>
+            </div>}
+          </div>
+          {!this.state.changeName && <div className="accountName" onClick={this.changeName}>
+            <div className="nameEdit">{ name }</div>
+          </div>}
+          {this.state.changeName && <div className="changeName">
+            <label className="firstFieldText" htmlFor="user_name">Name:</label>
+            <input type="text" name="user[name]" id="user_name" value={this.state.name} onChange={this.updateForKey('name')} />
+          </div>}
+          <div>
+            <label className="firstFieldText" htmlFor="user_email">Email:</label>
+            <input type="email" value={this.state.email} onChange={this.updateForKey('email')} name="user[email]" id="user_email" />
+          </div>
+          <div>
+            <label className="firstFieldText" htmlFor="user_emails_allowed">
+              <input className="inline" type="checkbox" value={this.state.emailsAllowed ? '1' : '0'} checked={this.state.emailsAllowed} onChange={this.updateForKey('emailsAllowed')} name="user[emails_allowed]" id="user_emails_allowed" />
+              Send Metamaps notifications to my email.
+            </label>
+            <label className="firstFieldText" htmlFor="settings_follow_topic_on_created">
+              <input className="inline" type="checkbox" value={this.state.followTopicOnCreated ? '1' : '0'} checked={this.state.followTopicOnCreated} onChange={this.updateForKey('followTopicOnCreated')} name="settings[follow_topic_on_created]" id="settings_follow_topic_on_created" />
+              Auto-follow topics you create.
+            </label>
+            <label className="firstFieldText" htmlFor="settings_follow_topic_on_contributed">
+              <input className="inline" type="checkbox" value={this.state.followTopicOnContributed ? '1' : '0'} checked={this.state.followTopicOnContributed} onChange={this.updateForKey('followTopicOnContributed')} name="settings[follow_topic_on_contributed]" id="settings_follow_topic_on_contributed" />
+              Auto-follow topics you edit.
+            </label>
+            <label className="firstFieldText" htmlFor="settings_follow_map_on_created">
+              <input className="inline" type="checkbox" value={this.state.followMapOnCreated ? '1' : '0'} checked={this.state.followMapOnCreated} onChange={this.updateForKey('followMapOnCreated')} name="settings[follow_map_on_created]" id="settings_follow_map_on_created" />
+              Auto-follow maps you create.
+            </label>
+            <label className="firstFieldText" htmlFor="settings_follow_map_on_contributed">
+              <input className="inline" type="checkbox" value={this.state.followMapOnContributed ? '1' : '0'} checked={this.state.followMapOnContributed} onChange={this.updateForKey('followMapOnContributed')} name="settings[follow_map_on_contributed]" id="settings_follow_map_on_contributed" />
+              Auto-follow maps you edit.
+            </label>
+          </div>
+          {!this.state.changePasswordOpen && <div className="changePass" onClick={this.showPass}>Change Password</div>}
+          {this.state.changePasswordOpen && <div>
+            <div>
+              <label className="firstFieldText" htmlFor="user_current_password">Current Password:</label>
+              <input type="password" name="current_password" id="current_password" value={this.state.currentPassword} onChange={this.updateForKey('currentPassword')} />
+            </div>
+            <div>
+              <label className="firstFieldText" htmlFor="user_password">New Password:</label>
+              <input autoComplete="off" type="password" name="user[password]" id="user_password" value={this.state.newPassword} onChange={this.updateForKey('newPassword')} />
+            </div>
+            <div>
+              <label className="firstFieldText" htmlFor="user_password_confirmation">Confirm New Password:</label>
+              <input autoComplete="off" type="password" name="user[password_confirmation]" id="user_password_confirmation" value={this.state.newPasswordConfirmation} onChange={this.updateForKey('newPasswordConfirmation')} />
+            </div>
+            <div className="noChangePass" onClick={this.hidePass}>Oops, don't change password</div>
+          </div>}
+          <div id="accountPageLoading">
+            {this.state.loading && <Loading />}
+          </div>
+          <input type="submit" name="commit" value="Update" className="update" onClick={this.showLoading} data-disable-with="Update" />
+          <div className="clearfloat"></div>
+        </form>
+      </div>
+    )
+  }
+}
+
+export default UserSettings
diff --git a/src/routes/makeRoutes.js b/src/routes/makeRoutes.js
index d54dfb97..d1105581 100644
--- a/src/routes/makeRoutes.js
+++ b/src/routes/makeRoutes.js
@@ -12,6 +12,7 @@ import RequestAccess from './RequestAccess'
 import RequestInvite from './RequestInvite'
 import Login from './Login'
 import Join from './Join'
+import UserSettings from './UserSettings'
 
 function nullComponent(props) {
   return null
@@ -42,7 +43,7 @@ export default function makeRoutes (currentUser) {
       <Route path=":id" component={Notifications} />
     </Route>
     <Route path="users">
-      <Route path=":id/edit" component={nullComponent} />
+      <Route path=":id/edit" component={UserSettings} />
       <Route path="password" component={nullComponent} />
       <Route path="password/new" component={nullComponent} />
       <Route path="password/edit" component={nullComponent} />
diff --git a/views/users/edit.js b/views/users/edit.js
deleted file mode 100644
index 3558afab..00000000
--- a/views/users/edit.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { Component } from react
-
-class MyComponent extends Component {
-  render = () => {
-    return (
-<div id="yield">
-{ form_for @user, url: user_url, :html =>{ :multipart => true, :className => "edit_user centerGreyForm"} do |form| }
-  <h3>Edit Settings</h3>
-  <div className="userImage">
-    <div className="userImageDiv" onclick="Metamaps.Account.toggleChangePicture()">
-      { image_tag @user.image.url(:ninetysix), :size => "84x84" }
-      <div className="editPhoto"></div>
-    </div>
-    <div className="userImageMenu">
-      <div className="userMenuArrow"></div>
-      <ul>
-        <li className="upload">
-          Upload Photo
-          { hidden_field_tag "remove_image", "0" }
-          { form.file_field :image }
-          { form.label :image }
-        </li>
-        <li className="remove" onclick="Metamaps.Account.removePicture()">Remove</li>
-        <li className="cancel" onclick="Metamaps.Account.closeChangePicture()">Cancel</li>
-      </ul>
-    </div>
-
-  </div>
-  <div className="accountName" onclick="Metamaps.Account.changeName()">
-    <div className="nameEdit">{ @user.name }</div>
-  </div>
-  <div className="changeName">
-    { form.label :name, "Name:", className: 'firstFieldText' }
-    { form.text_field :name }
-  </div>
-  <div>
-    { form.label :email, "Email:", className: 'firstFieldText' }
-    { form.email_field :email }
-  </div>
-  <div>
-    { form.label :emails_allowed, className: 'firstFieldText' do }
-      { form.check_box :emails_allowed, className: 'inline' }
-      Send Metamaps notifications to my email.
-    { end }
-    { fields_for :settings, @user.settings do |settings| }
-      { settings.label :follow_topic_on_created, className: 'firstFieldText' do }
-        { settings.check_box :follow_topic_on_created, className: 'inline'  }
-        Auto-follow topics you create.
-      { end }
-      { settings.label :follow_topic_on_contributed, className: 'firstFieldText' do }
-        { settings.check_box :follow_topic_on_contributed, className: 'inline'  }
-        Auto-follow topics you edit.
-      { end }
-      { settings.label :follow_map_on_created, className: 'firstFieldText' do }
-        { settings.check_box :follow_map_on_created, className: 'inline'  }
-        Auto-follow maps you create.
-      { end }
-      { settings.label :follow_map_on_contributed, className: 'firstFieldText' do }
-        { settings.check_box :follow_map_on_contributed, className: 'inline'  }
-        Auto-follow maps you edit.
-      { end }
-    { end }
-  </div>
-  <div className="changePass" onclick="Metamaps.Account.showPass()">Change Password</div>
-  <div className="toHide">
-    <div>
-      { form.label :current_password, "Current Password:", :className => "firstFieldText" }
-      { password_field_tag :current_password, params[:current_password] }
-    </div>
-    <div>
-      { form.label :password, "New Password:", :className => "firstFieldText" }
-      { form.password_field :password, :autocomplete => :off}
-    </div>
-    <div>
-      { form.label :password_confirmation, "Confirm New Password:", :className => "firstFieldText" }
-      { form.password_field :password_confirmation, :autocomplete => :off}
-    </div>
-    <div className="noChangePass" onclick="Metamaps.Account.hidePass()">Oops, don't change password</div>
-  </div>
-  <div id="accountPageLoading"></div>
-  { form.submit "Update", className: "update", onclick: "Metamaps.Account.showLoading()" }
-  <div className="clearfloat"></div>
-{ end }
-</div>
-    )
-  }
-}
-
-export default MyComponent