placeholder for supertokens

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "path": "^0.12.7",
     "pinia": "^2.1.7",
+    "supertokens-web-js": "^0.8.0",
     "vue": "^3.3.8",
     "vue-command": "^35.2.1",
     "vue-cookie-law": "github:elasticdotventures/vue-cookie-law",

public/config.json

@@ -0,0 +1,3 @@
+{
+    "SUPERTOKEN_BACKEND_URL": "http://localhost:3567"
+}

src/components/CommandLineInterface.vue

@@ -11,13 +11,15 @@ const commands = {
   "help": () => createStdout("Available commands: hello, login, debug"),
   "login": () => {
     mainStore.toggleLogin();
-    return createStdout("Login interface activated.");
-  },
+    const status = mainStore.showLogin ? "Activated" : "Disabled";
+    return createStdout(`Login interface ${status}.`);
+    },
   "hello": () => createStdout("Hello world! #wip"),
   "debug": () => {
     mainStore.toggleDebugPanel();
-    return createStdout("Debug panel activated.");
-  },
+    const status = mainStore.showDebugPanel ? "Activated" : "Disabled";
+    return createStdout(`Debug panel ${status}.`);
+    },
 };
 </script>
 

src/components/DebugPanel.vue

@@ -1,16 +1,20 @@
-<!-- src/components/DebugPanel.vue -->
 <template>
   <div class="debug-panel">
-    <pre>{{ state }}</pre>
+    <h3>🕵️ Secret Debuggin Panel</h3>
+    <pre class="state-display">{{ formattedState }}</pre>
     <button @click="resetCookieConsent">Reset Cookie Consent</button>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useMainStore } from '../store';
 
 const mainStore = useMainStore();
-const state = mainStore.$state;
+
+const formattedState = computed(() => {
+  return JSON.stringify(mainStore.$state, null, 2);
+});
 
 const resetCookieConsent = () => {
   mainStore.resetCookieConsent();
@@ -19,7 +23,30 @@ const resetCookieConsent = () => {
 
 <style scoped>
 .debug-panel {
-  /* Add your styles for the debug panel here */
+  background-color: #f8f8f8;
+  border: 1px solid #ccc;
+  padding: 15px;
+  border-radius: 10px;
+  margin-top: 15px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  color: #333; /* Default text color for the panel */
+}
+
+.debug-panel h3 {
+  margin-top: 0;
 }
-</style>
 
+.debug-panel pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background-color: #eee; /* Light background for the text area */
+  padding: 10px;
+  border-radius: 5px;
+  color: #333; /* Ensuring text color is readable against the light background */
+}
+
+.debug-panel button {
+  margin-top: 10px;
+  /* Additional button styling */
+}
+</style>

src/main.ts

@@ -8,24 +8,29 @@ import VueGtag from "vue-gtag-next";
 import { VueCookieNext } from 'vue-cookie-next';
 import { createPinia } from 'pinia'
 
+import SuperTokens from 'supertokens-web-js';
+import Session from 'supertokens-web-js/recipe/session';
+import ThirdPartyPasswordless from 'supertokens-web-js/recipe/thirdpartypasswordless'
+
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "http://localhost:8080",
+        apiBasePath: "/auth",
+        appName: "...",
+    },
+    recipeList: [
+        Session.init(),
+        ThirdPartyPasswordless.init(),
+    ],
+});
+
+
+
 // // An application instance won't render anything until its .mount() method is called
 const app = createApp(App);
 
 app.use(createPinia());
-
 app.use(VueCookieNext);
-
-// app.use(VueGtag, {
-//     config: { 
-//       id: "G-XP9X9LHTDV",
-//       params: {
-//         anonymize_ip: true
-//       }
-//     },
-//     enabled: false
-//   })
-//   .provide('gtag', app.config.globalProperties.$gtag);
-
 app.use(VueGtag, {
   property: { id: "G-XP9X9LHTDV" },
   isEnabled: false,

src/types/config.ts

@@ -0,0 +1,6 @@
+export interface AppConfig {
+    SUPERTOKEN_BACKEND_URL: string;
+    PROMPTEXEC_BACKEND_URL: string;
+    // featureFlag: boolean;
+    // Add other properties as needed
+  }