Login and Signup Page #1 (Fiona)

package.json

@@ -15,7 +15,7 @@
         "@mui/material": "^6.1.8",
         "@mui/material-nextjs": "^6.1.8",
         "firebase": "^11.0.2",
-        "next": "^14.0.0",
+        "next": "^14.2.18",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },

src/app/admin/page.tsx

@@ -0,0 +1,7 @@
+export default function dashboard() {
+    return (
+        <div>
+            <h1>Admin Dashboard</h1>
+        </div>
+    );
+}

src/app/api/users/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+import firebase_app from '@/firebase/config';
+import { getFirestore, addDoc, collection } from 'firebase/firestore';
+
+const db = getFirestore(firebase_app);
+
+//POST request for creating an Admin user
+
+export async function POST(request: NextRequest) {
+    try {
+        const requestData = await request.json();
+
+        const newAdminRef = await addDoc(collection(db, 'admins'), {
+            name: {
+                first: requestData.name.first,
+                last: requestData.name.last,
+            },
+            email: requestData.email,
+            role: requestData.role,
+            school_district: requestData.school_district,
+        });
+
+        return NextResponse.json({
+            message: 'Admin user created successfully',
+            userId: newAdminRef.id,
+        });
+    } catch {
+        //error checking to do
+    }
+}

src/app/login/eo-admin/page.tsx

@@ -0,0 +1,75 @@
+'use client';
+import {useState} from 'react';
+import signIn from '@/firebase/auth/signIn';
+import { doc, getDoc } from 'firebase/firestore';
+import { getFirestore } from 'firebase/firestore';
+import { getAuth } from 'firebase/auth';
+
+const EOAdminLogin = () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState<boolean>(false);
+
+    const handleSubmit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        const { result, error } = await signIn(email, password);
+        if (error) {
+            setError(error.message);
+        } else {
+            const auth = getAuth();
+            const db = getFirestore();
+            const user = auth.currentUser;
+
+            if (user) {
+                const userDoc = await getDoc(doc(db, 'users', user.uid));
+                if (userDoc.exists()) {
+                    const role = userDoc.data().role;
+                    console.log('Role:', role);
+
+                    if (role === 'eo-admin') {
+                        setSuccess(true);
+                        console.log('EO Admin signed in successfully:', result?.user);
+                    } else {
+                        setError('Unauthorized access: Not an EO admin.');
+                    }
+                } else {
+                    setError('User data not found in Firestore.');
+                }
+            }
+        }
+    };
+
+    return (
+        <div>
+            <h1>End Overdose Admin Login</h1>
+            {error && <p style={{ color: 'red' }}>{error}</p>}
+            {success && (
+                <p style={{ color: 'green' }}>EO Admin Signup successful!</p>
+            )}
+            <form onSubmit={handleSubmit}>
+                <label htmlFor="email">Email:</label>
+                <input
+                    type="email"
+                    id="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                />
+                <br />
+                <label htmlFor="password">Password:</label>
+                <input
+                    type="password"
+                    id="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                />
+                <br />
+                <button type="submit">Log In</button>
+            </form>
+        </div>
+    );
+}
+
+export default EOAdminLogin;

src/app/login/page.tsx

@@ -0,0 +1,21 @@
+'use client';
+import Link from 'next/link';
+
+const LoginPage = () => {
+    return (
+        <div>
+            <h1>Login</h1>
+            <Link href="/login/school-admin">
+                <button>School Admin Login</button>
+            </Link>
+            <Link href="/login/students">
+                <button>Student Login</button>
+            </Link>
+            <Link href="/login/eo-admin">
+                <button>EO Admin Login</button>
+            </Link>
+        </div>
+    );
+};
+
+export default LoginPage;

src/app/login/school-admin/page.tsx

