opencloud/src/views/auth/ResetPasswordView.vue

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NAlert, NButton, NCard, NForm, NFormItem, NInput, NResult, NSpin } from 'naive-ui'
import { apiRequest } from '@/lib/api'

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

const password = ref('')
const confirmPassword = ref('')
const error = ref('')
const state = ref<'checking' | 'ready' | 'invalid' | 'success'>('checking')
const loading = ref(false)
const countdown = ref(5)
const initialResetToken = typeof route.query.token === 'string' ? route.query.token : ''
const resetToken = ref(initialResetToken)
let countdownTimer: ReturnType<typeof setInterval> | null = null

if (route.query.token !== undefined) {
  window.history.replaceState(window.history.state, '', window.location.pathname)
}

const canSubmit = computed(() =>
  state.value === 'ready' && password.value.length >= 8 && password.value === confirmPassword.value,
)

function showInvalidRecoveryLink() {
  error.value = '密码重置链接无效或已过期，请重新发送邮件。'
  state.value = 'invalid'
}

function getResetErrorMessage(value: unknown) {
  const message = value instanceof Error ? value.message : ''
  if (message.includes('无效') || message.includes('过期') || message.includes('expired')) {
    return '密码重置链接无效或已过期，请重新发送邮件。'
  }

  if (message.includes('8')) {
    return '新密码至少需要 8 位。'
  }

  return message || '密码重置失败，请稍后重试。'
}

function startCountdown() {
  countdownTimer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      if (countdownTimer) clearInterval(countdownTimer)
      router.push('/login')
    }
  }, 1000)
}

async function initializeRecoverySession() {
  if (!resetToken.value) {
    showInvalidRecoveryLink()
    return
  }
  state.value = 'ready'
}

async function handleResetPassword() {
  error.value = ''

  if (password.value.length < 8) {
    error.value = '新密码至少需要 8 位。'
    return
  }
  if (password.value !== confirmPassword.value) {
    error.value = '两次输入的密码不一致。'
    return
  }

  loading.value = true
  try {
    await apiRequest('/auth/reset-password', {
      method: 'POST',
      auth: false,
      body: { token: resetToken.value, password: password.value },
    })
    countdown.value = 5
    state.value = 'success'
    startCountdown()
  } catch (e) {
    error.value = getResetErrorMessage(e)
    if (error.value === '密码重置链接无效或已过期，请重新发送邮件。') {
      state.value = 'invalid'
    }
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  void initializeRecoverySession()
})

onUnmounted(() => {
  if (countdownTimer) clearInterval(countdownTimer)
})
</script>

<template>
  <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
    <div class="mx-auto max-w-2xl">
      <NCard class="shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
        <NResult
          v-if="state === 'success'"
          status="success"
          title="密码已重置"
          description="你已使用新密码完成更新，现在可以重新登录。"
        >
          <template #footer>
            <div class="space-y-4">
              <p class="text-sm text-slate-500">{{ countdown }} 秒后自动跳转登录页面...</p>
              <NButton type="primary" class="oc-primary-button oc-primary-button--teal" @click="router.push('/login')">立即登录</NButton>
            </div>
          </template>
        </NResult>

        <template v-else-if="state === 'checking'">
          <div class="flex flex-col items-center justify-center py-12 text-center">
            <NSpin size="large" />
            <h1 class="mt-6 text-2xl font-bold text-slate-900">正在验证重置链接...</h1>
            <p class="mt-2 text-slate-500">请稍候</p>
          </div>
        </template>

        <template v-else>
          <div class="mb-8">
            <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Password Recovery</div>
            <h1 class="mt-3 text-3xl font-bold text-slate-900">设置新密码</h1>
            <p class="mt-2 text-sm text-slate-500">
              {{
                state === 'invalid'
                  ? '当前重置链接不可用，请重新发送密码重置邮件。'
                  : '请输入新的登录密码，提交后当前重置链接会失效。'
              }}
            </p>
          </div>

          <NForm @submit.prevent="handleResetPassword">
            <input
              type="text"
              name="username"
              autocomplete="username"
              class="sr-only"
              tabindex="-1"
              aria-label="账户用户名"
            />
            <NFormItem label="新密码">
              <NInput
                v-model:value="password"
                type="password"
                show-password-on="click"
                :input-props="{
                  autocomplete: 'new-password',
                  name: 'new-password',
                  required: true,
                }"
                placeholder="至少 8 位"
              />
            </NFormItem>

            <NFormItem label="确认新密码">
              <NInput
                v-model:value="confirmPassword"
                type="password"
                show-password-on="click"
                :input-props="{
                  autocomplete: 'new-password',
                  name: 'confirm-new-password',
                  required: true,
                }"
                placeholder="再次输入新密码"
              />
            </NFormItem>

            <NAlert v-if="error" type="error" class="mb-4">
              {{ error }}
            </NAlert>

            <RouterLink
              v-if="state === 'invalid'"
              to="/forgot-password"
              class="mb-4 block text-sm font-semibold text-teal-700 hover:text-teal-800"
            >
              返回重新发送重置邮件
            </RouterLink>

            <NButton
              attr-type="submit"
              type="primary"
              block
              size="large"
              class="oc-primary-button oc-primary-button--teal"
              :disabled="!canSubmit"
              :loading="loading"
            >
              保存新密码
            </NButton>
          </NForm>
        </template>
      </NCard>
    </div>
  </div>
</template>