Abdullah/mcc frontend

gs/frontend/mcc/src/App.tsx

@@ -8,6 +8,7 @@ import Dashboard from "./pages/Dashboard";
 import AROAdmin from "./pages/AROAdmin";
 import LiveSession from "./pages/LiveSession";
 import Login from "./pages/Login";
+import Signup from "./pages/Signup";
 import PageNotFound from "./components/PageNotFound";
 
 /**
@@ -25,6 +26,7 @@ function App() {
         <Route path="/telemetry-data" element={<AROAdmin />} />
         <Route path="/aro-requests" element={<LiveSession />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
         <Route path="*" element={<PageNotFound />} />
       </Routes>
       <ToastContainer />

gs/frontend/mcc/src/components/auth/AuthIcons.tsx

@@ -0,0 +1,128 @@
+/**
+ * @brief Collection of SVG icons used in authentication forms
+ */
+
+export const EmailIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+    />
+  </svg>
+);
+
+export const LockIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+    />
+  </svg>
+);
+
+export const UserIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+    />
+  </svg>
+);
+
+export const BuildingIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+    />
+  </svg>
+);
+
+export const IDCardIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
+    />
+  </svg>
+);
+
+export const LocationIcon = () => (
+  <svg
+    className="w-5 h-5 text-gray-400"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+    />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+    />
+  </svg>
+);
+
+export const RocketIcon = () => (
+  <svg
+    className="w-8 h-8 text-white"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
+    />
+  </svg>
+);

gs/frontend/mcc/src/components/auth/FormInput.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+
+interface FormInputProps {
+  id: string;
+  label: string;
+  type?: string;
+  placeholder: string;
+  icon?: ReactNode;
+  required?: boolean;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * @brief Reusable form input component with label and optional icon
+ * @param props FormInputProps
+ * @return tsx element of FormInput component
+ */
+function FormInput({
+  id,
+  label,
+  type = "text",
+  placeholder,
+  icon,
+  required = false,
+  value,
+  onChange,
+}: FormInputProps) {
+  return (
+    <div>
+      <label htmlFor={id} className="text-white block mb-2 text-sm font-medium">
+        {label} {required && <span className="text-red-400">*</span>}
+      </label>
+      <div className="relative">
+        {icon && (
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            {icon}
+          </div>
+        )}
+        <input
+          type={type}
+          id={id}
+          name={id}
+          required={required}
+          value={value}
+          onChange={onChange}
+          className={`w-full bg-transparent text-gray-300 ${
+            icon ? "pl-10" : "pl-4"
+          } pr-4 py-2.5 rounded-lg border border-gray-600/50 focus:outline-none focus:border-gray-500 focus:ring-1 focus:ring-gray-500`}
+          placeholder={placeholder}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default FormInput;

gs/frontend/mcc/src/index.css

@@ -9,7 +9,7 @@
     border-color: var(--border);
   }
   body {
-    overflow: hidden;
+    overflow-y: auto;
     display: flex;
     background-color: var(--background);
     font-family: var(--font-default);
@@ -20,7 +20,7 @@
     height: 100%;
     width: 100%;
     margin: 10px;
-    overflow: hidden;
+    overflow: visible;
   }
 }