enigFM/frontend/src/views/LoginView.vue

<template>
  <div class="auth-page">
    <v-card class="auth-card" elevation="8">
      <div class="auth-header">
        <v-avatar size="64" color="primary" class="mb-4">
          <v-icon size="40">mdi-music-circle</v-icon>
        </v-avatar>
        <h2 class="auth-title">Добро пожаловать</h2>
        <p class="auth-subtitle">Войдите в свой аккаунт EnigFM</p>
      </div>

      <v-card-text class="pt-8">
        <v-form @submit.prevent="handleLogin">
          <v-text-field
            v-model="username"
            label="Имя пользователя"
            prepend-inner-icon="mdi-account"
            variant="outlined"
            required
            :disabled="loading"
            autofocus
            class="mb-2"
          />

          <v-text-field
            v-model="password"
            label="Пароль"
            prepend-inner-icon="mdi-lock"
            type="password"
            variant="outlined"
            required
            :disabled="loading"
            class="mb-2"
          />

          <v-alert
            v-if="error"
            type="error"
            variant="tonal"
            class="mb-4"
            closable
            @click:close="error = ''"
          >
            {{ error }}
          </v-alert>

          <v-btn
            type="submit"
            color="primary"
            size="large"
            block
            :loading="loading"
            class="mb-4"
          >
            Войти
          </v-btn>
        </v-form>

        <v-divider class="my-6" />

        <div class="text-center">
          <span class="text-medium-emphasis">Нет аккаунта?</span>
          <v-btn
            to="/register"
            variant="text"
            color="primary"
            class="ml-2"
          >
            Зарегистрироваться
          </v-btn>
        </div>
      </v-card-text>
    </v-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const username = ref('')
const password = ref('')
const error = ref('')
const loading = ref(false)

async function handleLogin() {
  error.value = ''
  loading.value = true

  try {
    await authStore.login(username.value, password.value)
    router.push('/')
  } catch (e) {
    error.value = e.response?.data?.detail || 'Ошибка входа'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 450px;
  background: rgba(21, 25, 50, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.auth-header {
  text-align: center;
  padding: 40px 40px 0;
}

.auth-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.auth-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
}
</style>