tp/begushiybashkir/bbvue/src/views/Login.vue

<template>
  <div class="page">
    <h1>🔐 Вход в систему</h1>
    <p>Войдите в свой личный кабинет</p>

    <form @submit.prevent="handleLogin" class="login-form">
      <div class="form-group">
        <input 
          type="email" 
          placeholder="Email" 
          class="form-input"
          v-model="credentials.email"
          required
          :disabled="loading"
        >
      </div>
      <div class="form-group">
        <input 
          type="password" 
          placeholder="Пароль" 
          class="form-input"
          v-model="credentials.password"
          required
          :disabled="loading"
        >
      </div>
      
      <button 
        type="submit" 
        class="btn btn-primary"
        :disabled="loading"
      >
        {{ loading ? 'Вход...' : 'Войти' }}
      </button>

      <div v-if="error" class="error-message">
        {{ error }}
      </div>
    </form>

    <div class="login-links">
      <div class="register-link">
        <p>Нет аккаунта? <router-link to="/register" class="link">Зарегистрируйтесь здесь</router-link></p>
      </div>
      <p><a href="#" class="link">Забыли пароль?</a></p>
    </div>

    <button class="btn btn-secondary" @click="$router.push('/')">← На главную</button>
  </div>
</template>

<script>
import { useAuthStore } from '../stores/auth'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  setup() {
    const authStore = useAuthStore()
    return { authStore }
  },
  data() {
    return {
      credentials: {
        email: '',
        password: ''
      }
    }
  },
  computed: {
    loading() {
      return this.authStore.loading
    },
    error() {
      return this.authStore.error
    }
  },
  methods: {
    async handleLogin() {
      const result = await this.authStore.login(this.credentials)
      
      if (result.success) {
        this.$router.push('/profile')
      }
    }
  }
}
</script>

<style scoped>
.login-form {
  max-width: 300px;
  margin: 2rem auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #e1e5e9;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #2e8b57;
}

.form-input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.btn-primary {
  width: 100%;
  background-color: #2e8b57;
  color: white;
  padding: 12px;
  font-size: 1rem;
  margin-top: 1rem;
}

.btn-primary:hover:not(:disabled) {
  background-color: #26734a;
}

.btn-primary:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.login-links {
  margin-top: 1.5rem;
  text-align: center;
}

.link {
  color: #2e8b57;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.error-message {
  background-color: #fee;
  color: #c33;
  padding: 12px;
  border-radius: 6px;
  margin-top: 1rem;
  border-left: 4px solid #c33;
  text-align: center;
}
</style>