From e726a937684faf20c14530de14f22ba1116195af Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Sat, 22 Apr 2023 19:53:16 +0530 Subject: [PATCH] feat: PAT authentication (#27) --- npm-shrinkwrap.json | 11 +++++- package.json | 3 +- src/App.tsx | 2 +- src/assets/opensauced-logo.svg | 22 ++++++++++++ src/pages/home.tsx | 6 +++- src/pages/loading.tsx | 6 +++- src/pages/signin.tsx | 65 ++++++++++++++++++++++++++++++---- src/pages/start.tsx | 23 +++++++++--- 8 files changed, 123 insertions(+), 15 deletions(-) create mode 100644 src/assets/opensauced-logo.svg diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index c2c3e143..46aa0d9b 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.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", @@ -2042,6 +2043,14 @@ "react": "^18.2.0" } }, + "node_modules/react-icons": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", + "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.13.0.tgz", diff --git a/package.json b/package.json index bc9107c2..30582ab4 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 80dc57c5..9c3c7158 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,7 +31,7 @@ function App() { }, []); return ( -
+
{renderedPage === "start" ? ( ) : renderedPage === "home" ? ( diff --git a/src/assets/opensauced-logo.svg b/src/assets/opensauced-logo.svg new file mode 100644 index 00000000..b5eab3c1 --- /dev/null +++ b/src/assets/opensauced-logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/home.tsx b/src/pages/home.tsx index c0f7777f..5d8fdcaf 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -6,7 +6,11 @@ interface HomeProps { } function Home({ osAccessToken, setRenderedPage }: HomeProps) { - return
Home
; + return ( +
+

Home

+
+ ); } export default Home; diff --git a/src/pages/loading.tsx b/src/pages/loading.tsx index 9c0d89c2..5fa8f4a8 100644 --- a/src/pages/loading.tsx +++ b/src/pages/loading.tsx @@ -1,7 +1,11 @@ import React from "react"; function Loading() { - return
Loading
; + return ( +
+

Loading...

+
+ ); } export default Loading; diff --git a/src/pages/signin.tsx b/src/pages/signin.tsx index ecc53e3f..45c9051f 100644 --- a/src/pages/signin.tsx +++ b/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
-

Sign In

-

Sign in with your PAT

- - -
; + 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 ( +
+ setRenderedPage("start")} + /> +

Sign In

+

+ Enter your Personal Access Token to sign in. + + window.open( + "https://docs.opensauced.pizza/contributing/set-up-authentication/", + "_blank" + ) + } + /> +

+ setToken(e.target.value)} + /> + +
+ ); } export default SignIn; diff --git a/src/pages/start.tsx b/src/pages/start.tsx index b3ba87b5..5c8d7c1d 100644 --- a/src/pages/start.tsx +++ b/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 (
-

OpenSauced

-

Welcome Text

- + Open Sauced Logo +

+ Welcome to the{" "} + + OpenSauced + {" "} + browser extension. +

+
); }