feat: enhance login and error handling (#423)

This commit is contained in:
Joaquín Sánchez 2022-12-14 00:12:16 +01:00 committed by GitHub
parent 1f5b0cf5ef
commit 110e7ae61f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 8 deletions

View file

@ -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 flex bg-gray:10 px4 py2 mxa rounded border="~ base" items-center font-mono focus:outline-none focus:ring="2 primary inset">
<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>
{{ $t('user.server_address_label') }}
</div>
<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>

View file

@ -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": {

View file

@ -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": {

View file

@ -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}`
})