@@ -0,0 +1,77 @@
+'use client';
+import {useState} from 'react';
+import signIn from '@/firebase/auth/signIn';
+import { doc, getDoc } from 'firebase/firestore';
+import { getFirestore } from 'firebase/firestore';
+import { getAuth } from 'firebase/auth';
+
+const SchoolAdminLogin = () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState<boolean>(false);
+
+    const handleSubmit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        const { result, error } = await signIn(email, password);
+        if (error) {
+            setError(error.message);
+        } else {
+            const auth = getAuth();
+            const db = getFirestore();
+            const user = auth.currentUser;
+
+            if (user) {
+                const userDoc = await getDoc(doc(db, 'users', user.uid));
+                if (userDoc.exists()) {
+                    const role = userDoc.data().role;
+                    console.log('Role:', role);
+
+                    if (role === 'school-admin') {
+                        setSuccess(true);
+                        console.log('School Admin signed in successfully:', result?.user);
+                    } else {
+                        setError('Unauthorized access: Not a school admin.');
+                    }
+                } else {
+                    setError('User data not found in Firestore.');
+                }
+            }
+        }
+    };
+
+    return (
+        <div>
+            <h1>School Admin Login</h1>
+            {error && <p style={{ color: 'red' }}>{error}</p>}
+            {success && (
+                <p style={{ color: 'green' }}>
+                    School Admin Signup successful!
+                </p>
+            )}
+            <form onSubmit={handleSubmit}>
+                <label htmlFor="email">School Email:</label>
+                <input
+                    type="email"
+                    id="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                />
+                <br />
+                <label htmlFor="password">Password:</label>
+                <input
+                    type="password"
+                    id="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                />
+                <br />
+                <button type="submit">Log In</button>
+            </form>
+        </div>
+    );
+}
+
+export default SchoolAdminLogin;

src/app/login/students/page.tsx

@@ -0,0 +1,42 @@
+'use client';
+import {useState} from 'react';
+
+const StudentLogin = () => {
+    const [schoolId, setSchoolId] = useState('');
+    const [schoolName, setSchoolName] = useState('');
+
+    const handleSubmit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        console.log('Logging in as Student:', {schoolId, schoolName});
+        //call the firebase sign-in function here
+    };
+
+    return (
+        <div>
+            <h1>Student Login</h1>
+            <form onSubmit={handleSubmit}>
+                <label htmlFor="schoolId">School Id:</label>
+                <input
+                    type="text"
+                    id="schoolId"
+                    value={schoolId}
+                    onChange={(e) => setSchoolId(e.target.value)}
+                    required
+                />
+                <br />
+                <label htmlFor="schoolName">School Name:</label>
+                <input
+                    type="text"
+                    id="schoolName"
+                    value={schoolName}
+                    onChange={(e) => setSchoolName(e.target.value)}
+                    required
+                />
+                <br />
+                <button type="submit">Log In</button>
+            </form>
+        </div>
+    );
+}
+
+export default StudentLogin;

src/app/signup/eo-admin/page.tsx

@@ -0,0 +1,100 @@
+'use client';
+import { useState } from 'react';
+import signUp from '@/firebase/auth/signUp';
+import { doc, setDoc } from 'firebase/firestore';
+import { getFirestore } from 'firebase/firestore';
+
+const EOAdminSignup = () => {
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState<boolean>(false);
+
+    const handleSubmit = async (event: React.FormEvent) => {
+        event.preventDefault();
+
+        // Check if passwords match
+        if (password !== confirmPassword) {
+            setError('Passwords do not match.');
+            return;
+        }
+
+        const { result, error } = await signUp(email, password);
+        if (error) {
+            setError(error.message);
+        } else {
+            try {
+                const db = getFirestore();
+                //save user role in Firestore
+                if (result?.user?.uid) {
+                    await setDoc(doc(db, 'users', result.user.uid), {
+                        name,
+                        email,
+                        role: 'eo-admin', // Assign the role
+                    });
+                } else {
+                    setError('Failed to retrieve user ID. Please try again.');
+                    console.error('No user ID found in the result.');
+                }
+                setSuccess(true);
+                console.log('EO Admin signed up successfully:', result?.user);
+            } catch (e) {
+                setError('Failed to save user role. Please try again.');
+                console.error(e);
+            }
+        }
+    };
+
+    return (
+        <div>
+            <h1>End Overdose Admin Signup</h1>
+            {error && <p style={{ color: 'red' }}>{error}</p>}
+            {success && (
+                <p style={{ color: 'green' }}>EO Admin Signup successful!</p>
+            )}
+            <form onSubmit={handleSubmit}>
+                <label htmlFor="name">Name:</label>
+                <input
+                    type="text"
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    required
+                />
+                <br />
+                <label htmlFor="email">Email:</label>
+                <input
+                    type="email"
+                    id="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                />
+                <br />
+                <label htmlFor="password">Password:</label>
+                <input
+                    type="password"
+                    id="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                />
+                <br />
+                <label htmlFor="confirmPassword">Confirm Password:</label>
+                <input
+                    type="password"
+                    id="confirmPassword"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    required
+                />
+                <br />
+                <button type="submit">Sign Up</button>
+            </form>
+        </div>
+    );
+};
+
+export default EOAdminSignup;