Merge branch 'main' into feature-526-Add-charts

SeattleColleges · Oct 15, 2024 · a351bf9 · a351bf9
2 parents 1ffb29a + 5c808ee
commit a351bf9
Show file tree

Hide file tree

Showing 50 changed files with 8,102 additions and 3,166 deletions.
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1,4 @@
+# Copy and create new .env file
+# Public API URL: https://belindascloset.com/api
+# Local API URL: http://localhost:3001/api  // localhost port and Nest.js listener port value need to match
+API_URL=http://localhost:3001/api
diff --git a/app/add-product-page/page.tsx b/app/add-product-page/page.tsx
@@ -22,9 +22,8 @@ import {
   ProductSizePantsInseamList,
 } from "./product-prop-list";
 import UnauthorizedPageMessage from "@/components/UnauthorizedPageMessage";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 const AddProduct = () => {
   const [productType, setProductType] = useState<string>("");
@@ -165,13 +164,13 @@ const AddProduct = () => {
           <Typography
             component="h1"
             variant="h3"
-            sx={{ marginBottom: "15px" }}
+            sx={{ mb: 3, mt: 3 }}
           >
             Add a Product
           </Typography>
 
           {/* Product Type Field */}
-          <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+          <FormControl variant="filled" sx={{ m: 1, minWidth: 250 }}>
             <InputLabel id="type-selectlabel">Product Type</InputLabel>
             <Select
               labelId="type-selectlabel"
@@ -347,7 +346,7 @@ const AddProduct = () => {
               color="primary"
               onClick={handleSubmit}
               type="submit"
-              sx={{ mt: 1 }}
+              sx={{ m: 1, mt: 2 }}
             >
               Submit
             </Button>

diff --git a/app/admin-page/page.tsx b/app/admin-page/page.tsx
@@ -78,6 +78,16 @@ const Admin = () => {
               Archived Products
             </Button>
           </Grid>
+          <Grid item xs={12} sm="auto">
+            <Button 
+              href="/profile" 
+              color="primary" 
+              variant="contained"
+              sx={{ width: "200px" }}
+            >
+              Profile
+            </Button>
+          </Grid>
         </Grid>
       </Box>
     </div>

diff --git a/app/archived-products-page/page.tsx b/app/archived-products-page/page.tsx
@@ -5,8 +5,8 @@ import ProductCard from "@/components/ProductCard";
 import logo from "@/public/belinda-images/logo.png";
 import { Container, Grid, Typography } from "@mui/material";
 import UnauthorizedPageMessage from "@/components/UnauthorizedPageMessage";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 const placeholderImg = logo;
 interface Product {
   _id: string;
@@ -72,7 +72,7 @@ const ViewProduct = ({ categoryId }: { categoryId: string }) => {
     }
   }, []);
 
-  if ((userRole === "admin" || userRole === "creator")) {
+  if (userRole === "admin" || userRole === "creator") {
     return (
       <Container sx={{ py: 4 }} maxWidth="lg">
         <Typography
@@ -100,6 +100,7 @@ const ViewProduct = ({ categoryId }: { categoryId: string }) => {
                 _id={product._id}
                 isHidden={false}
                 isSold={false}
+                showArchiveButton={false} // Pass the prop to hide the archive button
               />
             </Grid>
           ))}
@@ -110,6 +111,7 @@ const ViewProduct = ({ categoryId }: { categoryId: string }) => {
     return <UnauthorizedPageMessage />;
   }
 };
+
 export default function ProductList({
   params,
 }: {
@@ -118,4 +120,4 @@ export default function ProductList({
   const decodedCategoryId = decodeURIComponent(params.categoryId);
 
   return <ViewProduct categoryId={decodedCategoryId} />;
-}
+}
diff --git a/app/auth/change-password-page/page.tsx b/app/auth/change-password-page/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import Image from "next/image";
 import logo from "@/public/belinda-images/logo.png";
-import { ChangeEventHandler, FormEventHandler, useState } from "react";
+import { ChangeEventHandler, FormEventHandler, useEffect, useState } from "react";
 import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import {
@@ -20,9 +20,9 @@ import {
 import ErrorAlert from "@/components/ErrorAlert";
 import SuccessAlert from "@/components/SuccessAlert";
 import { useRouter } from "next/navigation";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+import UnauthorizedPageMessage from "@/components/UnauthorizedPageMessage";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 const ChangePasswordPage = () => {
   const [password, setPassword] = useState({
@@ -140,115 +140,128 @@ const ChangePasswordPage = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
-  return (
-    <Paper elevation={6} sx={{ width: isMobile ? "280px" : "400px", maxWidth: 400, padding: 3, mt: 3 }}>
-      <Container
-        disableGutters
-        fixed
-        maxWidth="xs"
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <Image
-          src={logo}
-          alt="logo"
-          style={{ width: 65, height: 50, marginBottom: 15 }}
-        />
-      </Container>
-      <Typography component="h1" variant="h5" textAlign="center" sx={{ mb: 2 }}>
-        Change Password
-      </Typography>
-      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
-        <TextField
-          sx={{ mb: isMobile ? 1: 2 }}
-          variant="outlined"
-          margin="normal"
-          required={true}
-          fullWidth
-          id="currentPassword"
-          label="Current Password"
-          name="currentPassword"
-          type={showPassword ? "text" : "password"}
-          value={password.currentPassword}
-          onChange={handleChange}
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton
-                  aria-label="toggle password visibility"
-                  onClick={toggleCurrentPasswordVisibility}
-                >
-                  {showPassword ? <Visibility /> : <VisibilityOff />}
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-        />
-        <TextField
-          sx={{ mb: isMobile ? 1: 2 }}
-          variant="outlined"
-          margin="normal"
-          required={true}
-          fullWidth
-          id="newPassword"
-          label="New Password"
-          name="newPassword"
-          type={showConfirmPassword ? "text" : "password"}
-          value={password.newPassword}
-          onChange={handleChange}
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton
-                  aria-label="toggle password visibility"
-                  onClick={toggleNewPasswordVisibility}
-                >
-                  {showConfirmPassword ? <Visibility /> : <VisibilityOff />}
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-        />
-        <TextField
-          sx={{ mb: isMobile ? 1: 2 }}
-          variant="outlined"
-          margin="normal"
-          required={true}
-          fullWidth
-          id="confirmPassword"
-          label="Confirm Password"
-          name="confirmPassword"
-          type={showConfirmPassword ? "text" : "password"}
-          value={password.confirmPassword}
-          onChange={handleChange}
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton
-                  aria-label="toggle confirm password visibility"
-                  onClick={toggleNewPasswordVisibility}
-                >
-                  {showConfirmPassword ? <Visibility /> : <VisibilityOff />}
-                </IconButton>
-              </InputAdornment>
-            ),
+  const [userRole, setUserRole] = useState("");
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      const userRole = JSON.parse(atob(token.split(".")[1])).role;
+      setUserRole(userRole);
+    }
+  }, []);
+
+  if ((userRole === "admin" || userRole === "creator" || userRole === "user")) {
+    return (
+      <Paper elevation={6} sx={{ width: isMobile ? "280px" : "400px", maxWidth: 400, padding: 3, mt: 3 }}>
+        <Container
+          disableGutters
+          fixed
+          maxWidth="xs"
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
-        />
-        {error && <ErrorAlert message={error} />}
-        {success && <SuccessAlert message={success} />}
-        <Button
-          type="submit"
-          fullWidth
-          variant="contained"
-          sx={{ mt: 3, mb: 2 }}
         >
+          <Image
+            src={logo}
+            alt="logo"
+            style={{ width: 65, height: 50, marginBottom: 15 }}
+          />
+        </Container>
+        <Typography component="h1" variant="h5" textAlign="center" sx={{ mb: 2 }}>
           Change Password
-        </Button>
-      </Box>
-    </Paper>
-  );
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+          <TextField
+            sx={{ mb: isMobile ? 1: 2 }}
+            variant="outlined"
+            margin="normal"
+            required={true}
+            fullWidth
+            id="currentPassword"
+            label="Current Password"
+            name="currentPassword"
+            type={showPassword ? "text" : "password"}
+            value={password.currentPassword}
+            onChange={handleChange}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    aria-label="toggle password visibility"
+                    onClick={toggleCurrentPasswordVisibility}
+                  >
+                    {showPassword ? <Visibility /> : <VisibilityOff />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+          <TextField
+            sx={{ mb: isMobile ? 1: 2 }}
+            variant="outlined"
+            margin="normal"
+            required={true}
+            fullWidth
+            id="newPassword"
+            label="New Password"
+            name="newPassword"
+            type={showConfirmPassword ? "text" : "password"}
+            value={password.newPassword}
+            onChange={handleChange}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    aria-label="toggle password visibility"
+                    onClick={toggleNewPasswordVisibility}
+                  >
+                    {showConfirmPassword ? <Visibility /> : <VisibilityOff />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+          <TextField
+            sx={{ mb: isMobile ? 1: 2 }}
+            variant="outlined"
+            margin="normal"
+            required={true}
+            fullWidth
+            id="confirmPassword"
+            label="Confirm Password"
+            name="confirmPassword"
+            type={showConfirmPassword ? "text" : "password"}
+            value={password.confirmPassword}
+            onChange={handleChange}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    aria-label="toggle confirm password visibility"
+                    onClick={toggleNewPasswordVisibility}
+                  >
+                    {showConfirmPassword ? <Visibility /> : <VisibilityOff />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+          {error && <ErrorAlert message={error} />}
+          {success && <SuccessAlert message={success} />}
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            sx={{ mt: 3, mb: 2 }}
+          >
+            Change Password
+          </Button>
+        </Box>
+      </Paper>
+    );
+  } else {
+    return <UnauthorizedPageMessage />;
+  }
 };
 export default ChangePasswordPage;
diff --git a/app/auth/reset-password-page/page.tsx b/app/auth/reset-password-page/page.tsx
@@ -14,9 +14,8 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 const ResetPasswordPage = () => {
   const [password, setPassword] = useState({

diff --git a/app/auth/sign-in/page.tsx b/app/auth/sign-in/page.tsx
@@ -16,8 +16,11 @@ import {
   useMediaQuery,
 } from "@mui/material";
 import useAuth from "@/hooks/useAuth";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+// Check env.local file to update API address
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
+if (URL?.includes('localhost')) {
+  console.log('Dev API Address: ',URL)
+}
 
 const Signin = () => {
   const [error, setError] = useState("");