feat: allow running elk with a single server (#1606)

components/user/UserSignIn.vue

@@ -1,66 +1,21 @@
 <script setup lang="ts">
 import Fuse from 'fuse.js'
-import { $fetch } from 'ofetch'
 
-const input = $ref<HTMLInputElement>()
-let server = $ref<string>('')
-let busy = $ref<boolean>(false)
-let error = $ref<boolean>(false)
-let displayError = $ref<boolean>(false)
+const input = ref<HTMLInputElement | undefined>()
 let knownServers = $ref<string[]>([])
 let autocompleteIndex = $ref(0)
 let autocompleteShow = $ref(false)
 
-const users = useUsers()
-const userSettings = useUserSettings()
-
-async function oauth() {
-  if (busy)
-    return
-
-  busy = true
-  error = false
-  displayError = false
-
-  await nextTick()
-
-  if (server)
-    server = server.split('/')[0]
-
-  try {
-    const url = await (globalThis.$fetch as any)(`/api/${server || publicServer.value}/login`, {
-      method: 'POST',
-      body: {
-        force_login: users.value.some(u => u.server === server),
-        origin: location.origin,
-        lang: userSettings.value.language,
-      },
-    })
-    location.href = url
-  }
-  catch (err) {
-    console.error(err)
-
-    displayError = true
-    error = true
-    await nextTick()
-    input?.focus()
-    await nextTick()
-    setTimeout(() => {
-      busy = false
-      error = false
-    }, 512)
-  }
-}
+const { busy, error, displayError, server, oauth } = useSignIn(input)
 
 let fuse = $shallowRef(new Fuse([] as string[]))
 
 const filteredServers = $computed(() => {
-  if (!server)
+  if (!server.value)
     return []
 
-  const results = fuse.search(server, { limit: 6 }).map(result => result.item)
-  if (results[0] === server)
+  const results = fuse.search(server.value, { limit: 6 }).map(result => result.item)
+  if (results[0] === server.value)
     return []
 
   return results
@@ -78,12 +33,12 @@ function isValidUrl(str: string) {
 }
 
 async function handleInput() {
-  const input = server.trim()
+  const input = server.value.trim()
   if (input.startsWith('https://'))
-    server = input.replace('https://', '')
+    server.value = input.replace('https://', '')
 
   if (input.length)
-    displayError = false
+    displayError.value = false
 
   if (
     isValidUrl(`https://${input}`)
@@ -110,7 +65,7 @@ function move(delta: number) {
 
 function onEnter(e: KeyboardEvent) {
   if (autocompleteShow === true && filteredServers[autocompleteIndex]) {
-    server = filteredServers[autocompleteIndex]
+    server.value = filteredServers[autocompleteIndex]
     e.preventDefault()
     autocompleteShow = false
   }
@@ -124,16 +79,16 @@ function escapeAutocomplete(evt: KeyboardEvent) {
 }
 
 function select(index: number) {
-  server = filteredServers[index]
+  server.value = filteredServers[index]
 }
 
 onMounted(async () => {
-  input?.focus()
+  input?.value?.focus()
   knownServers = await (globalThis.$fetch as any)('/api/list-servers')
   fuse = new Fuse(knownServers, { shouldSort: true })
 })
 
-onClickOutside($$(input), () => {
+onClickOutside(input, () => {
   autocompleteShow = false
 })
 </script>

components/user/UserSignInEntry.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+const { busy, oauth, singleInstanceServer } = useSignIn()
+</script>
+
 <template>
   <div p8 lg:flex="~ col gap2" hidden>
     <p v-if="isHydrated" text-sm>
@@ -8,7 +12,19 @@
     <p text-sm text-secondary>
       {{ $t('user.sign_in_desc') }}
     </p>
-    <button btn-solid rounded-3 text-center mt-2 select-none @click="openSigninDialog()">
+    <button
+      v-if="singleInstanceServer"
+      flex="~ row" gap-x-2 items-center justify-center btn-solid text-center rounded-3
+      :disabled="busy"
+      @click="oauth()"
+    >
+      <span v-if="busy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
+        <span block i-ri:loader-2-fill aria-hidden="true" />
+      </span>
+      <span v-else aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
+      {{ $t('action.sign_in') }}
+    </button>
+    <button v-else btn-solid rounded-3 text-center mt-2 select-none @click="openSigninDialog()">
       {{ $t('action.sign_in') }}
     </button>
   </div>

components/user/UserSwitcher.vue

@@ -6,6 +6,7 @@ const emit = defineEmits<{
 }>()
 
 const all = useUsers()
+const { busy, singleInstanceServer, oauth } = useSignIn()
 
 const sorted = computed(() => {
   return [
@@ -21,6 +22,12 @@ const clickUser = (user: UserLogin) => {
   else
     switchUser(user)
 }
+const processSignIn = () => {
+  if (singleInstanceServer)
+    oauth()
+  else
+    openSigninDialog()
+}
 </script>
 
 <template>
@@ -43,7 +50,7 @@ const clickUser = (user: UserLogin) => {
         :text="$t('user.add_existing')"
         icon="i-ri:user-add-line"
         w-full
-        @click="openSigninDialog"
+        @click="processSignIn"
       />
       <CommonDropdownItem
         is="button"