54 lines
1.7 KiB
Vue
54 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
const { $api } = useNuxtApp();
|
|
const session = useSessionStore();
|
|
const { t: translate } = useI18n();
|
|
const email = ref("");
|
|
const password = ref("");
|
|
const error = ref("");
|
|
const busy = ref(false);
|
|
|
|
async function submit(): Promise<void> {
|
|
error.value = "";
|
|
busy.value = true;
|
|
try {
|
|
const auth = await $api.login(email.value.trim(), password.value);
|
|
if (auth.user.role !== "shop_owner" && auth.user.role !== "shop_staff") {
|
|
error.value = translate("auth.shopRoleError");
|
|
return;
|
|
}
|
|
session.setAuth(auth);
|
|
await navigateTo("/");
|
|
} catch (err: unknown) {
|
|
error.value = err instanceof Error ? err.message : translate("common.error");
|
|
} finally {
|
|
busy.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main class="bg-bg text-text grid min-h-screen place-items-center px-4 font-sans">
|
|
<VCard class="w-full max-w-[420px]">
|
|
<form @submit.prevent="submit">
|
|
<h1 class="text-text mb-5 text-xl font-bold">{{ $t("auth.welcome") }}</h1>
|
|
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
|
<VField :label="$t('common.email')">
|
|
<VInput id="email" v-model="email" type="email" autocomplete="username" required />
|
|
</VField>
|
|
<VField :label="$t('common.password')">
|
|
<VInput
|
|
id="password"
|
|
v-model="password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
required
|
|
/>
|
|
</VField>
|
|
<VBtn variant="primary" type="submit" :disabled="busy">
|
|
{{ busy ? $t("common.loading") : $t("common.login") }}
|
|
</VBtn>
|
|
</form>
|
|
</VCard>
|
|
</main>
|
|
</template>
|