feat: better service starting, again

Author: kermanx

frontend/src/App.vue

@@ -2,7 +2,7 @@
 import type { AuthState } from './stores'
 import Clarity from '@microsoft/clarity'
 import { Zap } from 'lucide-vue-next'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import AppSidebar from '@/components/AppSidebar.vue'
@@ -12,13 +12,14 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/s
 import { Toaster } from '@/components/ui/sonner'
 import { useThemeStore } from '@/stores/theme'
 import ActionHandler from '@/views/ActionHandler.vue'
-import { useAuthStore } from './stores'
+import { useAuthStore, useServiceStore } from './stores'
 import 'vue-sonner/style.css'
 
 const { t } = useI18n()
 const authStore = useAuthStore()
 const { replace, currentRoute } = useRouter()
 const themeStore = useThemeStore()
+const serviceStore = useServiceStore()
 
 const authState = ref<AuthState | null>(null)
 const isCheckingAuth = ref(true)
@@ -33,6 +34,12 @@ onMounted(async () => {
   setTimeout(() => replace(currentRoute.value.path), 100)
   Clarity.init('sx60zbxtfz')
 })
+
+watch(() => serviceStore.serverConnected, async (connected) => {
+  if (connected) {
+    authState.value = await authStore.checkAuth()
+  }
+})
 </script>
 
 <template>

frontend/src/components/LoginForm.vue

@@ -2,17 +2,19 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ServiceStatus from '@/components/ServiceStatus.vue'
+import StartServiceButton from '@/components/StartServiceButton.vue'
 import ThemeToggle from '@/components/ThemeToggle.vue'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { useAuthStore } from '@/stores'
+import { useAuthStore, useServiceStore } from '@/stores'
 
 const props = defineProps<{
   register?: boolean
 }>()
 
 const { t } = useI18n()
+const serverStore = useServiceStore()
 const authStore = useAuthStore()
 
 const username = ref('')
@@ -120,6 +122,7 @@ async function handleSubmit() {
             />
           </div>
           <Button
+            v-if="authStore.isLoading || serverStore.serverConnected"
             type="submit"
             class="w-full"
             :disabled="authStore.isLoading"
@@ -134,6 +137,14 @@ async function handleSubmit() {
             </div>
             <span v-else>{{ props.register ? t('loginForm.register') : t('loginForm.login') }}</span>
           </Button>
+          <StartServiceButton v-else>
+            <Button
+              type="button"
+              class="w-full opacity-50"
+            >
+              {{ t('service.disconnected') }}
+            </Button>
+          </StartServiceButton>
           <div
             v-if="errorMessage"
             id="error-message"

frontend/src/components/StartServiceButton.vue

@@ -44,14 +44,16 @@ watch(() => serviceStore.serverConnected, (connected) => {
 <template>
   <AlertDialog v-model:open="showStartServiceDialog">
     <AlertDialogTrigger as-child>
-      <Button
-        size="sm"
-        variant="link"
-        class="inline underline px-0 opacity-80 hover:opacity-100 h-6"
-        :class="props.class"
-      >
-        {{ t('service.tryStart') }}
-      </Button>
+      <slot>
+        <Button
+          size="sm"
+          variant="link"
+          class="inline underline px-0 opacity-80 hover:opacity-100 h-6"
+          :class="props.class"
+        >
+          {{ t('service.tryStart') }}
+        </Button>
+      </slot>
     </AlertDialogTrigger>
     <AlertDialogContent>
       <AlertDialogHeader>

frontend/src/locales/en-US.json

@@ -440,7 +440,8 @@
     "passwordMismatch": "Passwords do not match",
     "operationFailed": "Operation failed",
     "networkError": "Network connection failed",
-    "unknownError": "Unknown error"
+    "unknownError": "Unknown error",
+    "startService": "Start Service"
   },
   "stores": {
     "app": {

frontend/src/locales/zh-CN.json

@@ -440,7 +440,8 @@
     "passwordMismatch": "两次输入的密码不一致",
     "operationFailed": "操作失败",
     "networkError": "网络连接失败",
-    "unknownError": "未知错误"
+    "unknownError": "未知错误",
+    "startService": "启动服务"
   },
   "stores": {
     "app": {