kite/frontend/src/views/AccountView.vue

<template>
  <div class="p-8 max-w-2xl mx-auto">
    <h2 class="text-2xl font-semibold text-gray-900 mb-6">Account settings</h2>

    <div class="space-y-6">

      <!-- 1. Account information -->
      <section class="bg-white border border-gray-200 rounded-xl p-6">
        <h3 class="font-semibold text-gray-800 mb-4">Account information</h3>
        <div class="space-y-2 text-sm text-gray-700">
          <div><span class="text-gray-500">Email:</span> {{ authStore.user?.email }}</div>
          <div class="flex items-center gap-2">
            <span class="text-gray-500">Role:</span>
            <span
              class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold"
              :class="authStore.user?.role === 'admin'
                ? 'bg-indigo-100 text-indigo-700'
                : 'bg-gray-100 text-gray-600'"
            >
              {{ authStore.user?.role }}
            </span>
          </div>
        </div>
      </section>

      <!-- 2. Two-factor authentication -->
      <section class="bg-white border border-gray-200 rounded-xl p-6">
        <h3 class="font-semibold text-gray-800 mb-4">Two-factor authentication</h3>

        <!-- TOTP enabled: show status + disable option -->
        <template v-if="authStore.user?.totp_enabled">
          <div class="flex items-center gap-3 mb-4">
            <span class="inline-flex items-center gap-1.5 text-sm text-green-700 font-semibold">
              <!-- Checkmark -->
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>
              Enabled
            </span>
          </div>

          <template v-if="!confirmDisable2fa">
            <button
              type="button"
              @click="confirmDisable2fa = true"
              class="text-sm px-4 py-2 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 transition-colors"
            >
              Disable 2FA
            </button>
          </template>
          <template v-else>
            <ConfirmBlock
              message="This will disable two-factor authentication. Your account will be less secure."
              confirm-label="Disable 2FA"
              cancel-label="Keep enabled"
              @confirmed="disableTotp"
              @cancelled="confirmDisable2fa = false"
            />
            <p v-if="totpError" class="mt-2 text-xs text-red-600">{{ totpError }}</p>
          </template>
        </template>

        <!-- TOTP not enabled: show enrollment component -->
        <template v-else>
          <TotpEnrollment @enrolled="onTotpEnrolled" />
        </template>
      </section>

      <!-- 3. Change password -->
      <section class="bg-white border border-gray-200 rounded-xl p-6">
        <h3 class="font-semibold text-gray-800 mb-4">Change password</h3>

        <form @submit.prevent="changePassword" class="space-y-4 max-w-sm">
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1">Current password</label>
            <input
              v-model="currentPassword"
              type="password"
              required
              autocomplete="current-password"
              class="block w-full rounded-lg px-3 py-3 text-sm border bg-white text-gray-900 transition-colors focus:ring-2 focus:outline-none"
              :class="passwordError && passwordError.includes('Current')
                ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
                : 'border-gray-300 focus:ring-indigo-500 focus:border-indigo-500'"
            />
            <p
              v-if="passwordError && passwordError.includes('Current')"
              class="mt-1 text-xs text-red-600"
            >
              {{ passwordError }}
            </p>
          </div>

          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1">New password</label>
            <input
              v-model="newPassword"
              type="password"
              required
              autocomplete="new-password"
              class="block w-full rounded-lg px-3 py-3 text-sm border bg-white text-gray-900 transition-colors focus:ring-2 focus:outline-none"
              :class="passwordError && !passwordError.includes('Current')
                ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
                : 'border-gray-300 focus:ring-indigo-500 focus:border-indigo-500'"
            />
            <PasswordStrengthBar :password="newPassword" />
          </div>

          <!-- Form-level error (e.g. breach check, strength failure) -->
          <div
            v-if="passwordError && !passwordError.includes('Current')"
            class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"
          >
            {{ passwordError }}
          </div>

          <div v-if="passwordSuccess" class="text-sm text-green-600">{{ passwordSuccess }}</div>

          <button
            type="submit"
            :disabled="changingPassword"
            class="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors disabled:opacity-75 min-h-[44px]"
          >
            <AppSpinner v-if="changingPassword" />
            {{ changingPassword ? 'Updating…' : 'Update password' }}
          </button>
        </form>
      </section>

      <!-- 4. Sessions — sign out all devices -->
      <section class="bg-white border border-gray-200 rounded-xl p-6">
        <h3 class="font-semibold text-gray-800 mb-4">Sessions</h3>

        <template v-if="!confirmSignOutAll">
          <button
            type="button"
            @click="confirmSignOutAll = true"
            class="text-sm px-4 py-2 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 transition-colors"
          >
            Sign out all devices
          </button>
        </template>

        <template v-else>
          <ConfirmBlock
            message="This will sign you out of all devices, including this one. You will need to sign in again."
            confirm-label="Sign out all devices"
            cancel-label="Keep signed in"
            @confirmed="signOutAll"
            @cancelled="confirmSignOutAll = false"
          >
            <template #confirm-button>
              <button
                type="button"
                @click="signOutAll"
                :disabled="signingOutAll"
                class="flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg disabled:opacity-75 min-h-[44px]"
              >
                <AppSpinner v-if="signingOutAll" />
                Sign out all devices
              </button>
            </template>
          </ConfirmBlock>
        </template>
      </section>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth.js'
import * as api from '../api/client.js'
import PasswordStrengthBar from '../components/auth/PasswordStrengthBar.vue'
import TotpEnrollment from '../components/auth/TotpEnrollment.vue'
import ConfirmBlock from '../components/ui/ConfirmBlock.vue'
import AppSpinner from '../components/ui/AppSpinner.vue'

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

// ── Change password ─────────────────────────────────────────────────────────

const currentPassword = ref('')
const newPassword = ref('')
const changingPassword = ref(false)
const passwordError = ref(null)
const passwordSuccess = ref(null)

async function changePassword() {
  changingPassword.value = true
  passwordError.value = null
  passwordSuccess.value = null
  try {
    await api.changePassword({
      current_password: currentPassword.value,
      new_password: newPassword.value,
    })
    passwordSuccess.value = 'Password updated.'
    currentPassword.value = ''
    newPassword.value = ''
  } catch (e) {
    const msg = e.message || ''
    if (msg.toLowerCase().includes('current') || msg.toLowerCase().includes('incorrect')) {
      // Wrong current password — show inline below the field
      passwordError.value = 'Current password is incorrect'
    } else if (msg.toLowerCase().includes('breach')) {
      // HIBP breach detected
      passwordError.value = 'This password has appeared in a data breach. Choose a different password.'
    } else {
      passwordError.value = msg
    }
  } finally {
    changingPassword.value = false
  }
}

// ── TOTP enrollment ─────────────────────────────────────────────────────────

const confirmDisable2fa = ref(false)
const totpError = ref(null)

function onTotpEnrolled() {
  // Update user totp_enabled flag in store
  if (authStore.user) {
    authStore.user.totp_enabled = true
  }
}

async function disableTotp() {
  totpError.value = null
  try {
    await api.totpDisable()
    if (authStore.user) {
      authStore.user.totp_enabled = false
    }
    confirmDisable2fa.value = false
  } catch (e) {
    totpError.value = e.message
  }
}

// ── Sign out all devices ────────────────────────────────────────────────────

const confirmSignOutAll = ref(false)
const signingOutAll = ref(false)

async function signOutAll() {
  signingOutAll.value = true
  try {
    await authStore.logoutAll()
    await router.push('/login')
  } finally {
    signingOutAll.value = false
  }
}
</script>