feat: enhance login and error handling (#423)

components/user/UserSignIn.vue

@@ -3,16 +3,45 @@ import { DEFAULT_SERVER } from '~/constants'
 
 const input = $ref<HTMLInputElement>()
 let server = $ref<string>('')
+let busy = $ref<boolean>(false)
+let error = $ref<boolean>(false)
+let displayError = $ref<boolean>(false)
 
 async function oauth() {
+  if (busy)
+    return
+
+  busy = true
+  error = false
+  displayError = false
+
+  await nextTick()
+
   if (server)
     server = server.split('/')[0]
-  location.href = `/api/${server || DEFAULT_SERVER}/login`
+
+  try {
+    location.href = await $fetch<string>(`/api/${server || DEFAULT_SERVER}/login`)
+  }
+  catch {
+    displayError = true
+    error = true
+    await nextTick()
+    input?.focus()
+    await nextTick()
+    setTimeout(() => {
+      busy = false
+      error = false
+    }, 512)
+  }
 }
 
 async function handleInput() {
   if (server.startsWith('https://'))
     server = server.replace('https://', '')
+
+  if (server?.length)
+    displayError = false
 }
 
 onMounted(() => {
@@ -28,10 +57,31 @@ onMounted(() => {
         {{ $t('action.sign_in') }}
       </div>
     </div>
-    <div>{{ $t('user.server_address_label') }}</div>
+    <div>
-    <div flex bg-gray:10 px4 py2 mxa rounded border="~ base" items-center font-mono focus:outline-none focus:ring="2 primary inset">
+      {{ $t('user.server_address_label') }}
-      <span text-secondary-light mr1>https://</span>
+    </div>
-      <input ref="input" v-model="server" outline-none bg-transparent w-full max-w-50 @input="handleInput">
+    <div :class="error ? 'animate animate-shake-x animate-delay-100' : null">
+      <div
+        flex bg-gray:10 px4 py2 mxa rounded
+        border="~ base" items-center font-mono
+        focus:outline-none focus:ring="2 primary inset"
+        :class="displayError ? 'border-red-600 dark:border-red-400' : null"
+      >
+        <span text-secondary-light mr1>https://</span>
+        <input
+          ref="input"
+          v-model="server"
+          outline-none bg-transparent w-full max-w-50
+          @input="handleInput"
+        >
+      </div>
+      <div min-h-4>
+        <Transition css enter-active-class="animate animate-fade-in">
+          <p v-if="displayError" role="alert" p-0 m-0 text-xs text-red-600 dark:text-red-400>
+            {{ $t('error.sign_in_error') }}
+          </p>
+        </Transition>
+      </div>
     </div>
     <div text-secondary text-sm flex>
       <div i-ri:lightbulb-line mr-1 />
@@ -41,7 +91,8 @@ onMounted(() => {
         </i18n-t>
       </span>
     </div>
-    <button btn-solid mt2 :disabled="!server">
+    <button flex="~ row" gap-x-2 items-center btn-solid mt2 :disabled="!server || busy">
+      <span aria-hidden="true" inline-block :class="busy ? 'i-ri:loader-2-fill animate animate-spin' : 'i-ri:login-circle-line'" />
       {{ $t('action.sign_in') }}
     </button>
   </form>

locales/en-US.json

@@ -74,6 +74,7 @@
   "error": {
     "account_not_found": "Account {0} not found",
     "explore-list-empty": "Nothing is trending right now. Check back later!",
+    "sign_in_error": "Cannot connect to the server.",
     "status_not_found": "Status not found"
   },
   "feature_flag": {

locales/es-ES.json

@@ -72,6 +72,8 @@
   },
   "error": {
     "account_not_found": "No se encontró la cuenta {0}",
+    "explore-list-empty": "Nada es tendencia en este momento. ¡Vuelva más tarde!",
+    "sign_in_error": "No se ha podido conectar con el servidor.",
     "status_not_found": "Estado no encontrado"
   },
   "feature_flag": {

server/api/[server]/login.ts

@@ -18,7 +18,6 @@ export default defineEventHandler(async (event) => {
     redirect_uri: getRedirectURI(server),
     response_type: 'code',
   })
-  const url = `https://${server}/oauth/authorize?${query}`
 
-  await sendRedirect(event, url, 302)
+  return `https://${server}/oauth/authorize?${query}`
 })