#90

frontend/src/components/PostEditForm.tsx

@@ -10,6 +10,7 @@ import { toast } from '@/components/ui/use-toast'
 import { isApiError } from '@/lib/api'
 import { extractValidationError } from '@/lib/apiErrors'
 import { updatePost } from '@/lib/posts'
+import { inputClass } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
@@ -150,21 +151,25 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	  <input
 	      type="text"
 	      disabled={disabled}
-	      className="w-full border rounded p-2"
+	      className={inputClass ()}
 	      value={title ?? ''}
 	      onChange={ev => setTitle (ev.target.value)}/>
 	</div>
 
 	{/* 親投稿 */}
 	<div>
-	  <Label>親投稿</Label>
+	  <Label invalid={fieldErrors.parentPostIds && fieldErrors.parentPostIds.length > 0}>
+	    親投稿
+	  </Label>
 	  <input
 	      type="text"
 	      disabled={disabled}
 	      value={parentPostIds}
 	      onChange={e => setParentPostIds (e.target.value)}
-	      className="w-full border p-2 rounded"/>
-	  <FieldError messages={fieldErrors.url}/>
+	      alia-invalid={fieldErrors.parentPostIds && fieldErrors.parentPostIds.length > 0}
+	      className={inputClass (fieldErrors.parentPostIds
+				     && fieldErrors.parentPostIds.length > 0)}/>
+	  <FieldError messages={fieldErrors.parentPostIds}/>
 	</div>
 
 	{/* タグ */}
@@ -181,8 +186,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	    setOriginalCreatedFrom={setOriginalCreatedFrom}
 	    originalCreatedBefore={originalCreatedBefore}
 	    setOriginalCreatedBefore={setOriginalCreatedBefore}
-	    fromErrors={fieldErrors.originalCreatedFrom}
-	    beforeErrors={fieldErrors.originalCreatedBefore}/>
+	    errors={fieldErrors.originalCreatedAt}/>
 
 	{/* 送信 */}
 	<Button

frontend/src/components/PostFormTagsArea.tsx

