Reach parity with last web iteration. (#162)

* feat: add Api and Session contexts

* feat(web): add machinery/new-session

* feat(web): add servers page

* chore(web): AppRouter spacing/ordering

* feat(web): add picker, missing update-roles call for now

* feat(web): add picker saves

* chore: add roleTransactions tests

* feat(web): add auth/login

packages/web/src/pages/dev-tools/set-api.tsx

@@ -0,0 +1,51 @@
+import { navigate } from '@reach/router';
+import * as React from 'react';
+import { useApiContext } from '../../api-context/ApiContext';
+
+const SetApi = () => {
+    const apiContext = useApiContext();
+    const [apiField, setApiField] = React.useState(apiContext.apiUrl);
+
+    const setApi = () => {
+        // Clear storage to get rid of old API data
+        localStorage.clear();
+        sessionStorage.clear();
+
+        apiContext.setApiUrl(apiField);
+
+        navigate('/');
+    };
+
+    const quickSettingClick = (url: string) => () => {
+        setApiField(url);
+    };
+
+    return (
+        <div>
+            <div>
+                <input
+                    type="text"
+                    value={apiField}
+                    onChange={(ev) => {
+                        setApiField(ev.target.value);
+                    }}
+                />
+                <button onClick={setApi}>Set &amp; Go</button>
+            </div>
+            <div>
+                Quick Settings:
+                <button onClick={quickSettingClick('https://api-prod.roleypoly.com')}>
+                    Production (api-prod)
+                </button>
+                <button onClick={quickSettingClick('https://api-stage.roleypoly.com')}>
+                    Staging (api-stage)
+                </button>
+                <button onClick={quickSettingClick('http://localhost:6609')}>
+                    Local (:6609)
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default SetApi;