extension: Instead of manually creating api keys, let users exchange their username passwords for one

1 files changed, 31 insertions, 4 deletions

diff --git a/packages/browser-extension/src/NotConfiguredPage.tsx b/packages/browser-extension/src/NotConfiguredPage.tsx
index ef73f149..a5b9c734 100644
--- a/packages/browser-extension/src/NotConfiguredPage.tsx
+++ b/packages/browser-extension/src/NotConfiguredPage.tsx
@@ -1,14 +1,41 @@
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import usePluginSettings from "./utils/settings";
 
 export default function NotConfiguredPage() {
   const navigate = useNavigate();
+
+  const { settings, setSettings } = usePluginSettings();
+
+  const [error, setError] = useState("");
+  const [serverAddress, setServerAddress] = useState(settings.address);
+  useEffect(() => {
+    setServerAddress(settings.address);
+  }, [settings.address]);
+
+  const onSave = () => {
+    if (serverAddress == "") {
+      setError("Server address is required");
+      return;
+    }
+    setSettings((s) => ({ ...s, address: serverAddress }));
+    navigate("/signin");
+  };
+
   return (
     <div className="flex flex-col space-y-2">
       <span>To use the plugin, you need to configure it first.</span>
-      <button
-        className="bg-black text-white"
-        onClick={() => navigate("/options")}
-      >
+      <p className="text-red-500">{error}</p>
+      <div className="flex gap-2">
+        <label className="my-auto">Server Address</label>
+        <input
+          name="address"
+          value={serverAddress}
+          className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
+          onChange={(e) => setServerAddress(e.target.value)}
+        />
+      </div>
+      <button className="bg-black text-white" onClick={onSave}>
         Configure
       </button>
     </div>