Fix callback url

Add env for production
Update login style

.env

@@ -1,5 +1,5 @@
 VITE_LOGTO_CALLBACK_URL=http://localhost:5173/callback
-VITE_LOGTO_REDIRECT_URI=http://localhost:5173
+VITE_LOGTO_REDIRECT_URL=http://localhost:5173
 VITE_LOGTO_ENDPOINT=https://auth.app.nbtca.space
 VITE_LOGTO_APP_ID=h2ejkkfwdtjjpemb021ro
 VITE_LOGTO_RESOURCE=https://api.nbtca.space/v2

.env.production

@@ -0,0 +1,5 @@
+VITE_LOGTO_CALLBACK_URL=https://repair.nbtca.space/callback
+VITE_LOGTO_REDIRECT_URL=https://repair.nbtca.space:5173
+VITE_LOGTO_ENDPOINT=https://auth.app.nbtca.space
+VITE_LOGTO_APP_ID=h2ejkkfwdtjjpemb021ro
+VITE_LOGTO_RESOURCE=https://api.nbtca.space/v2

src/components/LogoutButton.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import router from "@/router"
 import { useAccountStore } from "@/stores/account"
 import { useLogto } from "@logto/vue"
 
@@ -9,7 +10,7 @@ const logOut = () => {
   const store = useAccountStore()
   store.account = {}
   store.token = ""
-  signIn(import.meta.env.VITE_LOGTO_CALLBACK_URL)
+  signOut(import.meta.env.VITE_LOGTO_REDIRECT_URL)
 }
 </script>
 <template>

src/components/Menu/Menu.vue

@@ -76,11 +76,12 @@
           </div>
         </div>
       </div>
-      <div class="flex flex-row">
-        <button class="p-2 rounded" @click="accountSetting">
+      <div class="flex flex-row items-center gap-4 text-sm">
+        <button class="rounded-full flex items-center text-blue-600 px-2 py-1" @click="accountSetting">
           <CogIcon class="h-6"></CogIcon>
+          设置
         </button>
-        <logout-button class="p-2 rounded"> logout </logout-button>
+        <logout-button class="p-2 rounded"> 登出 </logout-button>
       </div>
     </div>
     <BottomDialog ref="bottomDialog">

src/composables/LogOut.ts

@@ -1,14 +1,10 @@
 import router from "@/router"
 import { useAccountStore } from "@/stores/account"
-import { useLogto } from "@logto/vue"
 
 const logOut = () => {
   const store = useAccountStore()
   store.account = {}
   store.token = ""
-  const { signOut } = useLogto()
-
-  signOut(import.meta.env.VITE_LOGTO_REDIRECT_URL)
 }
 
 export default logOut

src/router/index.ts

@@ -20,7 +20,6 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  // console.log(to)
   // const { isAuthenticated } = useLogto()
 
   // const target = to.matched[to.matched.length - 1]
