Webatrice: fix login bugs (#4557)

* fix login after failed connection attempts, limit connection attempt time

* fix register hashed password and salt

* add feature detection and Unsupported Browser screen

* nit

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/containers/App/AppShell.tsx

@@ -6,6 +6,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import { store } from 'store';
 import { Header } from 'components';
 import Routes from './AppShellRoutes';
+import FeatureDetection from './FeatureDetection';
 
 import './AppShell.css';
 
@@ -26,6 +27,8 @@ class AppShell extends Component {
         <div className="AppShell" onContextMenu={this.handleContextMenu}>
           <Router>
             <Header />
+
+            <FeatureDetection />
             <Routes />
           </Router>
         </div>

webclient/src/containers/App/AppShellRoutes.tsx

@@ -10,7 +10,8 @@ import {
   Room,
   Server,
   Login,
-  Logs
+  Logs,
+  Unsupported
 } from 'containers';
 
 const Routes = () => (
@@ -24,6 +25,7 @@ const Routes = () => (
       {<Route path={RouteEnum.ROOM} render={() => <Room />} />}
       <Route path={RouteEnum.SERVER} render={() => <Server />} />
       <Route path={RouteEnum.LOGIN} render={() => <Login />} />
+      <Route path={RouteEnum.UNSUPPORTED} render={() => <Unsupported />} />
 
       <Redirect from="*" to={RouteEnum.LOGIN} />
     </Switch>

webclient/src/containers/App/FeatureDetection.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { Redirect } from 'react-router-dom';
+import { dexieService } from 'services';
+import { RouteEnum } from 'types';
+
+const FeatureDetection = () => {
+  const [unsupported, setUnsupported] = useState(false);
+
+  useEffect(() => {
+    const features: Promise<any>[] = [
+      detectIndexedDB(),
+    ];
+
+    Promise.all(features).catch((e) => setUnsupported(true));
+  }, []);
+
+  return unsupported
+    ? <Redirect from="*" to={RouteEnum.UNSUPPORTED} />
+    : <></>;
+
+  function detectIndexedDB() {
+    return dexieService.testConnection();
+  }
+};
+
+export default FeatureDetection;