domBudg/front/src/components/pages/Login.vue

<template>
    <a-form
        :model="formState"
        name="login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
        <a-form-item
            label="Логин"
            name="name"
            :rules="[{ required: true, message: 'Пожалуйста, введите свой логин' }]"
        >
            <a-input v-model:value="formState.name">
                <template #prefix>
                    <UserOutlined class="site-form-item-icon" />
                </template>
            </a-input>
        </a-form-item>

        <a-form-item
            label="Пароль"
            name="password"
            :rules="[{ required: true, message: 'Пароль тоже нужен!' }]"
        >
            <a-input-password v-model:value="formState.password">
                <template #prefix>
                    <LockOutlined class="site-form-item-icon" />
                </template>
            </a-input-password>
        </a-form-item>
        <a-form-item>
            <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
                Войти
            </a-button>
            Или
            <RouterLink :to="{ name: 'signup' }">создать аккаунт</RouterLink>
        </a-form-item>
    </a-form>
</template>
<script lang="ts" setup>
import { reactive, computed, inject } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { UserLoginDto } from '../../core/api/data-contracts';
import { RouterLink } from 'vue-router';
import { AuthService } from '../../core/services/auth-service';
import router from '../../router';

const formState = reactive<UserLoginDto>({
    name: '',
    password: '',
});
const authService = inject(AuthService.name) as AuthService;
console.log(authService);
// Логика формы
const onFinish = async (values: any) => {
    console.log('Success:', values);
    await authService.login(formState);
    router.push({ name: 'home' });
};
const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
    return !(formState.name && formState.password);
});
</script>
<style scoped>
.login-form {
    max-width: 300px;
}

.login-form-button {
    width: 100%;
}
</style>