QOL fixes

- local dev not auto migrates and loads root user
- fix error message handeling on non_field_errors so proper messages show up in the notif
- persist login to localstorage
- allow multi-tab aware login state via localstorage
- fix tab cycle on modal so that submit comes next after last modal form field (if active)

.gitignore

@@ -107,3 +107,4 @@ ENV/
 webpack-stats.json
 reports
 local.py
+estate/settings/custom.py

estate/assets/js/api/messages.js

@@ -31,18 +31,24 @@ export function error(message) {
 }
 
 export function handleResponseError(err) {
-    if (err.response) {
+    if (err.response || err.errors) {
+        var data = err.response.data
+        console.log(data)
         var message = ""
-        if (isArray(err.response.data.errors)) {
-            each(err.response.data.errors, (item) => {
+        if (isArray(data.errors)) {
+            each(data.errors, (item) => {
                 message += item.detail + "\n"
             })
+        } else if (data.errors.non_field_errors) {
+            each(data.errors.non_field_errors, (item) => {
+                message += item + "\n"
+            })
         } else {
-            message += err.response.data.errors.detail
+            message += data.errors.detail
         }
         dispatch(Notifications.show({
             uid: count++,
-            title: `[${err.response.data.status_code}] ${err.response.data.status_text}`,
+            title: `[${data.status_code}] ${data.status_text}`,
             message: message,
             position: "tl",
             autoDismiss: 0,

estate/assets/js/components/Modal.jsx

@@ -73,7 +73,7 @@ class Modal extends React.Component {
                                 { this.props.children }
                             </div>
                             <div className="modal-footer">
-                                <button className="btn btn-default" type="button" onClick={this.closeModal.bind(this)} >Close</button>
+                                <button className="btn btn-default" type="button" onClick={this.closeModal.bind(this)} tabIndex={1} >Close</button>
                                 <button className={"btn btn-primary"} disabled={!this.isSaveValid()} type="submit" >Submit</button>
                             </div>
                         </form>

estate/assets/js/index.jsx

@@ -13,6 +13,24 @@ import "./estate.css"
 
 axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
 axios.defaults.xsrfCookieName = "csrftoken";
+if (localStorage.authToken) {
+    axios.defaults.headers = {'Authorization': 'Token ' + localStorage.authToken}
+}
+window.addEventListener("storage", function(e) {
+    if (e.key === "authToken"){
+        if (e.newValue) {
+            window.dispatch({
+                type: "CONFIRM_LOGIN",
+                payload: {token: e.newValue}
+            })
+        } else {
+            window.dispatch({
+                type: "CONFIRM_LOGOUT",
+                payload: {token: e.newValue}
+            })
+        }
+    }
+})
 
 window.jsyaml = require("js-yaml") // eslint-disable-line no-undef
 

estate/assets/js/reducers/auth.js

@@ -4,7 +4,7 @@ import axios from "axios"
 
 var initialState = {
     authenticating: false,
-    token: null,
+    token: localStorage.authToken || null,
 }
 
 export default createReducer(initialState, {
@@ -14,13 +14,31 @@ export default createReducer(initialState, {
     },
 
     ["FINISH_LOGIN"]: (state, action) => {
+        state = set(["authenticating"])(false)(state)
+        state = set(["token"])(action.payload.token)(state)
+        if (action.payload.token) {
+            localStorage.authToken = action.payload.token
+            axios.defaults.headers = {'Authorization': 'Token ' + action.payload.token}
+        }
+        return state
+    },
+
+    ["CONFIRM_LOGIN"]: (state, action) => {
         state = set(["authenticating"])(false)(state)
         state = set(["token"])(action.payload.token)(state)
         axios.defaults.headers = {'Authorization': 'Token ' + action.payload.token}
         return state
     },
 
     ["DO_LOGOUT"]: (state, action) => {
+        state = set(["authenticating"])(false)(state)
+        state = set(["token"])(null)(state)
+        localStorage.removeItem("authToken")
+        axios.defaults.headers = {}
+        return state
+    },
+
+    ["CONFIRM_LOGOUT"]: (state, action) => {
         state = set(["authenticating"])(false)(state)
         state = set(["token"])(null)(state)
         axios.defaults.headers = {}

estate/local.sh

@@ -8,10 +8,11 @@ until psql -c "select 1" > /dev/null 2>&1 || [ $RETRIES -eq 0 ]; do
   echo "Waiting for postgres server, $((RETRIES--)) remaining attempts..."
   sleep 1
 done
+echo "Preparing database for local development"
+django-admin migrate > /dev/null
+django-admin loaddata initial_data > /dev/null
 
 echo "Starting Webpack Server"
 webpack-dev-server --config webpack/webpack.local.config.js &
 echo "Starting Django Server"
-django-admin migrate
-django-admin loaddata initial_data
 exec django-admin runserver 0.0.0.0:8000