@@ -76,11 +76,12 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
 
   return (
       <div className="relative w-full">
-	<Label>タグ</Label>
+	<Label invalid={errors && errors.length > 0}>タグ</Label>
 	<TextArea
 	    {...rest}
 	    ref={ref}
 	    value={tags}
+	    invalid={errors && errors.length > 0}
 	    onChange={ev => setTags (ev.target.value)}
 	    onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
 	      const pos = (ev.target as HTMLTextAreaElement).selectionStart

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -1,4 +1,5 @@
 import DateTimeField from '@/components/common/DateTimeField'
+import { FieldError } from '@/components/common/FieldError'
 import Label from '@/components/common/Label'
 import { Button } from '@/components/ui/button'
 
@@ -10,23 +11,26 @@ type Props = {
     setOriginalCreatedFrom:   (x: string | null) => void
     originalCreatedBefore:    string | null
     setOriginalCreatedBefore: (x: string | null) => void
-    fromErrors?:              string[]
-    beforeErrors?:            string[] }
+    errors?:                  string[] }
 
 
-const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
-		   originalCreatedFrom,
-		   setOriginalCreatedFrom,
-		   originalCreatedBefore,
-		   setOriginalCreatedBefore }) => (
+const PostOriginalCreatedTimeField: FC<Props> = (
+    { disabled,
+      originalCreatedFrom,
+      setOriginalCreatedFrom,
+      originalCreatedBefore,
+      setOriginalCreatedBefore,
+      errors }: Props,
+) => (
     <div>
-      <Label>オリジナルの作成日時</Label>
+      <Label invalid={errors && errors.length > 0}>オリジナルの作成日時</Label>
 
       <div className="my-1 flex">
 	<div className="w-80">
 	  <DateTimeField
 	      className="mr-2"
 	      disabled={disabled ?? false}
+	      aria-invalid={errors && errors.length > 0}
 	      value={originalCreatedFrom ?? undefined}
 	      onChange={setOriginalCreatedFrom}
 	      onBlur={ev => {
@@ -54,13 +58,13 @@ const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 	  </Button>
 	</div>
       </div>
-      <FieldError messages={fromErrors}/>
 
       <div className="my-1 flex">
 	<div className="w-80">
 	  <DateTimeField
 	      className="mr-2"
 	      disabled={disabled}
+	      aria-invalid={errors && errors.length > 0}
 	      value={originalCreatedBefore ?? undefined}
 	      onChange={setOriginalCreatedBefore}/>
 	  より前
@@ -76,7 +80,8 @@ const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 	  </Button>
 	</div>
       </div>
-      <FieldError messages={beforeErrors}/>
+
+      <FieldError messages={errors}/>
     </div>)
 
 export default PostOriginalCreatedTimeField

frontend/src/components/common/FieldError.tsx

@@ -8,7 +8,7 @@ export const FieldError: FC<Props> = ({ messages }: Props) => {
     return null
 
   return (
-      <ul className="mt-1 space-y-1 text-red-600 dark:text-red-400">
+      <ul className="mt-1 space-y-1 text-red-700 dark:text-red-300">
 	{messages.map ((message, i) => <li key={i}>{message}</li>)}
       </ul>)
 }

frontend/src/components/common/Label.tsx

@@ -1,32 +1,39 @@
 import React from 'react'
 
+import { cn } from '@/lib/utils'
+
 import type { FC } from 'react'
 
 type Props = { children:  React.ReactNode
-               checkBox?: { label:    string
-                            checked:  boolean
-                            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void } }
+	       checkBox?: { label:    string
+			    checked:  boolean
+			    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
+	       invalid?:  boolean }
 
 
-const Label: FC<Props> = ({ children, checkBox }) => {
+const Label: FC<Props> = ({ children, checkBox, invalid }: Props) => {
+  const labelClassName = cn ('block font-semibold mb-1',
+			     invalid && 'text-red-700 dark:text-red-300')
+
   if (!(checkBox))
     {
       return (
-          <label className="block font-semibold mb-1">
-            {children}
-          </label>)
+	  <label className={labelClassName}>
+	    {children}
+	  </label>)
     }
 
   return (
       <div className="flex gap-2 mb-1">
-        <label className="flex-1 block font-semibold">{children}</label>
-        <label className="flex items-center block gap-1">
-          <input type="checkbox"
-                 checked={checkBox.checked}
-                 onChange={checkBox.onChange}/>
-          {checkBox.label}
-        </label>
+	<label className="flex-1 block font-semibold">{children}</label>
+	<label className="flex items-center block gap-1">
+	  <input type="checkbox"
+		 checked={checkBox.checked}
+		 onChange={checkBox.onChange}/>
+	  {checkBox.label}
+	</label>
       </div>)
 }
 
+
 export default Label

frontend/src/components/common/TextArea.tsx

@@ -1,9 +1,25 @@
 import { forwardRef } from 'react'
 
+import { cn } from '@/lib/utils'
+
 import type { TextareaHTMLAttributes } from 'react'
 
-type Props = TextareaHTMLAttributes<HTMLTextAreaElement>
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & { invalid?: boolean }
 
 
-export default forwardRef<HTMLTextAreaElement, Props> (({ ...props }, ref) => (
-    <textarea ref={ref} className="rounded border w-full p-2 h-32" {...props}/>))
+export default forwardRef<HTMLTextAreaElement, Props> (
+    ({ className, invalid = false, ...props }, ref) => (
+	<textarea
+	    ref={ref}
+	    aria-invalid={invalid}
+	    className={cn ('rounded border w-full p-2 h-32',
+			   (invalid
+			    ? ['border-red-500 bg-red-50 text-red-900',
+			       'focus:border-red-500 focus:outline-none focus:ring-2',
+			       'foucs:ring-red-200',
+			       'dark:border-red-500 dark:bg-red-950/30 dark:text-red-100']
+			    : ['border-gray-300',
+			       'focus:border-blue-500 focus:outline-none focus:ring-2',
+			       'focus:ring-blue-200']),
+			   className)}
+	    {...props}/>))

frontend/src/lib/users.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+
+import { canEditContent } from '@/lib/users'
+
+import type { UserRole } from '@/types'
+
+const userWithRole = (role: UserRole) => ({ role })
+
+describe ('user permission helpers', () => {
+  it ('allows admins and members to edit content', () => {
+    expect (canEditContent (userWithRole ('admin'))).toBe (true)
+    expect (canEditContent (userWithRole ('member'))).toBe (true)
+  })
+
+  it ('does not allow guests or missing users to edit content', () => {
+    expect (canEditContent (userWithRole ('guest'))).toBe (false)
+    expect (canEditContent (null)).toBe (false)
+    expect (canEditContent (undefined)).toBe (false)
+  })
+})

frontend/src/lib/users.ts

@@ -0,0 +1,7 @@
+import type { User, UserRole } from '@/types'
+
+const CONTENT_EDITOR_ROLES: readonly UserRole[] = ['admin', 'member']
+
+export const canEditContent = (
+    user: Pick<User, 'role'> | null | undefined,
+): boolean => user != null && CONTENT_EDITOR_ROLES.includes (user.role)

frontend/src/lib/utils.ts

@@ -71,3 +71,15 @@ export const originalCreatedAtString = (
 	       .join (' '))
   return rtn === '〜' ? '年月日不詳' : rtn
 }
+
+
+export const inputClass = (invalid?: boolean, className?: string): string =>
+    cn ('w-full rounded border p-2',
+	(invalid
+	 ? ['border-red-500 bg-red-50 text-red-900',
+	    'placeholder:text-red-300',
+	    'focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-200',
+	    'dark:border-red-500 dark:bg-red-950/30 dark:text-red-100']
+	 : ['border-gray-300',
+	    'focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200']),
+	className)

frontend/src/pages/posts/PostDetailPage.tsx

@@ -15,6 +15,7 @@ import { SITE_TITLE } from '@/config'
 import { isApiError } from '@/lib/api'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
+import { canEditContent } from '@/lib/users'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
@@ -27,6 +28,7 @@ type Props = { user: User | null }
 
 
 const PostDetailPage: FC<Props> = ({ user }) => {
+  const editable = canEditContent (user)
   const { id } = useParams ()
   const postId = String (id ?? '')
   const postKey = postsKeys.show (postId)
@@ -163,7 +165,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		     ? <PostList posts={post.related}/>
 		     : 'まだないよ（笑）'}
 		  </Tab>
-		  {['admin', 'member'].some (r => user?.role === r) && (
+		  {editable && (
 		      <Tab name="編輯">
 			<PostEditForm
 			    post={post}

frontend/src/pages/posts/PostNewPage.tsx

@@ -12,6 +12,7 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPost } from '@/lib/api'
+import { canEditContent } from '@/lib/users'
 import Forbidden from '@/pages/Forbidden'
 
 import type { FC } from 'react'
@@ -22,7 +23,7 @@ type Props = { user: User | null }
 
 
 const PostNewPage: FC<Props> = ({ user }) => {
-  const editable = ['admin', 'member'].some (r => user?.role === r)
+  const editable = canEditContent (user)
 
   const navigate = useNavigate ()
 

frontend/src/pages/tags/NicoTagListPage.tsx

@@ -10,6 +10,7 @@ import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPut } from '@/lib/api'
+import { canEditContent } from '@/lib/users'
 
 import type { NicoTag, Tag, User } from '@/types'
 
@@ -25,7 +26,7 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 
   const loaderRef = useRef<HTMLDivElement | null> (null)
 
-  const memberFlg = ['admin', 'member'].some (r => user?.role === r)
+  const editable = canEditContent (user)
 
   const applyLoadedTags = useCallback ((data: { tags: NicoTag[]; nextCursor: string },
 					withCursor: boolean) => {
@@ -117,7 +118,7 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 		  <tr>
 		    <th className="p-2 text-left">ニコニコタグ</th>
 		    <th className="p-2 text-left">連携タグ</th>
-		    {memberFlg && <th></th>}
+		    {editable && <th></th>}
 		  </tr>
 		</thead>
 		<tbody>
@@ -139,7 +140,7 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
 					 withCount={false}/>
 			      </span>))}
 			</td>
-			{memberFlg && (
+			{editable && (
 			    <td className="p-2">
 			      <a href="#" onClick={ev => {
 				ev.preventDefault ()

frontend/src/pages/wiki/WikiEditPage.tsx

@@ -10,6 +10,7 @@ import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPut } from '@/lib/api'
 import { wikiKeys } from '@/lib/queryKeys'
+import { canEditContent } from '@/lib/users'
 import Forbidden from '@/pages/Forbidden'
 
 import 'react-markdown-editor-lite/lib/index.css'
@@ -24,7 +25,7 @@ type Props = { user: User | null }
 
 
 const WikiEditPage: FC<Props> = ({ user }) => {
-  const editable = ['admin', 'member'].some (r => user?.role === r)
+  const editable = canEditContent (user)
 
   const { id } = useParams ()
 

frontend/src/pages/wiki/WikiNewPage.tsx

@@ -10,6 +10,7 @@ import MainArea from '@/components/layout/MainArea'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPost } from '@/lib/api'
+import { canEditContent } from '@/lib/users'
 import Forbidden from '@/pages/Forbidden'
 
 import 'react-markdown-editor-lite/lib/index.css'
@@ -22,7 +23,7 @@ type Props = { user: User | null }
 
 
 const WikiNewPage: FC<Props> = ({ user }) => {
-  const editable = ['admin', 'member'].some (r => user?.role === r)
+  const editable = canEditContent (user)
 
   const location = useLocation ()
   const navigate = useNavigate ()