From ebcc535cf114de8c0050ae48dce61eb8223bb30b Mon Sep 17 00:00:00 2001 From: miteruzo Date: Mon, 7 Jul 2025 02:46:57 +0900 Subject: [PATCH] #32 --- frontend/src/components/SettingsDialogue.tsx | 86 ------------------- frontend/src/components/TopNav.tsx | 8 +- .../src/components/users/InheritDialogue.tsx | 40 +++++++++ .../src/components/users/UserCodeDialogue.tsx | 31 ++++++- frontend/src/pages/users/SettingPage.tsx | 74 ++++++++-------- 5 files changed, 107 insertions(+), 132 deletions(-) delete mode 100644 frontend/src/components/SettingsDialogue.tsx diff --git a/frontend/src/components/SettingsDialogue.tsx b/frontend/src/components/SettingsDialogue.tsx deleted file mode 100644 index 0a947af..0000000 --- a/frontend/src/components/SettingsDialogue.tsx +++ /dev/null @@ -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 ( - - - ユーザ設定 - - ユーザの設定や引継ぎコードの確認、変更ができます。 - -
-

引継ぎコード

- -
-
-

ほかのブラウザから引継ぐ

-
- setInputCode (e.target.value)} /> - -
-
- - ) -} - - -export default SettingsDialogue diff --git a/frontend/src/components/TopNav.tsx b/frontend/src/components/TopNav.tsx index c4f5988..6ab44de 100644 --- a/frontend/src/components/TopNav.tsx +++ b/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.None) const [wikiId, setWikiId] = useState (WikiIdBus.get ()) const [wikiSearch, setWikiSearch] = useState ('') @@ -148,11 +146,7 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
- - +
{(() => { diff --git a/frontend/src/components/users/InheritDialogue.tsx b/frontend/src/components/users/InheritDialogue.tsx index 8642cb5..064123e 100644 --- a/frontend/src/components/users/InheritDialogue.tsx +++ b/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 ( ほかのブラウザから引継ぐ +
+ setInputCode (ev.target.value)} /> + +
) } diff --git a/frontend/src/components/users/UserCodeDialogue.tsx b/frontend/src/components/users/UserCodeDialogue.tsx index 3f30a77..f0bde1f 100644 --- a/frontend/src/components/users/UserCodeDialogue.tsx +++ b/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, 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: '再発行しました．' }) + } + } -export default ({ visible, onVisibleChange, user }: Props) => { return ( @@ -22,8 +44,9 @@ export default ({ visible, onVisibleChange, user }: Props) => { このコードはほかの人には教えないでください!

-
diff --git a/frontend/src/pages/users/SettingPage.tsx b/frontend/src/pages/users/SettingPage.tsx index 6418ef0..35deb86 100644 --- a/frontend/src/pages/users/SettingPage.tsx +++ b/frontend/src/pages/users/SettingPage.tsx @@ -55,45 +55,49 @@ export default ({ user, setUser }: Props) => {
設定 - {/* 名前 */} -
- - setName (ev.target.value)} /> - {(user && !(user.name)) && ( -

- 名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!! -

)} -
- - {/* 送信 */} - - - {/* 引継ぎ */} -
- - - -
+ {user ? ( + <> + {/* 名前 */} +
+ + setName (ev.target.value)} /> + {(user && !(user.name)) && ( +

+ 名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!! +

)} +
+ + {/* 送信 */} + + + {/* 引継ぎ */} +
+ + + +
+ ) : 'Loading...'}
+ user={user} + setUser={setUser} />