#32

frontend/src/components/SettingsDialogue.tsx

@@ -1,86 +0,0 @@
-import axios from 'axios'
-import toCamel from 'camelcase-keys'
-import React, { useEffect, useState } from 'react'
-import { Link, useNavigate, useLocation } from 'react-router-dom'
-
-import { Button } from '@/components/ui/button'
-import { Dialog,
-         DialogContent,
-         DialogDescription,
-         DialogTitle,
-         DialogTrigger } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Switch } from '@/components/ui/switch'
-import { toast } from '@/components/ui/use-toast'
-import { API_BASE_URL } from '@/config'
-
-import type { Tag, User } from '@/types'
-
-type Props = { visible:         boolean
-               onVisibleChange: (visible: boolean) => void
-               user:            User
-               setUser:         (user: User) => void }
-
-
-const SettingsDialogue: React.FC = ({ visible,
-                                      onVisibleChange,
-                                      user,
-                                      setUser }: Props) => {
-  const [inputCode, setInputCode] = useState ('')
-
-  const handleShowCode = () => {
-    if (user?.inheritanceCode)
-      toast ({ title: 'あなたの引継ぎコード', description: user.inheritanceCode })
-    else
-      toast ({ title: '引継ぎコードが見つかりません．' })
-  }
-
-  const handleTransfer = async () => {
-    try
-    {
-      void (axios.post (`${ API_BASE_URL }/users/verify`, { code: inputCode })
-            .then (res => {
-              if (res.data.valid)
-                {
-                  localStorage.setItem ('user_code', inputCode)
-                  setUser (toCamel (res.data.user, { deep: true }))
-                  toast ({ title: '引継ぎ成功!' })
-                }
-              else
-                toast ({ title: '認証失敗', description: 'そのコードは使へません．' })
-            }))
-    }
-    catch (e)
-    {
-      toast ({ title: '通信エラー', description: 'またあとで試してね．' })
-    }
-  }
-
-  return (
-      <Dialog open={visible} onOpenChange={onVisibleChange}>
-        <DialogContent className="space-y-6">
-          <DialogTitle>ユーザ設定</DialogTitle>
-          <DialogDescription>
-            ユーザの設定や引継ぎコードの確認、変更ができます。
-          </DialogDescription>
-          <div>
-            <p className="mb-1 font-semibold">引継ぎコード</p>
-            <Button variant="secondary" onClick={handleShowCode}>
-              引継ぎコードを表示
-            </Button>
-          </div>
-          <div>
-            <p className="mb-1 font-semibold">ほかのブラウザから引継ぐ</p>
-            <div className="flex gap-2">
-              <Input placeholder="引継ぎコードを入力"
-                     value={inputCode}
-                     onChange={e => setInputCode (e.target.value)} />
-              <Button onClick={handleTransfer}>引継ぐ</Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>)
-}
-
-
-export default SettingsDialogue

frontend/src/components/TopNav.tsx

@@ -3,7 +3,6 @@ import toCamel from 'camelcase-keys'
 import React, { useState, useEffect } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 
-import SettingsDialogue from '@/components/SettingsDialogue'
 import { Button } from '@/components/ui/button'
 import { API_BASE_URL } from '@/config'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
@@ -25,7 +24,6 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
   const location = useLocation ()
   const navigate = useNavigate ()
 
-  const [settingsVsbl, setSettingsVsbl] = useState (false)
   const [selectedMenu, setSelectedMenu] = useState<Menu> (Menu.None)
   const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
   const [wikiSearch, setWikiSearch] = useState ('')
@@ -148,11 +146,7 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
             <MyLink to="/users" title="ニジラー" />
           </div>
           <div className="ml-auto pr-4">
