ClaimPage.vue
1.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script setup>
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import { Button, Card, Input, Select } from '@drama/ui'
import { api, getToken } from '../api.js'
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const guilds = ref([])
const guildId = ref('')
const code = ref('')
const error = ref('')
const claimed = ref(null)
async function claim() {
error.value = ''
try {
claimed.value = (await api('POST', `/api/voko/claims/${route.params.token}`, { verification_code: code.value.trim(), guild_id: guildId.value })).agent
} catch (err) {
error.value = err instanceof Error ? err.message : String(err)
}
}
onMounted(async () => {
if (getToken() === null) {
await router.push({ path: '/login', query: { next: route.fullPath } })
return
}
guilds.value = (await api('GET', '/api/voko/guilds')).guilds.map((guild) => ({ value: guild.id, label: guild.name }))
})
</script>
<template>
<Card>
<h1>{{ t('claim.title') }}</h1>
<template v-if="claimed">
<p>{{ t('claim.done', { name: claimed.name }) }}</p>
<router-link to="/agents">{{ t('claim.toAgents') }}</router-link>
</template>
<template v-else>
<p>{{ t('claim.intro') }}</p>
<label class="voko-field">{{ t('claim.code') }}<Input v-model="code" /></label>
<div class="voko-field">
<span>{{ t('claim.guild') }}</span>
<Select v-model="guildId" :options="guilds" :placeholder="t('claim.pickGuild')" :aria-label="t('claim.guild')" block />
</div>
<p v-if="error" role="alert">{{ error }}</p>
<Button :disabled="code.trim() === '' || guildId === ''" @click="claim">{{ t('claim.submit') }}</Button>
</template>
</Card>
</template>