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;

webclient/src/containers/Login/Login.tsx

@@ -88,7 +88,7 @@ const Login = ({ state, description }: LoginProps) => {
 
   useReduxEffect(() => {
     resetSubmitButton();
-  }, [ServerTypes.LOGIN_FAILED], []);
+  }, [ServerTypes.CONNECTION_FAILED, ServerTypes.LOGIN_FAILED], []);
 
   useReduxEffect(({ options: { hashedPassword } }) => {
     if (hostIdToRemember) {

webclient/src/containers/Unsupported/Unsupported.css

@@ -0,0 +1,18 @@
+.Unsupported {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.Unsupported-paper {
+  width: 600px;
+  max-width: 100%;
+  padding: 40px;
+  text-align: center;
+}
+
+.Unsupported-paper__header {
+  margin-bottom: 40px;
+}

webclient/src/containers/Unsupported/Unsupported.tsx

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+
+import './Unsupported.css';
+
+const Unsupported = () => {
+  return (
+    <div className='Unsupported'>
+      <Paper className='Unsupported-paper'>
+        <div className='Unsupported-paper__header'>
+          <Typography variant="h1">Unsupported Browser</Typography>
+          <Typography variant="subtitle1">Please update your browser and/or check your permissions.</Typography>
+        </div>
+
+        <Typography variant="subtitle2">Note: Private browsing causes some browsers to disable certain permissions or features.</Typography>
+      </Paper>
+    </div>
+  );
+};
+
+const mapStateToProps = state => ({
+
+});
+
+export default withRouter(connect(mapStateToProps)(Unsupported));

webclient/src/containers/index.ts

@@ -7,3 +7,4 @@ export { default as Player } from './Player/Player';
 export { default as Server } from './Server/Server';
 export { default as Logs } from './Logs/Logs';
 export { default as Login } from './Login/Login';
+export { default as Unsupported } from './Unsupported/Unsupported';