Capital/components/auth/Authenticate.vue

70 lines
1.8 KiB
Vue
Raw Permalink Normal View History

<template>
<div class="flex items-center">
<v-form class="flex-grow-1" @submit.prevent="submit">
<v-text-field
:label="t('username')"
variant="solo"
density="comfortable"
class="mb-3"
:hide-details="true"
:disabled="props.loading"
v-model="probe"
/>
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
{{ t("errorOccurred", [error]) }}
</v-alert>
</v-expand-transition>
<div class="flex justify-between">
<v-btn type="button" variant="plain" color="grey-darken-3" to="/auth/sign-up">{{ t("userMenuSignUp") }}</v-btn>
<v-btn
type="submit"
variant="text"
color="primary"
class="justify-self-end"
append-icon="mdi-arrow-right"
:disabled="props.loading"
>
{{ t("next") }}
</v-btn>
</div>
</v-form>
</div>
</template>
<script setup lang="ts">
const { t } = useI18n()
const config = useRuntimeConfig()
const probe = ref("")
const error = ref<string | null>(null)
const props = defineProps<{ loading?: boolean }>()
const emits = defineEmits(["swap", "update:loading", "update:ticket"])
async function submit() {
if (!probe.value) return
emits("update:loading", true)
const res = await fetch(`${config.public.solarNetworkApi}/cgi/id/auth`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username: probe.value }),
})
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
emits("update:ticket", data["ticket"])
if (data.is_finished) emits("swap", "completed")
else emits("swap", "mfa")
error.value = null
}
emits("update:loading", false)
}
</script>