mirror of
https://github.com/koel/koel
synced 2024-12-24 11:33:05 +00:00
92 lines
2.7 KiB
Vue
92 lines
2.7 KiB
Vue
<template>
|
|
<div class="flex items-center justify-center h-screen flex-col">
|
|
<form
|
|
v-if="userProspect"
|
|
autocomplete="off"
|
|
class="w-full sm:w-[320px] p-7 sm:bg-white/10 rounded-lg flex flex-col space-y-5"
|
|
@submit.prevent="submit"
|
|
>
|
|
<header class="mb-4">
|
|
Welcome to Koel! To accept the invitation, fill in the form below and click that button.
|
|
</header>
|
|
|
|
<FormRow>
|
|
<template #label>Your email</template>
|
|
<TextInput v-model="userProspect.email" disabled />
|
|
</FormRow>
|
|
|
|
<FormRow>
|
|
<template #label>Your name</template>
|
|
<TextInput
|
|
v-model="name"
|
|
v-koel-focus
|
|
data-testid="name"
|
|
placeholder="Erm… Bruce Dickinson?"
|
|
required
|
|
/>
|
|
</FormRow>
|
|
|
|
<FormRow>
|
|
<template #label>Password</template>
|
|
<PasswordField v-model="password" data-testid="password" required />
|
|
<template #help>Min. 10 characters. Should be a mix of characters, numbers, and symbols.</template>
|
|
</FormRow>
|
|
|
|
<FormRow>
|
|
<Btn :disabled="loading" data-testid="submit" type="submit">Accept & Log In</Btn>
|
|
</FormRow>
|
|
</form>
|
|
|
|
<p v-if="!validToken">Invalid or expired invite.</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { invitationService } from '@/services'
|
|
import { useDialogBox, useRouter } from '@/composables'
|
|
import { parseValidationError } from '@/utils'
|
|
|
|
import Btn from '@/components/ui/form/Btn.vue'
|
|
import PasswordField from '@/components/ui/form/PasswordField.vue'
|
|
import TextInput from '@/components/ui/form/TextInput.vue'
|
|
import FormRow from '@/components/ui/form/FormRow.vue'
|
|
|
|
const { showErrorDialog } = useDialogBox()
|
|
const { getRouteParam } = useRouter()
|
|
|
|
const name = ref('')
|
|
const password = ref('')
|
|
const userProspect = ref<User>()
|
|
const validToken = ref(true)
|
|
const loading = ref(false)
|
|
|
|
const token = String(getRouteParam('token')!)
|
|
|
|
const submit = async () => {
|
|
try {
|
|
loading.value = true
|
|
await invitationService.accept(token, name.value, password.value)
|
|
window.location.href = '/'
|
|
} catch (err: any) {
|
|
const msg = err.response.status === 422 ? parseValidationError(err.response.data)[0] : 'Unknown error.'
|
|
showErrorDialog(msg, 'Error')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
userProspect.value = await invitationService.getUserProspect(token)
|
|
} catch (err: any) {
|
|
if (err.response?.status === 404) {
|
|
validToken.value = false
|
|
return
|
|
}
|
|
|
|
const msg = err.response?.status === 422 ? parseValidationError(err.response?.data)[0] : 'Unknown error.'
|
|
showErrorDialog(msg, 'Error')
|
|
}
|
|
})
|
|
</script>
|