From 04572a8e5081b1e4871e273cde9dbaaa44c52fe0 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 21:43:44 +0000
Subject: structure: Create apps dir and copy tooling dir from t3-turbo repo

---
 apps/browser-extension/src/OptionsPage.tsx | 60 ++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 apps/browser-extension/src/OptionsPage.tsx

(limited to 'apps/browser-extension/src/OptionsPage.tsx')

diff --git a/apps/browser-extension/src/OptionsPage.tsx b/apps/browser-extension/src/OptionsPage.tsx
new file mode 100644
index 00000000..6407b3cc
--- /dev/null
+++ b/apps/browser-extension/src/OptionsPage.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect } from "react";
+import usePluginSettings from "./utils/settings";
+import { api } from "./utils/trpc";
+import Spinner from "./Spinner";
+import { useNavigate } from "react-router-dom";
+import Logo from "./Logo";
+
+export default function OptionsPage() {
+  const navigate = useNavigate();
+  const { settings, setSettings } = usePluginSettings();
+
+  const { data: whoami, error: whoAmIError } = api.users.whoami.useQuery(
+    undefined,
+    {
+      enabled: settings.address != "",
+    },
+  );
+
+  const invalidateWhoami = api.useUtils().users.whoami.refetch;
+
+  useEffect(() => {
+    invalidateWhoami();
+  }, [settings, invalidateWhoami]);
+
+  let loggedInMessage: React.ReactNode;
+  if (whoAmIError) {
+    if (whoAmIError.data?.code == "UNAUTHORIZED") {
+      loggedInMessage = <span>Not logged in</span>;
+    } else {
+      loggedInMessage = (
+        <span>Something went wrong: {whoAmIError.message}</span>
+      );
+    }
+  } else if (whoami) {
+    loggedInMessage = <span>{whoami.email}</span>;
+  } else {
+    loggedInMessage = <Spinner />;
+  }
+
+  const onLogout = () => {
+    setSettings((s) => ({ ...s, apiKey: "" }));
+    invalidateWhoami();
+    navigate("/notconfigured");
+  };
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <Logo />
+      <span className="text-lg">Settings</span>
+      <hr />
+      <div className="flex gap-2">
+        <span className="my-auto">Logged in as:</span>
+        {loggedInMessage}
+      </div>
+      <button className="rounded-lg border border-gray-200" onClick={onLogout}>
+        Logout
+      </button>
+    </div>
+  );
+}
-- 
cgit v1.2.3-70-g09d2