Routes setup

README.md

@@ -9,20 +9,21 @@
 ╚═╝      ╚═════╝ ╚═════╝     ╚══════╝
 ```
 
-</div>
+# Routing:
+- run:
+`
+npm run dev
+`
 
-## Overview :sparkles:
-- 
+# Current utility:
+- Login / SignUp with google
+- Dashboard / Landing Page on login.
 
-## Development :computer:
-![GitHub](https://img.shields.io/github/license/LaurierComputingSociety/Pod2) 
-![GitHub pull requests](https://img.shields.io/github/issues-pr/LaurierComputingSociety/Pod2)
-
-### Requirements
-- 
-
-### Setup
-```sh
-$
-```
+# Next:
+- Actual email & password login
+- Username Setup
+- User Settings Setup
+- Other routes only available once logged in.
 
+# Service used:
+- FireBase

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "pod2",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@firebase/app": "^0.9.24",
+    "@firebase/auth": "^1.5.0",
+    "@firebase/firestore": "^4.4.0",
+    "@firebase/storage": "^0.12.0",
+    "firebase": "^10.7.0",
+    "next": "14.0.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^6.20.0"
+  },
+  "devDependencies": {
+    "@types/next": "^9.0.0",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  }
+}

pages/ChatPage.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { onAuthStateChanged, User } from 'firebase/auth';
+import { auth, db } from '../src/app/firebase/firebase';
+import { doc, getDoc } from 'firebase/firestore'; 
+import { useRouter } from 'next/router';
+import NavBar from '../src/app/Utility/NavBar'
+import './main.css'
+
+const ChatRenderingPage = () => {
+    const [currentUser, setCurrentUser] = useState<User | null>(null);
+    const [username, setUsername] = useState<string | null>(null);
+    const [isReady, setIsReady] = useState(false); // New state to control rendering
+    const router = useRouter();
+
+    useEffect(() => {
+        const unsubscribe = onAuthStateChanged(auth, async (user) => {
+            if (user) {
+                setCurrentUser(user);
+                const userDoc = await getDoc(doc(db, 'users', user.uid));
+                if (userDoc.exists()) {
+                    setUsername(userDoc.data().username);
+                }
+                setIsReady(true); // Set ready state to true if user is authenticated
+            } else {
+                router.push('/login');
+            }
+        });
+
+        return () => unsubscribe();
+    }, [router]);
+
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            setIsReady(true); 
+        }, 3000);
+
+        return () => clearTimeout(timeoutId); // clears timeout
+    }, []);
+
+    if (!isReady) {
+        return <div>Loading...</div>; // Loading instead of rendering chat temporarely.
+    }
+
+    return (
+       <>
+        <NavBar />
+        <div>ChatRenderingPage</div> 
+       </> 
+
+    );
+}
+
+export default ChatRenderingPage;

pages/landing.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { auth, db } from '../src/app/firebase/firebase'; 
+import { onAuthStateChanged, signOut, User } from 'firebase/auth';
+import { doc, getDoc } from 'firebase/firestore'; 
+import './main.css';
+import AvatarRendering from '../src/app/logic/AvatarUpload'
+import NavBar from '../src/app/Utility/NavBar'
+
+
+const Landing = () => {
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [username, setUsername] = useState<string | null>(null); // State for username
+  const [avatarUrl, setAvatarUrl] = useState(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, async (user) => {
+      if (user) {
+        setCurrentUser(user);
+        // gets the username and avatar URL from Firestore
+        const userDoc = await getDoc(doc(db, 'users', user.uid));
+        if (userDoc.exists()) {
+          setUsername(userDoc.data().username);
+          //the avatar URL is stored under the key 'avatarURL'
+          const avatarUrl = userDoc.data().avatarURL;
+          setAvatarUrl(avatarUrl); 
+        }
+      } else {
+        router.push('/login');
+      }
+    });
+
+    return () => unsubscribe();
+  }, [router]);
+
+
+  const handleLogout = async () => {
+    try {
+      await signOut(auth);
+      setCurrentUser(null);
+      setUsername(null);
+      router.push('/login');
+    } catch (error) {
+      console.error('Error logging out:', error);
+    }
+  };
+
+  return (
+    <>
+    <NavBar />
+      <div className="bg-gray-100 min-h-screen flex flex-col items-center justify-center">
+        {avatarUrl && (
+  <img
+    src={avatarUrl}
+    alt="User Avatar"
+    className="w-60 h-40 rounded-full mb-4"
+  />
+)}
+        <div className="text-center">
+          <h1 className="text-3xl font-semibold mb-4">Welcome to the Landing Page</h1>
+          <p>Email: <span className='text-blue-600'>{currentUser?.email}</span></p>
+          {username && <p className="text-lg mb-2">Logged in as {username}</p>}
+          <button
+            className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none"
+            onClick={handleLogout}
+          >
+            Logout
+          </button>
+        </div>
+        <div className="av relative top-64">
+        {currentUser && <AvatarRendering userId={currentUser.uid} />}
+        </div>
+      </div>
+    </>
+  );
+
+};
+
+export default Landing;

pages/login.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { useRouter } from 'next/router';
+import { auth } from '../src/app/firebase/firebase'; 
+import { signInWithEmailAndPassword } from 'firebase/auth';
+import './main.css'
+
+const Login = () => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const router = useRouter();
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+      // Redirect to the main route after successful login
+      router.push('/landing');
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error('Error logging in:', error.message);
+      } else {
+        console.error('Error logging in:', error);
+      }
+    }
+  };
+
+  return (
+
+    <div className="flex justify-center items-center h-screen bg-gray-100">
+      <form onSubmit={handleSubmit} className="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md">
+        <h2 className="text-2xl font-bold mb-2 text-gray-900">Login</h2>
+        <div className="mb-4">
+          <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
+          <input
+            id="email"
+            type="email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="mt-1 p-2 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+          />
+        </div>
+        <div className="mb-4">
+          <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
+          <input
+            id="password"
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="mt-1 p-2 w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+          />
+        </div>
+        <button
+          type="submit"
+          className="w-full p-2 bg-indigo-600 text-white font-bold rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"
+        >
+          Login
+        </button>
+        <p>No account? <a href="/signup">Sign Up</a></p>
+      </form>
+    </div>
+  );
+};
+
+export default Login;

pages/main.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}

pages/signup.tsx

@@ -0,0 +1,78 @@
+"use client"
+import './main.css';
+import { useRouter } from 'next/router'; 
+import React, { useState, useEffect } from 'react';
+import { auth, db } from '../src/app/firebase/firebase'; 
+import { createUserWithEmailAndPassword } from 'firebase/auth';
+import { setDoc, doc } from 'firebase/firestore'; 
+
+const SignUp = () => {
+    const [email, setEmail] = useState<string>('');
+    const [password, setPassword] = useState<string>('');
+    const [username, setUsername] = useState<string>(''); // State for username
+    const [routerReady, setRouterReady] = useState(false);
+    const router = useRouter(); 
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      try {
+        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+        // Store the username in Firestore under the user's UID
+        await setDoc(doc(db, "users", userCredential.user.uid), {
+          username: username
+        });
+        console.log('User created:', userCredential.user);
+
+        // Redirect to /landing on success
+        router.push('/landing');
+      } catch (error) {
+        if (error instanceof Error) {
+          console.error('Error signing up:', error.message);
+        } else {
+          console.error('Error signing up:', error);
+        }
+      }
+    };
+
+
+    return (
+     <>
+      <div className="flex justify-center items-center h-screen bg-gray-100">
+        <form onSubmit={handleSubmit} className="p-10 bg-white rounded-lg shadow-xl">
+          <h1 className="text-2xl font-bold mb-6 text-center">Sign Up</h1>
+          <p className='text-center'>Welcome To SpeedChat</p> <br />
+          <input
+            className="w-full mb-4 p-2 border border-gray-300 rounded"
+            type="text"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+          <input
+            className="w-full mb-4 p-2 border border-gray-300 rounded"
+            type="email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <input
+            className="w-full mb-4 p-2 border border-gray-300 rounded"
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <button 
+            type="submit" 
+            className="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          >
+            Sign Up
+          </button>
+          <p>Already have an account? <a href="/login">Login</a></p>
+        </form>
+      </div>
+     </>
+    );
+};
+
+export default SignUp;

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}