oauth works and changed background of sign in and sign up

Author: dentonwong

CHANGE_LOG.md

@@ -16,6 +16,7 @@ Changes:<br>
     - Additional logic added for edge cases in inputs for state manager (passing in non-Arrays/non-Objects as Array type and Object type).
     - Fixed issue with the bottom panel not dragging or sticking to the mouse when the mouse is over the demorender iframe
     - Cleaned up hundreds of lines of outdated code and archived multiple unused and duplicate files
+  - OAuth now linked to standalone gmail and github accounts
 - User Features:
   - UI updated with a modern style for a better developer experience
     - Added many user feedback alerts for better experience including alerts for when projects are published, cloned, deleted, HTML custom tags are created, context created, or custom component created.

app/src/components/App.tsx

@@ -31,38 +31,38 @@ export const App = (): JSX.Element => {
   }, []);
 
   // following useEffect runs on first mount
-  useEffect(() => {
-    // console.log('cookies.get in App', Cookies.get())
-    // if user is a guest, see if a project exists in localforage and retrieve it
-    // v17 May not currently work yet
-    if (!state.isLoggedIn) {
-      localforage.getItem('guestProject').then((project) => {
-        // if project exists, use dispatch to set initial state to that project
-        if (project) {
-          dispatch(setInitialState(project));
-        }
-      });
-    } else {
-      // otherwise if a user is logged in, use a fetch request to load user's projects from DB
+  // useEffect(() => {
+  //   // console.log('cookies.get in App', Cookies.get())
+  //   // if user is a guest, see if a project exists in localforage and retrieve it
+  //   // v17 May not currently work yet
+  //   if (!state.isLoggedIn) {
+  //     localforage.getItem('guestProject').then((project) => {
+  //       // if project exists, use dispatch to set initial state to that project
+  //       if (project) {
+  //         dispatch(setInitialState(project));
+  //       }
+  //     });
+  //   } else {
+  //     // otherwise if a user is logged in, use a fetch request to load user's projects from DB
 
-      let userId;
-      if (Cookies.get('ssid')) {
-        userId = Cookies.get('ssid');
-      } else {
-        userId = window.localStorage.getItem('ssid');
-      }
-      //also load user's last project, which was saved in localforage on logout
-      localforage.getItem(userId).then((project) => {
-        if (project) {
-          dispatch(setInitialState(project));
-        } else {
-          console.log(
-            'No user project found in localforage, setting initial state blank'
-          );
-        }
-      });
-    }
-  }, []);
+  //     let userId;
+  //     if (Cookies.get('ssid')) {
+  //       userId = Cookies.get('ssid');
+  //     } else {
+  //       userId = window.localStorage.getItem('ssid');
+  //     }
+  //     //also load user's last project, which was saved in localforage on logout
+  //     localforage.getItem(userId).then((project) => {
+  //       if (project) {
+  //         dispatch(setInitialState(project));
+  //       } else {
+  //         console.log(
+  //           'No user project found in localforage, setting initial state blank'
+  //         );
+  //       }
+  //     });
+  //   }
+  // }, []);
   // useEffect(() => {
   //   // provide config properties to legacy projects so new edits can be auto saved
   //   // if (state.config === undefined) {

app/src/components/login/SignIn.tsx

