123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|
import Splitter from 'primevue/splitter'
|
|
import SplitterPanel from 'primevue/splitterpanel'
|
|
import ChartView from './components/ChartView.vue'
|
|
import ChatPanel from './components/ChatPanel.vue'
|
|
import LoginScreen from './components/LoginScreen.vue'
|
|
import { useOrderStore } from './stores/orders'
|
|
import { useChartStore } from './stores/chart'
|
|
import { useStateSync } from './composables/useStateSync'
|
|
import { wsManager } from './composables/useWebSocket'
|
|
|
|
const isAuthenticated = ref(false)
|
|
const needsConfirmation = ref(false)
|
|
const authError = ref<string>()
|
|
let stateSyncCleanup: (() => void) | null = null
|
|
|
|
// Check if we need password confirmation on first 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
|
|
})
|
|
|
|
const handleAuthenticate = async (
|
|
password: string,
|
|
confirmPassword?: string,
|
|
newPassword?: string,
|
|
confirmNewPassword?: string
|
|
) => {
|
|
authError.value = undefined
|
|
|
|
try {
|
|
const result = await wsManager.connect(password, confirmPassword, newPassword, confirmNewPassword)
|
|
|
|
if (result.success) {
|
|
isAuthenticated.value = true
|
|
|
|
// Initialize state sync after successful authentication
|
|
const orderStore = useOrderStore()
|
|
const chartStore = useChartStore()
|
|
const stateSync = useStateSync({
|
|
OrderStore: orderStore,
|
|
ChartStore: chartStore
|
|
})
|
|
stateSyncCleanup = stateSync.cleanup
|
|
} else {
|
|
authError.value = result.message
|
|
|
|
// If server says we need confirmation, update the flag
|
|
if (result.needsConfirmation) {
|
|
needsConfirmation.value = true
|
|
}
|
|
}
|
|
} catch (err) {
|
|
authError.value = 'Connection failed'
|
|
console.error('Authentication error:', err)
|
|
}
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
if (stateSyncCleanup) {
|
|
stateSyncCleanup()
|
|
}
|
|
wsManager.disconnect()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-container dark">
|
|
<LoginScreen
|
|
v-if="!isAuthenticated"
|
|
:needs-confirmation="needsConfirmation"
|
|
:error-message="authError"
|
|
@authenticate="handleAuthenticate"
|
|
/>
|
|
<Splitter v-else class="main-splitter">
|
|
<SplitterPanel :size="62" :minSize="40" class="chart-panel">
|
|
<ChartView />
|
|
</SplitterPanel>
|
|
<SplitterPanel :size="38" :minSize="20" class="chat-panel">
|
|
<ChatPanel />
|
|
</SplitterPanel>
|
|
</Splitter>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-container {
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
overflow: hidden;
|
|
background: var(--p-surface-0);
|
|
}
|
|
|
|
.main-splitter {
|
|
height: 100vh !important;
|
|
}
|
|
|
|
.main-splitter :deep(.p-splitter-gutter) {
|
|
background: var(--p-surface-100);
|
|
}
|
|
|
|
.main-splitter :deep(.p-splitter-gutter-handle) {
|
|
background: var(--p-primary-color);
|
|
}
|
|
|
|
.chart-panel,
|
|
.chat-panel {
|
|
height: 100% !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chart-panel :deep(.p-splitter-panel-content),
|
|
.chat-panel :deep(.p-splitter-panel-content) {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|