Merge pull request #223 from j-f1/config-server-polish

Improve the UX around configuring a server URL

packages/desktop-client/src/components/LoggedInUser.js

 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
+import { useHistory, withRouter } from 'react-router';
 
 import * as actions from 'loot-core/src/client/actions';
 import {
@@ -12,8 +12,9 @@ import {
 } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 
+import { useServerURL } from '../hooks/useServerURL';
+
 function LoggedInUser({
-  history,
   files,
   budgetId,
   userData,
@@ -27,6 +28,8 @@ function LoggedInUser({
 }) {
   let [loading, setLoading] = useState(true);
   let [menuOpen, setMenuOpen] = useState(false);
+  const serverUrl = useServerURL();
+  const history = useHistory();
 
   useEffect(() => {
     getUserData().then(() => setLoading(false));
@@ -34,7 +37,7 @@ function LoggedInUser({
 
   async function onChangePassword() {
     await closeBudget();
-    window.__history.push('/change-password');
+    history.push('/change-password');
   }
 
   function onMenuSelect(type) {
@@ -52,7 +55,11 @@ function LoggedInUser({
   }
 
   function onClick() {
-    setMenuOpen(true);
+    if (serverUrl) {
+      setMenuOpen(true);
+    } else {
+      history.push('/config-server');
+    }
   }
 
   if (loading) {
@@ -69,7 +76,7 @@ function LoggedInUser({
     return (
       <View style={[{ flexDirection: 'row', alignItems: 'center' }, style]}>
         <Button bare onClick={onClick} style={{ color }}>
-          Server
+          {serverUrl ? 'Server' : 'No server'}
         </Button>
 
         {menuOpen && (
@@ -83,7 +90,7 @@ function LoggedInUser({
               items={[
                 { name: 'change-password', text: 'Change password' },
                 { name: 'sign-out', text: 'Sign out' }
-              ].filter(x => x)}
+              ]}
             />
           </Tooltip>
         )}

packages/desktop-client/src/components/manager/ConfigServer.js

@@ -12,30 +12,24 @@ import {
 } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 
+import { useServerURL } from '../../hooks/useServerURL';
 import { Title, Input } from './subscribe/common';
 
 export default function ConfigServer() {
   let dispatch = useDispatch();
   let history = useHistory();
   let [url, setUrl] = useState('');
+  let currentUrl = useServerURL();
+  useEffect(() => {
+    setUrl(currentUrl);
+  }, [currentUrl]);
   let [loading, setLoading] = useState(false);
   let [error, setError] = useState(null);
 
-  let [currentUrl, setCurrentUrl] = useState(null);
-
-  useEffect(() => {
-    async function run() {
-      let url = await send('get-server-url');
-      setUrl(url && url.indexOf('not-configured') ? '' : url);
-      setCurrentUrl(url);
-    }
-    run();
-  }, []);
-
   function getErrorMessage(error) {
     switch (error) {
       case 'network-failure':
-        return 'Server is not running at this URL';
+        return 'Server is not running at this URL. Make sure you have HTTPS set up properly.';
       default:
         return 'Server does not look like an Actual server. Is it set up correctly?';
     }
@@ -49,11 +43,26 @@ export default function ConfigServer() {
     setError(null);
     setLoading(true);
     let { error } = await send('set-server-url', { url });
-    setLoading(false);
 
-    if (error) {
+    if (
+      error === 'network-failure' &&
+      !url.startsWith('http://') &&
+      !url.startsWith('https://')
+    ) {
+      let { error } = await send('set-server-url', { url: 'https://' + url });
+      if (error) {
+        setUrl('https://' + url);
+        setError(error);
+      } else {
+        await dispatch(signOut());
+        history.push('/');
+      }
+      setLoading(false);
+    } else if (error) {
+      setLoading(false);
       setError(error);
     } else {
+      setLoading(false);
       await dispatch(signOut());
       history.push('/');
     }
@@ -129,7 +138,6 @@ export default function ConfigServer() {
             <Button
               bare
               type="button"
-              loading={loading}
               style={{ fontSize: 15, marginLeft: 10 }}
               onClick={() => history.goBack()}
             >
@@ -138,26 +146,32 @@ export default function ConfigServer() {
           )}
         </form>
 
-        {currentUrl == null && (
-          <View
-            style={{
-              marginTop: 15,
-              flexDirection: 'row',
-              justifyContent: 'center'
-            }}
-          >
-            <Button
-              bare
-              style={{ color: colors.n4, marginRight: 15 }}
-              onClick={onSameDomain}
-            >
-              Use this domain
-            </Button>
+        <View
+          style={{
+            marginTop: 15,
+            flexDirection: 'row',
+            justifyContent: 'center'
+          }}
+        >
+          {currentUrl ? (
             <Button bare style={{ color: colors.n4 }} onClick={onSkip}>
-              Don't use a server
+              Stop using a server
             </Button>
-          </View>
-        )}
+          ) : (
+            <>
+              <Button
+                bare
+                style={{ color: colors.n4, marginRight: 15 }}
+                onClick={onSameDomain}
+              >
+                Use {window.location.origin.replace(/https?:\/\//, '')}
+              </Button>
+              <Button bare style={{ color: colors.n4 }} onClick={onSkip}>
+                Don't use a server
+              </Button>
+            </>
+          )}
+        </View>
       </View>
     </>
   );

packages/desktop-client/src/components/manager/ManagementApp.js

@@ -207,7 +207,10 @@ class ManagementApp extends React.Component {
                       zIndex: 4000
                     }}
                   >
-                    <LoggedInUser />
+                    <Switch>
+                      <Route exact path="/config-server" component={null} />
+                      <Route exact path="/" component={LoggedInUser} />
+                    </Switch>
                   </View>
                 </>
               ) : (
@@ -223,7 +226,10 @@ class ManagementApp extends React.Component {
             </View>
           )}
 
-          <ServerURL />
+          <Switch>
+            <Route exact path="/config-server" component={null} />
+            <Route exact path="/" component={ServerURL} />
+          </Switch>
           <Version />
         </View>
       </Router>

packages/desktop-client/src/components/manager/ServerURL.js

-import React, { useState, useEffect } from 'react';
+import React from 'react';
 
-import { send } from 'loot-core/src/platform/client/fetch';
 import { View, Text, AnchorLink } from 'loot-design/src/components/common';
 
-export default function ServerURL() {
-  let [url, setUrl] = useState(null);
+import { useServerURL } from '../../hooks/useServerURL';
 
-  useEffect(() => {
-    async function run() {
-      let url = await send('get-server-url');
-      setUrl(url);
-    }
-    run();
-  }, []);
+export default function ServerURL() {
+  const url = useServerURL();
 
   return (
     <View
@@ -28,7 +21,13 @@ export default function ServerURL() {
       }}
     >
       <Text>
-        Using server: <strong>{url || '(not configured)'}</strong>
+        {url ? (
+          <>
+            Using server: <strong>{url}</strong>
+          </>
+        ) : (
+          <strong>No server configured</strong>
+        )}
       </Text>
       <AnchorLink bare to="/config-server" style={{ marginLeft: 15 }}>
         Change

packages/desktop-client/src/hooks/useServerURL.js

+import { useState, useEffect } from 'react';
+
+import { send } from 'loot-core/src/platform/client/fetch';
+
+export function useServerURL() {
+  let [serverUrl, setServerUrl] = useState('');
+  useEffect(() => {
+    async function run() {
+      let url = (await send('get-server-url')) || '';
+      if (url === 'https://not-configured/') {
+        url = '';
+      }
+      setServerUrl(url);
+    }
+    run();
+  }, []);
+  return serverUrl;
+}