decision/frontend/app/pages/login.vue

<script setup lang="ts">
const auth = useAuthStore()
const router = useRouter()

const address = ref('')
const step = ref<'input' | 'challenge' | 'signing' | 'success'>('input')
const errorMessage = ref('')

async function handleLogin() {
  if (!address.value.trim()) {
    errorMessage.value = 'Veuillez entrer votre adresse Duniter'
    return
  }

  errorMessage.value = ''
  step.value = 'challenge'

  try {
    step.value = 'signing'
    await auth.login(address.value.trim())
    step.value = 'success'
    setTimeout(() => {
      router.push('/')
    }, 800)
  } catch (err: any) {
    errorMessage.value = err?.data?.detail || err?.message || 'Erreur lors de la connexion'
    step.value = 'input'
  }
}

const steps = computed(() => [
  { label: 'Adresse', done: step.value !== 'input' },
  { label: 'Challenge', done: step.value === 'signing' || step.value === 'success' },
  { label: 'Signature', done: step.value === 'success' },
  { label: 'OK', done: false },
])

const activeStepIndex = computed(() => {
  switch (step.value) {
    case 'input': return 0
    case 'challenge': return 1
    case 'signing': return 2
    case 'success': return 3
    default: return 0
  }
})

onMounted(() => {
  if (auth.isAuthenticated) {
    router.push('/')
  }
})
</script>

<template>
  <div class="login-page">
    <div class="login-card">
      <!-- Logo -->
      <div class="login-card__header">
        <div class="login-card__logo">
          <UIcon name="i-lucide-gavel" class="login-card__logo-icon" />
        </div>
        <h1 class="login-card__title">Connexion</h1>
        <p class="login-card__subtitle">
          Duniter V2 · Ed25519
        </p>
      </div>

      <!-- Steps indicator -->
      <div class="login-steps">
        <div
          v-for="(s, i) in steps"
          :key="i"
          class="login-step"
          :class="{
            'login-step--done': s.done,
            'login-step--active': i === activeStepIndex,
          }"
        >
          <div class="login-step__dot">
            <UIcon v-if="s.done" name="i-lucide-check" />
            <span v-else class="login-step__num">{{ i + 1 }}</span>
          </div>
          <span class="login-step__label">{{ s.label }}</span>
        </div>
      </div>

      <!-- Input -->
      <div class="login-card__field">
        <label class="login-card__label">Adresse Duniter (SS58)</label>
        <input
          v-model="address"
          type="text"
          class="login-card__input"
          placeholder="5GrwvaEF5zXb26Fz9rcQpDWS57Ct..."
          :disabled="auth.loading || step !== 'input'"
          @keydown.enter="handleLogin"
        />
      </div>

      <!-- Error -->
      <div v-if="errorMessage || auth.error" class="login-card__error">
        <UIcon name="i-lucide-alert-circle" />
        <span>{{ errorMessage || auth.error }}</span>
      </div>

      <!-- Success -->
      <div v-if="step === 'success'" class="login-card__success">
        <UIcon name="i-lucide-check-circle" />
        <span>Connecte. Redirection...</span>
      </div>

      <!-- Button -->
      <button
        class="login-card__btn"
        :disabled="!address.trim() || step === 'success' || auth.loading"
        @click="handleLogin"
      >
        <UIcon v-if="auth.loading" name="i-lucide-loader-2" class="animate-spin" />
        <UIcon v-else name="i-lucide-log-in" />
        <span>{{ auth.loading ? 'Verification...' : 'Se connecter' }}</span>
      </button>

      <!-- Note -->
      <p class="login-card__note">
        Aucun mot de passe. Authentification par signature cryptographique.
      </p>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 1.5rem 1rem;
}

@media (min-width: 640px) {
  .login-page {
    min-height: 70vh;
    padding: 2rem 1rem;
  }
}

.login-card {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .login-card {
    gap: 1.5rem;
  }
}

.login-card__header {
  text-align: center;
}

.login-card__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.75rem;
  color: var(--mood-accent-text);
  background: var(--mood-accent);
  border-radius: 14px;
  margin-bottom: 1rem;
  transform: rotate(-10deg);
}
.login-card__logo-icon {
  transform: scaleX(-1);
}

.login-card__subtitle {
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
  margin-top: 0.375rem;
}

@media (min-width: 640px) {
  .login-card__subtitle {
    font-size: 0.9375rem;
  }
}

.login-card__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--mood-text);
  margin: 0;
}

@media (min-width: 640px) {
  .login-card__title {
    font-size: 1.75rem;
  }
}

/* Steps */
.login-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.75rem 0;
}

.login-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
}

.login-step__dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--mood-text-muted);
  background: var(--mood-accent-soft);
  transition: all 0.2s ease;
}

.login-step--active .login-step__dot {
  color: var(--mood-accent);
  box-shadow: 0 0 0 3px var(--mood-accent-soft);
}

.login-step--done .login-step__dot {
  background: var(--mood-success);
  color: white;
}

.login-step__num {
  font-size: 0.75rem;
}

.login-step__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  text-align: center;
}

.login-step--active .login-step__label {
  color: var(--mood-accent);
  font-weight: 700;
}

/* Field */
.login-card__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.login-card__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mood-text-muted);
}

.login-card__input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', monospace;
  color: var(--mood-text);
  background: var(--mood-accent-soft);
  border-radius: 12px;
  transition: box-shadow 0.15s ease;
  /* Prevent iOS zoom on focus */
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 640px) {
  .login-card__input {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }
}

.login-card__input:focus {
  box-shadow: 0 0 0 3px var(--mood-accent-soft);
}

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

.login-card__input::placeholder {
  color: var(--mood-text-muted);
  opacity: 0.4;
}

/* Messages */
.login-card__error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mood-error);
  background: rgba(196, 43, 43, 0.08);
  border-radius: 12px;
}

.login-card__success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mood-success);
  background: rgba(24, 132, 59, 0.08);
  border-radius: 12px;
}

/* Button */
.login-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--mood-accent-text);
  background: var(--mood-accent);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  min-height: 3rem;
}

@media (min-width: 640px) {
  .login-card__btn {
    padding: 0.875rem 1.25rem;
    font-size: 1.0625rem;
  }
}

.login-card__btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--mood-shadow);
}

.login-card__btn:active:not(:disabled) {
  transform: translateY(0);
}

.login-card__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Note */
.login-card__note {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
  opacity: 0.7;
}
</style>