feat(auth): implement login page and state management

src/views/LoginView.vue

@@ -1,3 +1,112 @@
 <template>
-    <h1>Вход</h1>
+    <div class="login-container">
+        <form @submit.prevent="onSubmit" class="login-form">
+            <h1>Вход</h1>
+
+            <div class="form-group">
+                <label for="login">Имя пользователя или Email</label>
+                <input id="login" v-model="login" type="text" required />
+            </div>
+
+            <div class="form-group">
+                <label for="password">Пароль</label>
+                <input id="password" v-model="password" type="password" required />
+            </div>
+
+            <div v-if="authStore.error" class="error-message">
+                {{ authStore.error }}
+            </div>
+
+            <button type="submit" :disabled="authStore.isLoading">
+                {{ authStore.isLoading ? "Вход..." : "Войти" }}
+            </button>
+        </form>
+    </div>
 </template>
+
+<script setup lang="ts">
+import { ref, onUnmounted } from "vue";
+import { useAuthStore } from "@/stores/auth";
+
+const authStore = useAuthStore();
+
+const login = ref("");
+const password = ref("");
+
+const onSubmit = async () => {
+    if (!login.value || !password.value) {
+        return;
+    }
+    await authStore.handleLogin({
+        login: login.value,
+        password: password.value,
+    });
+};
+
+onUnmounted(() => {
+    authStore.error = null;
+});
+</script>
+
+<style scoped>
+/* Стили можно скопировать из RegisterView.vue или вынести в общий файл */
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 50px;
+}
+.login-form {
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+h1 {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+.form-group {
+    margin-bottom: 1rem;
+}
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+.error-message {
+    background-color: #f8d7da;
+    color: #721c24;
+    padding: 0.75rem;
+    border: 1px solid #f5c6cb;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+button {
+    width: 100%;
+    padding: 0.75rem;
+    background-color: #42b983;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+button:hover {
+    background-color: #36a476;
+}
+button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+</style>