add lib/teuthologyAPI.ts and login with github

1. redirect to teuthology API's login 2. AppBar uses cookie data to show username Signed-off-by: Vallari <[email protected]>
ceph · Aug 14, 2023 · eea851d · eea851d
1 parent 3e5bba8
commit eea851d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 10 deletions.
diff --git a/src/components/AppBar/index.jsx b/src/components/AppBar/index.jsx
@@ -8,13 +8,19 @@ import Brightness7Icon from "@mui/icons-material/Brightness7";
 import MuiAppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import { useCookies } from "react-cookie";
+
+import { githubLogin } from "../../lib/teuthologyAPI"
+
 
 const PREFIX = 'index';
 
 const classes = {
   appBar: `${PREFIX}-appBar`,
   title: `${PREFIX}-title`,
-  toolbarIcon: `${PREFIX}-toolbarIcon`
+  toolbarIcon: `${PREFIX}-toolbarIcon`,
+  loginButton: `${PREFIX}-loginButton`,
 };
 
 const StyledMuiAppBar = styled(MuiAppBar)((
@@ -40,11 +46,43 @@ const StyledMuiAppBar = styled(MuiAppBar)((
     alignItems: "center",
     justifyContent: "flex-end",
     padding: "0 8px",
+  },
+
+  [`& .${classes.loginButton}`]: {
+    // TODO: add theme
+    marginLeft: "12px",
   }
+
 }));
 
 export default function AppBar(props) {
   const theme = useTheme();
+  const [cookies, setCookie, removeCookie] = useCookies(["pulpitosession"]);
+
+
+  const getCookieData = () => {
+     // ISO-8859-1 octal string -> char string
+    const authcookies = (cookies["pulpitosession"].replace(/\\073/g, ';'))
+
+    if (authcookies){
+      let cookie_dict = {}
+      let cookies_ = authcookies.split(";")
+      cookies_.map((cookie) => {
+        let [key, value] = cookie.split("=");
+        cookie_dict[key.trim()] = value.trim();
+      })
+      return cookie_dict
+    }
+  }
+
+  const getUsername = () => {
+    const cookieData = getCookieData();
+    return cookieData["username"];
+  }
+
+  const login = () => {
+    githubLogin();
+  }
 
   return (
     <StyledMuiAppBar position="static" className={classes.appBar}>
@@ -78,6 +116,14 @@ export default function AppBar(props) {
             Pulpito
           </RouterLink>
         </Typography>
+        <div>
+          { cookies["pulpitosession"]
+              ? <Typography variant="button" display="block" gutterBottom>
+                    Hey, {getUsername()} !
+                </Typography> 
+              : <Button variant="outlined" onClick={login} className={classes.loginButton}>Login</Button> 
+          }
+        </div>
         <IconButton onClick={props.toggleDarkMode} size="large">
           {props.darkMode ? <Brightness7Icon /> : <Brightness4Icon />}
         </IconButton>

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter as Router } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { QueryParamProvider } from "use-query-params";
 import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6";
+import { CookiesProvider } from "react-cookie";
 import axios from "axios";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
@@ -78,15 +79,17 @@ export default function Root() {
     <React.StrictMode>
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
-          <Router>
-            <QueryParamProvider adapter={ReactRouter6Adapter}>
-              <CssBaseline />
-              <QueryClientProvider client={queryClient}>
-                <ReactQueryDevtools initialIsOpen={false} />
-                <App darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
-              </QueryClientProvider>
-            </QueryParamProvider>
-          </Router>
+          <CookiesProvider>
+            <Router>
+              <QueryParamProvider adapter={ReactRouter6Adapter}>
+                <CssBaseline />
+                <QueryClientProvider client={queryClient}>
+                  <ReactQueryDevtools initialIsOpen={false} />
+                  <App darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+                </QueryClientProvider>
+              </QueryParamProvider>
+            </Router>
+          </CookiesProvider>
         </ThemeProvider>
       </StyledEngineProvider>
     </React.StrictMode>

diff --git a/src/lib/teuthologyAPI.ts b/src/lib/teuthologyAPI.ts
@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+
+const TEUTHOLOGY_API_SERVER = 
+    import.meta.env.VITE_TEUTHOLOGY_API || "";
+
+function githubLogin() {
+    window.location.replace(`${TEUTHOLOGY_API_SERVER}/login`);
+}
+
+export {
+    githubLogin,
+}