From 560f8804482dfd9cdbfa16475d73cee17155c8ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Tue, 29 Nov 2022 20:04:16 +0800
Subject: [PATCH] feat(ui): auto focus to sign in input

---
 components/user/UserSignIn.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/user/UserSignIn.vue b/components/user/UserSignIn.vue
index ee5cbd94..475ca507 100644
--- a/components/user/UserSignIn.vue
+++ b/components/user/UserSignIn.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { DEFAULT_SERVER } from '~/constants'
 
+const input = $ref<HTMLInputElement>()
 let server = $ref<string>('')
 
 async function oauth() {
@@ -13,6 +14,10 @@ async function handleInput() {
   if (server.startsWith('https://'))
     server = server.replace('https://', '')
 }
+
+onMounted(() => {
+  input?.focus()
+})
 </script>
 
 <template>
@@ -23,7 +28,7 @@ async function handleInput() {
     <div>Mastodon Server Name</div>
     <div flex bg-gray:10 px2 py1 mxa rounded border="~ border" text-xl items-center>
       <span text-secondary-light mr1 text-sm>https://</span>
-      <input v-model="server" :placeholder="DEFAULT_SERVER" outline-none bg-transparent @input="handleInput">
+      <input ref="input" v-model="server" :placeholder="DEFAULT_SERVER" outline-none bg-transparent @input="handleInput">
     </div>
     <button btn-solid mt2>
       {{ $t('action.sign_in') }}