Skip to content

Commit 40b6efb

Browse files
7ucg7ucg
committed
savee
1 parent 1c48c58 commit 40b6efb

File tree

6 files changed

+538
-0
lines changed

6 files changed

+538
-0
lines changed

‎src/public/chat.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Mein Chat</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<div class="chat-layout">
12+
<div class="sidebar">
13+
<div class="profile" id="profile">
14+
<img id="profilePic" src="default-avatar.png" alt="Profilbild">
15+
<span id="profileName">Unbekannt</span>
16+
</div>
17+
<input type="file" id="fileInput" style="display:none;">
18+
<ul id="rooms">
19+
<li class="room" data-room="Allgemein">Allgemein</li>
20+
<li class="room" data-room="Programmierung">Programmierung</li>
21+
<li class="room" data-room="Instagram Chat">Instagram Chat</li>
22+
<li class="room" data-room="Telegram Chat">Telegram Chat</li>
23+
<li class="room" data-room="Tiktok Chat">Tiktok Chat</li>
24+
<li class="room" data-room="Whatsapp Chat">Whatsapp Chat</li>
25+
26+
</ul>
27+
<div style="position: absolute; bottom: 20px; left: 20px;">
28+
<button id="deleteAccountBtn" style="padding: 8px 12px; background-color: red; color: white; border: none; border-radius: 5px;">
29+
❌ Account löschen
30+
</button>
31+
</div>
32+
33+
34+
</div>
35+
36+
<div class="chat-area">
37+
<ul id="messages"></ul>
38+
<form id="form" class="input-container">
39+
<input id="input" autocomplete="off" placeholder="Schreibe etwas...">
40+
<button id="sendBtn" type="submit">Senden</button>
41+
</form>
42+
</div>
43+
</div>
44+
45+
<script src="/socket.io/socket.io.js"></script>
46+
<script src="client.js"></script>
47+
<script>
48+
if (!localStorage.getItem('username')) {
49+
window.location.href = '/';
50+
}
51+
</script>
52+
53+
</body>
54+
</html>

‎src/public/client.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
const socket = io();
2+
const roomsList = document.getElementById('rooms');
3+
const messagesList = document.getElementById('messages');
4+
const inputField = document.getElementById('input');
5+
const form = document.getElementById('form');
6+
7+
let currentUsername = localStorage.getItem('username') || "Unbekannt";
8+
let currentRoom = null;
9+
10+
// Username ins Profil setzen
11+
document.getElementById('profileName').textContent = currentUsername;
12+
13+
// Profilbild ändern
14+
const fileInput = document.getElementById('fileInput');
15+
const profilePic = document.getElementById('profilePic');
16+
17+
// Profilbild laden wenn vorhanden 🔥
18+
const savedProfilePic = localStorage.getItem('profilePic');
19+
if (savedProfilePic) {
20+
profilePic.src = savedProfilePic;
21+
}
22+
23+
// Profilbild upload und speichern
24+
fileInput.addEventListener('change', (event) => {
25+
const file = event.target.files[0];
26+
if (file) {
27+
const reader = new FileReader();
28+
reader.onload = function(e) {
29+
profilePic.src = e.target.result;
30+
31+
// Profilbild im localStorage speichern 🔥
32+
localStorage.setItem('profilePic', e.target.result);
33+
34+
// 📤 Bild an Server schicken
35+
socket.emit('update profile picture', {
36+
username: currentUsername,
37+
profilePic: e.target.result
38+
});
39+
}
40+
reader.readAsDataURL(file);
41+
}
42+
});
43+
44+
document.getElementById('profile').addEventListener('click', () => {
45+
fileInput.click();
46+
});
47+
48+
// Raum betreten
49+
roomsList.addEventListener('click', (event) => {
50+
const room = event.target.getAttribute('data-room');
51+
if (!room) return;
52+
53+
currentRoom = room;
54+
messagesList.innerHTML = '';
55+
56+
socket.emit('join room', { username: currentUsername, room });
57+
58+
document.querySelectorAll('.room').forEach(r => r.classList.remove('active'));
59+
event.target.classList.add('active');
60+
});
61+
62+
// Nachricht senden
63+
form.addEventListener('submit', (e) => {
64+
e.preventDefault();
65+
if (!currentRoom) {
66+
alert('Bitte zuerst einen Raum betreten.');
67+
return;
68+
}
69+
70+
const messageText = inputField.value.trim();
71+
if (messageText) {
72+
socket.emit('chat message', {
73+
username: currentUsername,
74+
text: messageText,
75+
profilePic: profilePic.src
76+
});
77+
inputField.value = '';
78+
inputField.focus();
79+
}
80+
});
81+
82+
// Nachricht empfangen
83+
socket.on('chat message', (message) => {
84+
const li = document.createElement('li');
85+
li.classList.add('message-item');
86+
87+
li.innerHTML = `
88+
<div class="message-line">
89+
<img src="${message.profilePic || 'default-avatar.png'}" class="message-pic">
90+
<span class="message-name">${message.username}:</span>
91+
<span class="message-text">${message.text}</span>
92+
</div>
93+
`;
94+
95+
messagesList.appendChild(li);
96+
messagesList.scrollTop = messagesList.scrollHeight;
97+
98+
setTimeout(() => {
99+
li.classList.add('fade-in');
100+
}, 10);
101+
});
102+
103+
// Chatverlauf erhalten
104+
socket.on('chat history', (messages) => {
105+
messagesList.innerHTML = ''; // Leeren
106+
messages.forEach((message) => {
107+
const li = document.createElement('li');
108+
li.classList.add('message-item');
109+
li.innerHTML = `
110+
<div class="message-line">
111+
<img src="${message.profilePic || 'default-avatar.png'}" class="message-pic">
112+
<span class="message-name">${message.username}:</span>
113+
<span class="message-text">${message.text}</span>
114+
</div>
115+
`;
116+
messagesList.appendChild(li);
117+
});
118+
119+
messagesList.scrollTop = messagesList.scrollHeight;
120+
});
121+
document.getElementById('deleteAccountBtn').addEventListener('click', () => {
122+
if (confirm('Willst du wirklich deinen Account und alle deine Nachrichten löschen? Diese Aktion ist unwiderruflich!')) {
123+
socket.emit('delete account', { username: currentUsername });
124+
}
125+
});
126+
socket.on('account deleted', () => {
127+
alert('Dein Account wurde gelöscht. Du wirst ausgeloggt.');
128+
localStorage.clear(); // Alles vom User löschen (username, profilbild)
129+
window.location.href = '/'; // Zurück zur Startseite
130+
});
131+
socket.on('reload messages', () => {
132+
if (currentRoom) {
133+
// Raum neu joinen, um Messages neu zu laden
134+
messagesList.innerHTML = '';
135+
socket.emit('join room', { username: currentUsername, room: currentRoom });
136+
}
137+
});
138+

