refactor: move components to pages

src/components/Header/index.tsx

@@ -4,11 +4,13 @@ import Nav from 'react-bootstrap/Nav'
 import Navbar from 'react-bootstrap/Navbar'
 import { Link, useLocation } from 'react-router-dom'
 import { initTheme, toggleTheme } from 'utils/theme'
+import { useAuth } from 'hooks/useAuth'
 
 initTheme()
 
 const Index: React.FC = () => {
   const location = useLocation()
+  const { user } = useAuth()
   return (
     <header className='border-bottom'>
       <Navbar expand='lg' className='bg-body-tertiary'>
@@ -38,25 +40,27 @@ const Index: React.FC = () => {
               >
                 Toggle Theme
               </Button>
-              <Link to={`/login?from=${location.pathname}`}>
-                <Button type='button' className='btn my-2 my-sm-0 mx-1'>
-                  Login
-                </Button>
-              </Link>
-              <Link to='/logout'>
-                <Button
-                  type='button'
-                  className='btn btn-danger my-2 my-sm-0 mx-1'
-                >
-                  Logout
-                </Button>
-              </Link>
-              <Link to='/signup'>
+              {user ? (
+                <Link to='/logout'>
+                  <Button
+                    type='button'
+                    className='btn btn-danger my-2 my-sm-0 mx-1'
+                  >
+                    Logout
+                  </Button>
+                </Link>)
+                : (
+                  <Link to={`/login?from=${location.pathname}`}>
+                    <Button type='button' className='btn my-2 my-sm-0 mx-1'>
+                      Login
+                    </Button>
+                  </Link>)}
+              <Link to='/register'>
                 <Button
                   type='button'
                   className='btn btn-warning my-2 my-sm-0 mx-1'
                 >
-                  Sign-up
+                  Register
                 </Button>
               </Link>
             </Nav>

src/pages/Login/index.tsx

@@ -1,9 +1,101 @@
-import Login from 'components/Login'
 import PageContainer from 'components/PageContainer'
 
+import { useRequest } from 'ahooks'
+import { useAuth } from 'hooks/useAuth'
+import { useState } from 'react'
+import { Col, Row } from 'react-bootstrap'
+import Button from 'react-bootstrap/Button'
+import Form from 'react-bootstrap/Form'
+import { Navigate, useSearchParams } from 'react-router-dom'
+import { DOMAIN_HOST } from 'utils/constants'
+import Backend from 'utils/service'
+
+const LoginForm: React.FC = () => {
+  const { user } = useAuth()
+  const [searchParams] = useSearchParams()
+  const [username, setUsername] = useState('demo')
+  const [password, setPassword] = useState('123456')
+  const { run: login } = useRequest(
+    async () => {
+      const from = searchParams.get('from') ?? '/'
+      return Backend.auth.v1AuthLoginCreate(
+        {
+          username,
+          password
+        },
+        {
+          redirect_url: `${DOMAIN_HOST}${from}`
+        }
+      )
+    },
+    {
+      manual: true,
+      onSuccess: res => {
+        if (res.data.redirect_url) {
+          window.location.href = res.data.redirect_url
+        }
+      }
+    }
+  )
+  return user ? (
+    <Navigate to='/' />
+  ) : (
+    <>
+      <div className='text-center'>
+        <h1>Login</h1>
+      </div>
+      <Col xs={12} md={8} className="mx-auto mt-3">
+        <Form>
+          <Form.Group as={Row} className='mb-3' controlId='formBasicEmail'>
+            <Form.Label column sm={2}>Username</Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                required
+                type='text'
+                placeholder='Username'
+                defaultValue={username}
+                onChange={e => {
+                  setUsername(e.target.value)
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className='mb-3' controlId='formBasicPassword'>
+            <Form.Label column sm={2}>Password</Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                required
+                type='password'
+                placeholder='Password'
+                defaultValue={username}
+                onChange={e => {
+                  setPassword(e.target.value)
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3">
+            <Col sm={{ span: 10, offset: 2 }}>
+              <Button
+                variant='primary'
+                type='button'
+                onClick={(): void => {
+                  login()
+                }}
+              >
+                Submit
+              </Button>
+            </Col>
+          </Form.Group>
+        </Form>
+      </Col>
+    </>
+  )
+}
+
 const Index: React.FC = () => (
   <PageContainer>
-    <Login />
+    <LoginForm />
   </PageContainer>
 )
 

src/pages/Logout/index.tsx

@@ -1,6 +1,36 @@
-import Logout from 'components/Logout'
 import PageContainer from 'components/PageContainer'
 
+import { useRequest } from 'ahooks'
+import { useAuth } from 'hooks/useAuth'
+import type React from 'react'
+import { Navigate, useNavigate } from 'react-router-dom'
+import Backend from 'utils/service'
+
+const Logout: React.FC = () => {
+  const navigate = useNavigate()
+  const { user, refreshAsync } = useAuth()
+
+  useRequest(
+    async () => {
+      if (user) {
+        return Backend.auth.v1AuthLogoutCreate()
+      }
+      return {}
+    },
+    {
+      onSuccess: () => {
+        refreshAsync?.().then(() => {
+          navigate('/login', { replace: true })
+        })
+      },
+      onError: () => {}
+    }
+  )
+
+  return user ? <div>Logging out</div> : <Navigate to='/login' replace />
+}
+
+
 const Index: React.FC = () => (
   <PageContainer>
     <Logout />

src/pages/SignUp/index.tsx → src/pages/Register/index.tsx

@@ -1,9 +1,8 @@
 import PageContainer from 'components/PageContainer'
-import SignUp from 'components/SignUp'
 
 const Index: React.FC = () => (
   <PageContainer>
-    <SignUp />
+    <div>Register Page</div>
   </PageContainer>
 )
 

src/routes.tsx

@@ -4,7 +4,7 @@ import Login from 'pages/Login'
 import Logout from 'pages/Logout'
 import Main from 'pages/Main'
 import NotFound from 'pages/NotFound'
-import SignUp from 'pages/SignUp'
+import Register from 'pages/Register'
 import type { RouteObject } from 'react-router-dom'
 
 const children: RouteObject[] = [
@@ -17,8 +17,8 @@ const children: RouteObject[] = [
     element: <Logout />
   },
   {
-    path: '/signup',
-    element: <SignUp />
+    path: '/register',
+    element: <Register />
   },
   {
     path: '/',

src/utils/theme.ts

@@ -4,8 +4,6 @@ export const THEME = {
   DARK: 'dark'
 }
 
-const IS_SERVER = typeof window === 'undefined'
-
 const getDefaultTheme = () =>
   window.matchMedia('(prefers-color-scheme: dark)').matches
     ? THEME.DARK
@@ -22,18 +20,15 @@ const getPreferredTheme = () => {
 }
 
 export function setTheme(theme: string) {
-  if (IS_SERVER) return
   document.documentElement.dataset.bsTheme = theme
   localStorage.setItem('theme', theme)
 }
 
 export function resetTheme() {
-  if (IS_SERVER) return
   setTheme(getDefaultTheme())
 }
 
 export function toggleTheme() {
-  if (IS_SERVER) return
   const nextTheme =
     document.documentElement.dataset.bsTheme === THEME.DARK
       ? THEME.LIGHT
@@ -42,6 +37,5 @@ export function toggleTheme() {
 }
 
 export function initTheme() {
-  if (IS_SERVER) return
   setTheme(getPreferredTheme())
 }