99 lines
3.5 KiB
TypeScript
99 lines
3.5 KiB
TypeScript
'use client';
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
import {
|
||
Dialog,
|
||
DialogClose,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { AdminApi } from "@/lib/api";
|
||
import { base62 } from "@/lib/utils";
|
||
import React, { useEffect, useState } from "react";
|
||
import { toast } from "sonner";
|
||
|
||
interface SetPasswordDialogProps {
|
||
id: string;
|
||
children: React.ReactNode;
|
||
}
|
||
|
||
export function SetPasswordDialog({ id, children }: SetPasswordDialogProps) {
|
||
const [open, setOpen] = useState(false);
|
||
const [password, setPassword] = useState('');
|
||
|
||
const handleSubmit = async () => {
|
||
if (!password) {
|
||
return toast.error('请输入密码');
|
||
}
|
||
|
||
await AdminApi.web.blog.setPassword(id, password).then(() => {
|
||
toast.success('修改成功');
|
||
setOpen(false);
|
||
}).catch(e => {
|
||
toast.error(`${e.message || e || '请求失败'}`)
|
||
});
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (open) {
|
||
setPassword('');
|
||
}
|
||
}, [open])
|
||
|
||
const handleCopyShareURL = () => {
|
||
if (!password) {
|
||
return toast.warning('请先填写新密码');
|
||
}
|
||
const url = `${window.location.origin}/blog/${base62.encode(Buffer.from(id.replace(/-/g, ''), 'hex'))}?p=${password}`;
|
||
navigator.clipboard.writeText(url);
|
||
toast.success('分享链接复制成功，请点击保存按钮以提交新密码');
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={v => setOpen(v)}>
|
||
<form>
|
||
<DialogTrigger asChild>
|
||
{children}
|
||
</DialogTrigger>
|
||
<DialogContent className="sm:max-w-[425px]">
|
||
<DialogHeader>
|
||
<DialogTitle>修改密码</DialogTitle>
|
||
<DialogDescription>
|
||
通过密码访问受保护的文章，需开启“受密码保护”权限。注意复制URL需要填写完新密码后再点击
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="grid gap-4">
|
||
<div className="grid gap-3">
|
||
<Label htmlFor="new-password">新密码</Label>
|
||
<Input
|
||
id="new-password"
|
||
name="password"
|
||
value={password}
|
||
onChange={e => setPassword(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<div className="w-full flex justify-between">
|
||
<div>
|
||
<Button variant='secondary' onClick={handleCopyShareURL}>复制URl</Button>
|
||
</div>
|
||
<div className="flex gap-5">
|
||
<DialogClose asChild>
|
||
<Button variant="outline">取消</Button>
|
||
</DialogClose>
|
||
<Button type="submit" onClick={handleSubmit}>保存</Button>
|
||
</div>
|
||
</div>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</form>
|
||
</Dialog>
|
||
)
|
||
} |