Merge pull request #28 from UofA-Blueprint/ASC-36

Added admin login page

.github/workflows/firebase-hosting-pull-request.yml

@@ -3,6 +3,8 @@
 
 name: Deploy to Firebase Hosting on PR
 'on': pull_request
+env:
+  VITE_FIREBASE_CONFIG: ${{ secrets.VITE_FIREBASE_CONFIG}}
 jobs:
   build_and_preview:
     if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
@@ -18,3 +20,5 @@ jobs:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_SCAFFOLD_TOOL }}'
           projectId: alzheimercalgary-v2
+        env:
+          VITE_FIREBASE_CONFIG: ${{ secrets.VITE_FIREBASE_CONFIG}}

.gitignore

@@ -30,3 +30,5 @@ package-lock.json
 
 # Local Netlify folder
 .netlify
+config.tsx
+.env

package.json

@@ -12,9 +12,11 @@
   "dependencies": {
     "@phosphor-icons/react": "^2.0.15",
     "clsx": "^2.1.0",
+    "firebase": "^10.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0",
+    "react-toastify": "^10.0.5",
     "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {

src/App.tsx

@@ -1,30 +1,32 @@
 //#region import
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-// routes
-import ButtonTestRoute from "@/routes/ButtonTestRoute";
-import ProfilePictureTest from "./routes/ProfilePictureTestRoute";
-import Test from "./routes/Test";
-import SearchBarTest from "./routes/SearchBarTestRoute";
-import SortDropdownListTestRoute from "@/routes/SortDropdownListTestRoute";
-import NavigationTest from "@/routes/NavigationTest";
-import TooltipTestRoute from "./routes/TooltipTestRoute";
-import InputCodeTest from "@/routes/InputCodeTest";
-import ToastTestRoute from "@/routes/ToastTestRoute";
-import MediaUploadZoneTestRoute from "@/routes/MediaUploadZoneTestRoute";
-import IconOptionTest from "./routes/IconOptionTest";
-import ImageTestRoute from "./routes/ImageTestRoute";
-import { MemberTableTestRoute } from "./routes/MemberTableTestRoute";
-import ColorPickerTestRoute from "@/routes/ColorPickerTestRoute";
-import InputFieldTestRoute from "./routes/InputFieldTestRoute";
-import MemberHeaderTestRoute from "@/routes/MemberHeaderTestRoute";
-import MediaUploadStatusTestRoute from "./routes/MediaUploadStatusTestRoute";
-import ModalTestRoute from "@/routes/ModalTestRoute";
-import GalleryTestRoute from "./routes/GalleryTestRoute";
+// test routes
+import ButtonTestRoute from "@/routes/test/ButtonTestRoute";
+import ProfilePictureTest from "./routes/test/ProfilePictureTestRoute";
+import Test from "./routes/test/Test";
+import SearchBarTest from "./routes/test/SearchBarTestRoute";
+import SortDropdownListTestRoute from "@/routes/test/SortDropdownListTestRoute";
+import NavigationTest from "@/routes/test/NavigationTest";
+import TooltipTestRoute from "./routes/test/TooltipTestRoute";
+import InputCodeTest from "@/routes/test/InputCodeTest";
+import ToastTestRoute from "@/routes/test/ToastTestRoute";
+import MediaUploadZoneTestRoute from "@/routes/test/MediaUploadZoneTestRoute";
+import IconOptionTest from "./routes/test/IconOptionTest";
+import ImageTestRoute from "./routes/test/ImageTestRoute";
+import { MemberTableTestRoute } from "./routes/test/MemberTableTestRoute";
+import ColorPickerTestRoute from "@/routes/test/ColorPickerTestRoute";
+import InputFieldTestRoute from "./routes/test/InputFieldTestRoute";
+import MemberHeaderTestRoute from "@/routes/test/MemberHeaderTestRoute";
+import MediaUploadStatusTestRoute from "./routes/test/MediaUploadStatusTestRoute";
+import ModalTestRoute from "@/routes/test/ModalTestRoute";
+import GalleryTestRoute from "./routes/test/GalleryTestRoute";
 import { MemberInformation } from "./components/MemberInformation";
 import { LoginModal } from "./components/LoginModal";
-import MemberProfilePictureTest from "@/routes/MemberProfilePictureTest";
+import MemberProfilePictureTest from "@/routes/test/MemberProfilePictureTest";
 
+// routes
+import AdminLogin from "./routes/admin/AdminLogin";
 
 const router = createBrowserRouter([
 	{
@@ -99,29 +101,14 @@ const router = createBrowserRouter([
 		path: "/modal-test",
 		element: <ModalTestRoute />,
 	},
-	{
-		path: "/login-modal-test",
-		element: (
-			<div className="flex flex-col gap-y-8 justify-center items-center py-20 bg-slate-100">
-				<LoginModal
-					title="Admin Panel"
-					type="admin"
-				/>
-				<LoginModal
-					title="Caregiver Panel"
-					type="member"
-				/>
-			</div>
-		),
-	},
 	{
 		path: "/member-table",
 		element: <MemberTableTestRoute />,
 	},
-  {
-    path: "/image-overlay",
-    element: <ImageTestRoute/>
-  },
+	{
+		path: "/image-overlay",
+		element: <ImageTestRoute />,
+	},
 	{
 		path: "/MediaUploadStatusTest",
 		element: <MediaUploadStatusTestRoute />,
@@ -134,10 +121,24 @@ const router = createBrowserRouter([
 		path: "/member-profile-picture-test",
 		element: <MemberProfilePictureTest />,
 	},
+
+	// Admin routes
+	{
+		path: "/admin",
+		element: (
+			<div>
+				<p>Home Page</p>
+			</div>
+		),
+	},
+	{
+		path: "/admin/login",
+		element: <AdminLogin />,
+	},
 ]);
 
 function App() {
-  return <RouterProvider router={router}></RouterProvider>;
+	return <RouterProvider router={router}></RouterProvider>;
 }
 
 export default App;

src/components/Button.tsx

@@ -1,63 +1,63 @@
 import { useRef } from "react";
 import { twMerge } from "tailwind-merge";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  onClick?: () => void;
-  icon?: React.ElementType;
-  text?: string;
-  rounded?: boolean;
-  fill?: boolean;
-  status?: string;
-  fontSize?: string;
-  color?: string;
+	onClick?: React.MouseEventHandler<HTMLButtonElement>;
+	icon?: React.ElementType;
+	text?: string;
+	rounded?: boolean;
+	fill?: boolean;
+	disabled: boolean;
+	fontSize?: string;
+	color?: string;
 }
 
 const Button: React.FC<ButtonProps> = ({
-  text = null,
-  icon: Icon = null,
-  onClick = () => console.log("Clicked"),
-  rounded = false,
-  fill = true,
-  status = "enabled",
-  fontSize = "1em",
-  className = null,
+	text = null,
+	icon: Icon = null,
+	onClick,
+	rounded = false,
+	fill = true,
+	disabled = false,
+	fontSize = "1em",
+	className = null,
 }) => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const buttonClassName = twMerge(
-    `flex flex-row items-center justify-center p-4 ${
-      status === "disabled"
-        ? "bg-neutrals-light-200 text-gray-400 cursor-default"
-        : fill
-        ? "relative overflow-hidden bg-primary-main text-white z-10 active:bg-primary-main active:text-white transition-colors hover:bg-neutrals-light-100 hover:text-primary-main border-2 border-primary-main hover:border-primary-main rounded-full w-full h-full before:absolute before:right-0 before:top-0 before:w-full before:h-full before:z-0 before:bg-primary-main before:content[''] before:transition-transform before:duration-300 hover:before:transform hover:before:translate-x-full"
-        : "relative overflow-hidden text-primary-dark border-primary-dark border-2 active:bg-white active:text-primary-dark transition-colors before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:origin-top-left before:scale-x-0 before:bg-primary-dark before:transition-transform before:duration-300 before:content-[''] hover:text-white before:hover:scale-x-100"
-    } ${rounded ? "rounded-full" : "rounded-lg"} w-full h-full`,
-    className
-    // change color --> change text-{color}, border-{color} and active:bg-{color}, active:text-{color}, before:bg-{color}
-  );
+	const buttonRef = useRef<HTMLButtonElement>(null);
+	const buttonClassName = twMerge(
+		`flex flex-row items-center justify-center p-4 ${
+			disabled === true
+				? "bg-neutrals-light-200 text-gray-400 cursor-default"
+				: fill
+				? "relative overflow-hidden bg-primary-main text-white z-10 active:bg-primary-main active:text-white transition-colors hover:bg-neutrals-light-100 hover:text-primary-main border-2 border-primary-main hover:border-primary-main rounded-full w-full h-full before:absolute before:right-0 before:top-0 before:w-full before:h-full before:z-0 before:bg-primary-main before:content[''] before:transition-transform before:duration-300 hover:before:transform hover:before:translate-x-full"
+				: "relative overflow-hidden text-primary-dark border-primary-dark border-2 active:bg-white active:text-primary-dark transition-colors before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:origin-top-left before:scale-x-0 before:bg-primary-dark before:transition-transform before:duration-300 before:content-[''] hover:text-white before:hover:scale-x-100"
+		} ${rounded ? "rounded-full" : "rounded-lg"} w-full h-full`,
+		className,
+		// change color --> change text-{color}, border-{color} and active:bg-{color}, active:text-{color}, before:bg-{color}
+	);
 
-  return (
-    <button
-      ref={buttonRef}
-      style={{ fontSize: fontSize }}
-      onClick={onClick}
-      className={buttonClassName}
-      disabled={!status}
-    >
-      {Icon && !text && (
-        <div className="relative z-20">
-          <Icon />
-        </div>
-      )}
-      {Icon && text && (
-        <>
-          <div className="relative z-20">
-            <Icon className="mt-0.2" />
-          </div>
-          <span className="relative z-20 pl-1">{text}</span>
-        </>
-      )}
-      {!Icon && text && <span className="relative z-20">{text}</span>}
-    </button>
-  );
+	return (
+		<button
+			ref={buttonRef}
+			style={{ fontSize: fontSize }}
+			onClick={onClick}
+			className={buttonClassName}
+			disabled={disabled}
+		>
+			{Icon && !text && (
+				<div className="relative z-20">
+					<Icon />
+				</div>
+			)}
+			{Icon && text && (
+				<>
+					<div className="relative z-20">
+						<Icon className="mt-0.2" />
+					</div>
+					<span className="relative z-20 pl-1">{text}</span>
+				</>
+			)}
+			{!Icon && text && <span className="relative z-20">{text}</span>}
+		</button>
+	);
 };
 
 export default Button;