Implement compression quota refunds and admin manual subscription

frontend/src/pages/ResetPasswordPage.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { resetPassword } from '@/services/api'
+import { ApiError } from '@/services/http'
+
+const route = useRoute()
+const token = computed(() => (typeof route.query.token === 'string' ? route.query.token : ''))
+
+const newPassword = ref('')
+const busy = ref(false)
+const error = ref<string | null>(null)
+const success = ref<string | null>(null)
+
+async function submit() {
+  error.value = null
+  success.value = null
+  if (!token.value) {
+    error.value = '缺少 token'
+    return
+  }
+
+  busy.value = true
+  try {
+    const resp = await resetPassword(token.value, newPassword.value)
+    success.value = resp.message
+  } catch (err) {
+    if (err instanceof ApiError) {
+      error.value = `[${err.code}] ${err.message}`
+    } else {
+      error.value = '重置失败，请稍后再试'
+    }
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-md">
+    <div class="rounded-xl border border-slate-200 bg-white p-6">
+      <h1 class="text-xl font-semibold text-slate-900">重置密码</h1>
+
+      <div v-if="error" class="mt-4 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900">
+        {{ error }}
+      </div>
+      <div
+        v-if="success"
+        class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-900"
+      >
+        {{ success }}
+      </div>
+
+      <form class="mt-5 space-y-4" @submit.prevent="submit">
+        <label class="block space-y-1">
+          <div class="text-xs font-medium text-slate-600">新密码</div>
+          <input
+            v-model="newPassword"
+            type="password"
+            autocomplete="new-password"
+            class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
+            placeholder="至少 8 位"
+            required
+          />
+        </label>
+
+        <button
+          type="submit"
+          class="w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+          :disabled="busy"
+        >
+          {{ busy ? '提交中…' : '重置密码' }}
+        </button>
+      </form>
+
+      <div class="mt-4 text-sm text-slate-600">
+        <router-link to="/login" class="text-indigo-600 hover:text-indigo-700">返回登录</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+