oauth/resources/js/pages/Login.vue

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '../stores/auth';

const auth = useAuthStore();
const route = useRoute();
const router = useRouter();
const { t } = useI18n();

const form = reactive({ email: '', password: '' });
const errors = ref<Record<string, string[]>>({});
const loading = ref(false);

async function submit(): Promise<void> {
    loading.value = true;
    errors.value = {};

    try {
        const intended = await auth.login(form);

        if (intended) {
            window.location.href = intended;
            return;
        }

        router.push((route.query.redirect as string) || { name: 'dashboard' });
    } catch (e: any) {
        errors.value = e.response?.data?.errors ?? { email: [t('login.invalidCredentials')] };
    } finally {
        loading.value = false;
    }
}
</script>

<template>
    <div class="auth-page">
        <div class="auth-page__glow"></div>

        <div class="auth-card">
            <span class="auth-card__logo">O2</span>
            <h1 class="auth-card__title">{{ t('login.title') }}</h1>
            <p class="auth-card__subtitle">{{ t('login.subtitle') }}</p>

            <form class="auth-card__form" @submit.prevent="submit">
                <div class="field">
                    <label class="field__label">{{ t('login.email') }}</label>
                    <input v-model="form.email" type="email" required class="field__input" />
                    <p v-if="errors.email" class="field__error">{{ errors.email[0] }}</p>
                </div>

                <div class="field">
                    <label class="field__label">{{ t('login.password') }}</label>
                    <input v-model="form.password" type="password" required class="field__input" />
                </div>

                <button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
                    {{ loading ? t('login.submitting') : t('login.submit') }}
                </button>
            </form>

            <p class="auth-card__footer">
                {{ t('login.noAccount') }}
                <router-link to="/register" class="link">{{ t('login.signUp') }}</router-link>
            </p>
        </div>
    </div>
</template>