bilhej/frontend/src/pages/RegisterPage.vue

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

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

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

const emailError = computed(() => {
  if (!touched.value || email.value.length === 0) return ''
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)
    ? ''
    : 'Ange en giltig e-postadress'
})

const passwordError = computed(() => {
  if (!touched.value || password.value.length === 0) return ''
  return password.value.length >= 8
    ? ''
    : 'Lösenordet måste vara minst 8 tecken'
})

const confirmPasswordError = computed(() => {
  if (!touched.value || confirmPassword.value.length === 0) return ''
  return confirmPassword.value === password.value
    ? ''
    : 'Lösenorden matchar inte'
})

const isValid = computed(() => {
  return (
    emailError.value === '' &&
    passwordError.value === '' &&
    confirmPasswordError.value === '' &&
    email.value.length > 0 &&
    password.value.length > 0 &&
    confirmPassword.value.length > 0
  )
})

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

  submitting.value = true
  errorMessage.value = ''

  try {
    await authStore.registerUser(email.value, password.value)
    await router.push('/')
  } catch (err) {
    if (err instanceof ApiError) {
      errorMessage.value = err.message
    } else {
      errorMessage.value = 'Något gick fel. Försök igen.'
    }
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <div class="register">
    <h1 class="register__title">Skapa konto</h1>
    <p class="register__subtitle">
      Ange din e-postadress och ett lösenord för att skapa ett konto.
    </p>

    <form class="register__form" @submit.prevent="handleSubmit">
      <div class="register__field">
        <label for="email" class="register__label">E-postadress</label>
        <input
          id="email"
          v-model="email"
          type="email"
          autocomplete="email"
          class="register__input"
          :class="{ 'register__input--error': emailError }"
          placeholder="namn@exempel.se"
          @input="touched = true"
        />
        <p v-if="emailError" class="register__error">{{ emailError }}</p>
      </div>

      <div class="register__field">
        <label for="password" class="register__label">Lösenord</label>
        <input
          id="password"
          v-model="password"
          type="password"
          autocomplete="new-password"
          class="register__input"
          :class="{ 'register__input--error': passwordError }"
          placeholder="Minst 8 tecken"
          @input="touched = true"
        />
        <p v-if="passwordError" class="register__error">{{ passwordError }}</p>
      </div>

      <div class="register__field">
        <label for="confirm-password" class="register__label"
          >Bekräfta lösenord</label
        >
        <input
          id="confirm-password"
          v-model="confirmPassword"
          type="password"
          autocomplete="new-password"
          class="register__input"
          :class="{ 'register__input--error': confirmPasswordError }"
          placeholder="Upprepa lösenord"
          @input="touched = true"
        />
        <p v-if="confirmPasswordError" class="register__error">
          {{ confirmPasswordError }}
        </p>
      </div>

      <p v-if="errorMessage" class="register__api-error">{{ errorMessage }}</p>

      <button
        type="submit"
        class="register__submit"
        :disabled="!isValid || submitting"
      >
        {{ submitting ? 'Skapar konto...' : 'Skapa konto' }}
      </button>
    </form>

    <p class="register__login-link">
      Har du redan ett konto?
      <RouterLink to="/logga-in">Logga in</RouterLink>
    </p>
  </div>
</template>

<style scoped>
.register {
  max-width: 28rem;
  margin: 3rem auto 0;
  padding: 0 1rem;
}

.register__title {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  color: #1a202c;
}

.register__subtitle {
  margin: 0 0 1.5rem 0;
  color: #718096;
  font-size: 0.875rem;
}

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

.register__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.register__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4a5568;
}

.register__input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid #cbd5e0;
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.register__input:focus {
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25);
}

.register__input--error {
  border-color: #e53e3e;
}

.register__input--error:focus {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.25);
}

.register__error {
  margin: 0;
  font-size: 0.8125rem;
  color: #e53e3e;
}

.register__api-error {
  margin: 0;
  padding: 0.75rem 1rem;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 0.5rem;
  color: #c53030;
  font-size: 0.875rem;
}

.register__submit {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: #38a169;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.register__submit:hover:not(:disabled) {
  background: #2f855a;
}

.register__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.register__login-link {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: #718096;
}

.register__login-link a {
  color: #4299e1;
  text-decoration: none;
}

.register__login-link a:hover {
  text-decoration: underline;
}
</style>