implement session management with JSON file; add dashboard component …

…and styles

.gitignore

@@ -8,3 +8,4 @@ __pycache__
 cas.egg-info
 dist
 CLI/cas/session_details.json
+CLI/cas/session.json

CLI/cas/auth.py

@@ -1,25 +1,34 @@
+import os
+import json
 from flask import Blueprint, request, jsonify
 
 auth_bp = Blueprint("auth", __name__)
-session_details = {}
+session_file = "session.json"
+
+def load_session_details():
+    if os.path.exists(session_file):
+        with open(session_file, "r") as f:
+            return json.load(f)
+    return {}
+
+def save_session_details(details):
+    with open(session_file, "w") as f:
+        json.dump(details, f)
 
 @auth_bp.route("/")
 def handle_auth_response():
-    global session_details
     email = request.args.get("email", "")
     token = request.args.get("token", "")
 
     # Only update session details if email and token are present
     if email and token:
-        session_details = {
-            "email": email,
-            "token": token
-        }
+        session_details = {"email": email, "token": token}
+        save_session_details(session_details)
         print("Session details saved:", session_details)
     else:
         print("Invalid or empty session details, skipping update.")
 
-    return jsonify({"status": "ok", "session_details": session_details})
+    return jsonify({"status": "ok", "session_details": load_session_details()})
 
 
 @auth_bp.route("/favicon.ico")

CLI/cas/cli.py

@@ -1,7 +1,8 @@
 import webbrowser
 from flask import Flask
-from auth import auth_bp, session_details
+from auth import auth_bp, load_session_details
 import requests
+import sys
 
 app = Flask(__name__)
 
@@ -14,11 +15,12 @@ def add_message(message):
     Adds a message to the user's database entry using the API.
     Ensures the user is logged in before proceeding.
     """
+    session_details = load_session_details()
     if not session_details or "email" not in session_details or "token" not in session_details:
         print("Error: User is not logged in. Please log in first.")
         return
 
-    api_url = "https://api.cas.upayan.dev/add-message"
+    api_url = "https://api.cas.upayan.dev/add-message"  # Replace with your API's URL
     headers = {"Authorization": session_details["token"]}
     payload = {"message": message}
 
@@ -33,8 +35,6 @@ def add_message(message):
 
 
 if __name__ == "__main__":
-    import sys
-
     if len(sys.argv) > 1 and sys.argv[1] == "add-message":
         if len(sys.argv) < 3:
             print("Usage: cli.py add-message <your-message>")

app/src/app/dashboard/page.js

@@ -0,0 +1,13 @@
+import styles from "../page.module.css";
+
+import Dashboard from "../../components/dashboard/dashboard"
+
+export default function Home() {
+  return (
+    <div className={styles.page}>
+      <main className={styles.main}>
+        <Dashboard />
+      </main>
+    </div>
+  );
+}

app/src/components/dashboard/dashboard.js

@@ -0,0 +1,57 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { onAuthStateChanged, signOut } from 'firebase/auth';
+import { useRouter } from 'next/navigation';
+import { auth } from '../../../shared/firebase';
+import Logout from '../auth/logout/logout';
+import styles from './dashboard.module.css';
+
+const Dashboard = () => {
+  const [user, setUser] = useState(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    // Listen to authentication state changes
+    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+      if (currentUser) {
+        setUser(currentUser);
+      } else {
+        router.push('/auth'); // Redirect to auth page if no user is logged in
+      }
+    });
+
+    return () => unsubscribe();
+  }, [router]);
+
+  const handleLogout = async () => {
+    try {
+      await signOut(auth);
+      setUser(null);
+      router.push('/auth'); // Redirect to auth page after logout
+    } catch (error) {
+      console.error('Logout failed:', error.message);
+    }
+  };
+
+  return (
+    <div className={styles.dashboardContainer}>
+      {user ? (
+        <div>
+          <h2 className={styles.dashboardHeader}>Welcome to your Dashboard, {user.email}</h2>
+          <div className={styles.dashboardContent}>
+            <p className={styles.dashboardMessage}>Here you can manage your account, settings, and more.</p>
+            <br />
+            <Logout onLogout={handleLogout} />
+          </div>
+        </div>
+      ) : (
+        <div>
+          <h2 className={styles.dashboardHeader}>Loading...</h2>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dashboard;

app/src/components/dashboard/dashboard.module.css

@@ -0,0 +1,153 @@
+  .authContainer {
+
+    --primary-bg: #0d1117;
+    --primary-accent: #1f6feb;
+    --secondary-accent: #58a6ff;
+    --text-primary: #c9d1d9;
+    --text-secondary: #8b949e;
+    --error-color: #ff7b72;
+    --success-color: #56d364;
+    --button-hover: #30363d;
+
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 20px auto;
+    padding: 20px;
+    max-width: 95%;
+    width: 400px;
+    background-color: var(--primary-bg);
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    animation: fadeIn 0.5s ease-in-out;
+  }
+
+  .authHeader {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .authMessage {
+    font-size: 16px;
+    color: var(--text-secondary);
+    margin-top: 15px;
+    text-align: center;
+  }
+
+  .success {
+    color: var(--success-color);
+  }
+
+  .error {
+    color: var(--error-color);
+  }
+
+  .authForm {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width: 100%;
+  }
+
+  .authForm label {
+    font-size: 14px;
+    color: var(--text-secondary);
+  }
+
+  .authForm input {
+    padding: 10px;
+    font-size: 14px;
+    color: var(--text-primary);
+    background-color: #161b22;
+    border: 1px solid var(--primary-accent);
+    border-radius: 6px;
+    outline: none;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .authForm input:focus {
+    border-color: var(--secondary-accent);
+    box-shadow: 0 0 4px var(--secondary-accent);
+  }
+
+  .authForm button {
+    padding: 12px 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+    background-color: var(--primary-accent);
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .authForm button:hover {
+    background-color: var(--secondary-accent);
+  }
+
+  .toggleContainer {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 15px;
+  }
+
+  .button {
+    flex: 1;
+    padding: 10px 0;
+    margin: 0 5px;
+    font-size: 14px;
+    font-weight: 600;
+    text-align: center;
+    border: 1px solid var(--primary-accent);
+    border-radius: 6px;
+    background: transparent;
+    color: var(--primary-accent);
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .button:hover {
+    background-color: var(--button-hover);
+    color: var(--secondary-accent);
+  }
+
+  .active {
+    background-color: var(--primary-accent);
+    color: #fff;
+    border: none;
+  }
+
+  @media (max-width: 768px) {
+    .authContainer {
+      width: 100%;
+      padding: 15px;
+    }
+
+    .authHeader {
+      font-size: 20px;
+    }
+
+    .button {
+      font-size: 13px;
+    }
+  }
+
+  /* Animations */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+