This commit is contained in:
@@ -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
|
||||
@@ -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>
|
||||
{(() => {
|
||||
|
||||
@@ -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>)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user