✨ Auth check

🐛 Fix auth related bugs

src/components/CapAppBar.tsx

@@ -1,12 +1,17 @@
-import { AppBar, Box, IconButton, Toolbar, Typography } from '@mui/material'
+import { useUserStore } from '@/services/user'
+import { AppBar, Avatar, Box, IconButton, Toolbar, Typography, useTheme } from '@mui/material'
 import MenuIcon from '@mui/icons-material/Menu'
 import AccountCircle from '@mui/icons-material/AccountCircle'
 import Link from 'next/link'
+import { getAttachmentUrl } from '@/services/network'
 
 export function CapAppBar() {
+  const userStore = useUserStore()
+  const theme = useTheme()
+
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="static" elevation={0} color="transparent">
+      <AppBar position="static" elevation={0} color={'transparent'}>
         <Toolbar>
           <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
             <MenuIcon />
@@ -17,7 +22,7 @@ export function CapAppBar() {
             </Typography>
           </Link>
 
-          <Link href="/auth/login" passHref>
+          <Link href={userStore.account ? '/users/me' : '/auth/login'} passHref>
             <IconButton
               size="large"
               aria-label="account of current user"
@@ -25,7 +30,13 @@ export function CapAppBar() {
               aria-haspopup="true"
               color="inherit"
             >
-              <AccountCircle />
+              {userStore.account ? (
+                <Avatar sx={{ backgroundColor: 'transparent' }} src={getAttachmentUrl(userStore.account.avatar)} />
+              ) : (
+                <Avatar sx={{ backgroundColor: 'transparent' }}>
+                  <AccountCircle sx={{ color: theme.palette.text.primary }} />
+                </Avatar>
+              )}
             </IconButton>
           </Link>
         </Toolbar>

src/pages/auth/login.tsx

@@ -2,6 +2,7 @@ import { SnLoginCheckpoint } from '@/components/auth/SnLoginCheckpoint'
 import { SnLoginRouter } from '@/components/auth/SnLoginRouter'
 import { SnLoginStart } from '@/components/auth/SnLoginStart'
 import { SnAuthFactor, SnAuthTicket } from '@/services/auth'
+import { useUserStore } from '@/services/user'
 import { Box, Container, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
@@ -13,6 +14,27 @@ export default function Login() {
   const [factor, setFactor] = useState<SnAuthFactor | null>(null)
 
   const router = useRouter()
+  const userStore = useUserStore()
+
+  function doCallback() {
+    if (router.query['redirect_url']) {
+      let redirectUrl: string
+      if (Array.isArray(router.query['redirect_url'])) {
+        redirectUrl = router.query['redirect_url'][0]
+      } else {
+        redirectUrl = router.query['redirect_url'].toString()
+      }
+
+      if (redirectUrl.startsWith('/')) {
+        router.push(redirectUrl)
+      } else {
+        window.open(redirectUrl, '_self')
+      }
+      return
+    }
+
+    router.push('/users/me')
+  }
 
   function renderForm() {
     switch (period) {
@@ -38,7 +60,8 @@ export default function Login() {
                 setPeriod(1)
                 return
               }
-              router.push('/')
+              userStore.fetchUser()
+              doCallback()
             }}
           />
         )

src/pages/users/me.tsx

@@ -0,0 +1,12 @@
+import { checkAuthenticatedClient, redirectToLogin } from '@/services/auth'
+import { Container } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+export default function UserItself() {
+  useEffect(() => {
+    if (!checkAuthenticatedClient()) redirectToLogin()
+  }, [])
+
+  return <Container></Container>
+}

src/services/auth.ts

@@ -1,3 +1,5 @@
+import { hasCookie } from 'cookies-next/client'
+
 export interface SnAuthResult {
   isFinished: boolean
   ticket: SnAuthTicket
@@ -32,3 +34,11 @@ export interface SnAuthFactor {
   config?: Record<string, any> | null
   accountId?: number | null
 }
+
+export function checkAuthenticatedClient(): boolean {
+  return !!hasCookie('nex_user_atk')
+}
+
+export function redirectToLogin() {
+  window.open('/auth/login?redirect_uri=' + encodeURIComponent(window.location.pathname), '_self')
+}

src/services/network.ts

@@ -39,8 +39,8 @@ async function refreshToken(): Promise<string | undefined> {
     },
     { baseURL },
   )
-  const atk: string = resp.data['accessToken']
-  const rtk: string = resp.data['refreshToken']
+  const atk: string = resp.data['access_token']
+  const rtk: string = resp.data['refresh_token']
   setCookie('nex_user_atk', atk, { path: '/', maxAge: 2592000 })
   setCookie('nex_user_rtk', rtk, { path: '/', maxAge: 2592000 })
 
@@ -70,3 +70,8 @@ function isTokenExpired(token: string): boolean {
     return true
   }
 }
+
+export function getAttachmentUrl(identifer: string): string {
+  if (identifer.startsWith('http')) return identifer
+  return `${baseURL}/cgi/uc/attachments/${identifer}`
+}