#24

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import NotFound from '@/pages/NotFound'
 import PostDetailPage from '@/pages/posts/PostDetailPage'
 import PostListPage from '@/pages/posts/PostListPage'
 import PostNewPage from '@/pages/posts/PostNewPage'
+import ServiceUnavailable from '@/pages/ServiceUnavailable'
 import SettingPage from '@/pages/users/SettingPage'
 import WikiDetailPage from '@/pages/wiki/WikiDetailPage'
 import WikiDiffPage from '@/pages/wiki/WikiDiffPage'
@@ -24,6 +25,7 @@ import type { User } from '@/types'
 
 export default () => {
   const [user, setUser] = useState<User | null> (null)
+  const [status, setStatus] = useState (200)
 
   useEffect (() => {
     const createUser = async () => {
@@ -40,18 +42,32 @@ export default () => {
     if (code)
       {
 	void (async () => {
-	  const res = await axios.post (`${ API_BASE_URL }/users/verify`, { code })
-	  const data = res.data as { valid: boolean, user: any }
-	  if (data.valid)
-	    setUser (toCamel (data.user, { deep: true }))
-	  else
-	    await createUser ()
+	  try
+	  {
+	    const res = await axios.post (`${ API_BASE_URL }/users/verify`, { code })
+	    const data = res.data as { valid: boolean, user: any }
+	    if (data.valid)
+	      setUser (toCamel (data.user, { deep: true }))
+	    else
+	      await createUser ()
+	  }
+	  catch (err)
+	  {
+	    if (axios.isAxiosError (err))
+	      setStatus (err.status ?? 200)
+	  }
 	}) ()
       }
     else
       createUser ()
   }, [])
 
+  switch (status)
+  {
+  case 503:
+    return <ServiceUnavailable />
+  }
+
   return (
       <>
 	<Router>
@@ -61,13 +77,13 @@ export default () => {
 	      <Routes>
 		<Route path="/" element={<Navigate to="/posts" replace />} />
 		<Route path="/posts" element={<PostListPage />} />
-		<Route path="/posts/new" element={<PostNewPage />} />
+		<Route path="/posts/new" element={<PostNewPage user={user} />} />
 		<Route path="/posts/:id" element={<PostDetailPage user={user} />} />
 		<Route path="/tags/nico" element={<NicoTagListPage user={user} />} />
 		<Route path="/wiki" element={<WikiSearchPage />} />
 		<Route path="/wiki/:title" element={<WikiDetailPage />} />
-		<Route path="/wiki/new" element={<WikiNewPage />} />
-		<Route path="/wiki/:id/edit" element={<WikiEditPage />} />
+		<Route path="/wiki/new" element={<WikiNewPage user={user} />} />
+		<Route path="/wiki/:id/edit" element={<WikiEditPage user={user} />} />
 		<Route path="/wiki/:id/diff" element={<WikiDiffPage />} />
 		<Route path="/wiki/changes" element={<WikiHistoryPage />} />
 		<Route path="/users/settings" element={<SettingPage user={user} setUser={setUser} />} />

frontend/src/components/ErrorScreen.tsx

@@ -0,0 +1,48 @@
+import { Helmet } from 'react-helmet-async'
+
+import errorImg from '@/assets/images/not-found.gif'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+
+type Props = { status: number }
+
+
+export default ({ status }: Props) => {
+  const [message, rightMsg, leftMsg]: [string, string, string] = (() => {
+    switch (status)
+    {
+    case 403:
+      return ['権限ないよ（笑）', '帰れ！', '帰れ！']
+    case 404:
+      return ['ページないよ（笑）', '帰れ！', '帰れ！']
+    case 500:
+      return ['鯖でエラー出たって（嘲笑）', '管理人に', '聯絡を！']
+    case 503:
+      return ['鯖死んでるよ（泣）', '管理人に', '聯絡を！']
+    default:
+      throw new Error
+    }
+  }) ()
+
+  const title = message.replaceAll ('（', ' (').replaceAll ('）', ')')
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <meta name="robots" content="noindex" />
+	  <title>{title} | {SITE_TITLE}</title>
+	</Helmet>
+	<div className="text-6xl font-bold text-transparent whitespace-nowrap
+			bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
+			bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
+			space-y-6 text-center flex flex-col justify-center items-center">
+	  <p>{status}</p>
+	  <div className="flex space-x-4">
+	    <p style={{ writingMode: 'vertical-rl' }}>{leftMsg}</p>
+	    <img src={errorImg} alt="逃げたギター" />
+	    <p style={{ writingMode: 'vertical-rl' }}>{rightMsg}</p>
+	  </div>
+	  <p className="mr-[-.5em]">{message}</p>
+	</div>
+      </MainArea>)
+}

frontend/src/pages/Forbidden.tsx

@@ -0,0 +1,4 @@
+import ErrorScreen from '@/components/ErrorScreen'
+
+
+export default () => <ErrorScreen status={403} />

frontend/src/pages/NotFound.tsx

@@ -1,26 +1,4 @@
-import { Helmet } from 'react-helmet-async'
-
-import notFoundImg from '@/assets/images/not-found.gif'
-import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import ErrorScreen from '@/components/ErrorScreen'
 
 
-export default () => (
-    <MainArea>
-      <Helmet>
-	<meta name="robots" content="noindex" />
-	<title>ページないよ (笑) | {SITE_TITLE}</title>
-      </Helmet>
-      <div className="text-6xl font-bold text-transparent whitespace-nowrap
-		      bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
-		      bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
-		      space-y-6 text-center flex flex-col justify-center items-center">
-	<p>404</p>
-	<div className="flex space-x-4">
-	  <p style={{ writingMode: 'vertical-rl' }}>帰れ！</p>
-	  <img src={notFoundImg} alt="404" />
-	  <p style={{ writingMode: 'vertical-rl' }}>帰れ！</p>
-	</div>
-	<p className="mr-[-.5em]">ページないよ（笑）</p>
-      </div>
-    </MainArea>)
+export default () => <ErrorScreen status={404} />

frontend/src/pages/ServiceUnavailable.tsx

@@ -0,0 +1,4 @@
+import ErrorScreen from '@/components/ErrorScreen'
+
+
+export default () => <ErrorScreen status={503} />

frontend/src/pages/posts/PostDetailPage.tsx

@@ -14,6 +14,7 @@ import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
+import ServiceUnavailable from '@/pages/ServiceUnavailable'
 
 import type { Post, User } from '@/types'
 
@@ -25,7 +26,7 @@ export default ({ user }: Props) => {
 
   const [post, setPost] = useState<Post | null> (null)
   const [editing, setEditing] = useState (true)
-  const [found, setFound] = useState (true)
+  const [status, setStatus] = useState (200)
 
   const changeViewedFlg = async () => {
     const url = `${ API_BASE_URL }/posts/${ id }/viewed`
@@ -59,8 +60,8 @@ export default ({ user }: Props) => {
       }
       catch (err)
       {
-	if (err.status === 404)
-	  setFound (false)
+	if (axios.isAxiosError (err))
+	  setStatus (err.status ?? 200)
       }
     }) ()
   }, [id])
@@ -74,8 +75,13 @@ export default ({ user }: Props) => {
       setEditing (true)
   }, [editing])
 
-  if (!(found))
+  switch (status)
+  {
+  case 404:
     return <NotFound />
+  case 503:
+    return <ServiceUnavailable />
+  }
 
   const url = post ? new URL (post.url) : null
   const nicoFlg = url?.hostname.split ('.').slice (-2).join ('.') === 'nicovideo.jp'
@@ -88,8 +94,8 @@ export default ({ user }: Props) => {
   return (
       <>
 	<Helmet>
-	  {(post?.thumbnail || post?.thumbnailBase) &&
-	      <meta name="thumbnail" content={post.thumbnail || post.thumbnailBase} />}
+	  {(post?.thumbnail || post?.thumbnailBase) && (
+	      <meta name="thumbnail" content={post.thumbnail || post.thumbnailBase} />)}
 	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
 	</Helmet>
 	<TagDetailSidebar post={post} />

frontend/src/pages/posts/PostNewPage.tsx

@@ -11,8 +11,17 @@ import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
+import Forbidden from '@/pages/Forbidden'
+
+import type { User } from '@/types'
+
+type Props = { user: User | null }
+
+
+export default ({ user }: Props) => {
+  if (!(['admin', 'member'].some (r => user?.role === r)))
+    return <Forbidden />
 
-export default () => {
   const navigate = useNavigate ()
 
   const [title, setTitle] = useState ('')

frontend/src/pages/wiki/WikiEditPage.tsx

@@ -8,15 +8,21 @@ import { useParams, useNavigate } from 'react-router-dom'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
+import Forbidden from '@/pages/Forbidden'
 
 import 'react-markdown-editor-lite/lib/index.css'
 
-import type { WikiPage } from '@/types'
+import type { User, WikiPage } from '@/types'
 
 const mdParser = new MarkdownIt
 
+type Props = { user: User | null }
+
+
+export default ({ user }: Props) => {
+  if (!(['admin', 'member'].some (r => user?.role === r)))
+    return <Forbidden />
 
-export default () => {
   const { id } = useParams ()
 
   const navigate = useNavigate ()

frontend/src/pages/wiki/WikiNewPage.tsx

@@ -8,15 +8,21 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
+import Forbidden from '@/pages/Forbidden'
 
 import 'react-markdown-editor-lite/lib/index.css'
 
-import type { WikiPage } from '@/types'
+import type { User, WikiPage } from '@/types'
 
 const mdParser = new MarkdownIt
 
+type Props = { user: User | null }
+
+
+export default ({ user }: Props) => {
+  if (!(['admin', 'member'].some (r => user?.role === r)))
+    return <Forbidden />
 
-export default () => {
   const location = useLocation ()
   const navigate = useNavigate ()