bilhej/frontend/src/pages/LoginPage.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute, RouterLink } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'

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

const email = ref('')
const password = ref('')
const submitting = ref(false)
const errorMessage = ref('')

const isValid = computed(
  () => email.value.length > 0 && password.value.length > 0,
)

async function handleSubmit() {
  if (!isValid.value || submitting.value) return

  submitting.value = true
  errorMessage.value = ''

  try {
    await authStore.loginUser(email.value, password.value)
    const redirect = route.query.redirect as string | undefined
    await router.push(redirect || '/')
  } catch {
    errorMessage.value = 'Felaktig e-post eller lösenord'
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <div class="page">
    <div class="page__card">
      <h1 class="page__title">Logga in</h1>
      <p class="page__subtitle">
        Ange din e-postadress och ditt lösenord för att logga in.
      </p>

      <form
        class="page__form"
        method="post"
        action="/api/auth/login"
        @submit.prevent="handleSubmit"
      >
        <div class="field">
          <label for="email" class="field__label">E-postadress</label>
          <input
            id="email"
            v-model="email"
            type="email"
            name="email"
            autocomplete="email"
            class="field__input"
            placeholder="namn@exempel.se"
          />
        </div>

        <div class="field">
          <div class="field__label-row">
            <label for="password" class="field__label">Lösenord</label>
            <RouterLink to="/glomt-losenord" class="field__link">
              Glömt lösenord?
            </RouterLink>
          </div>
          <input
            id="password"
            v-model="password"
            type="password"
            name="password"
            autocomplete="current-password"
            class="field__input"
            placeholder="Ditt lösenord"
          />
        </div>

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

        <button
          type="submit"
          class="btn btn--primary btn--lg login__submit"
          :disabled="!isValid || submitting"
        >
          {{ submitting ? 'Loggar in...' : 'Logga in' }}
        </button>
      </form>

      <p class="page__footer-link">
        Har du inget konto?
        <RouterLink to="/registrera">Skapa konto</RouterLink>
      </p>
    </div>
  </div>
</template>

<style scoped>
.page {
  max-width: 28rem;
  margin: clamp(var(--space-xl), 6vw, var(--space-3xl)) auto 0;
  padding: 0 var(--page-gutter);
}

.page__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
}

.page__title {
  margin: 0 0 var(--space-sm) 0;
  font-size: 1.5rem;
  color: var(--color-ink);
}

.page__subtitle {
  margin: 0 0 var(--space-xl) 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.page__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.page__footer-link {
  margin-top: var(--space-lg);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.login__submit {
  width: 100%;
}

.field__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.field__link {
  font-size: 0.8125rem;
  color: var(--color-primary);
  text-decoration: none;
}

.field__link:hover {
  text-decoration: underline;
}
</style>