#24

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 ()