81 行
2.3 KiB
TypeScript
81 行
2.3 KiB
TypeScript
import { useDialogue } from '@/lib/dialogues/useDialogue'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle } from '@/components/ui/dialog'
|
|
import { toast } from '@/components/ui/use-toast'
|
|
import { apiPost } from '@/lib/api'
|
|
import { useUITranslation } from '@/lib/useUITranslation'
|
|
import { rememberUserCode } from '@/lib/users'
|
|
|
|
import type { FC } from 'react'
|
|
|
|
import type { User } from '@/types'
|
|
|
|
type Props = { visible: boolean
|
|
onVisibleChange: (visible: boolean) => void
|
|
user: User | null
|
|
setUser: React.Dispatch<React.SetStateAction<User | null>> }
|
|
|
|
|
|
const UserCodeDialogue: FC<Props> = ({ visible, onVisibleChange, user, setUser }) => {
|
|
const dialogue = useDialogue ()
|
|
const { label } = useUITranslation ('settings')
|
|
|
|
const handleChange = async () => {
|
|
if (!(user))
|
|
return
|
|
|
|
if (!(await dialogue.confirm ({
|
|
title: label ('userCode.confirm'),
|
|
description: (
|
|
<div>
|
|
<p>{label ('userCode.logoutWarning')}</p>
|
|
</div>),
|
|
confirmText: label ('userCode.confirmRenew'),
|
|
cancelText: label ('actions.cancel'),
|
|
closeLabel: label ('actions.close'),
|
|
variant: 'danger' })))
|
|
return
|
|
|
|
const data = await apiPost<{ code: string }> ('/users/code/renew', { },
|
|
{ headers: { 'Content-Type': 'multipart/form-data' } })
|
|
if (data.code)
|
|
{
|
|
rememberUserCode (data.code)
|
|
setUser (user => ({ ...user, inheritanceCode: data.code } as User))
|
|
toast ({ title: label ('userCode.renewed') })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={visible} onOpenChange={onVisibleChange}>
|
|
<DialogContent className="px-6 pb-6 pt-7" closeLabel={label ('actions.close')}>
|
|
<DialogHeader className="pl-8">
|
|
<DialogTitle>{label ('userCode.title')}</DialogTitle>
|
|
|
|
<DialogDescription asChild>
|
|
<div>
|
|
<p>{label ('userCode.description')}</p>
|
|
<div className="m-2">{user?.inheritanceCode}</div>
|
|
<p className="mt-1 text-sm text-destructive">
|
|
{label ('userCode.secretWarning')}
|
|
</p>
|
|
</div>
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<DialogFooter>
|
|
<Button onClick={handleChange} variant="destructive">
|
|
{label ('userCode.renew')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>)
|
|
}
|
|
|
|
export default UserCodeDialogue
|