mirror of
https://github.com/elk-zone/elk
synced 2024-11-27 14:28:10 +09:00
feat: enhance login and error handling (#423)
This commit is contained in:
parent
1f5b0cf5ef
commit
110e7ae61f
@ -3,16 +3,45 @@ import { DEFAULT_SERVER } from '~/constants'
|
|||||||
|
|
||||||
const input = $ref<HTMLInputElement>()
|
const input = $ref<HTMLInputElement>()
|
||||||
let server = $ref<string>('')
|
let server = $ref<string>('')
|
||||||
|
let busy = $ref<boolean>(false)
|
||||||
|
let error = $ref<boolean>(false)
|
||||||
|
let displayError = $ref<boolean>(false)
|
||||||
|
|
||||||
async function oauth() {
|
async function oauth() {
|
||||||
|
if (busy)
|
||||||
|
return
|
||||||
|
|
||||||
|
busy = true
|
||||||
|
error = false
|
||||||
|
displayError = false
|
||||||
|
|
||||||
|
await nextTick()
|
||||||
|
|
||||||
if (server)
|
if (server)
|
||||||
server = server.split('/')[0]
|
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() {
|
async function handleInput() {
|
||||||
if (server.startsWith('https://'))
|
if (server.startsWith('https://'))
|
||||||
server = server.replace('https://', '')
|
server = server.replace('https://', '')
|
||||||
|
|
||||||
|
if (server?.length)
|
||||||
|
displayError = false
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -28,10 +57,31 @@ onMounted(() => {
|
|||||||
{{ $t('action.sign_in') }}
|
{{ $t('action.sign_in') }}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
<div text-secondary text-sm flex>
|
<div text-secondary text-sm flex>
|
||||||
<div i-ri:lightbulb-line mr-1 />
|
<div i-ri:lightbulb-line mr-1 />
|
||||||
@ -41,7 +91,8 @@ onMounted(() => {
|
|||||||
</i18n-t>
|
</i18n-t>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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') }}
|
{{ $t('action.sign_in') }}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
@ -74,6 +74,7 @@
|
|||||||
"error": {
|
"error": {
|
||||||
"account_not_found": "Account {0} not found",
|
"account_not_found": "Account {0} not found",
|
||||||
"explore-list-empty": "Nothing is trending right now. Check back later!",
|
"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"
|
"status_not_found": "Status not found"
|
||||||
},
|
},
|
||||||
"feature_flag": {
|
"feature_flag": {
|
||||||
|
@ -72,6 +72,8 @@
|
|||||||
},
|
},
|
||||||
"error": {
|
"error": {
|
||||||
"account_not_found": "No se encontró la cuenta {0}",
|
"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"
|
"status_not_found": "Estado no encontrado"
|
||||||
},
|
},
|
||||||
"feature_flag": {
|
"feature_flag": {
|
||||||
|
@ -18,7 +18,6 @@ export default defineEventHandler(async (event) => {
|
|||||||
redirect_uri: getRedirectURI(server),
|
redirect_uri: getRedirectURI(server),
|
||||||
response_type: 'code',
|
response_type: 'code',
|
||||||
})
|
})
|
||||||
const url = `https://${server}/oauth/authorize?${query}`
|
|
||||||
|
|
||||||
await sendRedirect(event, url, 302)
|
return `https://${server}/oauth/authorize?${query}`
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user