feat: 注册页面和管理员登录时新用户审核提醒

app.vue

@@ -2,13 +2,14 @@
 import ModalAuthentication from '~/components/ModalAuthentication.vue'
 
 const toast = useToast()
+const route = useRoute()
 const router = useRouter()
 const modal = useModal()
 const loginState = useLoginState()
 
 useHead({
   titleTemplate(title) {
-    return title ? `${ title } - 眩生花 AI 助手` : '眩生花 AI 助手'
+    return title ? `${title} - AIGC 微课视频研创平台` : 'AIGC 微课视频研创平台'
   },
 })
 
@@ -17,7 +18,7 @@ useSeoMeta({
 })
 
 onMounted(() => {
-  loginState.checkSession().then(res => {
+  loginState.checkSession().then(async (res) => {
     if (!res && loginState.token) {
       toast.add({
         title: '登录失效',
@@ -27,6 +28,8 @@ onMounted(() => {
       })
       modal.open(ModalAuthentication)
     } else if (!res && !loginState.token) {
+      // Prevents redirect from register page
+      if (route.path === '/user/register') return
       router.replace('/user/authenticate')
     }
   })
@@ -35,14 +38,14 @@ onMounted(() => {
 
 <template>
   <div>
-    <NuxtLoadingIndicator/>
+    <NuxtLoadingIndicator />
 
     <NuxtLayout>
-      <NuxtPage/>
+      <NuxtPage />
     </NuxtLayout>
 
-    <UModals/>
+    <UModals />
-    <USlideovers/>
+    <USlideovers />
-    <UNotifications/>
+    <UNotifications />
   </div>
 </template>

layouts/default.vue

@@ -76,6 +76,62 @@ const items = [
 const open_login_modal = () => {
   modal.open(ModalAuthentication)
 }
+
+onMounted(async () => {
+  if (loginState.user.auth_code === 2) {
+    /** Adminstrator notifications */
+
+    // Fetch unverified users
+    const unverifiedUsers = await useFetchWrapped<
+      req.user.UserList & AuthedRequest,
+      BaseResponse<PagedData<UserSchema>>
+    >('App.User_User.ListUser', {
+      token: loginState.token!,
+      user_id: loginState.user.id!,
+      page: 1,
+      perpage: 20,
+      is_verify: false,
+    })
+
+    if (!unverifiedUsers) {
+      toast.add({
+        title: '获取待审核用户失败',
+        description: '获取未审核用户列表失败',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    } else if (unverifiedUsers.data.total > 0) {
+      toast.add({
+        title: '有新用户等待审核',
+        description: `有 ${unverifiedUsers.data.total} 个新用户注册，请尽快审核`,
+        color: 'amber',
+        icon: 'i-tabler-user-plus',
+        timeout: 0,
+        actions: [
+          {
+            label: '前往处理',
+            variant: 'solid',
+            color: 'amber',
+            click: () => {
+              router.push({
+                path: '/generation/admin/users',
+                query: {
+                  unverified: 1,
+                },
+              })
+            },
+          },
+          // {
+          //   label: '全部忽略',
+          //   click: () => {
+          //     alert('ignored')
+          //   },
+          // },
+        ],
+      })
+    }
+  }
+})
 </script>
 
 <template>

pages/generation/admin/users.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+const route = useRoute()
 const toast = useToast()
 const dayjs = useDayjs()
 const loginState = useLoginState()
@@ -125,6 +126,12 @@ const dhPageCount = ref(10)
 
 watch(dhPageCount, () => (dhPage.value = 1))
 
+onMounted(() => {
+  if (!!route.query?.unverified) {
+    state_filter.value = 'unverified'
+  }
+})
+
 const {
   data: digitalHumansData,
   refresh: refreshDigitalHumansData,

pages/user/authenticate.vue

@@ -6,6 +6,10 @@ definePageMeta({
   layout: 'authenticate',
 })
 
+useSeoMeta({
+  title: '登录',
+})
+
 const router = useRouter()
 const toast = useToast()
 const loginState = useLoginState()
@@ -565,6 +569,18 @@ const onForgetPasswordSubmit = (
         </template>
       </UTabs>
     </div>
+    <div class="pt-4">
+      <UButton
+        color="gray"
+        variant="ghost"
+        class="!text-gray-500"
+        @click="() => {
+          router.push('/user/register')
+        }"
+      >
+        注册新账号
+      </UButton>
+    </div>
   </div>
 </template>
 

pages/user/register.vue

@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { FormSubmitEvent } from '#ui/types'
+import { object, string, type InferType } from 'yup'
+
+definePageMeta({
+  layout: 'authenticate',
+})
+
+useSeoMeta({
+  title: '注册',
+})
+
+const router = useRouter()
+const toast = useToast()
+const loginState = useLoginState()
+
+const final_loading = ref(false)
+
+const registerState = reactive({
+  username: '',
+  password: '',
+  mobile: '',
+  company: '',
+})
+
+const registerSchema = object({
+  username: string().required('请输入用户名'),
+  password: string().required('请输入新密码').min(6, '密码长度至少为6位'),
+  mobile: string()
+    .required('请输入手机号')
+    .matches(/^1[3-9]\d{9}$/, '手机号格式不正确'),
+  company: string().required('请输入公司/单位名称'),
+})
+
+type RegisterSchema = InferType<typeof registerSchema>
+
+const onSubmit = (form: RegisterSchema) => {
+  final_loading.value = true
+  useFetchWrapped<Partial<UserSchema>, BaseResponse<{ user_id: number }>>(
+    'App.User_User.Register',
+    {
+      ...registerState,
+    }
+  ).then(
+    (res) => {
+      final_loading.value = false
+      if (res) {
+        toast.add({
+          title: '注册成功',
+          description: '请联系客服激活账号后登录',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+        router.push('/user/authenticate')
+      }
+    },
+    (err) => {
+      final_loading.value = false
+      toast.add({
+        title: '注册失败',
+        description: err.message || '注册失败，请稍后再试',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    }
+  )
+}
+</script>
+
+<template>
+  <div class="w-full min-h-screen flex flex-col justify-center items-center">
+    <div class="flex flex-col items-center py-12 gap-2">
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
+        AIGC 微课视频研创平台
+      </h1>
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">账号注册</p>
+    </div>
+    <div class="flex flex-col items-center">
+      <UCard
+        @submit.prevent="() => onSubmit(registerState)"
+        class="w-full sm:w-[400px]"
+      >
+        <!-- <template #header>
+          <p
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            {{ item.label }}
+          </p>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            {{ item.description }}
+          </p>
+        </template> -->
+
+        <div class="space-y-3">
+          <UFormGroup
+            label="姓名"
+            name="username"
+            help="请使用姓名作为用户名，将用于登录"
+            required
+          >
+            <UInput
+              v-model="registerState.username"
+              :disabled="final_loading"
+              required
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="密码"
+            name="password"
+            required
+          >
+            <UInput
+              v-model="registerState.password"
+              :disabled="final_loading"
+              type="password"
+              required
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="手机号"
+            name="mobile"
+            required
+          >
+            <UInput
+              v-model="registerState.mobile"
+              :disabled="final_loading"
+              required
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="公司/单位"
+            name="company"
+            required
+          >
+            <UInput
+              v-model="registerState.company"
+              :disabled="final_loading"
+              required
+            />
+          </UFormGroup>
+        </div>
+
+        <template #footer>
+          <div class="flex items-center justify-between">
+            <UButton
+              type="submit"
+              color="black"
+              :loading="final_loading"
+            >
+              注册
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </div>
+    <div class="pt-4">
+      <UButton
+        color="gray"
+        variant="ghost"
+        class="!text-gray-500"
+        @click="
+          () => {
+            router.push('/user/authenticate')
+          }
+        "
+      >
+        已有账号，前往登录
+      </UButton>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>