Add register page

Add active at MemberManage
Change login method to logto
Update styles

.vscode/settings.json

@@ -6,7 +6,7 @@
 		"innerlg",
 		"innersm",
 		"Logto",
-		"sclass"
+		"teritary"
 	],
 	"testing.automaticallyOpenPeekView": "never"
 }

src/components/Menu/Menu.vue

@@ -63,8 +63,10 @@
     </div>
     <div class="flex flex-col mb-4 hidden items-center sm:(flex)">
       <div class="flex flex-col items-center xl:(flex-row mb-4)">
-        <div class="rounded-full overflow-hidden hidden border sm:(h-20 w-20 block) md:(h-28 w-28)">
-          <img class="sm:h-20 md:h-28 object-cover" :src="store.account.avatar || defaultAvatar" alt="" />
+        <div
+          class="border rounded-full flex-shrink-0 sm:(h-20 w-20 block) md:(h-28 w-28) relative overflow-hidden flex items-center justify-center"
+        >
+          <img class="object-cover sm:(h-20 w-20 block) md:(h-28 w-28)" :src="store.account.avatar || defaultAvatar" alt="" />
         </div>
         <div class="relative xl:(self-end ml-2)">
           <div class="flex justify-center items-center xl:(flex-col items-start)">

src/router/asyncRoutes.ts