@@ -52,7 +52,7 @@ const useStyles = makeStyles((theme) => ({
   paper: {
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   avatar: {
     backgroundColor: '#3EC1AC'
@@ -211,8 +211,8 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
 
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={!isDarkMode ? SigninLight : SigninDark}>
-        <Container component="main" maxWidth="xs">
+      <ThemeProvider theme={SigninDark}>
+        <Container component="main" maxWidth="xs" >
           <CssBaseline />
           <div className={classes.paper}>
             {/* <Button
@@ -227,7 +227,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
               onClick={handleDarkModeToggle}
             >
               {isDarkMode ? `Light Mode` : `Dark Mode`}
-            </Button> */}
+            </Button>  */}
             <Avatar className={classes.avatar} sx={{ marginTop: '10vh' }}>
               <LockOutlinedIcon />
             </Avatar>
@@ -372,19 +372,20 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
                 />
               </svg>
             </Button>
-            <Grid container>
+            <Grid container justifyContent="flex-end">
+              {/* forgot password currently not implemented
               <Grid item xs>
                 <RouteLink
-                  style={{ color: isDarkMode ? '#aaaaaa' : 'black' }}
+                  style={{ color: '#aaaaaa' }}
                   to={`/signup`}
                   className="nav_link"
                 >
                   Forgot password?
                 </RouteLink>
-              </Grid>
+              </Grid> */}
               <Grid item>
                 <RouteLink
-                  style={{ color: isDarkMode ? '#aaaaaa' : 'black' }}
+                  style={{ color: '#aaaaaa' }}
                   to={`/signup`}
                   className="nav_link"
                 >

app/src/components/login/SignUp.tsx

@@ -206,11 +206,11 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = (props) => {
 
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={!isDarkMode ? SigninLight : SigninDark}>
+      <ThemeProvider theme={SigninDark}>
         <Container component="main" maxWidth="xs">
           <CssBaseline />
           <div className={classes.paper}>
-            <Button
+            {/* <Button
               color="primary"
               style={{
                 minWidth: '113.97px',
@@ -221,7 +221,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = (props) => {
               onClick={handleDarkModeToggle}
             >
               {`Dark Mode: ${isDarkMode}`}
-            </Button>
+            </Button> */}
             <Avatar className={classes.avatar} sx={{ marginTop: '10vh' }}>
               <AssignmentIcon />
             </Avatar>
@@ -332,7 +332,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = (props) => {
               <Grid container justifyContent="flex-end">
                 <Grid item>
                   <RouteLink
-                    style={{ color: isDarkMode ? '#aaaaaa' : 'black' }}
+                    style={{ color: '#aaaaaa' }}
                     to={`/login`}
                     className="nav_link"
                   >

app/src/components/marketplace/MarketplaceCard.tsx

@@ -51,6 +51,9 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
   const [s3ImgURL, setS3ImgURL] = React.useState<null | string>(null);
   const open = Boolean(anchorEl);
   const [alertOpen, setAlertOpen] = React.useState<boolean>(false);
+  const [guest, setGuest] = React.useState<boolean>(null);
+  const state = useSelector((store: RootState) => store.appState);
+
 
   useEffect(() => {
     async function s3ImgFetch() {
@@ -69,30 +72,34 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
   }, []);
 
 
+
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClone = async () => {
-    // creates a copy of the project
-    const docId = proj._id;
-    const response = await axios.get(`/cloneProject/${docId}`, {
-      params: { username: window.localStorage.getItem('username') }
-    }); //passing in username as a query param is query params
-    const project = response.data;
-    setAlertOpen(true);
-    setAnchorEl(null);
-    return {
-      _id: project._id,
-      name: project.name,
-      published: project.published,
-      ...project.project
-    };
+    if(state.isLoggedIn){
+      // creates a copy of the project
+      const docId = proj._id;
+      const response = await axios.get(`/cloneProject/${docId}`); //passing in username as a query param is query params
+      const project = response.data;
+      setAlertOpen(true);
+      setAnchorEl(null);
+      return {
+        _id: project._id,
+        name: project.name,
+        published: project.published,
+        ...project.project
+      };
+    }
+    setGuest(true);
   };
 
   const handleCloneOpen = async () => {
-    const project = await handleClone();
-    history.push('/');
-    dispatch(openProject(project));
+    if(state.isLoggedIn){
+      const project = await handleClone();
+      history.push('/');
+      dispatch(openProject(project));
+    }
   };
 
   const handleClose = () => {
@@ -197,6 +204,20 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
             Project Cloned!
           </Alert>
         </Snackbar>
+        <Snackbar
+          open={guest}
+          autoHideDuration={3000}
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }} 
+          onClose={handleAlertClose}
+        >
+          <Alert
+            onClose={handleAlertClose}
+            severity="error"
+            sx={{ width: '100%', color: 'white' }}
+          >
+            Please login to clone!
+          </Alert>
+        </Snackbar>
       </Card>
     </>
   );

app/src/components/right/LoginButton.tsx

@@ -5,13 +5,35 @@ import config from '../../../../config.js';
 import { RootState } from '../../redux/store';
 import Cookies from 'js-cookie';
 // note that API_BASE_URL is assigned to different pages on dev mode vs prod mode
-const { API_BASE_URL, API_BASE_URL2 } = config;
+const { DEV_PORT, API_BASE_URL, API_BASE_URL2 } = config;
+const isDev = process.env.NODE_ENV === 'development';
+let serverURL = API_BASE_URL;
+
+//check if we're in dev mode
+if (isDev) {
+  serverURL = `http://localhost:${DEV_PORT}`;
+}
+
 
 export default function LoginButton() {
   const state = useSelector((store:RootState) => store.appState);
   const dispatch = useDispatch();
 
   const handleLogout = () => {
+    const projects = fetch(`${serverURL}/logout`, {
+      method: 'GET',
+      headers: {
+        'content-type': 'application/json'
+      },
+      // need credentials for userid pull from cookie
+      credentials: 'include'
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        return data;
+      })
+      .catch((err) => console.log(`Error getting project ${err}`));
+  
 
     window.localStorage.clear();
 
@@ -25,8 +47,10 @@ export default function LoginButton() {
   };
 
   const handleLogin = () => {
+    window.localStorage.clear();
     window.location.href = `${API_BASE_URL2}/#/login`;
   };
+
   if (state.isLoggedIn) {
     return (
       <button onClick={handleLogout}>

app/src/index.tsx

@@ -52,7 +52,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
   })
     .then((res) => res.json())
     .then((data) => {
-      console.log('........................ data', data);
+
       setIsLoggedIn(data);
 
     })
@@ -63,13 +63,12 @@ return (
   <Route
     {...rest}
     render={(props) => {
-     if (isLoggedIn === true) {
-        console.log("should be app")
+     if (isLoggedIn === true || window.localStorage.getItem('ssid') === 'guest') {
         // User is logged in, render the protected component
         return <Component {...props} />;
       } else if(isLoggedIn !== null) {
-        console.log("redirect login")
         // User is not logged in, redirect to the login page
+        // Ignores the initial render which would have isLoggedIn as null
         return <Redirect to="/login" />;
       }
     }}

app/src/public/styles/style.css

@@ -26,7 +26,7 @@ body {
   overflow: hidden;
   height: 100vh;
   width: 100vw;
-  background-color:white
+  background-color: #191919
 }
 
 h4 {

package-lock.json

@@ -120,6 +120,7 @@
     "@reduxjs/toolkit": "^1.9.3",
     "@types/js-cookie": "^3.0.2",
     "@types/node": "^18.6.3",
+    "@types/passport": "^1.0.13",
     "@types/prettier": "^2.6.4",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",

package.json

@@ -21,6 +21,14 @@ const cookieController: CookieController = {
     return next();
   }, 
 
+  deleteCookies: (req, res, next) => {
+
+    res.clearCookie('ssid');
+    res.clearCookie('username');
+    res.clearCookie('connect.sid');
+    return next();
+  }
+
 
 };
 

server/controllers/cookieController.ts

@@ -124,7 +124,7 @@ const marketplaceController: MarketplaceController = {
   cloneProject: async (req, res, next) => {
     // pulls cookies from request
     const userId = req.cookies.ssid;
-    const username = req.query.username;
+    const username = req.cookies.username;
     try { // trying to find project, update its userId and username to a new project, then save it
       const originalProject = await Projects.findOne({ _id: req.params.docId }).exec();
       const updatedProject = originalProject.toObject({ minimize: false }); // minimize false makes sure Mongoose / MongoDB does not remove nested properties with values of empty objects {}