added post key route

2024-01-13 01:20:06 -05:00
parent 834d25a99e
commit d91ebb3fa2
13 changed files with 417 additions and 83 deletions
@@ -0,0 +1,35 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import React, { useState } from "react";
+import NewKeyModal from "@/components/ModalContent/NewKeyModal";
+
+export default function Api() {
+  const [newKeyModal, setNewKeyModal] = useState(false);
+
+  return (
+    <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">API Keys</p>
+
+      <div className="divider my-3"></div>
+
+      <div className="flex flex-col gap-3">
+        <p>
+          Access Tokens can be used to access Linkwarden from other apps and
+          services without giving away your Username and Password.
+        </p>
+
+        <button
+          className={`btn btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2`}
+          onClick={() => {
+            setNewKeyModal(true);
+          }}
+        >
+          New Access Token
+        </button>
+      </div>
+
+      {newKeyModal ? (
+        <NewKeyModal onClose={() => setNewKeyModal(false)} />
+      ) : undefined}
+    </SettingsLayout>
+  );
+}
@@ -1,78 +0,0 @@
-import Checkbox from "@/components/Checkbox";
-import SubmitButton from "@/components/SubmitButton";
-import SettingsLayout from "@/layouts/SettingsLayout";
-import React, { useEffect, useState } from "react";
-import useAccountStore from "@/store/account";
-import { toast } from "react-hot-toast";
-import { AccountSettings } from "@/types/global";
-import TextInput from "@/components/TextInput";
-
-export default function Api() {
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
-  const [user, setUser] = useState<AccountSettings>(account);
-
-  const [archiveAsScreenshot, setArchiveAsScreenshot] =
-    useState<boolean>(false);
-  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
-  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
-    useState<boolean>(false);
-
-  useEffect(() => {
-    setUser({
-      ...account,
-      archiveAsScreenshot,
-      archiveAsPDF,
-      archiveAsWaybackMachine,
-    });
-  }, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine]);
-
-  function objectIsEmpty(obj: object) {
-    return Object.keys(obj).length === 0;
-  }
-
-  useEffect(() => {
-    if (!objectIsEmpty(account)) {
-      setArchiveAsScreenshot(account.archiveAsScreenshot);
-      setArchiveAsPDF(account.archiveAsPDF);
-      setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
-    }
-  }, [account]);
-
-  const submit = async () => {
-    // setSubmitLoader(true);
-    // const load = toast.loading("Applying...");
-    // const response = await updateAccount({
-    //   ...user,
-    // });
-    // toast.dismiss(load);
-    // if (response.ok) {
-    //   toast.success("Settings Applied!");
-    // } else toast.error(response.data as string);
-    // setSubmitLoader(false);
-  };
-
-  return (
-    <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">API Keys (Soon)</p>
-
-      <div className="divider my-3"></div>
-
-      <div className="flex flex-col gap-3">
-        <div className="badge badge-warning rounded-md w-fit">
-          Status: Under Development
-        </div>
-
-        <p>This page will be for creating and managing your API keys.</p>
-
-        <p>
-          For now, you can <i>temporarily</i> use your{" "}
-          <code className="text-xs whitespace-nowrap bg-black/40 rounded-md px-2 py-1">
-            next-auth.session-token
-          </code>{" "}
-          in your browser cookies as the API key for your integrations.
-        </p>
-      </div>
-    </SettingsLayout>
-  );
-}