#363 Detect browser incompability (#41)

* added browser check lib

* browser check component

* browser-check component

* new js build

* pr refactor

* better browser version check

Author: KlemenSpruk

django_project_base/account/rest/impersonate.py

@@ -31,7 +31,7 @@ class ImpersonateUserDialogSerializer(serializers.Serializer):
     }
 
     # TODO: Trenutno je narejena samo komponenta. HTML dialog pa ne... ali je to v redu?
-    form_template = 'accounts/impersonate_dialog.html'
+    form_template = 'accounts/impersonate-dialog.html'
 
     # TODO: Placeholderja še ni... je samo predviden v komponentah... ampak se še nikjer ne definira
     # TODO: Trenutno se polje na roko definira na custom layoutu. Treba je podpreti, da bo tudi standardni input

django_project_base/js_app/package.json

@@ -9,8 +9,9 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "bootstrap": "^4.6.0",
     "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
+    "browser-update": "^3.3.37",
     "core-js": "^3.6.5",
     "dynamicforms": "^0.1.0",
     "es6-promise": "^4.2.8",

django_project_base/js_app/public/index.html

@@ -19,6 +19,6 @@
 <!-- built files will be auto injected -->
 </body>
 <script>
-  createApp('app', '<TitleBar :projectlistVisible="true"/>', 'modal-app');
+  createApp('app', '<BrowserCheck :hidePageIfUnSupportedBrowser="false"><TitleBar v-slot:content :projectlistVisible="true"/></BrowserCheck>', 'modal-app');
 </script>
 </html>

django_project_base/js_app/src/apps.js

@@ -12,6 +12,7 @@ import Login from './components/bootstrap/login.vue';
 import ProjectList from './components/bootstrap/projectlist.vue';
 import TitleBar from './components/bootstrap/titlebar.vue';
 import UserProfile from './components/bootstrap/userprofile.vue';
+import BrowserCheck from './components/browser-check.vue';
 import Notification from './components/notification.vue';
 
 const componentsConfig = {
@@ -21,6 +22,7 @@ const componentsConfig = {
   ProjectList,
   UserProfile,
   Notification,
+  BrowserCheck,
 };
 
 const createApp = (elementId, template, modalId) => {

django_project_base/js_app/src/components/bootstrap/impersonate_dialog.vue renamed to django_project_base/js_app/src/components/bootstrap/impersonate-dialog.vue

@@ -33,7 +33,7 @@ import _ from 'lodash';
 import { apiClient as ApiClient } from '../../apiClient';
 
 export default {
-  name: 'accounts-impersonate_dialog.html', // eslint-disable-line vue/component-definition-name-casing
+  name: 'accounts-impersonate-dialog.html', // eslint-disable-line vue/component-definition-name-casing
   props: {
     uuid: { type: String, required: true },
     record: { type: Object, required: true },

django_project_base/js_app/src/components/bootstrap/userprofile.vue

@@ -53,7 +53,7 @@ import ProjectBaseData from '../../projectBaseData';
 import { Session } from '../../session';
 import { Store } from '../../store';
 
-import ImpersonateDialog from './impersonate_dialog.vue';
+import ImpersonateDialog from './impersonate-dialog.vue';
 
 Vue.component(ImpersonateDialog.name, ImpersonateDialog);
 

django_project_base/js_app/src/components/browser-check.vue

@@ -0,0 +1,60 @@
+<template>
+  <div v-if="!pageHidden">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import browserUpdate from 'browser-update';
+
+export default {
+  name: 'BrowserCheck',
+  props: {
+    hidePageIfUnSupportedBrowser: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      pageHidden: false,
+      checkInterval: null,
+    };
+  },
+  beforeDestroy() {
+    this.clearCheck();
+    this.pageHidden = false;
+  },
+  mounted() {
+    browserUpdate({
+      required: {
+        e: -4, f: -4, o: -4, s: -4, c: -4,
+      },
+      insecure: true,
+      unsupported: true,
+      reminder: 0,
+      reminderClosed: 1,
+      noclose: true,
+    }, false);
+    this.checkInterval = setInterval(() => {
+      if (this.hidePageIfUnSupportedBrowser && this.isBrowserNotificationShown() && !this.pageHidden) {
+        this.pageHidden = true;
+      }
+    }, 250);
+    setTimeout(() => {
+      this.clearCheck();
+    }, 10000);
+  },
+  methods: {
+    isBrowserNotificationShown() {
+      return !!document.getElementById('buorg');
+    },
+    clearCheck() {
+      if (this.checkInterval) {
+        clearInterval(this.checkInterval);
+        this.checkInterval = null;
+      }
+    },
+  },
+};
+</script>