@@ -5,6 +5,7 @@ const asyncRoutes: RouteRecordRaw[] = [
     path: "/",
     name: "Index",
     component: () => import("@/views/index.vue"),
+    redirect: "/Events",
     meta: {
       roles: ["admin", "member"],
     },
@@ -42,6 +43,11 @@ const asyncRoutes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    path: "/register",
+    name: "LoginRegister",
+    component: () => import("@/views/Login/LoginRegister.vue"),
+  },
   {
     path: "/activate",
     name: "LoginActivate",

src/router/index.ts

@@ -41,14 +41,19 @@ router.beforeEach((to, from, next) => {
     return
   }
   if (!token) {
-    if (to.path === "/login" || to.path === "/callback") {
+    if (to.path === "/login" || to.path === "/callback" || to.path === "/register") {
       next()
     } else {
       next("/login")
     }
     return
   }
 
+  if (userRole.includes("inactive") && to.path != "/activate") {
+    next({ path: "/activate" })
+    return
+  }
+
   if (to.path === "/login") {
     next({ path: "/Events" })
     return

src/services/logto.ts

@@ -0,0 +1,7 @@
+export const createTokenViaLogtoToken = async (token: string) => {
+  return await window.fetch("/api/member/token/logto", {
+    headers: {
+      Authorization: "Bearer " + token,
+    },
+  })
+}

src/services/member.ts

@@ -23,8 +23,26 @@ interface CreateTokenRep {
 
 interface CreateMemberReq {
   memberId: string
+  logtoId?: string
   name: string
   section: string
+  alias?: string
+  avatar?: string
+  profile?: string
+  phone?: string
+  qq?: string
+  role?: string
+}
+
+interface CreateMemberWithLogtoReq {
+  memberId: string
+  name: string
+  section: string
+  alias?: string
+  avatar?: string
+  profile?: string
+  phone?: string
+  qq?: string
 }
 
 interface ActivateMemberReq {
@@ -34,7 +52,12 @@ interface ActivateMemberReq {
   phone: string
   qq: string
 }
-
+interface UpdateMemberBasicReq {
+  memberId: string
+  name?: string
+  section?: string
+  role?: string
+}
 const MemberService = {
   async createToken(req: CreateTokenReq) {
     const res = await Axios(
@@ -54,10 +77,28 @@ const MemberService = {
     const res = await Axios("/members", { offset, limit }, "get")
     return res as Member[]
   },
+  // this require admin role
+  async getFullByPage(offset: number, limit: number) {
+    const res = await Axios("/members/full", { offset, limit }, "get")
+    return res as Member[]
+  },
   async update(member: Member) {
     const res = await Axios("/member", member, "put")
     return res as Member
   },
+  // this require admin role
+  async updateBasic(req: UpdateMemberBasicReq) {
+    const res = await Axios(
+      `/members/${req.memberId}`,
+      {
+        name: req.name,
+        section: req.section,
+        role: req.role,
+      },
+      "patch"
+    )
+    return res as Member
+  },
   async updateAvatar(url: string) {
     const res = await Axios("/member/avatar", { url }, "patch")
     return res as Member
@@ -78,6 +119,22 @@ const MemberService = {
     const res = await Axios("/member/activate", req, "patch")
     return res as Member
   },
+  async createWithLogto(token: string, member: CreateMemberWithLogtoReq) {
+    return await window.fetch(`/api/members/${member.memberId}/logto`, {
+      method: "POST",
+      headers: {
+        Authorization: "Bearer " + token,
+      },
+      body: JSON.stringify(member),
+    })
+  },
+  async createTokenViaLogtoToken(token: string) {
+    return await window.fetch("/api/member/token/logto", {
+      headers: {
+        Authorization: "Bearer " + token,
+      },
+    })
+  },
 }
 
 export default MemberService

src/views/CallbackView.vue

@@ -7,21 +7,14 @@ import { ref, onMounted, computed } from "vue"
 import InputBase from "@/components/Input/InputBase.vue"
 import { isFormValid } from "@/utils/isFormValid"
 import md5 from "blueimp-md5"
+import { createTokenViaLogtoToken } from "@/services/logto"
 
 const store = useAccountStore()
 
 const { signIn, signOut, isAuthenticated, fetchUserInfo, getAccessToken } = useLogto()
 const authenticateFailed = ref(false)
 const needBindMember = ref(false)
 
-const createTokenViaLogtoToken = async (token: string) => {
-  return await window.fetch("/api/member/token/logto", {
-    headers: {
-      Authorization: "Bearer " + token,
-    },
-  })
-}
-
 const handleCreateToken = async () => {
   const token = await getAccessToken(import.meta.env.VITE_LOGTO_RESOURCE)
   if (token == undefined) {
@@ -37,7 +30,7 @@ const handleCreateToken = async () => {
   if (body instanceof Object && "token" in body && "memberId" in body && "role" in body) {
     store.account = body as Member
     store.token = body.token as string
-    if (body.role instanceof Array && body.role.includes("inactive")) {
+    if (body.role && body.role.includes("inactive")) {
       router.push("/activate")
       router.push("/activate")
     } else {
@@ -103,8 +96,8 @@ const login = async () => {
 
   await handleCreateToken()
 }
-const logout = () => {
-  signOut(import.meta.env.VITE_LOGTO_REDIRECT_URL)
+const onRegisterMember = () => {
+  router.push({ name: "LoginRegister" })
 }
 onMounted(() => {
   if (isAuthenticated.value) {
@@ -114,36 +107,47 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-3 h-full">
+  <div class="p-3 h-full bg-systemBackground-lightSecondary">
     <p v-if="isLoading">页面跳转中。。。</p>
     <p v-if="authenticateFailed">认证失败，跳转至登入页面。</p>
     <div v-if="needBindMember" class="flex flex-col items-center justify-center h-full">
       <div class="pb-10 text-lg flex flex-col items-center">
         <div class="pb-8 text-2xl font-bold">在第一次登入时，我们需要您绑定你的账户信息</div>
-        <div class="">如果你原先已经使用过此维修平台，请输入原先用于登入的帐号和密码</div>
-        <div class="">如果这是第一次使用，请联系管理员添加你的信息，随后只需要输入你的学号即可</div>
+        <div class="">如果你原先已经使用过此维修平台，请输入原先用于登入的帐号和密码来绑定信息</div>
+        <div class="mt-2">
+          如果这是你第一次使用，请点击下方的
+          <span class="italic font-bold"> 登记信息 </span>
+          来获取你的账号
+        </div>
+      </div>
+      <div style="width: 20vw; min-width: 300px">
+        <form @submit.prevent="login" class="grid gap-4 place-items-center">
+          <InputBase
+            placeholder=""
+            hint="学号"
+            maxLength="10"
+            required
+            :passWarning="isIDValid"
+            class="w-full"
+            v-model:content="accountInput.id"
+            :rules="[{ rule: /^\d{10}$/, warning: '格式错误' }]"
+          />
+          <InputBase
+            placeholder="初始密码为空"
+            hint="密码"
+            :passWarning="isPasswordValid"
+            type="password"
+            class="w-full"
+            v-model:content="accountInput.password"
+          />
+          <button class="w-full btn bg-gradient-to-b from-primary/80 to-primary text-primaryContent shadow-md" type="submit">
+            绑定账号
+          </button>
+        </form>
+        <button class="w-full btn bg-gradient-to-b from-primary/80 to-primary text-primaryContent shadow-md mt-8" @click="onRegisterMember">
+          登记信息
+        </button>
       </div>
-      <form @submit.prevent="login" class="grid gap-4 place-items-center" style="width: 20vw; min-width: 300px">
-        <InputBase
-          placeholder=""
-          hint="学号"
-          maxLength="10"
-          required
-          :passWarning="isIDValid"
-          class="w-full"
-          v-model:content="accountInput.id"
-          :rules="[{ rule: /^\d{10}$/, warning: '格式错误' }]"
-        />
-        <InputBase
-          placeholder="初始密码为空"
-          hint="密码"
-          :passWarning="isPasswordValid"
-          type="password"
-          class="w-full"
-          v-model:content="accountInput.password"
-        />
-        <button class="w-full btn bg-gradient-to-b from-primary/80 to-primary text-primaryContent shadow-md" type="submit">绑定账号</button>
-      </form>
     </div>
   </div>
 </template>

src/views/ErrorPage/NotAuthorized.vue

@@ -1,15 +1,17 @@
 <template>
-  <div class="flex flex-col items-center justify-center bg-base-self h-screen w-screen">
+  <div class="flex flex-col items-center justify-center bg-systemBackground-light h-screen w-screen">
     <div class="textHeading">!</div>
     <div class="textHeading">没有权限</div>
     <button class="btn bg-primary text-primaryContent w-20 mt-10" @click="back">返回</button>
   </div>
 </template>
 
 <script setup lang="ts">
+import router from "@/router"
+import { useAccountStore } from "@/stores/account"
+const store = useAccountStore()
 const back = () => {
-  window.history.back()
-  window.history.back()
+  router.push("/")
 }
 </script>
 

src/views/Events/Events.vue

@@ -37,7 +37,7 @@
             <div class="text-left w-2/3 truncate">
               {{ item.problem }}
             </div>
-            <div class="">
+            <div class="" v-if="item.status != undefined">
               <event-status-icon :status="item.status"></event-status-icon>
             </div>
           </button>

src/views/Login/Login.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col items-center justify-center h-screen bg-base-self bg-white">
+  <div class="flex flex-col items-center justify-center h-screen bg-systemBackground-lightSecondary">
     <div class="flex flex-col items-center pb-10">
       <div class="w-[18vw] sm:h-auto" style="min-width: 250px">
         <img src="../../assets/images/logo.png" alt="" class="filter drop-shadow" />
       </div>
-      <form @submit.prevent="login" class="grid gap-4 place-items-center" style="width: 20vw; min-width: 300px">
+      <!-- <form @submit.prevent="login" class="grid gap-4 place-items-center" style="width: 20vw; min-width: 300px">
         <InputBase
           placeholder="ID"
           hint="学号"
@@ -23,17 +23,17 @@
           v-model:content="accountInput.password"
         />
         <button class="w-full btn bg-gradient-to-b from-primary/80 to-primary text-primaryContent shadow-md" type="submit">登入</button>
-      </form>
-      <button
-        class="w-full btn bg-gradient-to-b from-primary/80 to-primary text-primaryContent shadow-md mt-10"
+      </form> -->
+      <!-- <button
+        class="w-full btn bg-gradient-to-b from-primary/80 to-primary text-primaryContent shadow-md mt-10 w-84"
         type="submit"
         @click="onSighInWithLogto"
       >
         <div class="flex items-center gap-2">
           <img src="../../assets/images/logto.svg" alt="" class="h-6 w-6" />
-          <div>使用连接器登入</div>
+          <div>登入</div>
         </div>
-      </button>
+      </button> -->
     </div>
   </div>
 </template>
@@ -98,4 +98,7 @@ const login = async () => {
     // console.log(error.response.data)
   }
 }
+onMounted(() => {
+  onSighInWithLogto()
+})
 </script>