- {/* Label */}
-
+ );
}
export default InputField;
diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index e0259bd..a01aaec 100644
--- a/src/components/LoginModal.tsx
+++ b/src/components/LoginModal.tsx
@@ -1,7 +1,7 @@
//#region Imports
import logoUrl from "@/assets/images/asc_logo.svg";
import { twMerge } from "tailwind-merge";
-import { useState } from "react";
+import React, { useState } from "react";
import Button from "./Button";
import InputField from "./InputField";
@@ -10,20 +10,41 @@ import { InputCode } from "./InputCode";
//#region Interface
interface LoginModalProps {
- /**
- * Additional TailwindCSS classes.
- */
- className?: string;
+ /**
+ * Additional TailwindCSS classes.
+ */
+ className?: string;
- /**
- * The title of the login modal.
- */
- title: string;
+ /**
+ * The title of the login modal.
+ */
+ title: string;
- /**
- * The type of the login modal.
- */
- type: "admin" | "member";
+ /**
+ * The type of the login modal.
+ */
+ type: "admin" | "member";
+
+ /**
+ * The email of the user.
+ */
+ email: string;
+ setEmail: React.Dispatch
-
- {required && *}
-
+ if (inputRef.current) {
+ setInput(inputRef.current.value);
+ if (inputRef.current.value.trim() === "" && required === true) {
+ setShowError(true);
+ }
+ if (type === "email") {
+ const email = inputRef.current.value.trim();
+ const emailRegex =
+ /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+ const valid = emailRegex.test(email);
+ setShowError(!valid);
+ } else if (type === "password") {
+ const password = inputRef.current.value.trim();
+ password.length < 6 ? setShowError(true) : setShowError(false);
+ }
+ }
+ }
- {/* Input */}
-
- setInput(e.target.value)}
- >
+ return (
+ setShowPassword(!showPassword)}
+ />
+ )}
+
+
+ {/* Error */}
+ {showError && (
+
+ {/* Label */}
+ setShowPassword(!showPassword)}
- />
- )}
+ {/* Input */}
+ setShowPassword(!showPassword)}
+ />
+ )}
- {/* Error */}
- {error && (
-
- );
+ {/* Show password button */}
+ {type.toLowerCase() === "password" && showPassword && (
+
+
+ {required && *}
+
- {type.toLowerCase() === "password" && !showPassword && (
-
+ validateInput(e)}
+ >
- {/* Show password button */}
- {type.toLowerCase() === "password" && showPassword && (
- setShowPassword(!showPassword)}
- />
- )}
-
+ {type.toLowerCase() === "password" && !showPassword && (
+
-
- )}
-
+
+ )}
+
- {/* Logo */}
- 
+ return (
+
+ );
};
export { LoginModal };
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index 96142dd..f2a6dfe 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -1,58 +1,80 @@
import clsx from "clsx";
-import { Warning, WarningCircle, Check, Info } from "@phosphor-icons/react";
-
+import { Warning, WarningCircle, Check, Info } from "@phosphor-icons/react";
interface ToastIconProps {
- /** The theme of the toast */
- severity?: "success" | "error" | "warning" | "info" | "neutral",
+ /** The theme of the toast */
+ severity?: "success" | "error" | "warning" | "info" | "neutral";
}
function ToastIcon({ severity }: ToastIconProps) {
- if (severity === "success") {
- return
+ {/* Logo */}
+
- {/* Title */}
-
- );
+ {/* Login Button */}
+
+ {title}
+ {/* Title */} ++ {title} +
- {/*Username field */} -
-
- )
+ return (
+
+
+ );
}
-export default Toast;
\ No newline at end of file
+export default Toast;
diff --git a/src/index.css b/src/index.css
index 5ec9b1c..41f3dc5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,6 +21,10 @@
}
@layer base {
+ .Toastify__toast {
+ background: #bbccdd;
+ }
+
.scroller {
scrollbar-color: #555770 #fffff;
scrollbar-width: auto;
diff --git a/src/routes/ImageTestRoute.tsx b/src/routes/ImageTestRoute.tsx
deleted file mode 100644
index b1fd32b..0000000
--- a/src/routes/ImageTestRoute.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import Image from "@/components/Image";
-import Overlay from '@/components/Overlay';
-import old1 from '../assets/images/old1.jpg';
-
-function ImageTestRoute() {
-
- return (
-
- {/* Using margin or padding for the parent tag can break the navigation bar. */}
-
- );
-}
-
-export default NavigationTest;
diff --git a/src/routes/SearchBarTestRoute.tsx b/src/routes/SearchBarTestRoute.tsx
deleted file mode 100644
index 8daeca4..0000000
--- a/src/routes/SearchBarTestRoute.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import SearchBar from "../components/SearchBar";
-
-function SearchBarTest() {
- return (
-
-
- );
-}
-
-export default SearchBarTest;
diff --git a/src/routes/SortDropdownListTestRoute.tsx b/src/routes/SortDropdownListTestRoute.tsx
deleted file mode 100644
index 6d359ea..0000000
--- a/src/routes/SortDropdownListTestRoute.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import DropdownItem from "../components/DropdownItem";
-import SortDropdownList from "../components/SortDropdownList";
-
-function SortDropdownListTestRoute() {
- return (
-
-
- );
-}
-
-export default SortDropdownListTestRoute;
diff --git a/src/routes/admin/AdminLogin.tsx b/src/routes/admin/AdminLogin.tsx
new file mode 100644
index 0000000..858cb9a
--- /dev/null
+++ b/src/routes/admin/AdminLogin.tsx
@@ -0,0 +1,79 @@
+//#region imports
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+import { initializeApp } from "firebase/app";
+import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
+
+import { LoginModal } from "@/components/LoginModal.js";
+import Toast from "@/components/Toast.js";
+//#endregion
+
+//#region firebase
+// Initialize Firebase
+const firebaseConfig = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIG);
+const app = initializeApp(firebaseConfig);
+
+// Initialize Firebase Authentication and get a reference to the service
+const auth = getAuth(app);
+//#endregion
+
+/**
+ * Admin login page
+ * @returns Admin login page with authentication functionality
+ */
+export default function AdminLogin() {
+ const navigate = useNavigate();
+ const [email, setEmail] = useStateHello
-
- Is this the sort dropdown list that you looking for?😩
-
-
-
- What happen If I do this?
-
+
+ );
+}
diff --git a/src/routes/ButtonTestRoute.tsx b/src/routes/test/ButtonTestRoute.tsx
similarity index 100%
rename from src/routes/ButtonTestRoute.tsx
rename to src/routes/test/ButtonTestRoute.tsx
diff --git a/src/routes/ColorPickerTestRoute.tsx b/src/routes/test/ColorPickerTestRoute.tsx
similarity index 100%
rename from src/routes/ColorPickerTestRoute.tsx
rename to src/routes/test/ColorPickerTestRoute.tsx
diff --git a/src/routes/GalleryTestRoute.tsx b/src/routes/test/GalleryTestRoute.tsx
similarity index 100%
rename from src/routes/GalleryTestRoute.tsx
rename to src/routes/test/GalleryTestRoute.tsx
diff --git a/src/routes/IconOptionTest.tsx b/src/routes/test/IconOptionTest.tsx
similarity index 100%
rename from src/routes/IconOptionTest.tsx
rename to src/routes/test/IconOptionTest.tsx
diff --git a/src/routes/test/ImageTestRoute.tsx b/src/routes/test/ImageTestRoute.tsx
new file mode 100644
index 0000000..75db270
--- /dev/null
+++ b/src/routes/test/ImageTestRoute.tsx
@@ -0,0 +1,16 @@
+import Image from "@/components/Image";
+import Overlay from "@/components/Overlay";
+import old1 from "../../assets/images/old1.jpg";
+
+function ImageTestRoute() {
+ return (
+
+ {/* Using margin or padding for the parent tag can break the navigation bar. */}
+
+ );
+}
+
+export default NavigationTest;
diff --git a/src/routes/ProfilePictureTestRoute.tsx b/src/routes/test/ProfilePictureTestRoute.tsx
similarity index 100%
rename from src/routes/ProfilePictureTestRoute.tsx
rename to src/routes/test/ProfilePictureTestRoute.tsx
diff --git a/src/routes/test/SearchBarTestRoute.tsx b/src/routes/test/SearchBarTestRoute.tsx
new file mode 100644
index 0000000..e95f606
--- /dev/null
+++ b/src/routes/test/SearchBarTestRoute.tsx
@@ -0,0 +1,12 @@
+import SearchBar from "../../components/SearchBar";
+
+function SearchBarTest() {
+ return (
+
+
+ );
+}
+
+export default SearchBarTest;
diff --git a/src/routes/test/SortDropdownListTestRoute.tsx b/src/routes/test/SortDropdownListTestRoute.tsx
new file mode 100644
index 0000000..874fc13
--- /dev/null
+++ b/src/routes/test/SortDropdownListTestRoute.tsx
@@ -0,0 +1,19 @@
+import DropdownItem from "../../components/DropdownItem";
+import SortDropdownList from "../../components/SortDropdownList";
+
+function SortDropdownListTestRoute() {
+ return (
+
+
+ );
+}
+
+export default SortDropdownListTestRoute;
diff --git a/src/routes/Test.tsx b/src/routes/test/Test.tsx
similarity index 100%
rename from src/routes/Test.tsx
rename to src/routes/test/Test.tsx
diff --git a/src/routes/ToastTestRoute.tsx b/src/routes/test/ToastTestRoute.tsx
similarity index 100%
rename from src/routes/ToastTestRoute.tsx
rename to src/routes/test/ToastTestRoute.tsx
diff --git a/src/routes/TooltipTestRoute.tsx b/src/routes/test/TooltipTestRoute.tsx
similarity index 100%
rename from src/routes/TooltipTestRoute.tsx
rename to src/routes/test/TooltipTestRoute.tsx
Hello
+
+ Is this the sort dropdown list that you looking for?😩
+
+
+
+ What happen If I do this?
+