blob: 11a1a76dc5b4dd0f8d4e6021f657f76fb0923d12 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
import { useRef, useState } from "react";
import usePluginSettings from "./settings";
export default function OptionsPage() {
const [settings, setSettings, _1, _2, _3] = usePluginSettings();
const apiKeyRef = useRef<HTMLInputElement>(null);
const addressRef = useRef<HTMLInputElement>(null);
const [isSaved, setIsSaved] = useState(false);
const [error, setError] = useState<string | null>(null);
const onSave = () => {
if (apiKeyRef.current?.value == "") {
setError("API Key can't be empty");
return;
}
if (addressRef.current?.value == "") {
setError("Server addres can't be empty");
return;
}
setSettings({
apiKey: apiKeyRef.current?.value || "",
address: addressRef.current?.value || "https://demo.hoarder.app",
});
setTimeout(() => {
setIsSaved(false);
}, 2000);
setIsSaved(true);
};
return (
<div className="flex flex-col space-y-2">
<span className="text-lg">Settings</span>
<hr />
<p className="text-red-500">{error}</p>
<div className="flex space-x-2">
<label className="m-auto h-full">Server Address</label>
<input
ref={addressRef}
defaultValue={settings.address || "https://demo.hoarder.app"}
className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
/>
</div>
<div className="flex space-x-2 pt-2">
<label className="m-auto h-full">API Key</label>
<input
ref={apiKeyRef}
defaultValue={settings.apiKey}
className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
/>
</div>
<button className="rounded-lg border border-gray-200" onClick={onSave}>
{isSaved ? "Saved!" : "Save"}
</button>
</div>
);
}
|
