86 lines
1.3 KiB
Vue
86 lines
1.3 KiB
Vue
<script setup>
|
|
import { inject, ref } from 'vue';
|
|
|
|
import Ellipsis from '#/components/loading/ellipsis.vue';
|
|
|
|
import { post } from '#/src/api.js';
|
|
|
|
const { urlParsed } = inject('pageContext');
|
|
const { userId, token } = urlParsed.search;
|
|
|
|
const errorMsg = ref(null);
|
|
const submitting = ref(false);
|
|
const success = ref(false);
|
|
|
|
async function verify() {
|
|
errorMsg.value = null;
|
|
submitting.value = true;
|
|
|
|
try {
|
|
await post('/emails/verify', {
|
|
userId,
|
|
token,
|
|
}, {
|
|
appendErrorMessage: true,
|
|
});
|
|
|
|
success.value = true;
|
|
}
|
|
catch (error) {
|
|
errorMsg.value = error.message;
|
|
}
|
|
finally {
|
|
submitting.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="content">
|
|
<Ellipsis v-if="submitting" />
|
|
|
|
<strong
|
|
v-else-if="errorMsg"
|
|
class="feedback error"
|
|
>{{ errorMsg }}</strong>
|
|
|
|
<strong
|
|
v-else-if="success"
|
|
class="feedback success"
|
|
>Verification successful</strong>
|
|
|
|
<button
|
|
v-else
|
|
class="button button-primary"
|
|
@click="verify"
|
|
>Click here to verify your e-mail address</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.button {
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.feedback {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.error {
|
|
color: var(--error);
|
|
}
|
|
|
|
.success {
|
|
color: var(--success);
|
|
}
|
|
</style>
|