redesign fully scaffolded and web login works

web/src/App.vue

@@ -11,9 +11,9 @@ import { useShapeStore } from './stores/shapes'
 import { useIndicatorStore } from './stores/indicators'
 import { useStateSync } from './composables/useStateSync'
 import { wsManager } from './composables/useWebSocket'
+import { authService } from './composables/useAuth'
 
-const isAuthenticated = ref(false)
-const needsConfirmation = ref(false)
+const isAuthenticated = authService.isAuthenticated
 const authError = ref<string>()
 const isDragging = ref(false)
 const isMobile = ref(false)
@@ -37,57 +37,66 @@ watch(isMobile, (mobile) => {
   }
 })
 
-// Check if we need password confirmation on first load
+// Check if user is already authenticated on page load
 onMounted(async () => {
-  // Check if secrets store is initialized by trying to fetch a status endpoint
-  // For now, just default to false (user will see login screen)
-  needsConfirmation.value = false
+  // Try to restore session from stored token
+  if (authService.getToken()) {
+    const sessionValid = await authService.checkAuth()
+    if (sessionValid) {
+      isAuthenticated.value = true
+      await initializeApp()
+    }
+  }
 
   // Initialize mobile check
   checkMobile()
   window.addEventListener('resize', checkMobile)
 })
 
-const handleAuthenticate = async (
-  password: string,
-  confirmPassword?: string,
-  newPassword?: string,
-  confirmNewPassword?: string
-) => {
+const handleAuthenticate = async (email: string, password: string) => {
   authError.value = undefined
 
   try {
-    const result = await wsManager.connect(password, confirmPassword, newPassword, confirmNewPassword)
+    // Step 1: Login via HTTP to get JWT token
+    const result = await authService.login(email, password)
 
-    if (result.success) {
-      isAuthenticated.value = true
-
-      // Initialize state sync after successful authentication
-      const orderStore = useOrderStore()
-      const chartStore = useChartStore()
-      const shapeStore = useShapeStore()
-      const indicatorStore = useIndicatorStore()
-      const stateSync = useStateSync({
-        OrderStore: orderStore,
-        ChartStore: chartStore,
-        ShapeStore: shapeStore,
-        IndicatorStore: indicatorStore
-      })
-      stateSyncCleanup = stateSync.cleanup
-    } else {
-      authError.value = result.message
-
-      // If server says we need confirmation, update the flag
-      if (result.needsConfirmation) {
-        needsConfirmation.value = true
-      }
+    if (!result.success) {
+      authError.value = result.error || 'Login failed'
+      return
     }
-  } catch (err) {
-    authError.value = 'Connection failed'
+
+    if (!result.token) {
+      authError.value = 'No token received from server'
+      return
+    }
+
+    // Step 2: Connect WebSocket with JWT token (if WebSocket is used for real-time sync)
+    // For now, we're not connecting WebSocket until it's implemented in the gateway
+    // await wsManager.connect(result.token)
+
+    // Step 3: Initialize application
+    await initializeApp()
+  } catch (err: any) {
+    authError.value = err.message || 'Authentication failed'
     console.error('Authentication error:', err)
   }
 }
 
+const initializeApp = async () => {
+  // Initialize state sync after successful authentication
+  const orderStore = useOrderStore()
+  const chartStore = useChartStore()
+  const shapeStore = useShapeStore()
+  const indicatorStore = useIndicatorStore()
+  const stateSync = useStateSync({
+    OrderStore: orderStore,
+    ChartStore: chartStore,
+    ShapeStore: shapeStore,
+    IndicatorStore: indicatorStore
+  })
+  stateSyncCleanup = stateSync.cleanup
+}
+
 onMounted(() => {
   // Listen for splitter drag events
   document.addEventListener('mousedown', (e) => {
@@ -116,7 +125,6 @@ onBeforeUnmount(() => {
   <div class="app-container dark">
     <LoginScreen
       v-if="!isAuthenticated"
-      :needs-confirmation="needsConfirmation"
       :error-message="authError"
       @authenticate="handleAuthenticate"
     />