Steve's website features

Author: rdeepak2002

README.md

@@ -1,24 +1,58 @@
-### GT Web Dev Website
-Repo for new GT Web Dev website <br>
-Download Node.js (LTS is fine)
-https://nodejs.org/en/
+# GT Web Dev Website
 
+## About
+GT Web Dev website
+
+## Requirements
+- [NodeJS 18.x](https://nodejs.org/en/)
+  - Tip: install it using [nvm](https://github.com/nvm-sh/nvm) to easily manage versions
+
+## Get Started
 Clone Repo
 ```
 git clone https://github.com/gt-webdev/gt-webdev-website
 ```
-Starting app
+Start the app
 ```
-npm install (installs node modules we need)
+npm install
 npm run dev
 ```
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.<br>
-You will also see any lint errors in the console.
+## How to Add Firebase API Credentials
+
+Refer to [credentials document](https://docs.google.com/document/d/1tnGvafEfU0Iy-EnsLgH6mPMvDm984vUaa-Z_sLcSXMU/edit) for link to .env file
 
-Stopping app
+Create `.env` file with following content (derived from Firebase Admin SDK JSON) and place the file in the root of the repository folder:
+
+```shell
+firebase_type="..."
+firebase_project_id="..."
+firebase_private_key_id="..."
+firebase_private_key="..."
+firebase_client_email="..."
+firebase_client_id="..."
+firebase_auth_uri="..."
+firebase_token_uri="..."
+firebase_auth_provider_x509_cert_url="..."
+firebase_client_x509_cert_url="..."
 ```
-Cntrl C
+
+## How to Promote a Firebase User to Admin
+
+Add Firebase credentials via .env file (mentioned above)
+
+Then run the following command:
+
+```shell
+node scripts/promote-to-admin.js user_uid
 ```
 
+The ID for a user can be found in Firebase:
+
+![Firebase User ID Location](docs/firebase-user-id-location.png)
+
+## How to Login as an Admin User
+
+- Visit [http://localhost:3000/login](http://localhost:3000/login)
+- Enter the credentials for the [admin Firebase user account](https://docs.google.com/document/d/1tnGvafEfU0Iy-EnsLgH6mPMvDm984vUaa-Z_sLcSXMU/edit)

components/AdminNavBar.js

@@ -0,0 +1,59 @@
+import React, {useEffect, useState} from 'react';
+import {
+    AppBar,
+    Button,
+    Divider,
+    Drawer,
+    Hidden,
+    IconButton,
+    Toolbar
+} from "@mui/material";
+import {getAuth} from "firebase/auth";
+import firebaseApp from "../helpers/firebase";
+import {useRouter} from "next/router";
+
+const AdminNavBar = () => {
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+    const auth = getAuth(firebaseApp);
+    const router = useRouter();
+
+    // check if user is admin - if they are not, then kick them out from this page
+    useEffect(() => {
+        if (auth) {
+            auth.onAuthStateChanged((user) => {
+                if (user) {
+                    setIsLoggedIn(true);
+                } else if (!user) {
+                    setIsLoggedIn(false);
+                }
+            });
+        }
+    }, []);
+
+    return (
+        <div>
+            <AppBar position="static">
+                <Toolbar>
+                    <img src="gt-webdev-logo.png" alt="GT WebDev" height="35" />
+                    {
+                        isLoggedIn &&
+                        <Button variant="text" style={{color: "white", marginLeft: "auto"}} onClick={() => {
+                            if (auth) {
+                                auth.signOut()
+                                    .then(response => {
+                                        router.push("/login");
+                                    })
+                                    .catch((error) => {
+                                        alert('Unable to sign out.');
+                                    });
+                            }
+                        }}>Sign Out</Button>
+                    }
+                </Toolbar>
+            </AppBar>
+        </div>
+    );
+}
+
+export default AdminNavBar;

data/contactData.js

@@ -18,4 +18,4 @@ let adminContacts = [
 
 let contactTitle = "Got a question? No worries, send us a message";
 
-export {adminContacts, contactTitle};
+export {adminContacts, contactTitle};

docs/firebase-user-id-location.png

@@ -0,0 +1,21 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+    apiKey: "AIzaSyCS2s7GzBGZ4-yKJ_q4d-vdqDNZQpD8M70",
+    authDomain: "gt-webdev-website.firebaseapp.com",
+    projectId: "gt-webdev-website",
+    storageBucket: "gt-webdev-website.appspot.com",
+    messagingSenderId: "562784179730",
+    appId: "1:562784179730:web:37e4b2c5ea06f7f5e26acb",
+    measurementId: "G-1QX4LKFHCS"
+};
+
+// Initialize Firebase
+const firebaseApp = initializeApp(firebaseConfig);
+
+export default firebaseApp;