fix(front): show an error if db is not responding

conf/devConfig.js

@@ -11,7 +11,6 @@ module.exports = {
   password: 'admin',
   // Already administrator from global configuration
   superAdministrators: ['admin@a.com', 'a@a.com'],
-  autoCreateDatabase: true,
   sessionSigned: true,
   allowedOrigins: ['http://localhost:8080']
 };

package.json

@@ -97,6 +97,7 @@
   "devDependencies": {
     "@babel/cli": "^7.1.2",
     "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
     "@babel/plugin-transform-async-to-generator": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",

src/client/actions/db.js

@@ -118,11 +118,12 @@ export function setLdapGroupProperties(groupName, properties) {
   };
 }
 
-function doUpdateGroupProperties(groupUrl, setPropUrl, properties) {
-  return apiFetchJSON(setPropUrl, {
+async function doUpdateGroupProperties(groupUrl, setPropUrl, properties) {
+  await apiFetchJSON(setPropUrl, {
     method: 'PUT',
     body: JSON.stringify(properties)
-  }).then(() => apiFetchJSON(groupUrl));
+  });
+  return apiFetchJSON(groupUrl);
 }
 
 export function syncLdapGroup(groupName) {

src/client/actions/main.js

@@ -0,0 +1,15 @@
+import { apiFetchJSON } from '../api';
+
+export const ROC_ONLINE = 'ROC_ONLINE';
+
+export function getRocStatus() {
+  return async (dispatch) => {
+    try {
+      const result = await apiFetchJSON('auth/session');
+      dispatch({ type: ROC_ONLINE, payload: !!result.ok });
+    } catch (e) {
+      dispatch({ type: ROC_ONLINE, payload: false });
+    }
+    setTimeout(() => dispatch(getRocStatus()), 10000);
+  };
+}

src/client/components/App.js

@@ -18,112 +18,126 @@ import DatabaseAdministration from './DatabaseAdministration';
 import GroupMemberships from './GroupMemberships';
 import Allowed from './Allowed';
 
-const App = (props) => (
-  <HashRouter>
-    <div>
-      <div className="wrapper">
-        <Sidebar
-          hasDb={props.hasDb}
-          loggedIn={props.loggedIn}
-          loginProvider={props.loginProvider}
-          isAdmin={props.isAdmin}
-          userRights={props.userRights}
-          isGroupOwner={props.isGroupOwner}
-        />
-        <div className="main-panel">
-          <nav className="navbar navbar-default navbar-fixed">
-            <div className="container-fluid">
-              <div className="collapse navbar-collapse">
-                <ul className="nav navbar-nav navbar-right">
-                  <li>
-                    <DatabaseSelector
-                      dbName={props.dbName}
-                      dbList={props.dbList}
-                      onDbSelected={(event) =>
-                        dbManager.switchDb(event.target.value)
-                      }
-                    />
-                  </li>
-                  <li>
-                    <LoginButton />
-                  </li>
-                </ul>
+const App = (props) => {
+  const { rocOnline } = props;
+  return (
+    <HashRouter>
+      <div>
+        <div className="wrapper">
+          <Sidebar
+            rocOnline={rocOnline}
+            hasDb={props.hasDb}
+            loggedIn={props.loggedIn}
+            loginProvider={props.loginProvider}
+            isAdmin={props.isAdmin}
+            userRights={props.userRights}
+            isGroupOwner={props.isGroupOwner}
+          />
+          <div className="main-panel">
+            <nav className="navbar navbar-default navbar-fixed">
+              <div className="container-fluid">
+                <div className="collapse navbar-collapse">
+                  {rocOnline && (
+                    <ul className="nav navbar-nav navbar-right">
+                      <li>
+                        <DatabaseSelector
+                          dbName={props.dbName}
+                          dbList={props.dbList}
+                          onDbSelected={(event) =>
+                            dbManager.switchDb(event.target.value)
+                          }
+                        />
+                      </li>
+                      <li>
+                        <LoginButton />
+                      </li>
+                    </ul>
+                  )}
+                </div>
               </div>
-            </div>
-          </nav>
+            </nav>
 
-          <div className="content">
-            <div className="container-fluid">
-              <Switch>
-                <Route
-                  path="/"
-                  exact
-                  render={() => (
-                    <Home
-                      user={props.loggedUser}
-                      provider={props.loginProvider}
-                      dbName={props.dbName}
-                      isAdmin={props.isAdmin}
+            <div className="content">
+              <div className="container-fluid">
+                {rocOnline ? (
+                  <Switch>
+                    <Route
+                      path="/"
+                      exact
+                      render={() => (
+                        <Home
+                          user={props.loggedUser}
+                          provider={props.loginProvider}
+                          dbName={props.dbName}
+                          isAdmin={props.isAdmin}
+                        />
+                      )}
                     />
-                  )}
-                />
-                <Route
-                  path="/groups"
-                  exact
-                  render={() => {
-                    return (
-                      <Allowed
-                        allowed={
-                          props.userRights.includes('createGroup') ||
-                          props.isGroupOwner
+                    <Route
+                      path="/groups"
+                      exact
+                      render={() => {
+                        return (
+                          <Allowed
+                            allowed={
+                              props.userRights.includes('createGroup') ||
+                              props.isGroupOwner
+                            }
+                          >
+                            <Groups />
+                          </Allowed>
+                        );
+                      }}
+                    />
+                    <Route path="/create_user" component={CreateUser} />
+                    <Route
+                      path="/manage_database"
+                      render={() => {
+                        return (
+                          <Allowed allowed={props.userRights.includes('admin')}>
+                            <DatabaseAdministration
+                              isAdmin={props.userRights.includes('admin')}
+                            />
+                            ;
+                          </Allowed>
+                        );
+                      }}
+                    />
+                    <Route
+                      path="/login"
+                      render={() => {
+                        if (props.loggedIn) {
+                          return <Redirect to="/" />;
+                        } else {
+                          return <Login />;
                         }
-                      >
-                        <Groups />
-                      </Allowed>
-                    );
-                  }}
-                />
-                <Route path="/create_user" component={CreateUser} />
-                <Route
-                  path="/manage_database"
-                  render={() => {
-                    return (
-                      <Allowed allowed={props.userRights.includes('admin')}>
-                        <DatabaseAdministration
-                          isAdmin={props.userRights.includes('admin')}
-                        />
-                        ;
-                      </Allowed>
-                    );
-                  }}
-                />
-                <Route
-                  path="/login"
-                  render={() => {
-                    if (props.loggedIn) {
-                      return <Redirect to="/" />;
-                    } else {
-                      return <Login />;
-                    }
-                  }}
-                />
-                <Route path="/change_password" component={ChangePassword} />
-                <Route path="/group_memberships" component={GroupMemberships} />
-                <Route component={NoMatch} />
-              </Switch>
+                      }}
+                    />
+                    <Route path="/change_password" component={ChangePassword} />
+                    <Route
+                      path="/group_memberships"
+                      component={GroupMemberships}
+                    />
+                    <Route component={NoMatch} />
+                  </Switch>
+                ) : rocOnline === false ? (
+                  <div>Could not connect to the database...</div>
+                ) : null}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </HashRouter>
-);
+    </HashRouter>
+  );
+};
 
 App.propTypes = {
   loggedIn: PropTypes.bool.isRequired
 };
 
 export default connect((state) => ({
+  rocOnline: state.main.rocOnline,
   loggedUser: state.login.username,
   loggedIn: !!state.login.username,
   loginProvider: state.login.provider,

src/client/components/Sidebar.js

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import SidebarLink from './SidebarLink';
 
 export default function Sidebar({
+  rocOnline,
   loggedIn,
   loginProvider,
   isAdmin,
@@ -18,33 +19,35 @@ export default function Sidebar({
             rest-on-couch
           </Link>
         </div>
-        <ul className="nav">
-          {userRights.includes('createGroup') || isGroupOwner ? (
-            <SidebarLink to="/groups" icon="users" text="Groups" />
-          ) : null}
-          {loggedIn && loginProvider === 'local' ? (
+        {rocOnline && (
+          <ul className="nav">
+            {userRights.includes('createGroup') || isGroupOwner ? (
+              <SidebarLink to="/groups" icon="users" text="Groups" />
+            ) : null}
+            {loggedIn && loginProvider === 'local' ? (
+              <SidebarLink
+                to="/change_password"
+                icon="key"
+                text="Change Password"
+              />
+            ) : null}
+            {isAdmin ? (
+              <SidebarLink to="/create_user" icon="plus" text="New user" />
+            ) : null}
+            {userRights && userRights.includes('admin') ? (
+              <SidebarLink
+                to="/manage_database"
+                icon="database"
+                text="DB administration"
+              />
+            ) : null}
             <SidebarLink
-              to="/change_password"
-              icon="key"
-              text="Change Password"
+              to="/group_memberships"
+              icon="user"
+              text="Group memberships"
             />
-          ) : null}
-          {isAdmin ? (
-            <SidebarLink to="/create_user" icon="plus" text="New user" />
-          ) : null}
-          {userRights && userRights.includes('admin') ? (
-            <SidebarLink
-              to="/manage_database"
-              icon="database"
-              text="DB administration"
-            />
-          ) : null}
-          <SidebarLink
-            to="/group_memberships"
-            icon="user"
-            text="Group memberships"
-          />
-        </ul>
+          </ul>
+        )}
       </div>
     </div>
   );

src/client/index.js

@@ -4,6 +4,9 @@ import { Provider } from 'react-redux';
 
 import store from './store';
 import App from './components/App';
+import { getRocStatus } from './actions/main';
+
+store.dispatch(getRocStatus());
 
 render(
   <Provider store={store}>

src/client/reducers/main.js

@@ -0,0 +1,16 @@
+import { ROC_ONLINE } from '../actions/main';
+
+const initialState = {
+  rocOnline: null
+};
+
+const mainReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ROC_ONLINE:
+      return { ...state, rocOnline: action.payload };
+    default:
+      return state;
+  }
+};
+
+export default mainReducer;

src/client/store.js

@@ -5,6 +5,7 @@ import { persistStore, persistCombineReducers } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 
 import DbManager from './dbManager';
+import mainReducer from './reducers/main';
 import dbReducer from './reducers/db';
 import dbNameReducer from './reducers/dbName';
 import loginReducer from './reducers/login';
@@ -24,6 +25,7 @@ const rootReducer = persistCombineReducers(
     throttle: 1000
   },
   {
+    main: mainReducer,
     db: dbReducer,
     dbName: dbNameReducer,
     login: loginReducer
@@ -46,8 +48,8 @@ export const dbManager = new DbManager(store);
 
 function onRehydrated() {
   function getParameterByName(name) {
-    var match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
-    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
+    const url = new URL(window.location.href);
+    return url.searchParams.get(name);
   }
 
   // If url has a database name, we override the persisted database name