Emil_Shanaty/shagram
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add login on front.

Browse Source
This commit is contained in:
emil28092005
2026-01-30 11:54:52 +03:00
parent 58cadadf7f
commit 99a1180bef
4 changed files with 118 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+17 -13
View File
@@ -4,18 +4,18 @@
<title>Shagram Chat</title>
<style>
body { font-family: Arial; margin: 20px; }
#messages {
height: 300px;
border: 1px solid #ccc;
overflow-y: auto;
padding: 10px;
#messages {
height: 300px;
border: 1px solid #ccc;
overflow-y: auto;
padding: 10px;
margin-bottom: 10px;
background: #f9f9f9;
}
.message {
margin: 5px 0;
padding: 8px;
background: #e3f2fd;
.message {
margin: 5px 0;
padding: 8px;
background: #e3f2fd;
border-radius: 5px;
border-left: 3px solid #2196F3;
}
@@ -23,25 +23,29 @@
button { padding: 8px 15px; cursor: pointer; }
select { padding: 8px; width: 320px; }
#roomsList { margin: 10px 0; }
#authStatus { margin-left: 10px; }
</style>
</head>
<body>
<h1>📱 Shagram Chat</h1>
<div id="roomsList">
<select id="roomSelect">
<option value="general">general</option>
</select>
<input type="text" id="userInput" placeholder="Your name" value="Эмиль" maxlength="20">
<button onclick="login()">Login</button>
<span id="authStatus"></span>
<button onclick="loadRooms()">🔄</button>
<button onclick="connectRoom()">Connect</button>
</div>
<div id="messages"></div>
<div>
<input type="text" id="messageInput" placeholder="Type message..."
<input type="text" id="messageInput" placeholder="Type message..."
onkeypress="if(event.key==='Enter') sendMessage()">
<button onclick="sendMessage()">Send</button>
</div>
static/js/chat.js
+67 -40
View File
@@ -1,71 +1,103 @@
let ws = null;
let accessToken = null;
const messagesDiv = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
const roomSelect = document.getElementById('roomSelect');
const authStatus = document.getElementById('authStatus');
async function login() {
const usernameInput = document.getElementById('userInput');
const username = usernameInput ? usernameInput.value.trim() : '';
if (!username) {
alert('Enter username');
return;
}
authStatus.textContent = 'Logging in...';
const resp = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username }),
});
if (!resp.ok) {
const text = await resp.text();
authStatus.textContent = 'Login failed';
console.error('Login failed:', resp.status, text);
return;
}
const data = await resp.json();
accessToken = data.access_token || null;
if (!accessToken) {
authStatus.textContent = 'Login failed';
return;
}
authStatus.textContent = '✅ Logged in';
}
function loadRooms() {
fetch('/api/rooms')
.then(response => response.json())
.then(data => {
roomSelect.innerHTML = '';
data.rooms.forEach(room => {
const option = document.createElement('option');
option.value = room;
option.textContent = room;
roomSelect.appendChild(option);
.then(response => response.json())
.then(data => {
roomSelect.innerHTML = '';
(data.rooms || []).forEach(room => {
const option = document.createElement('option');
option.value = room;
option.textContent = room;
roomSelect.appendChild(option);
});
})
.catch(error => {
console.error('Error loading rooms:', error);
});
})
.catch(error => {
console.error('Error loading rooms:', error);
})
}
function connectRoom() {
const room = roomSelect.value || 'general';
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const host = window.location.host;
const host = window.location.host;
if (!accessToken) {
alert('Please login first');
return;
}
if (ws) {
ws.close();
}
const wsUrl = `${protocol}//${host}/ws/${room}`;
const wsUrl = `${protocol}//${host}/ws/${room}?token=${encodeURIComponent(accessToken)}`;
ws = new WebSocket(wsUrl);
ws.onopen = function() {
console.log('WebSocket connected, loading history for', room);
fetch(`/api/messages/${room}`)
.then(response => {
console.log('API response:', response.status);
return response.json()
})
.then(response => response.json())
.then(data => {
console.log('History data:', data);
messagesDiv.innerHTML = '';
const history = data.messages || [];
console.log('history length:', history.length);
if (history.length > 0) {
history.reverse().forEach((msg, index) => {
console.log(`Message ${index}:`, msg)
history.reverse().forEach(msg => {
const msgDiv = document.createElement('div');
msgDiv.className = 'message';
msgDiv.textContent = `${msg.user}: ${msg.text}`;
messagesDiv.appendChild(msgDiv);
})
});
}
const connectMsg = document.createElement('div');
connectMsg.className = 'message';
connectMsg.textContent = `✅ Connected to ${room}`;
messagesDiv.appendChild(connectMsg);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
console.log('History loaded!');
})
.catch(error => {
console.error('❌ History error', error);
})
console.error('History error', error);
});
};
ws.onmessage = function(event) {
@@ -88,19 +120,14 @@ function connectRoom() {
function sendMessage() {
const text = messageInput.value.trim();
const usernameInput = document.getElementById('userInput');
const username = usernameInput ? usernameInput.value.trim() || 'Anonymous' : 'Anonymous';
if (!text || !ws || ws.readyState !== WebSocket.OPEN) {
alert('Not connected or empty message');
return;
}
ws.send(JSON.stringify({
text: text,
user: username,
}));
ws.send(JSON.stringify({ text }));
messageInput.value = '';
}
loadRooms();
loadRooms();