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/SignInPage.tsx | 89 +++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 apps/browser-extension/src/SignInPage.tsx

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

diff --git a/apps/browser-extension/src/SignInPage.tsx b/apps/browser-extension/src/SignInPage.tsx
new file mode 100644
index 00000000..6db7c348
--- /dev/null
+++ b/apps/browser-extension/src/SignInPage.tsx
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { api } from "./utils/trpc";
+import usePluginSettings from "./utils/settings";
+import { useNavigate } from "react-router-dom";
+import Logo from "./Logo";
+
+export default function SignInPage() {
+  const navigate = useNavigate();
+  const { setSettings } = usePluginSettings();
+
+  const {
+    mutate: login,
+    error,
+    isPending,
+  } = api.apiKeys.exchange.useMutation({
+    onSuccess: (resp) => {
+      setSettings((s) => ({ ...s, apiKey: resp.key }));
+      navigate("/options");
+    },
+    onError: () => {},
+  });
+
+  const [formData, setFormData] = useState<{
+    email: string;
+    password: string;
+  }>({
+    email: "",
+    password: "",
+  });
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const randStr = (Math.random() + 1).toString(36).substring(5);
+    login({ ...formData, keyName: `Browser extension: (${randStr})` });
+  };
+
+  let errorMessage = "";
+  if (error) {
+    if (error.data?.code == "UNAUTHORIZED") {
+      errorMessage = "Wrong username or password";
+    } else {
+      errorMessage = error.message;
+    }
+  }
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <Logo />
+      <p className="text-lg">Login</p>
+      <p className="text-red-500">{errorMessage}</p>
+      <form className="flex flex-col gap-y-2" onSubmit={onSubmit}>
+        <div className="flex flex-col gap-y-1">
+          <label className="my-auto font-bold">Email</label>
+          <input
+            value={formData.email}
+            onChange={(e) =>
+              setFormData((f) => ({ ...f, email: e.target.value }))
+            }
+            type="text"
+            name="email"
+            className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
+          />
+        </div>
+        <div className="flex flex-col gap-y-1">
+          <label className="my-auto font-bold">Password</label>
+          <input
+            value={formData.password}
+            onChange={(e) =>
+              setFormData((f) => ({
+                ...f,
+                password: e.target.value,
+              }))
+            }
+            type="password"
+            name="password"
+            className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
+          />
+        </div>
+        <button
+          className="bg-black text-white"
+          type="submit"
+          disabled={isPending}
+        >
+          Login
+        </button>
+      </form>
+    </div>
+  );
+}
-- 
cgit v1.2.3-70-g09d2