feat: PAT authentication (#27)

package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "@types/chrome": "^0.0.231",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-icons": "^4.8.0"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.14",

src/App.tsx

@@ -31,7 +31,7 @@ function App() {
   }, []);
 
   return (
-    <div className="p-4">
+    <div className="p-4 bg-slate-800">
       {renderedPage === "start" ? (
         <Start setRenderedPage={setRenderedPage} />
       ) : renderedPage === "home" ? (

src/pages/home.tsx

@@ -6,7 +6,11 @@ interface HomeProps {
 }
 
 function Home({ osAccessToken, setRenderedPage }: HomeProps) {
-  return <div>Home</div>;
+  return (
+    <div>
+      <p className="text-white">Home</p>
+    </div>
+  );
 }
 
 export default Home;

src/pages/loading.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 
 function Loading() {
-  return <div>Loading</div>;
+  return (
+    <div>
+      <p className="text-white">Loading...</p>
+    </div>
+  );
 }
 
 export default Loading;

src/pages/signin.tsx

@@ -1,16 +1,69 @@
 import React from "react";
+import { checkTokenValidity } from "../utils/fetchOpenSaucedApiData";
+import { BiArrowBack, BiInfoCircle } from "react-icons/bi";
 
 interface SignInProps {
   setRenderedPage: (page: string) => void;
 }
 
 function SignIn({ setRenderedPage }: SignInProps) {
-  return <div>
-    <h1>Sign In</h1>
-    <p>Sign in with your PAT</p>
-    <input type="text" />
-    <button onClick={() => setRenderedPage("home")}>Sign In</button>
-  </div>;
+  const [token, setToken] = React.useState("");
+
+  const authenticateUser = (token: string) => {
+    if (token === "") {
+      alert("Please enter a valid token");
+      return;
+    }
+    checkTokenValidity(token)
+      .then((valid) => {
+        if (valid) {
+          chrome.storage.sync.set({ "os-access-token": token }, () => {
+            setRenderedPage("home");
+          });
+        } else {
+          alert("Token is invalid");
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        alert("An error occurred while authenticating");
+      });
+  };
+
+  return (
+    <div>
+      <BiArrowBack
+        className="text-orange cursor-pointer text-2xl"
+        onClick={() => setRenderedPage("start")}
+      />
+      <h1 className="text-white text-2xl font-bold my-2">Sign In</h1>
+      <p className="mb-2 text-gray-300 text-sm">
+        Enter your Personal Access Token to sign in.
+        <BiInfoCircle
+          title="Learn how to obtain a Personal Access Token"
+          className="inline-block ml-1 text-gray-400 align-middle cursor-pointer"
+          onClick={() =>
+            window.open(
+              "https://docs.opensauced.pizza/contributing/set-up-authentication/",
+              "_blank"
+            )
+          }
+        />
+      </p>
+      <input
+        type="text"
+        className="p-1.5 rounded-md mb-2 outline-none"
+        onChange={(e) => setToken(e.target.value)}
+      />
+      <button
+        className="bg-orange border-none rounded-md text-white font-bold py-2 px-4 cursor-pointer
+          bg-gradient-to-r from-[#e67e22] to-[#d35400] mt-2"
+        onClick={() => authenticateUser(token)}
+      >
+        Sign In
+      </button>
+    </div>
+  );
 }
 
 export default SignIn;

src/pages/start.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import OpenSaucedLogo from "../assets/opensauced-logo.svg";
 
 interface StartProps {
   setRenderedPage: (page: string) => void;
@@ -7,9 +7,24 @@ interface StartProps {
 function Start({ setRenderedPage }: StartProps) {
   return (
     <div>
-      <h1>OpenSauced</h1>
-      <p>Welcome Text</p>
-      <button onClick={() => setRenderedPage("signin")}>Get Started</button>
+      <img src={OpenSaucedLogo} alt="Open Sauced Logo" />
+      <p className="my-4 text-base font-bold text-white leading-5">
+        Welcome to the{" "}
+        <a
+          href="https://opensauced.pizza/"
+          className="text-orange no-underline"
+        >
+          OpenSauced
+        </a>{" "}
+        browser extension.
+      </p>
+      <button
+        className="bg-orange border-none rounded-md text-white font-bold py-2 px-4 cursor-pointer
+          bg-gradient-to-r from-[#e67e22] to-[#d35400]"
+        onClick={() => setRenderedPage("signin")}
+      >
+        Get Started
+      </button>
     </div>
   );
 }