inform users that only Chrome is currently supported on login screen #…

…594

src/assets/css/styles.css

@@ -769,7 +769,7 @@ td.pulse-off input {
     display: flex;
     width: 100%;
     height: 100%;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
 }
@@ -1024,3 +1024,10 @@ td.pulse-off input {
 .progress-leave.slidein-leave-active {
     width: 0;
 }
+
+.browser-warning {
+    color: $brand-color-secondary;
+    padding-top: 10px;
+    max-width: 300px;
+    text-align: center;
+}

src/containers/Login.js

@@ -15,14 +15,64 @@ class Login extends Component {
         }
     }
 
+    userBrowser = () => {
+        const isChrome = !!window.chrome && !!window.chrome.webstore;
+
+        const isFirefox = typeof InstallTrigger !== 'undefined';
+
+        const isSafari = /constructor/i.test(window.HTMLElement) ||
+                    (function (p) { return p.toString() ===
+                    '[object SafariRemoteNotification]'; })(!window['safari'] ||
+                    safari.pushNotification);
+        const isOpera = (!!window.opr && !!opr.addons) || !!window.opera ||
+                        navigator.userAgent.indexOf(' OPR/') >= 0;
+
+        const isIE = /*@cc_on!@*/false || !!document.documentMode; // IE 6-11
+
+        const isEdge = !isIE && !!window.StyleMedia;
+
+        if(isChrome){
+            return 'chrome';
+        } else if(isFirefox){
+            return 'firefox';
+        } else if(isSafari) {
+            return 'safari';
+        } else if(isOpera) {
+            return 'opera';
+        } else if(isIE) {
+            return 'ie'
+        } else if(isEdge) {
+            return 'edge'
+        }
+    }
+
+    browserSupport = (...supportedBrowsers) => {
+
+            const userBrowser = this.userBrowser();
+            let isSupported = false;
+
+            supportedBrowsers.map(browser => {
+                if(userBrowser === browser){
+                    isSupported = true;
+                }
+            });
+            return isSupported;
+    }
+
     render() {
         const {redirect} = this.props;
+        const isYourBrowserSupported = this.browserSupport('chrome');
         return (
             <div>
                 <div className="login-container">
                     <LoginForm
                         redirect={redirect}
                      />
+                    {! isYourBrowserSupported &&
+                        <span className="browser-warning">
+                            Your browser might be not fully supported
+                        </span>
+                    }
                 </div>
             </div>
         );