Make new 'Login' component

Signed-off-by: Vallari <[email protected]>
ceph · Aug 16, 2023 · 94516d5 · 94516d5
1 parent eea851d
commit 94516d5
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 39 deletions.
diff --git a/src/components/AppBar/index.jsx b/src/components/AppBar/index.jsx
@@ -11,7 +11,7 @@ import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import { useCookies } from "react-cookie";
 
-import { githubLogin } from "../../lib/teuthologyAPI"
+import Login from "../Login";
 
 
 const PREFIX = 'index';
@@ -20,7 +20,6 @@ const classes = {
   appBar: `${PREFIX}-appBar`,
   title: `${PREFIX}-title`,
   toolbarIcon: `${PREFIX}-toolbarIcon`,
-  loginButton: `${PREFIX}-loginButton`,
 };
 
 const StyledMuiAppBar = styled(MuiAppBar)((
@@ -47,42 +46,11 @@ const StyledMuiAppBar = styled(MuiAppBar)((
     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}>
@@ -117,12 +85,7 @@ export default function AppBar(props) {
           </RouterLink>
         </Typography>
         <div>
-          { cookies["pulpitosession"]
-              ? <Typography variant="button" display="block" gutterBottom>
-                    Hey, {getUsername()} !
-                </Typography> 
-              : <Button variant="outlined" onClick={login} className={classes.loginButton}>Login</Button> 
-          }
+          <Login />
         </div>
         <IconButton onClick={props.toggleDarkMode} size="large">
           {props.darkMode ? <Brightness7Icon /> : <Brightness4Icon />}

diff --git a/src/components/Login/index.jsx b/src/components/Login/index.jsx
@@ -0,0 +1,48 @@
+import { useCookies } from "react-cookie";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
+import { githubLogin } from "../../lib/teuthologyAPI";
+
+
+const GH_USER_COOKIE = "GH_USER";
+
+
+export default function Login() {
+  const [cookies, setCookie, removeCookie] = useCookies([GH_USER_COOKIE]);
+
+  const getCookieData = () => {
+    // ISO-8859-1 octal string -> char string
+    const authcookies = (cookies[GH_USER_COOKIE].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 (
+    <div>
+      {cookies[GH_USER_COOKIE]
+        ? <Typography variant="button" display="block" gutterBottom>
+          Hey, {getUsername()} !
+        </Typography>
+        : <Button variant="outlined" onClick={login}>Login</Button>
+      }
+    </div>
+  );
+}