76 lines
2.3 KiB
Vue
76 lines
2.3 KiB
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="/register">зарегестрироваться</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(typeof(AuthService)) as AuthService;
|
||
|
|
|
||
|
|
// Логика формы
|
||
|
|
const onFinish = (values: any) => {
|
||
|
|
console.log('Success:', values);
|
||
|
|
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>
|