-            <Button onClick={() => setSettingsVsbl (true)}>{user?.name || '名もなきニジラー'}</Button>
-            <SettingsDialogue visible={settingsVsbl}
-                              onVisibleChange={setSettingsVsbl}
-                              user={user}
-                              setUser={setUser} />
+            <Button onClick={() => navigate ('/users/settings')}>{user?.name || '名もなきニジラー'}</Button>
           </div>
         </nav>
         {(() => {

frontend/src/components/users/InheritDialogue.tsx

@@ -1,9 +1,18 @@
+import axios from 'axios'
+import toCamel from 'camelcase-keys'
+import { useState } from 'react'
+
 import { Button } from '@/components/ui/button'
 import { Dialog,
          DialogContent,
          DialogDescription,
          DialogTitle,
          DialogTrigger } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { toast } from '@/components/ui/use-toast'
+import { API_BASE_URL } from '@/config'
+
+import type { User } from '@/types'
 
 type Props = { visible:         boolean
 	       onVisibleChange: (visible: boolean) => void
@@ -12,10 +21,41 @@ type Props = { visible:         boolean
 
 
 export default ({ visible, onVisibleChange, user, setUser }: Props) => {
+  const [inputCode, setInputCode] = useState ('')
+
+  const handleTransfer = async () => {
+    if (!(confirm ('引継ぎを行ってもよろしいですか?\n現在のアカウントからはログアウトされます．')))
+      return
+
+    try
+    {
+      const { data } = await axios.post (`${ API_BASE_URL }/users/verify`, { code: inputCode })
+      if (data.valid)
+	{
+	  localStorage.setItem ('user_code', inputCode)
+	  setUser (toCamel (data.user, { deep: true }))
+	  toast ({ title: '引継ぎ成功!' })
+	  onVisibleChange (false)
+	}
+      else
+	toast ({ title: '認証失敗', description: 'そのコードは使へません．' })
+    }
+    catch
+    {
+      toast ({ title: '通信エラー', description: 'またあとで試してね．' })
+    }
+  }
+
   return (
       <Dialog open={visible} onOpenChange={onVisibleChange}>
         <DialogContent className="space-y-6">
           <DialogTitle>ほかのブラウザから引継ぐ</DialogTitle>
+	  <div className="flex gap-2">
+	    <Input placeholder="引継ぎコードを入力"
+		   value={inputCode}
+		   onChange={ev => setInputCode (ev.target.value)} />
+	    <Button onClick={handleTransfer}>引継ぐ</Button>
+	  </div>
 	</DialogContent>
       </Dialog>)
 }

frontend/src/components/users/UserCodeDialogue.tsx

@@ -1,16 +1,38 @@
+import axios from 'axios'
+
 import { Button } from '@/components/ui/button'
 import { Dialog,
          DialogContent,
          DialogDescription,
          DialogTitle,
          DialogTrigger } from '@/components/ui/dialog'
+import { toast } from '@/components/ui/use-toast'
+import { API_BASE_URL } from '@/config'
+
+import type { User } from '@/types'
 
 type Props = { visible:         boolean
 	       onVisibleChange: (visible: boolean) => void
-	       user:            User | null }
+	       user:            User | null
+	       setUser:         (user: User) => void }
 
 
-export default ({ visible, onVisibleChange, user }: Props) => {
+export default ({ visible, onVisibleChange, user, setUser }: Props) => {
+  const handleChange = async () => {
+    if (!(confirm ('引継ぎコードを再発行しますか?')))
+      return
+
+    const { data } = await axios.post (`${ API_BASE_URL }/users/code/renew`, { }, { headers: {
+	'Content-Type':     'multipart/form-data',
+	'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
+    if (data.code)
+      {
+	localStorage.setItem ('user_code', data.code)
+	setUser (user => ({ ...user, inheritanceCode: data.code }))
+	toast ({ title: '再発行しました．' })
+      }
+  }
+
   return (
       <Dialog open={visible} onOpenChange={onVisibleChange}>
         <DialogContent className="space-y-6">
@@ -22,8 +44,9 @@ export default ({ visible, onVisibleChange, user }: Props) => {
 	      このコードはほかの人には教えないでください!
 	    </p>
 	    <div className="my-4">
-	      <Button className="px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400">
-		引継ぎコードを変更する
+	      <Button onClick={handleChange}
+		      className="px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400">
+		引継ぎコード再発行
 	      </Button>
 	    </div>
 	  </div>

frontend/src/pages/users/SettingPage.tsx

@@ -55,6 +55,8 @@ export default ({ user, setUser }: Props) => {
 	<Form>
 	  <PageTitle>設定</PageTitle>
 
+	  {user ? (
+	      <>
 		{/* 名前 */}
 		<div>
 		  <Label>表示名</Label>
@@ -89,11 +91,13 @@ export default ({ user, setUser }: Props) => {
 		    ほかのブラウザから引継ぐ
 		  </Button>
 		</div>
+	      </>) : 'Loading...'}
 	</Form>
 
 	<UserCodeDialogue visible={userCodeVsbl}
 			  onVisibleChange={setUserCodeVsbl}
-			  user={user} />
+			  user={user}
+			  setUser={setUser} />
 
 	<InheritDialogue visible={inheritVsbl}
 			 onVisibleChange={setInheritVsbl}