bilhej/frontend/src/pages/ResetPasswordPage.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter, RouterLink } from 'vue-router'
import { resetPassword } from '@/api/auth'
import { ApiError } from '@/api/client'

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

const password = ref('')
const confirmPassword = ref('')
const submitting = ref(false)
const errorMessage = ref('')
const successMessage = ref('')
const token = ref('')

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

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

const isValid = computed(
  () =>
    token.value.length > 0 &&
    passwordError.value === '' &&
    confirmPasswordError.value === '' &&
    password.value.length > 0 &&
    confirmPassword.value.length > 0,
)

onMounted(() => {
  const value = route.query.token
  token.value = typeof value === 'string' ? value : ''
  if (!token.value) {
    errorMessage.value = 'Återställningslänken saknar en giltig kod.'
  }
})

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

  submitting.value = true
  errorMessage.value = ''

  try {
    const response = await resetPassword(token.value, password.value)
    successMessage.value = response.message
    setTimeout(() => router.push('/logga-in'), 2000)
  } catch (err) {
    if (err instanceof ApiError) {
      errorMessage.value = err.message
    } else {
      errorMessage.value = 'Något gick fel. Försök begära en ny länk.'
    }
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <div class="page">
    <div class="page__card">
      <h1 class="page__title">Nytt lösenord</h1>
      <p class="page__subtitle">Välj ett nytt lösenord för ditt konto.</p>

      <form
        v-if="!successMessage && token"
        class="page__form"
        @submit.prevent="handleSubmit"
      >
        <div class="field">
          <label for="password" class="field__label">Nytt lösenord</label>
          <input
            id="password"
            v-model="password"
            type="password"
            name="password"
            autocomplete="new-password"
            class="field__input"
            placeholder="Minst 8 tecken"
          />
          <p v-if="passwordError" class="field__hint field__hint--error">
            {{ passwordError }}
          </p>
        </div>

        <div class="field">
          <label for="confirmPassword" class="field__label"
            >Bekräfta lösenord</label
          >
          <input
            id="confirmPassword"
            v-model="confirmPassword"
            type="password"
            name="confirmPassword"
            autocomplete="new-password"
            class="field__input"
            placeholder="Upprepa lösenordet"
          />
          <p v-if="confirmPasswordError" class="field__hint field__hint--error">
            {{ confirmPasswordError }}
          </p>
        </div>

        <div v-if="errorMessage" class="message message--error">
          {{ errorMessage }}
          <p class="page__footer-link">
            <RouterLink to="/glomt-losenord">Begär ny länk</RouterLink>
          </p>
        </div>

        <button
          type="submit"
          class="btn btn--primary btn--lg page__submit"
          :disabled="!isValid || submitting"
        >
          {{ submitting ? 'Sparar...' : 'Spara nytt lösenord' }}
        </button>
      </form>

      <div v-else-if="successMessage" class="message message--success">
        {{ successMessage }}
      </div>

      <div v-else-if="errorMessage" class="message message--error">
        {{ errorMessage }}
        <p class="page__footer-link">
          <RouterLink to="/glomt-losenord">Begär ny länk</RouterLink>
        </p>
      </div>

      <p v-if="!successMessage" class="page__footer-link">
        <RouterLink to="/logga-in">Tillbaka till inloggning</RouterLink>
      </p>
    </div>
  </div>
</template>

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

.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;
}

.page__submit {
  width: 100%;
}
</style>