---
title: Login
description: >-
  Login or Sign Up for your PAACS account!
---

<div class="login-section">
    <h2>Login or Sign Up</h2>
    <p>Create an account or log in to access your personalized PAACS tools and manage your licenses.</p>

    <!-- Sign-Up Form -->
    <div id="signup-form">
        <h3>Sign Up</h3>
        <label for="signup-email">Email:</label>
        <input type="email" id="signup-email" placeholder="Enter your email" required />
        <label for="signup-password">Password:</label>
        <input type="password" id="signup-password" placeholder="Enter your password" required />
        <button id="signup-btn">Sign Up</button>
    </div>

    <!-- Login Form -->
    <div id="login-form">
        <h3>Login</h3>
        <label for="login-email">Email:</label>
        <input type="email" id="login-email" placeholder="Enter your email" required />
        <label for="login-password">Password:</label>
        <input type="password" id="login-password" placeholder="Enter your password" required />
        <button id="login-btn">Login</button>
        <p>Or log in with Google:</p>
        <button id="google-login-btn" class="google-btn">Login with Google</button>
    </div>

    <!-- User Info -->
    <div id="user-info" style="display:none;">
        <p>Welcome, <span id="user-email"></span>!</p>
        <button id="logout-btn">Logout</button>
    </div>
</div>


<style>
    .login-section {
        text-align: center;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        max-width: 400px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        background-color: #f9f9f9;
    }

        .login-section h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .login-section h3 {
            font-size: 20px;
            margin: 20px 0 10px;
        }

        .login-section label {
            display: block;
            margin-bottom: 5px;
            text-align: left;
        }

        .login-section input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .login-section button {
            padding: 10px 20px;
            margin: 5px;
            background-color: #4285f4;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

            .login-section button:hover {
                background-color: #357ae8;
            }

    .google-btn {
        background-color: #db4437;
    }

        .google-btn:hover {
            background-color: #c33d2c;
        }

    #user-info {
        margin-top: 20px;
    }
</style>

<script type="module">import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
    import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signInWithPopup, GoogleAuthProvider, signOut } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js";

    const firebaseConfig = {
        apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
        authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
        projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
        storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
        messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
        appId: process.env.REACT_APP_FIREBASE_APP_ID,
        measurementId: process.env.REACT_APP_MEASUREMENT_ID,
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
    const provider = new GoogleAuthProvider();

    // Sign-Up Functionality
    document.getElementById("signup-btn").addEventListener("click", () => {
        const email = document.getElementById("signup-email").value;
        const password = document.getElementById("signup-password").value;

        createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                const user = userCredential.user;
                alert("Account created successfully!");
                console.log("User signed up:", user);
            })
            .catch((error) => {
                console.error("Sign-Up Error:", error);
                alert("Error: " + error.message);
            });
    });

    // Login Functionality
    document.getElementById("login-btn").addEventListener("click", () => {
        const email = document.getElementById("login-email").value;
        const password = document.getElementById("login-password").value;

        signInWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                const user = userCredential.user;
                document.getElementById("user-info").style.display = "block";
                document.getElementById("login-form").style.display = "none";
                document.getElementById("signup-form").style.display = "none";
                document.getElementById("user-email").textContent = user.email;
                console.log("User logged in:", user);
            })
            .catch((error) => {
                console.error("Login Error:", error);
                alert("Error: " + error.message);
            });
    });

    // Google Login
    document.getElementById("google-login-btn").addEventListener("click", () => {
        signInWithPopup(auth, provider)
            .then((result) => {
                const user = result.user;
                document.getElementById("user-info").style.display = "block";
                document.getElementById("login-form").style.display = "none";
                document.getElementById("signup-form").style.display = "none";
                document.getElementById("user-email").textContent = user.email;
                console.log("Google User logged in:", user);
            })
            .catch((error) => {
                console.error("Google Login Error:", error);
                alert("Error: " + error.message);
            });
    });

    // Logout Functionality
    document.getElementById("logout-btn").addEventListener("click", () => {
        signOut(auth)
            .then(() => {
                document.getElementById("user-info").style.display = "none";
                document.getElementById("login-form").style.display = "block";
                document.getElementById("signup-form").style.display = "block";
                console.log("User logged out");
            })
            .catch((error) => {
                console.error("Logout Error:", error);
            });
    });</script>