#24

frontend/package-lock.json

@@ -12,7 +12,7 @@
         "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-switch": "^1.2.5",
         "@radix-ui/react-toast": "^1.2.14",
-        "axios": "^1.9.0",
+        "axios": "^1.10.0",
         "camelcase-keys": "^9.1.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -29,7 +29,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
-        "@types/axios": "^0.9.36",
+        "@types/axios": "^0.14.4",
         "@types/markdown-it": "^14.1.2",
         "@types/node": "^24.0.13",
         "@types/react": "^19.1.2",
@@ -1897,11 +1897,15 @@
       ]
     },
     "node_modules/@types/axios": {
-      "version": "0.9.36",
-      "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.9.36.tgz",
-      "integrity": "sha512-NLOpedx9o+rxo/X5ChbdiX6mS1atE4WHmEEIcR9NLenRVa5HoVjAvjafwU3FPTqnZEstpoqCaW7fagqSoTDNeg==",
+      "version": "0.14.4",
+      "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.4.tgz",
+      "integrity": "sha512-9JgOaunvQdsQ/qW2OPmE5+hCeUB52lQSolecrFrthct55QekhmXEwT203s20RL+UHtCQc15y3VXpby9E7Kkh/g==",
+      "deprecated": "This is a stub types definition. axios provides its own type definitions, so you do not need this installed.",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "axios": "*"
+      }
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -2509,9 +2513,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
-      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
+      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",

frontend/package.json

@@ -14,7 +14,7 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-toast": "^1.2.14",
-    "axios": "^1.9.0",
+    "axios": "^1.10.0",
     "camelcase-keys": "^9.1.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
-    "@types/axios": "^0.9.36",
+    "@types/axios": "^0.14.4",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^24.0.13",
     "@types/react": "^19.1.2",

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 ErrorScreen from '@/components/ErrorScreen'
 
-import notFoundImg from '@/assets/images/not-found.gif'
-import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
 
-
-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 ()