‎src/public/default-avatar.png‎

8.78 KB
Loading

‎src/public/default.png‎

8.78 KB
Loading

‎src/public/index.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Login & Registrierung</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div id="authContainer">
11+
<div class="auth-box">
12+
<h2>Login</h2>
13+
<form id="loginForm">
14+
<input type="text" id="loginUsername" placeholder="Benutzername" required>
15+
<input type="password" id="loginPassword" placeholder="Passwort" required>
16+
<button type="submit">Einloggen</button>
17+
</form>
18+
<p id="loginMessage"></p>
19+
<hr>
20+
<button id="toRegister">Noch keinen Account? Registrieren</button>
21+
</div>
22+
23+
<div class="auth-box" id="registerBox" style="display: none;">
24+
<h2>Registrierung</h2>
25+
<form id="registerForm">
26+
<input type="text" id="registerUsername" placeholder="Benutzername" required>
27+
<input type="password" id="registerPassword" placeholder="Passwort" required>
28+
<button type="submit">Registrieren</button>
29+
</form>
30+
<p id="registerMessage"></p>
31+
<hr>
32+
<button id="toLogin">Bereits ein Account? Login</button>
33+
</div>
34+
</div>
35+
36+
<script>
37+
const toRegisterButton = document.getElementById('toRegister');
38+
const toLoginButton = document.getElementById('toLogin');
39+
const registerBox = document.getElementById('registerBox');
40+
const authContainer = document.getElementById('authContainer');
41+
42+
const loginForm = document.getElementById('loginForm');
43+
const registerForm = document.getElementById('registerForm');
44+
45+
const loginMessage = document.getElementById('loginMessage');
46+
const registerMessage = document.getElementById('registerMessage');
47+
48+
toRegisterButton.addEventListener('click', () => {
49+
document.querySelector('.auth-box').style.display = 'none';
50+
registerBox.style.display = 'block';
51+
});
52+
53+
toLoginButton.addEventListener('click', () => {
54+
document.querySelector('.auth-box').style.display = 'block';
55+
registerBox.style.display = 'none';
56+
});
57+
58+
loginForm.addEventListener('submit', async (event) => {
59+
event.preventDefault();
60+
61+
const username = document.getElementById('loginUsername').value;
62+
const password = document.getElementById('loginPassword').value;
63+
64+
const response = await fetch('/login', {
65+
method: 'POST',
66+
headers: { 'Content-Type': 'application/json' },
67+
body: JSON.stringify({ username, password }),
68+
});
69+
70+
const data = await response.json();
71+
loginMessage.innerText = data.message;
72+
73+
if (response.status === 200) {
74+
localStorage.setItem('username', username);
75+
window.location.href = '/chat.html'; // Weiterleitung zur Chat-Seite
76+
}
77+
78+
});
79+
80+
registerForm.addEventListener('submit', async (event) => {
81+
event.preventDefault();
82+
83+
const username = document.getElementById('registerUsername').value;
84+
const password = document.getElementById('registerPassword').value;
85+
86+
const response = await fetch('/register', {
87+
method: 'POST',
88+
headers: { 'Content-Type': 'application/json' },
89+
body: JSON.stringify({ username, password }),
90+
});
91+
92+
const data = await response.json();
93+
registerMessage.innerText = data.message;
94+
95+
if (response.status === 200) {
96+
document.querySelector('.auth-box').style.display = 'block';
97+
registerBox.style.display = 'none';
98+
}
99+
});
100+
</script>
101+
</body>
102+
</html>

0 commit comments

Comments
 (0)