Merge pull request #123 from evandor/TAB-480-bug-addComment

Tab 480 bug add comment

package.json

@@ -30,6 +30,7 @@
     "build pwa & deploy to india032": "quasar build -m pwa && scp -r -P 222 dist/pwa/* [email protected]:/home/carsten/tabsets/shared.tabsets.net"
   },
   "dependencies": {
+    "@auth0/auth0-vue": "^2.1.0",
     "@calumk/editorjs-columns": "^0.3.1",
     "@codexteam/icons": "^0.3.0",
     "@editorjs/editorjs": "^2.27.2",
@@ -40,6 +41,7 @@
     "@quasar/extras": "^1.16.6",
     "@types/lodash": "^4.14.182",
     "@types/pngjs": "^6.0.4",
+    "@types/pouchdb": "^6.4.2",
     "@types/rangy": "^0.0.38",
     "@types/sanitize-html": "^2.9.0",
     "@xenova/transformers": "^2.12.1",
@@ -53,18 +55,21 @@
     "idb": "^8.0.0",
     "idraw": "^0.3.1",
     "isomorphic-git": "^1.25.2",
-    "js-md5": "^0.8.3",
+    "jwt-decode": "^3.1.2",
+    "keytar": "^7.9.0",
     "lodash": "^4.17.21",
     "mhtml2html": "^3.0.0",
     "mqtt": "^5.3.4",
     "pinia": "^2.0.11",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
+    "pouchdb-browser": "^8.0.1",
     "quasar": "^2.13.1",
     "rangy": "^1.3.1",
     "regenerator-runtime": "^0.14.1",
     "sanitize-html": "^2.10.0",
     "throttled-queue": "^2.1.4",
+    "ts-md5": "^1.3.1",
     "uuid": "^9.0.0",
     "v-onboarding": "^2.6.0",
     "vite-plugin-package-version": "^1.1.0",

quasar.config.js

@@ -28,7 +28,8 @@ module.exports = configure(function (ctx) {
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
     boot: [
       //'i18n',
-      'constants'
+      'constants',
+      'auth0'
     ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css

src-bex/background.ts

@@ -19,14 +19,12 @@ chrome.runtime.onInstalled.addListener((callback) => {
   // getting error: "Service worker registration failed. Status code: 15"
   // Analytics.fireEvent('install-' + callback.reason);
   if (callback.reason !== OnInstalledReason.CHROME_UPDATE) {
-   // if (!navigator.webdriver) {
       chrome.tabs.create({
         active: true,
         url: callback.previousVersion ?
             "https://tabsets.web.app/#/updatedFrom/" +  callback.previousVersion :
             "https://tabsets.web.app/#/installed/"
       })
-   // }
   }
 });
 

src/App.vue

@@ -3,23 +3,110 @@
 </template>
 
 <script setup lang="ts">
+import {useTabsStore} from "src/stores/tabsStore";
 import {useQuasar} from "quasar";
-import {useUtils} from "src/services/Utils";
-import {EventEmitter} from "events";
-import AppService from "src/services/AppService";
+import {useBookmarksStore} from "src/stores/bookmarksStore";
+import {useSearchStore} from "src/stores/searchStore";
+import {useNotificationsStore} from "src/stores/notificationsStore";
+import {useWindowsStore} from "src/stores/windowsStore";
 import {useRoute, useRouter} from "vue-router";
+import {useAuth0, User} from "@auth0/auth0-vue";
+import {ref, watchEffect} from "vue";
+import PouchDbPersistenceService from "src/services/PouchDbPersistenceService";
+import AppService from "src/services/AppService";
+import {useAuthStore} from "stores/auth";
+import {useSettingsStore} from "stores/settingsStore";
 import {Logz} from "src/services/logz/Logz";
+import {EventEmitter} from "events";
 
+const tabsStore = useTabsStore()
+const settingsStore = useSettingsStore()
+const bookmarksStore = useBookmarksStore()
+const windowsStore = useWindowsStore()
+const searchStore = useSearchStore()
+const route = useRoute()
 const $q = useQuasar()
+const auth0 = useAuth0()
+const authStore = useAuthStore()
 
 // https://stackoverflow.com/questions/9768444/possible-eventemitter-memory-leak-detected
 const emitter = new EventEmitter()
 emitter.setMaxListeners(12)
 
+// we assume we are authenticated when we reach this point in electron mode
+//const isAuthenticated = ref(process.env.MODE === 'electron' ? true : auth0.isAuthenticated)
+const isAuthenticated = ref(true)
+
+if (process.env.MODE === 'electron') {
+ /* window.electronAPI.getProfile()
+      .then((profile: any) => {
+        const user = new User()
+        user.name = profile.name
+        user.email = profile.name
+        user.sub = profile.sub
+        user.picture = profile.picture
+        user.nickname = profile.nickname
+        //console.log("setting user", user)
+        useAuthStore().setUser(user)
+
+      })*/
+}
+
+function isPublicTabsetPage(path: string) {
+  return path.startsWith('/publictabsets')
+}
+
 $q.dark.set($q.localStorage.getItem('darkMode') || false)
 
-console.log("calling appService init")
-AppService.init()
+const redirect = ref(true)
+
+watchEffect(() => {
+  // TODO improve
+  if (process.env.MODE === 'electron') {
+    console.log("watching auth effect:", isAuthenticated.value, authStore.user?.name, redirect.value)
+    if (redirect.value && isAuthenticated.value && authStore.user?.name) {
+
+      if (!isPublicTabsetPage(route.path)) { // do not login in public pages even if authenticated
+        redirect.value = false
+        if (auth0.user.value) {
+          authStore.setUser(auth0.user.value)
+        }
+        //console.log("setting auth0", auth0)
+        authStore.setAuth0(auth0)
+
+        PouchDbPersistenceService.initRemoteDb()
+          .then(() => {
+            console.log("calling appService init")
+            AppService.init()
+          })
+        Logz.info({"message": "user logged in (electron)", "username": auth0.user.value?.name})
+      }
+
+    }
+  } else {
+    console.log("watching auth effect:", isAuthenticated.value, auth0.user.value?.name, redirect.value)
+   // if (redirect.value && isAuthenticated.value && auth0.user.value?.name) {
+    if (redirect.value && isAuthenticated.value ) {
+
+      if (!isPublicTabsetPage(route.path)) { // do not log in in public pages even if authenticated
+        redirect.value = false
+        //authStore.setUser(auth0.user.value)
+        authStore.setAuth0(auth0)
+
+        // PouchDbPersistenceService.initRemoteDb()
+        //   .then(() => {
+            console.log("calling appService init")
+            AppService.init()
+
+            const selectedTSId = localStorage.getItem("selectedTabset")
+        //  })
+        Logz.info({"message": "user logged in", "username": auth0.user.value?.name})
+      }
+
+    }
+
+  }
+})
 
 Logz.info({"message": "init: tabsets " + process.env.MODE + ", version: " + import.meta.env.PACKAGE_VERSION, "username": "anonymous"})
 

src/boot/auth0.ts

@@ -0,0 +1,33 @@
+import {boot} from 'quasar/wrappers'
+import {createAuth0} from '@auth0/auth0-vue';
+
+export default boot(({app}) => {
+
+    let redirectUrl = window.location.origin + "/www/index.html#/sidepanel"
+    // @ts-ignore
+    if (process.env.MODE === 'bex' && !chrome.sidePanel) {
+        redirectUrl = window.location.origin + "/www/index.html#/tabsets"
+    }
+    if (process.env.MODE === 'pwa') {
+        //redirectUrl = window.location.origin + "/#/sidepanel" - maybe for mobile phones?
+        redirectUrl = window.location.origin + "/#/tabsets" // - for browsers
+    } else if (process.env.MODE === "electron") {
+        //redirectUrl = "chrome-extension://noelfbnoaghjdgfbhieajghjopkhoode/www/index.html"
+        redirectUrl = "http://localhost/callback"
+    }
+
+    console.log("redirect", process.env.MODE, redirectUrl)
+
+    const clientOptions = {
+        domain: 'skysail.eu.auth0.com',
+        clientId: 'mqe1fc3eajTkGrmiWLiEH8pH6W3lx960', // Tabsets-SPA
+        authorizationParams: {
+            redirect_uri: redirectUrl,
+            audience: 'tabsets-api-ident'
+        }
+    }
+    //console.log("setting up auth", clientOptions)
+    const auth0 = createAuth0(clientOptions)
+
+    app.use(auth0);
+});

src/models/Notification.ts

@@ -7,11 +7,13 @@ export enum NotificationStatus {
 
 export class Notification {
 
+  _id: string;
   private created: number;
   updated: number | undefined;
   status: NotificationStatus;
 
   constructor(public id: string, public title: string, public msg: string) {
+    this._id = "notification:" + new Date().toJSON()
     this.created = new Date().getTime()
     this.updated = undefined
     this.status = NotificationStatus.UNREAD

src/models/Space.ts

@@ -1,10 +1,12 @@
 
 export class Space {
+  _id: string
   created: number
   updated: number
   description: string
 
   constructor(public id: string, public label: string) {
+    this._id = "space" + new Date().toJSON()
     this.created = new Date().getTime()
     this.updated = new Date().getTime()
     this.description = ''

src/models/Tabset.ts

@@ -34,6 +34,8 @@ export const TABSET_NAME_MAX_LENGTH = 32;
 export class Tabset {
   id: string
 
+  _id: string | undefined
+  _rev: string | undefined
   name: string
   created: number
   updated: number