diff --git a/manifest.json b/manifest.json index 827480f7..be7864a8 100644 --- a/manifest.json +++ b/manifest.json @@ -9,5 +9,5 @@ "matches": ["https://github.com/*"] } ], - "permissions": ["chrome"] + "permissions": ["storage"] } diff --git a/src/App.css b/src/App.css deleted file mode 100644 index c01194d0..00000000 --- a/src/App.css +++ /dev/null @@ -1,43 +0,0 @@ -.App { - text-align: center; - min-width: 300px; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -button { - font-size: calc(10px + 2vmin); -} diff --git a/src/App.tsx b/src/App.tsx index 3d9bd71e..80dc57c5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,45 +1,48 @@ -import { useState } from 'react' -import logo from './logo.svg' -import './App.css' +import { useState, useEffect } from "react"; + +import Start from "./pages/start"; +import SignIn from "./pages/signin"; +import Home from "./pages/home"; +import Loading from "./pages/loading"; + +import { checkTokenValidity } from "./utils/fetchOpenSaucedApiData"; function App() { - const [count, setCount] = useState(0) + const [osAccessToken, setOsAccessToken] = useState(""); + // renderedPage can be either "start", "home", "signin" or "loading" + const [renderedPage, setRenderedPage] = useState("loading"); + + useEffect(() => { + chrome.storage.sync.get(["os-access-token"], (result) => { + if (result["os-access-token"]) { + checkTokenValidity(result["os-access-token"]).then((valid) => { + if (!valid) { + setOsAccessToken(""); + setRenderedPage("signin"); + } else { + setOsAccessToken(result["os-access-token"]); + setRenderedPage("home"); + } + }); + } else { + setRenderedPage("start"); + } + }); + }, []); return ( -
-
- logo -

Hello Vite + React!

-

- -

-

- Edit App.tsx and save to test HMR updates. -

-

- - Learn React - - {' | '} - - Vite Docs - -

-
+
+ {renderedPage === "start" ? ( + + ) : renderedPage === "home" ? ( + + ) : renderedPage === "signin" ? ( + + ) : ( + + )}
- ) + ); } -export default App +export default App; diff --git a/src/favicon.svg b/src/favicon.svg deleted file mode 100644 index de4aeddc..00000000 --- a/src/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/index.css b/src/index.css index b1bc02f3..e089f726 100644 --- a/src/index.css +++ b/src/index.css @@ -1,16 +1,22 @@ @tailwind components; @tailwind utilities; +* { + box-sizing: border-box; + margin: 0px; + padding: 0px; +} + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c104..00000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/pages/home.tsx b/src/pages/home.tsx new file mode 100644 index 00000000..c0f7777f --- /dev/null +++ b/src/pages/home.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +interface HomeProps { + osAccessToken: string; + setRenderedPage: (page: string) => void; +} + +function Home({ osAccessToken, setRenderedPage }: HomeProps) { + return
Home
; +} + +export default Home; diff --git a/src/pages/loading.tsx b/src/pages/loading.tsx new file mode 100644 index 00000000..9c0d89c2 --- /dev/null +++ b/src/pages/loading.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +function Loading() { + return
Loading
; +} + +export default Loading; diff --git a/src/pages/signin.tsx b/src/pages/signin.tsx new file mode 100644 index 00000000..ecc53e3f --- /dev/null +++ b/src/pages/signin.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +interface SignInProps { + setRenderedPage: (page: string) => void; +} + +function SignIn({ setRenderedPage }: SignInProps) { + return
+

Sign In

+

Sign in with your PAT

+ + +
; +} + +export default SignIn; diff --git a/src/pages/start.tsx b/src/pages/start.tsx new file mode 100644 index 00000000..b3ba87b5 --- /dev/null +++ b/src/pages/start.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +interface StartProps { + setRenderedPage: (page: string) => void; +} + +function Start({ setRenderedPage }: StartProps) { + return ( +
+

OpenSauced

+

Welcome Text

+ +
+ ); +} + +export default Start; diff --git a/src/utils/fetchOpenSaucedApiData.ts b/src/utils/fetchOpenSaucedApiData.ts index 4167050b..a8e00d9b 100644 --- a/src/utils/fetchOpenSaucedApiData.ts +++ b/src/utils/fetchOpenSaucedApiData.ts @@ -7,3 +7,14 @@ export const getOpenSaucedUser = async (username: string) => { } return await response.json(); }; + +export const checkTokenValidity = async (token: string) => { + const url = "https://api.opensauced.pizza/v1/auth/session"; + const response = await fetch(url, { + method: "GET", + headers: { + Authorization: `Bearer ${token}`, + }, + }); + return response.status === 200; +};