@@ -42,7 +41,7 @@ router.beforeEach((to, from, next) => {
     return
   }
   if (!token) {
-    if (to.path === "/login") {
+    if (to.path === "/login" || to.path === "/callback") {
       next()
     } else {
       next("/login")

src/views/CallbackView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import logOut from "@/composables/LogOut"
 import type Member from "@/models/member"
 import router from "@/router"
 import { useAccountStore } from "@/stores/account"
@@ -8,11 +9,9 @@ import { ref, onMounted } from "vue"
 
 const store = useAccountStore()
 
-const { signIn, isAuthenticated, fetchUserInfo, getAccessToken } = useLogto()
+const { signIn, signOut, isAuthenticated, fetchUserInfo, getAccessToken } = useLogto()
 const authenticateFailed = ref(false)
 const { isLoading } = useHandleSignInCallback(async () => {
-  const info = await fetchUserInfo()
-
   const token = await getAccessToken(import.meta.env.VITE_LOGTO_RESOURCE)
 
   const res = await window.fetch("/api/member/token/logto", {
@@ -33,7 +32,7 @@ const { isLoading } = useHandleSignInCallback(async () => {
     }
   } else {
     setTimeout(() => {
-      router.push("/login")
+      signOut(import.meta.env.VITE_LOGTO_REDIRECT_URL)
     }, 2000)
   }
 })

src/views/Events/EventActions.ts

@@ -270,10 +270,10 @@ const judgeSubmit = async (event: Event) => {
       },
     ],
     acceptAction: () => {
-      return EventService.close(event.eventId)
+      return EventService.close(event.eventId as number)
     },
     declineAction: () => {
-      return EventService.rejectCommit(event.eventId)
+      return EventService.rejectCommit(event.eventId as number)
     },
   })
 }

src/views/Login/Login.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col items-center h-screen bg-base-self bg-white">
-    <div class="flex flex-col items-center sm:mt-16 xl:mt-28">
-      <div class="py-[5vh] h-80 w-[18vw] sm:h-auto" style="min-width: 250px">
+  <div class="flex flex-col items-center justify-center h-screen bg-base-self bg-white">
+    <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-6 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="学号"
@@ -25,7 +25,7 @@
         <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"
+        class="w-full btn bg-gradient-to-b from-primary/80 to-primary text-primaryContent shadow-md mt-10"
         type="submit"
         @click="onSighInWithLogto"
       >
@@ -56,7 +56,7 @@ const accountInput = ref({
 const isIDValid = ref("")
 const isPasswordValid = ref("")
 
-const { signIn } = useLogto()
+const { signIn, isAuthenticated } = useLogto()
 const onSighInWithLogto = () => {
   signIn(import.meta.env.VITE_LOGTO_CALLBACK_URL)
 }

src/views/index.vue

@@ -16,13 +16,66 @@
 <script setup lang="ts">
 import Menu from "@/components/Menu/Menu.vue"
 import { ref } from "@vue/reactivity"
+import { onMounted } from "vue"
 const isSafari = ref(false)
-
 var userAgent = navigator.userAgent
 isSafari.value = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1
 
 let vh = window.innerHeight * 0.01
 document.documentElement.style.setProperty("---vh", `${vh}px`)
+
+// const urlBase64ToUint8Array = (base64String: string) => {
+//   const padding = "=".repeat((4 - (base64String.length % 4)) % 4)
+//   const base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/")
+//   const rawData = window.atob(base64)
+//   return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)))
+// }
+
+// const subscribe = () => {
+//   navigator.serviceWorker.ready
+//     .then(registration => {
+//       const vapidPublicKey = "BGtkbcjrO12YMoDuq2sCQeHlu47uPx3SHTgFKZFYiBW8Qr0D9vgyZSZPdw6_4ZFEI9Snk1VEAj2qTYI1I1YxBXE"
+
+//       return registration.pushManager.subscribe({
+//         userVisibleOnly: true,
+//         applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
+//       })
+//     })
+//     .then(subscription => {
+//       console.log(
+//         JSON.stringify({
+//           subscription: subscription,
+//         })
+//       )
+//     })
+//     .catch(err => console.error(err))
+// }
+
+// onMounted(async () => {
+// const { getAccessToken } = useLogto()
+// const token = await getAccessToken("https://api.nbtca.space/v2")
+// console.log(token)
+// if ("serviceWorker" in navigator) {
+//   navigator.serviceWorker
+//     .register(new URL("../sw.ts", import.meta.url).href)
+//     .then(registration => {
+//       console.log(registration)
+//       return registration.pushManager.getSubscription()
+//       return registration.pushManager.getSubscription()
+//     })
+//     .then(function (subscription) {
+//       if (!subscription) {
+//         subscribe()
+//       } else {
+//         console.log(
+//           JSON.stringify({
+//             subscription: subscription,
+//           })
+//         )
+//       }
+//     })
+// }
+// })
 </script>
 
 <style>