ai-teacher/frontend/src/views/LoginView.vue

<template>
  <div class="login-wrapper">
    <div class="login-card card">
      <div class="login-header">
        <span class="login-icon">🧠</span>
        <h1 class="login-title">AI Teacher</h1>
        <p class="login-subtitle">Neurosurgeon Learning Platform</p>
      </div>

      <form class="login-form" @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="username">Username</label>
          <input
            id="username"
            v-model="username"
            type="text"
            autocomplete="username"
            required
            :disabled="loading"
          />
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input
            id="password"
            v-model="password"
            type="password"
            autocomplete="current-password"
            required
            :disabled="loading"
          />
        </div>

        <div v-if="errorMessage" class="login-error">
          {{ errorMessage }}
        </div>

        <button type="submit" class="btn btn-primary login-btn" :disabled="loading || !username || !password">
          <span v-if="loading" class="spinner"></span>
          <span v-else>Sign in</span>
        </button>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'
import { api } from '@/services/api'

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

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

async function handleSubmit() {
  errorMessage.value = ''
  loading.value = true

  authStore.setCredentials(username.value, password.value)

  try {
    await api.get('/auth/check')
    router.push('/')
  } catch {
    authStore.clearCredentials()
    errorMessage.value = 'Invalid username or password.'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f0f4f8;
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 2rem;
}

.login-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.login-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

.login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a365d;
  margin-bottom: 0.25rem;
}

.login-subtitle {
  font-size: 0.85rem;
  color: #718096;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5568;
}

.form-group input {
  padding: 0.6rem 0.75rem;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}

.form-group input:focus {
  border-color: #3182ce;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.form-group input:disabled {
  background: #f7fafc;
  color: #a0aec0;
}

.login-error {
  padding: 0.6rem 0.75rem;
  background: #fed7d7;
  color: #c53030;
  border: 1px solid #fc8181;
  border-radius: 6px;
  font-size: 0.875rem;
}

.login-btn {
  width: 100%;
  justify-content: center;
  padding: 0.7rem;
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

@media (max-width: 768px) {
  .login-wrapper {
    align-items: flex-start;
    padding-top: 2rem;
    min-height: unset;
  }

  .login-card {
    max-width: 100%;
  }
}
</style>