feat: complete auth flow - email confirmation, login state, route guards

src/views/auth/RegisterView.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 
 const authStore = useAuthStore()
-const router = useRouter()
 
 const email = ref('')
 const password = ref('')
@@ -12,10 +10,19 @@ 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
@@ -27,10 +34,10 @@ async function handleRegister() {
 
   loading.value = true
   try {
-    await authStore.register(email.value, password.value, username.value)
-    router.push('/')
+    await authStore.register(email.value, password.value, username.value.trim())
+    emailSent.value = true
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : '注册失败'
+    error.value = e instanceof Error ? e.message : '注册失败，请稍后重试'
   } finally {
     loading.value = false
   }
@@ -40,68 +47,96 @@ async function handleRegister() {
 <template>
   <div class="flex items-center justify-center min-h-[calc(100vh-4rem)] px-4">
     <div class="w-full max-w-sm">
-      <h1 class="text-2xl font-bold text-gray-900 text-center mb-8">注册 OpenCloud</h1>
-
-      <form @submit.prevent="handleRegister" class="space-y-4">
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
-          <input
-            v-model="username"
-            type="text"
-            required
-            placeholder="你的昵称"
-            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent"
-          />
-        </div>
-
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
-          <input
-            v-model="email"
-            type="email"
-            required
-            placeholder="your@email.com"
-            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent"
-          />
-        </div>
-
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
-          <input
-            v-model="password"
-            type="password"
-            required
-            placeholder="至少8位"
-            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent"
-          />
-        </div>
-
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
-          <input
-            v-model="confirmPassword"
-            type="password"
-            required
-            placeholder="再次输入密码"
-            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent"
-          />
-        </div>
-
-        <p v-if="error" class="text-sm text-red-600">{{ error }}</p>
-
-        <button
-          type="submit"
-          :disabled="loading"
-          class="w-full py-2.5 bg-sky-500 text-white font-medium rounded-lg hover:bg-sky-600 disabled:opacity-50 transition-colors"
+      <div v-if="emailSent" class="text-center">
+        <span class="text-5xl block mb-4">📧</span>
+        <h1 class="text-2xl font-bold text-gray-900 mb-2">确认你的邮箱</h1>
+        <p class="text-gray-500 mb-6">
+          我们已向 <strong class="text-gray-700">{{ email }}</strong> 发送了确认邮件，请查收并点击确认链接完成注册。
+        </p>
+        <p class="text-sm text-gray-400 mb-6">没有收到？请检查垃圾邮件文件夹</p>
+        <RouterLink
+          to="/login"
+          class="inline-flex items-center px-6 py-2.5 bg-sky-500 text-white font-medium rounded-lg hover:bg-sky-600 transition-colors"
         >
-          {{ loading ? '注册中...' : '注册' }}
-        </button>
-      </form>
+          去登录
+        </RouterLink>
+      </div>
 
-      <p class="mt-6 text-center text-sm text-gray-500">
-        已有账号？
-        <RouterLink to="/login" class="text-sky-600 hover:text-sky-700 font-medium">去登录</RouterLink>
-      </p>
+      <template v-else>
+        <div class="text-center mb-8">
+          <span class="text-5xl block mb-4">☁️</span>
+          <h1 class="text-2xl font-bold text-gray-900">注册 OpenCloud</h1>
+          <p class="text-sm text-gray-500 mt-1">加入天空探索者社区</p>
+        </div>
+
+        <form @submit.prevent="handleRegister" class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
+            <input
+              v-model="username"
+              type="text"
+              required
+              autocomplete="username"
+              placeholder="你的昵称"
+              maxlength="20"
+              class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-colors"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
+            <input
+              v-model="email"
+              type="email"
+              required
+              autocomplete="email"
+              placeholder="your@email.com"
+              class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-colors"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
+            <input
+              v-model="password"
+              type="password"
+              required
+              autocomplete="new-password"
+              placeholder="至少8位"
+              class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-colors"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
+            <input
+              v-model="confirmPassword"
+              type="password"
+              required
+              autocomplete="new-password"
+              placeholder="再次输入密码"
+              class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-colors"
+            />
+          </div>
+
+          <div v-if="error" class="p-3 bg-red-50 border border-red-200 rounded-lg">
+            <p class="text-sm text-red-600">{{ error }}</p>
+          </div>
+
+          <button
+            type="submit"
+            :disabled="loading"
+            class="w-full py-2.5 bg-sky-500 text-white font-medium rounded-lg hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 disabled:opacity-50 transition-colors"
+          >
+            {{ loading ? '注册中...' : '注册' }}
+          </button>
+        </form>
+
+        <p class="mt-6 text-center text-sm text-gray-500">
+          已有账号？
+          <RouterLink to="/login" class="text-sky-600 hover:text-sky-700 font-medium">去登录</RouterLink>
+        </p>
+      </template>
     </div>
   </div>
 </template>