opencloud/src/views/auth/RegisterView.vue

<script setup lang="ts">
import { ref } from 'vue'
import { NAlert, NButton, NCard, NForm, NFormItem, NInput, NResult } from 'naive-ui'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const username = ref('')
const error = ref('')
const loading = ref(false)
const emailSent = ref(false)

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

  if (!username.value.trim()) {
    error.value = '请输入用户名'
    return
  }
  if (username.value.length > 20) {
    error.value = '用户名不能超过20个字符'
    return
  }
  if (password.value.length < 8) {
    error.value = '密码至少8位'
    return
  }
  if (password.value !== confirmPassword.value) {
    error.value = '两次密码不一致'
    return
  }

  loading.value = true
  try {
    await authStore.register(email.value, password.value, username.value.trim())
    emailSent.value = true
  } catch (e: unknown) {
    error.value = e instanceof Error ? e.message : '注册失败，请稍后重试'
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
    <div class="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-stretch">
      <section class="flex h-full flex-col justify-between border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_42%,#f0fdfa_100%)] p-8 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)]">
        <div>
          <p class="text-sm uppercase tracking-[0.26em] text-sky-700">Observer Join</p>
          <h1 class="mt-4 max-w-xl text-5xl font-black leading-[1.05] text-slate-900">
            加入天空探索者
            <span class="block text-sky-700">建立你的云图档案</span>
          </h1>
          <!-- <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
            注册后即可上传云图、点亮图鉴、在社区画廊里按时间展示你的观测记录。所有页面都会围绕你的个人云层档案同步更新。
          </p> -->
        </div>
        <div class="mt-8 flex gap-4">
          <div class="border border-slate-200 bg-white px-4 py-3">
            <div class="oc-stat-label">Review</div>
            <div class="oc-stat-value">Queue</div>
            <div class="oc-field-help">上传后进入审核队列</div>
          </div>
          <div class="border border-slate-200 bg-white px-4 py-3">
            <div class="oc-stat-label">Profile</div>
            <div class="oc-stat-value">Journal</div>
            <div class="oc-field-help">自动生成个人天空日志</div>
          </div>
        </div>
      </section>

      <NCard class="h-full shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
        <NResult
          v-if="emailSent"
          status="success"
          title="确认你的邮箱"
          description="确认邮件已经发送，请查收并点击链接完成注册。"
        >
          <template #footer>
            <div class="space-y-4">
              <p class="text-sm text-slate-500">
                目标邮箱：
                <span class="font-semibold text-slate-700">{{ email }}</span>
              </p>
              <RouterLink to="/login" class="no-underline">
                <NButton type="primary" class="oc-primary-button oc-primary-button--teal">去登录</NButton>
              </RouterLink>
            </div>
          </template>
        </NResult>

        <template v-else>
          <div class="mb-8">
            <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Create Account</div>
            <h2 class="mt-3 text-3xl font-bold text-slate-900">注册 OpenCloud</h2>
            <p class="mt-2 text-sm text-slate-500">加入社区后即可开始记录、收集与展示云图。</p>
          </div>

          <NForm @submit.prevent="handleRegister">
            <NFormItem label="用户名">
              <NInput
                v-model:value="username"
                type="text"
                required
                autocomplete="username"
                placeholder="你的昵称"
                maxlength="20"
              />
            </NFormItem>

            <NFormItem label="邮箱">
              <NInput
                v-model:value="email"
                required
                autocomplete="email"
                placeholder="your@email.com"
              />
            </NFormItem>

            <NFormItem label="密码">
              <NInput
                v-model:value="password"
                type="password"
                required
                show-password-on="click"
                autocomplete="new-password"
                placeholder="至少8位"
              />
            </NFormItem>

            <NFormItem label="确认密码">
              <NInput
                v-model:value="confirmPassword"
                type="password"
                required
                show-password-on="click"
                autocomplete="new-password"
                placeholder="再次输入密码"
              />
            </NFormItem>

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

            <NButton
              attr-type="submit"
              type="primary"
              block
              size="large"
              class="oc-primary-button oc-primary-button--sky"
              :loading="loading"
            >
              {{ loading ? '注册中...' : '注册' }}
            </NButton>
          </NForm>

          <p class="mt-6 text-sm text-slate-500">
            已有账号？
            <RouterLink to="/login" class="font-semibold text-sky-700 hover:text-sky-800">去登录</RouterLink>
          </p>
        </template>
      </NCard>
    </div>
  </div>
</template>