pre social-logins

Author: brianhorakh

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>