Merge branch 'functionality-authentication' into development

package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.6.2",
+    "axios": "^0.27.2",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.1",
     "jwt-decode": "^3.1.2",

src/App.js

@@ -4,15 +4,21 @@ import { Route, Routes, useLocation } from "react-router-dom";
 import { Box, Container, useMediaQuery } from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 
-import { LeftSideNavbar, RightSideBar } from "components";
+import {
+  ProtectRoute,
+  RightSideBar,
+  RestrictRoute,
+  LeftSideNavbar,
+} from "components";
 import { Bookmarks, Explore, Home, Landing, Profile } from "pages";
+
 import {
+  ROUTE_HOME,
   CustomTheme,
-  ROUTE_BOOKMARKS,
   ROUTE_EXPLORE,
-  ROUTE_HOME,
   ROUTE_LANDING,
   ROUTE_PROFILE,
+  ROUTE_BOOKMARKS,
 } from "utils";
 
 function App() {
@@ -23,7 +29,11 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       {location.pathname === ROUTE_LANDING ? (
-        <Landing />
+        <Routes>
+          <Route element={<RestrictRoute />}>
+            <Route path={ROUTE_LANDING} element={<Landing />} />
+          </Route>
+        </Routes>
       ) : (
         <Container className="container-lg">
           <Box
@@ -39,10 +49,12 @@ function App() {
               gridColumn={matches ? "span 9" : "span 6"}
             >
               <Routes>
-                <Route path={ROUTE_BOOKMARKS} element={<Bookmarks />} />
-                <Route path={ROUTE_EXPLORE} element={<Explore />} />
-                <Route path={ROUTE_HOME} element={<Home />} />
-                <Route path={ROUTE_PROFILE} element={<Profile />} />
+                <Route element={<ProtectRoute />}>
+                  <Route path={ROUTE_BOOKMARKS} element={<Bookmarks />} />
+                  <Route path={ROUTE_EXPLORE} element={<Explore />} />
+                  <Route path={ROUTE_HOME} element={<Home />} />
+                  <Route path={ROUTE_PROFILE} element={<Profile />} />
+                </Route>
               </Routes>
             </Box>
 

src/backend/controllers/AuthController.js

@@ -15,10 +15,10 @@ const sign = require("jwt-encode");
  * */
 
 export const signupHandler = function (schema, request) {
-  const { username, password, ...rest } = JSON.parse(request.requestBody);
+  const { email, password, ...rest } = JSON.parse(request.requestBody);
   try {
     // check if username already exists
-    const foundUser = schema.users.findBy({ username: username });
+    const foundUser = schema.users.findBy({ email });
     if (foundUser) {
       return new Response(
         422,
@@ -29,23 +29,22 @@ export const signupHandler = function (schema, request) {
       );
     }
     const _id = uuid();
+    const username = email.substring(0, email.indexOf("@"));
 
     const newUser = {
       _id,
       createdAt: formatDate(),
       updatedAt: formatDate(),
-      username,
+      email,
       password,
+      username,
       ...rest,
       followers: [],
       following: [],
       bookmarks: [],
     };
     const createdUser = schema.users.create(newUser);
-    const encodedToken = sign(
-      { _id, username },
-      process.env.REACT_APP_JWT_SECRET
-    );
+    const encodedToken = sign({ _id, email }, process.env.REACT_APP_JWT_SECRET);
     return new Response(201, {}, { createdUser, encodedToken });
   } catch (error) {
     return new Response(
@@ -61,27 +60,26 @@ export const signupHandler = function (schema, request) {
 /**
  * This handler handles user login.
  * send POST Request at /api/auth/login
- * body contains {username, password}
+ * body contains {email, password}
  * */
 
 export const loginHandler = function (schema, request) {
-  const { username, password } = JSON.parse(request.requestBody);
+  const { email, password } = JSON.parse(request.requestBody);
+
   try {
-    const foundUser = schema.users.findBy({ username: username });
+    const foundUser = schema.users.findBy({ email });
     if (!foundUser) {
       return new Response(
         404,
         {},
         {
-          errors: [
-            "The username you entered is not Registered. Not Found error",
-          ],
+          errors: ["The email you entered is not Registered. Not Found error"],
         }
       );
     }
     if (password === foundUser.password) {
       const encodedToken = sign(
-        { _id: foundUser._id, username },
+        { _id: foundUser._id, email },
         process.env.REACT_APP_JWT_SECRET
       );
       return new Response(200, {}, { foundUser, encodedToken });

src/backend/db/users.js

@@ -8,11 +8,12 @@ import { formatDate } from "../utils/authUtils";
 export const users = [
   {
     _id: uuid(),
-    firstName: "Adarsh",
-    lastName: "Balika",
-    username: "adarshbalika",
-    password: "adarshBalika123",
+    lastName: "Wick",
+    firstName: "John",
+    username: "johnwick",
+    password: "johnWick",
     createdAt: formatDate(),
     updatedAt: formatDate(),
+    email: "[email protected]",
   },
 ];

src/backend/utils/authUtils.js

@@ -9,7 +9,7 @@ export const requiresAuth = function (request) {
     process.env.REACT_APP_JWT_SECRET
   );
   if (decodedToken) {
-    const user = this.db.users.findBy({ username: decodedToken.username });
+    const user = this.db.users.findBy({ email: decodedToken.email });
     return user;
   }
   return new Response(

src/components/compose/Compose.jsx

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+
+export const Compose = ({ components, children }) => {
+  return (
+    <>
+      {components.reduceRight((acc, Comp) => {
+        return <Comp>{acc}</Comp>;
+      }, children)}
+    </>
+  );
+};
+
+Compose.propTypes = {
+  children: PropTypes.node,
+  components: PropTypes.arrayOf(PropTypes.elementType),
+};
+
+Compose.defaultProps = {
+  children: <></>,
+  components: [<></>],
+};

src/components/dialog/logout-dialog/LogoutDialog.jsx

@@ -1,14 +1,28 @@
 import { TickIcon } from "assets";
+import { useUser } from "context";
 import PropTypes from "prop-types";
+import { ROUTE_LANDING } from "utils";
 import { FollowItem } from "components";
+import { useNavigate } from "react-router-dom";
 import styles from "./LogoutDialog.module.css";
+import { useCookieHandler } from "custom-hooks";
 import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
 
 export const LogoutDialog = ({ openLogoutDialog, setOpenLogoutDialog }) => {
+  const navigate = useNavigate();
+  const { eraseCookies } = useCookieHandler();
+  const { userInitialState, setUserState } = useUser();
+
   const handleClose = () => {
     setOpenLogoutDialog(false);
   };
 
+  const handleLogOutClick = () => {
+    setUserState(userInitialState);
+    eraseCookies();
+    navigate(ROUTE_LANDING, { replace: true });
+  };
+
   return (
     <Dialog
       open={openLogoutDialog}
@@ -32,7 +46,7 @@ export const LogoutDialog = ({ openLogoutDialog, setOpenLogoutDialog }) => {
       <DialogActions className={styles.dialogAction}>
         <Button
           variant="text"
-          onClick={handleClose}
+          onClick={handleLogOutClick}
           className={styles.btn_dialogLogOut}
         >
           Log out @hsnice16

src/components/dialog/sign-in-dialog/SignInDialog.jsx

@@ -1,26 +1,37 @@
 import PropTypes from "prop-types";
-import { SignInDialogData } from "data";
+import { useAuthHandler } from "custom-hooks";
 import styles from "./SignInDialog.module.css";
 
 import {
-  DialogActionsCloseIcon,
+  FormError,
   FormButton,
   FormHeading,
   FormWrapper,
   PasswordInput,
+  DialogActionsCloseIcon,
 } from "components";
+
 import {
-  Checkbox,
   Dialog,
+  Checkbox,
+  TextField,
   DialogActions,
   DialogContent,
   FormControlLabel,
-  TextField,
 } from "@mui/material";
 
-const { buttonData } = SignInDialogData;
-
 export const SignInDialog = ({ openSignInDialog, setOpenSignInDialog }) => {
+  const {
+    status,
+    error,
+    email,
+    password,
+    rememberMe,
+    handleInputChange,
+    handleGuestLogInClick,
+    handleSignInFormSubmit,
+  } = useAuthHandler();
+
   const handleClose = () => {
     setOpenSignInDialog(false);
   };
@@ -32,33 +43,52 @@ export const SignInDialog = ({ openSignInDialog, setOpenSignInDialog }) => {
       <DialogContent className={styles.dialogContent}>
         <FormHeading headingText="Log In" />
 
+        {status === "error" && <FormError errorToShow={error} />}
+
         <FormWrapper>
           <TextField
             autoFocus
-            label="Email Address"
             type="email"
+            name="email"
+            value={email}
+            label="Email Address"
+            onChange={handleInputChange}
+            InputLabelProps={{ shrink: true }}
             placeholder="[email protected]"
-            InputLabelProps={{
-              shrink: true,
-            }}
           />
 
-          <PasswordInput label="Password" placeholder="password" />
+          <PasswordInput
+            name="password"
+            label="Password"
+            value={password}
+            placeholder="password"
+            onChange={handleInputChange}
+          />
 
           <FormControlLabel
-            value="remember-me"
-            control={<Checkbox disableRipple />}
             label="Remember me"
-            aria-label="remember me"
             labelPlacement="end"
+            checked={rememberMe}
+            aria-label="remember me"
+            onChange={handleInputChange}
+            control={<Checkbox disableRipple />}
           />
         </FormWrapper>
       </DialogContent>
 
       <DialogActions className={styles.action_logIn}>
-        {buttonData.map(({ _id, btnText, sxStyles }) => (
-          <FormButton key={_id} sxStyles={sxStyles} btnText={btnText} />
-        ))}
+        <FormButton
+          status={status}
+          btnText="Log In"
+          onClick={handleSignInFormSubmit}
+          sxStyles={{ margin: "1rem 0 0.5rem" }}
+        />
+        <FormButton
+          status={status}
+          btnText="Log In as a Guest"
+          onClick={handleGuestLogInClick}
+          sxStyles={{ margin: "0.5rem 0 0" }}
+        />
       </DialogActions>
     </Dialog>
   );