Merge pull request #45 from plastic-io/next

fixed drop not working, made auth optional
plastic-io · Mar 21, 2024 · 5c2ff0e · 5c2ff0e
2 parents 4679d34 + 3e2a2f6
commit 5c2ff0e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 33 deletions.
diff --git a/packages/Auth0AuthenticationProvider/Auth0LogOffMenu.vue b/packages/Auth0AuthenticationProvider/Auth0LogOffMenu.vue
@@ -1,26 +1,19 @@
 <template>
-  <v-menu v-if="identity">
-    <template v-slot:activator="{props}">
-      <div style="height: 40px; width: 40px; border-radius: 40px; overflow: hidden;" class="mr-5">
-      <v-img
-        v-bind="props"
-        :title="identity.user.email"
-        :src="identity.user.picture"/>
-      </div>
-    </template>
-    <v-list>
-      <v-list-item @click="logoff">
-        Logoff
-      </v-list-item>
-    </v-list>
-  </v-menu>
+  <div :class="className">
+    <v-icon v-if="identity && identity.isAuthenticated" :size="size || 'x-large'" icon="mdi-logout" @click="logoff"/>
+    <v-icon v-else :size="size || 'x-large'" icon="mdi-login" @click="login"/>
+  </div>
 </template>
 <script>
   import {useStore as useAuthenticationStore} from "@plastic-io/graph-editor-vue3-authentication-provider";
   import {mapState, mapActions} from "pinia";
   export default {
+    props: {
+      size: String,
+      className: String,
+    },
     methods: {
-      ...mapActions(useAuthenticationStore, ['logoff']),
+      ...mapActions(useAuthenticationStore, ['logoff', 'login']),
     },
     computed: {
       ...mapState(useAuthenticationStore, ['identity']),

diff --git a/packages/Auth0AuthenticationProvider/main.ts b/packages/Auth0AuthenticationProvider/main.ts
@@ -15,9 +15,9 @@ export default class Auth0 extends EditorModule {
     app.component('auth0-log-off-menu', Auth0LogOffMenu);
     app.component('auth0-settings-panel', Auth0SettingsPanel);
     const graphOrchestratorStore = useOrchestratorStore();
-    
+
     const authProvider = new Auth0AuthenticationProvider(router);
-    
+
     const settingsPanel = new Plugin({
       name: 'Auth0',
       title: 'Authentication',
@@ -36,6 +36,7 @@ export default class Auth0 extends EditorModule {
         alt: 'Logout of your current session',
         title: 'Logout of your current session',
         icon: 'mdi-logout',
+        className: 'mr-4 pr-2',
       },
       divider: true,
       helpTopic: 'logoff',
@@ -46,16 +47,13 @@ export default class Auth0 extends EditorModule {
     const logoffIcon = new Plugin({
       name: 'Auth0',
       title: 'Logout',
-      component: 'v-icon',
+      component: 'auth0-log-off-menu',
       props: {
-        style: "cursor: pointer",
         "help-topic": "logout",
         alt: 'Logout of your current session',
         title: 'Logout of your current session',
-        icon: 'mdi-logout',
-        onclick() {
-          authProvider.logoff();
-        },
+        className: 'mb-1 pr-2',
+        size: 'medium',
       },
       divider: true,
       helpTopic: 'logoff',
@@ -66,7 +64,7 @@ export default class Auth0 extends EditorModule {
     graphOrchestratorStore.addPlugin(logoffIcon);
     graphOrchestratorStore.addPlugin(settingsPanel);
     graphOrchestratorStore.addPlugin(logoffIconManager);
-    
+
     authProvider.router = router;
     graphOrchestratorStore.authProvider = authProvider;
   }
@@ -133,12 +131,8 @@ export class Auth0AuthenticationProvider extends AuthenticationProvider {
       const isAuthenticated = await this.client.isAuthenticated();
 
       if (!isAuthenticated && !isCallbackUrl) {
-        // save the current location in localStore so we can send
-        // user back there when they respawn
-        localStorage.setItem(STORE_KEY, self.location.pathname
-          .replace(this.router.options.history.base, ''));
         // user must authenticate
-        this.login();
+        return;
       }
 
       const token = await this.client.getTokenSilently();
@@ -172,6 +166,10 @@ export class Auth0AuthenticationProvider extends AuthenticationProvider {
         }
     }
     async login() {
+        // save the current location in localStore so we can send
+        // user back there when they respawn
+        localStorage.setItem(STORE_KEY, self.location.pathname
+          .replace(this.router.options.history.base, ''));
         try {
             return await this.client.loginWithRedirect({
               authorizationParams: {

diff --git a/packages/AuthenticationProvider/main.ts b/packages/AuthenticationProvider/main.ts
@@ -25,6 +25,9 @@ export const useStore = defineStore('authentication', {
     actions: {
         logoff() {
             this.orchistratorStore.authProvider!.logoff();
+        },
+        login() {
+            this.orchistratorStore.authProvider!.login();
         }
     },
 });
diff --git a/packages/Graph/GraphCanvas.vue b/packages/Graph/GraphCanvas.vue
@@ -20,14 +20,14 @@
         <div
             :style="preferences!.appearance.theme === 'dark' ? '' : 'filter: invert(1);'"
             :class="graphCanvasClasses"
+            @drop="drop($event)"
+            @dragover="dragOver($event)"
         ></div>
         <div
             x-graph-canvas
             :style="graphCanvasStyle"
             v-if="graphSnapshot && !presentation"
             :key="graphUpdateVersion"
-            @drop="drop($event)"
-            @dragover="dragOver($event)"
         >
             <node-edge-connector
                 v-for="c in connectors"
@@ -95,7 +95,7 @@ export default {
         this.$nextTick(() => {
             this.updateGrid();
         });
-    }, 
+    },
     'preferences.appearance.showGrid'() {
         this.$nextTick(() => {
             this.updateGrid();
@@ -359,6 +359,7 @@ export default {
     top: -5000vh;
     left: -5000vw;
     z-index: -1597463007;
+    will-change: transform;
 }
 .graph-errors {
     position: fixed;