Miriyala/user management

.github/workflows/ci-no-deploy.yml

@@ -74,6 +74,14 @@ jobs:
 
     - name: Run Playwright tests
       run: npm run test
+      env:
+        NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
+        NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
+        NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
+        NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
+        NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
+        NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
+        NEXT_PUBLIC_USE_FIREBASE_EMULATOR: 'false'
 
     - name: Upload Playwright Report
       uses: actions/upload-artifact@v4

.github/workflows/ci.yml

@@ -75,6 +75,14 @@ jobs:
 
     - name: Run Playwright tests
       run: npm run test
+      env:
+        NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
+        NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
+        NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
+        NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
+        NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
+        NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
+        NEXT_PUBLIC_USE_FIREBASE_EMULATOR: 'false'
 
     - name: Upload Playwright Report
       uses: actions/upload-artifact@v4

.github/workflows/playwright.yml

@@ -33,6 +33,14 @@ jobs:
 
     - name: Run Playwright tests
       run: npx playwright test --project=${{ matrix.browser }}
+      env:
+        NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
+        NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
+        NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
+        NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
+        NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
+        NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
+        NEXT_PUBLIC_USE_FIREBASE_EMULATOR: 'false'
 
     - name: Upload Playwright Report
       uses: actions/upload-artifact@v4
@@ -72,6 +80,14 @@ jobs:
 
     - name: Run Playwright tests on mobile devices
       run: npx playwright test --project="Mobile Chrome" --project="Mobile Safari"
+      env:
+        NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
+        NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
+        NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
+        NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
+        NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
+        NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
+        NEXT_PUBLIC_USE_FIREBASE_EMULATOR: 'false'
 
     - name: Upload Mobile Test Report
       uses: actions/upload-artifact@v4

app/globals.css

@@ -1,16 +1,52 @@
 @import "tailwindcss";
-
+@import "tw-animate-css";
 
 :root {
+
   --background: #ffffff;
   --primary: #02AFC7;
   --secondary-1: #FBD121;
   --secondary-2: #ffec9f;
   --text-1: #181d1f;
   --text-2: #666666;
   --light-border: #D9D9D9;
-}
+
+
+  --foreground: var(--text-1);
+  --card: #ffffff;
+  --card-foreground: var(--text-1);
+  --popover: #ffffff;
+  --popover-foreground: var(--text-1);
+  --primary-foreground: #ffffff;
+  --secondary: var(--secondary-2);
+  --secondary-foreground: var(--text-1);
+  --muted: #f5f5f5;
+  --muted-foreground: var(--text-2);
+  --accent: #f0f0f0;
+  --accent-foreground: var(--text-1);
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --border: var(--light-border);
+  --input: var(--light-border);
+  --ring: var(--primary);
+  --radius: 0.5rem;
 
+  --chart-1: var(--primary);
+  --chart-2: var(--secondary-1);
+  --chart-3: #8b5cf6;
+  --chart-4: #f97316;
+  --chart-5: #06b6d4;
+
+
+  --sidebar: #ffffff;
+  --sidebar-foreground: var(--text-1);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: var(--muted);
+  --sidebar-accent-foreground: var(--text-1);
+  --sidebar-border: var(--light-border);
+  --sidebar-ring: var(--primary);
+}
 
 @theme inline {
   --color-background: var(--background);
@@ -24,14 +60,60 @@
   --font-family-opensans: var(--font-opensans);
   --font-family-raleway: var(--font-raleway);
   --font-family-roboto: var(--font-roboto);
+
+  /* shadcn theme variables */
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Radius utilities */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
 body {
-  background: var(--background);
   font: var(--font-family-roboto);
-  color: var(--color-text-1)
+  color: var(--color-text-1);
 }
 
 button:hover {
-  cursor: pointer
+  cursor: pointer;
 }
+
+/* shadcn base layer */
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/inventory/layout.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ProtectedRoute } from "@/components/ProtectedRoute";
 import SideNavbar from "@/components/SideNav";
 import TopNavbar from "@/components/TopNav";
 import { usePathname } from "next/navigation";
@@ -9,7 +10,7 @@ export default function InventoryLayout({ children }: { children: ReactNode }) {
     const pathname = usePathname();
 
     return (
-        <>
+        <ProtectedRoute allow={["Admin"]}>
             <div className="h-full w-full flex flex-col font-family-roboto">
                 <TopNavbar />
                 <div className="flex flex-1">
@@ -76,6 +77,6 @@ export default function InventoryLayout({ children }: { children: ReactNode }) {
                     </div>
                 </div>
             </div>
-        </>
+        </ProtectedRoute>
     );
 }

app/layout.tsx

@@ -1,31 +1,37 @@
 import "./globals.css";
 import localFont from "next/font/local";
+import { AuthProvider } from "../contexts/AuthContext";
 
 const openSans = localFont({
-  src: '../public/fonts/OpenSans/OpenSans.ttf',
-  variable: '--font-opensans',
-})
+    src: "../public/fonts/OpenSans/OpenSans.ttf",
+    variable: "--font-opensans",
+});
 
 const raleway = localFont({
-  src: '../public/fonts/Raleway/Raleway.ttf',
-  variable: '--font-raleway',
-})
+    src: "../public/fonts/Raleway/Raleway.ttf",
+    variable: "--font-raleway",
+});
 
 const roboto = localFont({
-  src: '../public/fonts/Roboto/Roboto.ttf',
-  variable: '--font-roboto',
-})
+    src: "../public/fonts/Roboto/Roboto.ttf",
+    variable: "--font-roboto",
+});
 
 export default function RootLayout({
-  children,
+    children,
 }: Readonly<{
-  children: React.ReactNode;
+    children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en" className={`${openSans.variable} ${raleway.variable} ${roboto.variable} w-full h-full overscroll-none`}>
-      <body className="w-full h-full font-family-roboto">
-        {children}
-      </body>
-    </html>
-  );
+    return (
+        <AuthProvider>
+            <html
+                lang="en"
+                className={`${openSans.variable} ${raleway.variable} ${roboto.variable} w-full h-full overscroll-none`}
+            >
+                <body className="w-full h-full font-family-roboto">
+                    {children}
+                </body>
+            </html>
+        </AuthProvider>
+    );
 }

