Skip to content

Commit 27fb2be

Browse files
Abdullah KhalidAbdullah Khalid
Abdullah Khalid
authored and
Abdullah Khalid
committed
Revamped the mcc login page, and addes sign up options for individuals and operators
1 parent e3a8c43 commit 27fb2be

File tree

6 files changed

+579
-19
lines changed

6 files changed

+579
-19
lines changed

‎gs/frontend/mcc/package-lock.json‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gs/frontend/mcc/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Dashboard from "./pages/Dashboard";
88
import AROAdmin from "./pages/AROAdmin";
99
import LiveSession from "./pages/LiveSession";
1010
import Login from "./pages/Login";
11+
import Signup from "./pages/Signup";
1112
import PageNotFound from "./components/PageNotFound";
1213

1314
/**
@@ -25,6 +26,7 @@ function App() {
2526
<Route path="/telemetry-data" element={<AROAdmin />} />
2627
<Route path="/aro-requests" element={<LiveSession />} />
2728
<Route path="/login" element={<Login />} />
29+
<Route path="/signup" element={<Signup />} />
2830
<Route path="*" element={<PageNotFound />} />
2931
</Routes>
3032
<ToastContainer />

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/**
2+
* @brief Collection of SVG icons used in authentication forms
3+
*/
4+
5+
export const EmailIcon = () => (
6+
<svg
7+
className="w-5 h-5 text-gray-400"
8+
fill="none"
9+
stroke="currentColor"
10+
viewBox="0 0 24 24"
11+
xmlns="http://www.w3.org/2000/svg"
12+
>
13+
<path
14+
strokeLinecap="round"
15+
strokeLinejoin="round"
16+
strokeWidth={2}
17+
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"
18+
/>
19+
</svg>
20+
);
21+
22+
export const LockIcon = () => (
23+
<svg
24+
className="w-5 h-5 text-gray-400"
25+
fill="none"
26+
stroke="currentColor"
27+
viewBox="0 0 24 24"
28+
xmlns="http://www.w3.org/2000/svg"
29+
>
30+
<path
31+
strokeLinecap="round"
32+
strokeLinejoin="round"
33+
strokeWidth={2}
34+
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"
35+
/>
36+
</svg>
37+
);
38+
39+
export const UserIcon = () => (
40+
<svg
41+
className="w-5 h-5 text-gray-400"
42+
fill="none"
43+
stroke="currentColor"
44+
viewBox="0 0 24 24"
45+
xmlns="http://www.w3.org/2000/svg"
46+
>
47+
<path
48+
strokeLinecap="round"
49+
strokeLinejoin="round"
50+
strokeWidth={2}
51+
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
52+
/>
53+
</svg>
54+
);
55+
56+
export const BuildingIcon = () => (
57+
<svg
58+
className="w-5 h-5 text-gray-400"
59+
fill="none"
60+
stroke="currentColor"
61+
viewBox="0 0 24 24"
62+
xmlns="http://www.w3.org/2000/svg"
63+
>
64+
<path
65+
strokeLinecap="round"
66+
strokeLinejoin="round"
67+
strokeWidth={2}
68+
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"
69+
/>
70+
</svg>
71+
);
72+
73+
export const IDCardIcon = () => (
74+
<svg
75+
className="w-5 h-5 text-gray-400"
76+
fill="none"
77+
stroke="currentColor"
78+
viewBox="0 0 24 24"
79+
xmlns="http://www.w3.org/2000/svg"
80+
>
81+
<path
82+
strokeLinecap="round"
83+
strokeLinejoin="round"
84+
strokeWidth={2}
85+
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"
86+
/>
87+
</svg>
88+
);
89+
90+
export const LocationIcon = () => (
91+
<svg
92+
className="w-5 h-5 text-gray-400"
93+
fill="none"
94+
stroke="currentColor"
95+
viewBox="0 0 24 24"
96+
xmlns="http://www.w3.org/2000/svg"
97+
>
98+
<path
99+
strokeLinecap="round"
100+
strokeLinejoin="round"
101+
strokeWidth={2}
102+
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"
103+
/>
104+
<path
105+
strokeLinecap="round"
106+
strokeLinejoin="round"
107+
strokeWidth={2}
108+
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
109+
/>
110+
</svg>
111+
);
112+
113+
export const RocketIcon = () => (
114+
<svg
115+
className="w-8 h-8 text-white"
116+
fill="none"
117+
stroke="currentColor"
118+
viewBox="0 0 24 24"
119+
xmlns="http://www.w3.org/2000/svg"
120+
>
121+
<path
122+
strokeLinecap="round"
123+
strokeLinejoin="round"
124+
strokeWidth={2}
125+
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"
126+
/>
127+
</svg>
128+
);

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { ReactNode } from "react";
2+
3+
interface FormInputProps {
4+
id: string;
5+
label: string;
6+
type?: string;
7+
placeholder: string;
8+
icon?: ReactNode;
9+
required?: boolean;
10+
value?: string;
11+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
12+
}
13+
14+
/**
15+
* @brief Reusable form input component with label and optional icon
16+
* @param props FormInputProps
17+
* @return tsx element of FormInput component
18+
*/
19+
function FormInput({
20+
id,
21+
label,
22+
type = "text",
23+
placeholder,
24+
icon,
25+
required = false,
26+
value,
27+
onChange,
28+
}: FormInputProps) {
29+
return (
30+
<div>
31+
<label htmlFor={id} className="text-white block mb-2 text-sm font-medium">
32+
{label} {required && <span className="text-red-400">*</span>}
33+
</label>
34+
<div className="relative">
35+
{icon && (
36+
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
37+
{icon}
38+
</div>
39+
)}
40+
<input
41+
type={type}
42+
id={id}
43+
name={id}
44+
required={required}
45+
value={value}
46+
onChange={onChange}
47+
className={`w-full bg-transparent text-gray-300 ${
48+
icon ? "pl-10" : "pl-4"
49+
} 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`}
50+
placeholder={placeholder}
51+
/>
52+
</div>
53+
</div>
54+
);
55+
}
56+
57+
export default FormInput;

0 commit comments

Comments
 (0)