Chat App
Login to Chat
Login with Google
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f5f5f5;
}
.hidden {
display: none;
}
#chat-container {
width: 100%;
max-width: 400px;
margin: auto;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#messages {
height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
#message-input {
width: 75%;
padding: 8px;
}
button {
padding: 8px 12px;
margin-top: 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}// Firebase Configuration
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
import { getAuth, GoogleAuthProvider, signInWithPopup, signOut } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js";
import { getFirestore, collection, addDoc, onSnapshot, orderBy, query, serverTimestamp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-firestore.js";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const provider = new GoogleAuthProvider();
// HTML Elements
const loginScreen = document.getElementById("login-screen");
const chatScreen = document.getElementById("chat-screen");
const loginButton = document.getElementById("google-login");
const logoutButton = document.getElementById("logout");
const messagesDiv = document.getElementById("messages");
const messageInput = document.getElementById("message-input");
const sendButton = document.getElementById("send-button");
// Login with Google
loginButton.addEventListener("click", async () => {
try {
const result = await signInWithPopup(auth, provider);
console.log("User logged in:", result.user);
loginScreen.classList.add("hidden");
chatScreen.classList.remove("hidden");
loadMessages();
} catch (error) {
console.error("Login failed", error);
}
});
// Logout
logoutButton.addEventListener("click", async () => {
await signOut(auth);
chatScreen.classList.add("hidden");
loginScreen.classList.remove("hidden");
});
// Send Message
sendButton.addEventListener("click", async () => {
const text = messageInput.value.trim();
if (text) {
await addDoc(collection(db, "messages"), {
text,
createdAt: serverTimestamp(),
user: auth.currentUser.displayName,
});
messageInput.value = "";
}
});
// Load Messages in Real-Time
function loadMessages() {
const q = query(collection(db, "messages"), orderBy("createdAt", "asc"));
onSnapshot(q, (snapshot) => {
messagesDiv.innerHTML = "";
snapshot.forEach((doc) => {
const msg = doc.data();
const messageElement = document.createElement("div");
messageElement.textContent = `${msg.user}: ${msg.text}`;
messagesDiv.appendChild(messageElement);
});
messagesDiv.scrollTop = messagesDiv.scrollHeight;
});
}
Comments
Post a Comment