app/login/page.tsx

@@ -5,23 +5,26 @@
 import LongButton from '@/components/auth/LongButton';
 import InputBox from '../../components/auth/InputBox';
 import { FirebaseError } from 'firebase/app';
 import { login } from '@/lib/services/auth';
+import { useAuth } from '@/contexts/AuthContext';
 
 export default function LoginPage() {
   const router = useRouter();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const auth = useAuth();
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
     setLoading(true);
 
     try {
-      await login(email, password);
-      router.push("/inventory");
+      await auth.logout();
+      await auth.login(email, password);
+      router.push("/");
     } catch (e: unknown) {
       console.error("Login failed:", e);
       setError((e as FirebaseError).message);
@@ -32,7 +35,7 @@
   return (
     <div className="flex h-screen overflow-hidden">
       <div>
         <img
           src="/background.png"
           alt="Login Background"
           className="object-cover w-[30em] h-[52em]"
@@ -45,7 +48,7 @@
           className="w-[24em] h-[35em] flex flex-col text-black space-y-[1.2em]"
         >
           <div className="flex justify-center">
             <img
               src="/journey-home-logo.png"
               alt="Journey Home"
               className="h-[6em] w-[22em]"

app/page.tsx

@@ -1,11 +1,24 @@
+"use client";
+
+import { ProtectedRoute } from "@/components/ProtectedRoute";
+import SideNavbar from "@/components/SideNav";
+import TopNavbar from "@/components/TopNav";
+
 export default function HomePage() {
-  return (
-    <>
-      <div className="bg-secondary-1">
-        <span className="text-primary font-family-raleway text-3xl font-bold">
-          Journeying to the Home Page!!!
-        </span>
-      </div>
-    </>
-  );
+
+    return (
+        <ProtectedRoute allow={["Admin", "Case Manager", "Volunteer"]}>
+            <div className="h-full w-full flex flex-col font-family-roboto">
+                <TopNavbar />
+                <div className="flex flex-1">
+                    <SideNavbar />
+                    <div className="flex-1  bg-[#F7F7F7] py-4 px-6 flex flex-col">
+                        <span className="text-2xl text-primary font-extrabold block">
+                            Journeying to the Home Page!
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </ProtectedRoute>
+    );
 }

app/signup/PickRole.tsx

@@ -15,12 +15,12 @@
     <div className="w-[28em] text-center">
       {/* Logo */}
       <div className="flex justify-center mb-16">
         <img src="/journey-home-logo.png" alt="Journey Home" className="h-[6em] w-[22em]" />
       </div>
       <h1 className="text-2xl font-bold font-family-raleway text-text-1 mb-6">Account Type</h1>
 
       <div className="flex flex-col gap-4">
-        {(["Administrator","Case Manager","Volunteer"] as UserRole[]).map((r) => (
+        {(["Admin","Case Manager","Volunteer"] as UserRole[]).map((r) => (
           <button
             key={r}
             onClick={() => setRole(r)}

app/signup/SignUpInformation.tsx

@@ -5,6 +5,7 @@ import { UserRole } from "@/types/user";
 import { FirebaseError } from "firebase/app";
 import { signUp } from "@/lib/services/auth";
 import { useRouter } from "next/navigation";
+import { useAuth } from "@/contexts/AuthContext";
 
 export default function SignUpInformation({
     selectedRole,
@@ -22,6 +23,7 @@ export default function SignUpInformation({
     const [loading, setLoading] = useState(false);
     const [err, setErr] = useState<string | null>(null);
     const router = useRouter();
+    const auth = useAuth();
 
     async function onSubmit(e: React.FormEvent) {
         e.preventDefault();
@@ -35,8 +37,8 @@ export default function SignUpInformation({
         setLoading(true);
         try {
 
-            await signUp(email, pw, first, last, dob, selectedRole);
-            router.push("/inventory");
+            await auth.signup(email, pw, first, last, dob, selectedRole);
+            router.push("/");
 
         } catch (e: unknown) {
             console.error("Signup failed:", e);

app/status/invalid-perms/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ProtectedRoute } from "@/components/ProtectedRoute";
+import { useAuth } from "@/contexts/AuthContext";
+import { useRouter } from "next/navigation";
+
+export default function InvalidPerms() {
+    const router = useRouter();
+    const auth = useAuth();
+
+    return (
+        <>
+            <div className="w-full h-full flex items-center align-center flex-col p-10 gap-2">
+                <h1>You don&apos;t have permissions to view this page</h1>
+                <button
+                    className="border border-light-border px-8 rounded-xs font-family-roboto"
+                    onClick={() => router.push("/")}
+                >
+                    Home
+                </button>
+                <button
+                    className="border border-light-border px-8 rounded-xs font-family-roboto"
+                    onClick={() => auth.logout().then(() => router.push("/login"))}
+                >
+                    Logout
+                </button>
+            </div>
+        </>
+    );
+}