Early Access: 1.0
This commit is contained in:
commit
761e32b95e
7 changed files with 636 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
*.db
|
||||
secret.key
|
||||
293
app.py
Normal file
293
app.py
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
from flask import Flask, request, render_template, redirect, url_for, session, jsonify
|
||||
from flask_sqlalchemy import SQLAlchemy
|
||||
from cryptography.fernet import Fernet
|
||||
import os
|
||||
from datetime import datetime
|
||||
from werkzeug.security import generate_password_hash, check_password_hash
|
||||
from flask_socketio import SocketIO, emit, join_room, leave_room
|
||||
|
||||
app = Flask(__name__)
|
||||
app.config['SECRET_KEY'] = os.urandom(24)
|
||||
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
|
||||
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
|
||||
db = SQLAlchemy(app)
|
||||
socketio = SocketIO(app)
|
||||
|
||||
# Function to generate a new encryption key
|
||||
def generate_key():
|
||||
key = Fernet.generate_key()
|
||||
with open("secret.key", "wb") as key_file:
|
||||
key_file.write(key)
|
||||
|
||||
# Function to load the encryption key
|
||||
def load_key():
|
||||
return open("secret.key", "rb").read()
|
||||
|
||||
# Ensure the key file exists
|
||||
if not os.path.exists("secret.key"):
|
||||
generate_key()
|
||||
|
||||
# Load the key
|
||||
key = load_key()
|
||||
cipher = Fernet(key)
|
||||
|
||||
class User(db.Model):
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
username = db.Column(db.String(150), unique=True, nullable=False)
|
||||
password = db.Column(db.String(150), nullable=False)
|
||||
online = db.Column(db.Boolean, nullable=False, default=False)
|
||||
|
||||
class Message(db.Model):
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
sender = db.Column(db.String(150), nullable=False)
|
||||
receiver = db.Column(db.String(150), nullable=False)
|
||||
content = db.Column(db.Text, nullable=False)
|
||||
timestamp = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
|
||||
|
||||
class PendingMessage(db.Model):
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
sender = db.Column(db.String(150), nullable=False)
|
||||
receiver = db.Column(db.String(150), nullable=False)
|
||||
content = db.Column(db.Text, nullable=False)
|
||||
timestamp = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
|
||||
|
||||
class Friend(db.Model):
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
|
||||
friend_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
|
||||
user = db.relationship('User', foreign_keys=[user_id])
|
||||
friend = db.relationship('User', foreign_keys=[friend_id])
|
||||
|
||||
class FriendRequest(db.Model):
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
sender_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
|
||||
receiver_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
|
||||
status = db.Column(db.String(20), nullable=False, default='pending')
|
||||
sender = db.relationship('User', foreign_keys=[sender_id])
|
||||
receiver = db.relationship('User', foreign_keys=[receiver_id])
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
if 'username' in session:
|
||||
return redirect(url_for('dashboard'))
|
||||
return redirect(url_for('login'))
|
||||
|
||||
@app.route('/register', methods=['GET', 'POST'])
|
||||
def register():
|
||||
if request.method == 'POST':
|
||||
username = request.form['username']
|
||||
password = request.form['password']
|
||||
hashed_password = generate_password_hash(password) # Default method
|
||||
new_user = User(username=username, password=hashed_password)
|
||||
try:
|
||||
db.session.add(new_user)
|
||||
db.session.commit()
|
||||
return redirect(url_for('login'))
|
||||
except:
|
||||
return 'Username already exists!'
|
||||
return render_template('register.html')
|
||||
|
||||
@app.route('/login', methods=['GET', 'POST'])
|
||||
def login():
|
||||
if request.method == 'POST':
|
||||
username = request.form['username']
|
||||
password = request.form['password']
|
||||
user = User.query.filter_by(username=username).first()
|
||||
if user and check_password_hash(user.password, password):
|
||||
session['username'] = user.username
|
||||
return redirect(url_for('dashboard'))
|
||||
return 'Invalid credentials'
|
||||
return render_template('login.html')
|
||||
|
||||
@app.route('/dashboard')
|
||||
def dashboard():
|
||||
if 'username' in session:
|
||||
user = User.query.filter_by(username=session['username']).first()
|
||||
friends = Friend.query.filter_by(user_id=user.id).all()
|
||||
friend_ids = [friend.friend_id for friend in friends]
|
||||
friend_users = User.query.filter(User.id.in_(friend_ids)).all()
|
||||
|
||||
friend_requests = FriendRequest.query.filter_by(receiver_id=user.id, status='pending').all()
|
||||
pending_messages = PendingMessage.query.filter_by(receiver=session['username']).all()
|
||||
messages = Message.query.filter_by(receiver=session['username']).all()
|
||||
|
||||
decrypted_pending_messages = [(msg.sender, cipher.decrypt(msg.content.encode()).decode(), msg.timestamp) for msg in pending_messages]
|
||||
decrypted_messages = [(msg.sender, cipher.decrypt(msg.content.encode()).decode(), msg.timestamp) for msg in messages]
|
||||
|
||||
return render_template('dashboard.html', username=session['username'], friends=friend_users, friend_requests=friend_requests, pending_messages=decrypted_pending_messages, messages=decrypted_messages)
|
||||
return redirect(url_for('login'))
|
||||
|
||||
@app.route('/send_message/<receiver>', methods=['POST'])
|
||||
def send_message(receiver):
|
||||
if 'username' in session:
|
||||
data = request.get_json()
|
||||
content = data['content']
|
||||
encrypted_content = cipher.encrypt(content.encode()).decode()
|
||||
|
||||
# Check if they are friends
|
||||
user = User.query.filter_by(username=session['username']).first()
|
||||
receiver_user = User.query.filter_by(username=receiver).first()
|
||||
if not receiver_user:
|
||||
return jsonify({'error': 'User not found'}), 404
|
||||
friend = Friend.query.filter_by(user_id=user.id, friend_id=receiver_user.id).first()
|
||||
|
||||
if friend:
|
||||
new_message = Message(sender=session['username'], receiver=receiver, content=encrypted_content)
|
||||
db.session.add(new_message)
|
||||
db.session.commit()
|
||||
decrypted_content = cipher.decrypt(encrypted_content.encode()).decode()
|
||||
socketio.emit('new_message', {
|
||||
'sender': session['username'],
|
||||
'content': decrypted_content,
|
||||
'timestamp': new_message.timestamp.strftime("%Y-%m-%d %H:%M:%S")
|
||||
}, room=receiver)
|
||||
else:
|
||||
pending_message = PendingMessage(sender=session['username'], receiver=receiver, content=encrypted_content)
|
||||
db.session.add(pending_message)
|
||||
db.session.commit()
|
||||
|
||||
return jsonify({'status': 'Message sent'}), 200
|
||||
return jsonify({'error': 'Unauthorized'}), 401
|
||||
|
||||
@app.route('/get_messages/<friend_username>', methods=['GET'])
|
||||
def get_messages(friend_username):
|
||||
if 'username' in session:
|
||||
current_user = session['username']
|
||||
messages = Message.query.filter(
|
||||
((Message.sender == current_user) & (Message.receiver == friend_username)) |
|
||||
((Message.sender == friend_username) & (Message.receiver == current_user))
|
||||
).all()
|
||||
decrypted_messages = [
|
||||
{'sender': msg.sender, 'content': cipher.decrypt(msg.content.encode()).decode(), 'timestamp': msg.timestamp.strftime("%Y-%m-%d %H:%M:%S")}
|
||||
for msg in messages
|
||||
]
|
||||
return jsonify({'messages': decrypted_messages})
|
||||
return jsonify({'error': 'Unauthorized'}), 401
|
||||
|
||||
@app.route('/add_friend', methods=['POST'])
|
||||
def add_friend():
|
||||
if 'username' in session:
|
||||
friend_username = request.form['friend_username']
|
||||
user = User.query.filter_by(username=session['username']).first()
|
||||
friend = User.query.filter_by(username=friend_username).first()
|
||||
if friend and user != friend:
|
||||
friend_request = FriendRequest(sender_id=user.id, receiver_id=friend.id)
|
||||
db.session.add(friend_request)
|
||||
db.session.commit()
|
||||
socketio.emit('friend_request', {
|
||||
'sender': session['username'],
|
||||
'receiver': friend_username
|
||||
}, room=friend_username)
|
||||
return redirect(url_for('dashboard'))
|
||||
return 'Friend not found or cannot add yourself as a friend'
|
||||
return redirect(url_for('login'))
|
||||
|
||||
@app.route('/accept_friend/<int:request_id>', methods=['POST'])
|
||||
def accept_friend(request_id):
|
||||
if 'username' in session:
|
||||
friend_request = FriendRequest.query.get(request_id)
|
||||
if friend_request and friend_request.receiver.username == session['username']:
|
||||
friend_request.status = 'accepted'
|
||||
db.session.commit()
|
||||
|
||||
# Create friendships both ways
|
||||
user_id = friend_request.receiver_id
|
||||
friend_id = friend_request.sender_id
|
||||
new_friend_1 = Friend(user_id=user_id, friend_id=friend_id)
|
||||
new_friend_2 = Friend(user_id=friend_id, friend_id=user_id)
|
||||
db.session.add(new_friend_1)
|
||||
db.session.add(new_friend_2)
|
||||
db.session.commit()
|
||||
|
||||
# Move pending messages to messages
|
||||
pending_messages = PendingMessage.query.filter_by(sender=friend_request.sender.username, receiver=friend_request.receiver.username).all()
|
||||
for pm in pending_messages:
|
||||
new_message = Message(sender=pm.sender, receiver=pm.receiver, content=pm.content, timestamp=pm.timestamp)
|
||||
db.session.add(new_message)
|
||||
db.session.delete(pm)
|
||||
db.session.commit()
|
||||
|
||||
socketio.emit('friend_request_accepted', {
|
||||
'sender': friend_request.sender.username,
|
||||
'receiver': friend_request.receiver.username
|
||||
}, room=friend_request.sender.username)
|
||||
|
||||
return redirect(url_for('dashboard'))
|
||||
return 'Friend request not found'
|
||||
return redirect(url_for('login'))
|
||||
|
||||
@app.route('/reject_friend/<int:request_id>', methods=['POST'])
|
||||
def reject_friend(request_id):
|
||||
if 'username' in session:
|
||||
friend_request = FriendRequest.query.get(request_id)
|
||||
if friend_request and friend_request.receiver.username == session['username']:
|
||||
db.session.delete(friend_request)
|
||||
db.session.commit()
|
||||
|
||||
socketio.emit('friend_request_rejected', {
|
||||
'sender': friend_request.sender.username,
|
||||
'receiver': friend_request.receiver.username
|
||||
}, room=friend_request.sender.username)
|
||||
|
||||
return redirect(url_for('dashboard'))
|
||||
return 'Friend request not found'
|
||||
return redirect(url_for('login'))
|
||||
|
||||
@app.route('/remove_friend/<int:friend_id>', methods=['POST'])
|
||||
def remove_friend(friend_id):
|
||||
if 'username' in session:
|
||||
user = User.query.filter_by(username=session['username']).first()
|
||||
friend = Friend.query.filter_by(user_id=user.id, friend_id=friend_id).first()
|
||||
if friend:
|
||||
db.session.delete(friend)
|
||||
reciprocal_friend = Friend.query.filter_by(user_id=friend.friend_id, friend_id=user.id).first()
|
||||
if reciprocal_friend:
|
||||
db.session.delete(reciprocal_friend)
|
||||
db.session.commit()
|
||||
|
||||
socketio.emit('friend_removed', {
|
||||
'sender': session['username'],
|
||||
'receiver': friend.friend.username
|
||||
}, room=friend.friend.username)
|
||||
|
||||
return redirect(url_for('dashboard'))
|
||||
return 'Friend not found'
|
||||
return redirect(url_for('login'))
|
||||
|
||||
@app.route('/logout')
|
||||
def logout():
|
||||
session.pop('username', None)
|
||||
return redirect(url_for('login'))
|
||||
|
||||
@socketio.on('join')
|
||||
def handle_join(data):
|
||||
username = data['username']
|
||||
join_room(username)
|
||||
|
||||
@socketio.on('leave')
|
||||
def handle_leave(data):
|
||||
username = data['username']
|
||||
leave_room(username)
|
||||
|
||||
@socketio.on('connect')
|
||||
def handle_connect():
|
||||
if 'username' in session:
|
||||
user = User.query.filter_by(username=session['username']).first()
|
||||
if user:
|
||||
user.online = True
|
||||
db.session.commit()
|
||||
emit('user_online', {'username': user.username}, broadcast=True)
|
||||
|
||||
@socketio.on('disconnect')
|
||||
def handle_disconnect():
|
||||
if 'username' in session:
|
||||
user = User.query.filter_by(username=session['username']).first()
|
||||
if user:
|
||||
user.online = False
|
||||
db.session.commit()
|
||||
emit('user_offline', {'username': user.username}, broadcast=True)
|
||||
|
||||
if __name__ == '__main__':
|
||||
with app.app_context():
|
||||
db.create_all()
|
||||
socketio.run(app, debug=True)
|
||||
101
static/styles.css
Normal file
101
static/styles.css
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
body {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #2f3136;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
.sidebar h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar ul li {
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar ul li .status-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.online{
|
||||
margin-right: 10px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: #23a55a;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.offline{
|
||||
margin-right: 10px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: #80848e;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.chat-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.chat-header {
|
||||
background-color: #36393f;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.message {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.message strong {
|
||||
color: #7289da;
|
||||
}
|
||||
.message .timestamp {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 0;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
color: white;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.message:hover .timestamp {
|
||||
display: block;
|
||||
}
|
||||
.send-message-form {
|
||||
display: flex;
|
||||
}
|
||||
.send-message-form input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.send-message-form button {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background-color: #7289da;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
186
templates/dashboard.html
Normal file
186
templates/dashboard.html
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Dashboard</title>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
||||
<script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
const socket = io();
|
||||
socket.emit('join', { username: "{{ username }}" });
|
||||
|
||||
socket.on('new_message', function(data) {
|
||||
const messagesList = document.getElementById('messages');
|
||||
const newMessage = document.createElement('div');
|
||||
newMessage.classList.add('message');
|
||||
newMessage.innerHTML = `<strong>${data.sender}</strong>: ${data.content}<div class="timestamp">${data.timestamp}</div>`;
|
||||
messagesList.appendChild(newMessage);
|
||||
});
|
||||
|
||||
socket.on('friend_request', function(data) {
|
||||
const friendRequestsList = document.getElementById('friend-requests');
|
||||
const newRequest = document.createElement('li');
|
||||
newRequest.innerHTML = `
|
||||
${data.sender}
|
||||
<form method="POST" action="/accept_friend/${data.request_id}">
|
||||
<button type="submit">Accept</button>
|
||||
</form>
|
||||
<form method="POST" action="/reject_friend/${data.request_id}">
|
||||
<button type="submit">Reject</button>
|
||||
</form>
|
||||
`;
|
||||
friendRequestsList.appendChild(newRequest);
|
||||
checkFriendRequests();
|
||||
});
|
||||
|
||||
socket.on('friend_request_accepted', function(data) {
|
||||
const friendList = document.getElementById('friends');
|
||||
const newFriend = document.createElement('li');
|
||||
newFriend.innerHTML = `
|
||||
<div class="status-indicator ${data.online ? 'online' : 'offline'}"></div>
|
||||
${data.sender}
|
||||
<form class="send-message-form" data-receiver="${data.sender}" method="POST">
|
||||
<input type="text" name="content" placeholder="Type a message" required>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
`;
|
||||
friendList.appendChild(newFriend);
|
||||
checkFriendRequests();
|
||||
});
|
||||
|
||||
socket.on('user_online', function(data) {
|
||||
const friendElements = document.querySelectorAll(`.friend[data-username="${data.username}"] .status-indicator`);
|
||||
friendElements.forEach(el => el.classList.remove('offline'));
|
||||
friendElements.forEach(el => el.classList.add('online'));
|
||||
});
|
||||
|
||||
socket.on('user_offline', function(data) {
|
||||
const friendElements = document.querySelectorAll(`.friend[data-username="${data.username}"] .status-indicator`);
|
||||
friendElements.forEach(el => el.classList.remove('online'));
|
||||
friendElements.forEach(el => el.classList.add('offline'));
|
||||
});
|
||||
|
||||
const friends = document.querySelectorAll('.friend');
|
||||
friends.forEach(friend => {
|
||||
friend.addEventListener('click', function() {
|
||||
const friendName = this.dataset.username;
|
||||
loadMessages(friendName);
|
||||
});
|
||||
});
|
||||
|
||||
function loadMessages(friendName) {
|
||||
fetch(`/get_messages/${friendName}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const messagesList = document.getElementById('messages');
|
||||
messagesList.innerHTML = '';
|
||||
document.getElementById('chat-with').textContent = `Chatting with ${friendName}`;
|
||||
document.getElementById('send-message-form').dataset.receiver = friendName;
|
||||
data.messages.forEach(msg => {
|
||||
const messageElement = document.createElement('div');
|
||||
messageElement.classList.add('message');
|
||||
messageElement.innerHTML = `<strong>${msg.sender}</strong>: ${msg.content}<div class="timestamp">${msg.timestamp}</div>`;
|
||||
messagesList.appendChild(messageElement);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function checkFriendRequests() {
|
||||
const friendRequestsList = document.getElementById('friend-requests');
|
||||
const friendRequestsSection = document.getElementById('friend-requests-section');
|
||||
if (friendRequestsList.children.length === 0) {
|
||||
friendRequestsSection.style.display = 'none';
|
||||
} else {
|
||||
friendRequestsSection.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
checkFriendRequests();
|
||||
|
||||
document.querySelectorAll('.send-message-form').forEach(form => {
|
||||
form.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
const receiver = form.dataset.receiver;
|
||||
const content = form.querySelector('input[name="content"]').value;
|
||||
const timestamp = new Date().toISOString().slice(0, 19).replace('T', ' ');
|
||||
|
||||
// Append the message locally
|
||||
const messagesList = document.getElementById('messages');
|
||||
const newMessage = document.createElement('div');
|
||||
newMessage.classList.add('message');
|
||||
newMessage.innerHTML = `<strong>{{ username }}</strong>: ${content}<div class="timestamp">${timestamp}</div>`;
|
||||
messagesList.appendChild(newMessage);
|
||||
|
||||
fetch(`/send_message/${receiver}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ content: content })
|
||||
}).then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status === 'Message sent') {
|
||||
form.querySelector('input[name="content"]').value = '';
|
||||
} else {
|
||||
alert('Message sending failed');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<h3>Welcome, {{ username }}</h3>
|
||||
<form method="POST" action="{{ url_for('add_friend') }}">
|
||||
<label for="friend_username">Add Friend:</label>
|
||||
<input type="text" id="friend_username" name="friend_username" required>
|
||||
<button type="submit">Add Friend</button>
|
||||
</form>
|
||||
<a href="{{ url_for('logout') }}" class="btn btn-danger mt-3">Logout</a>
|
||||
|
||||
<div id="friend-requests-section">
|
||||
<h4>Friend Requests</h4>
|
||||
<ul id="friend-requests">
|
||||
{% for request in friend_requests %}
|
||||
<li>
|
||||
{{ request.sender.username }}
|
||||
<form method="POST" action="{{ url_for('accept_friend', request_id=request.id) }}">
|
||||
<button type="submit">Accept</button>
|
||||
</form>
|
||||
<form method="POST" action="{{ url_for('reject_friend', request_id=request.id) }}">
|
||||
<button type="submit">Reject</button>
|
||||
</form>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h4>Friends</h4>
|
||||
<ul id="friends">
|
||||
{% for friend in friends %}
|
||||
<li class="friend" data-username="{{ friend.username }}">
|
||||
<div class="status-indicator {{ 'online' if friend.online else 'offline' }}"></div>
|
||||
{{ friend.username }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="chat-container">
|
||||
<div class="chat-header">
|
||||
<h3 id="chat-with">Select a friend to start chatting</h3>
|
||||
</div>
|
||||
<div class="messages" id="messages">
|
||||
<!-- Messages will be displayed here -->
|
||||
</div>
|
||||
<form class="send-message-form" id="send-message-form" data-receiver="" method="POST">
|
||||
<input type="text" name="content" placeholder="Type a message" required>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
18
templates/login.html
Normal file
18
templates/login.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Login</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Login</h2>
|
||||
<form method="POST">
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username" required><br>
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" id="password" name="password" required><br>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
<a href="{{ url_for('register') }}">Register</a>
|
||||
</body>
|
||||
</html>
|
||||
18
templates/register.html
Normal file
18
templates/register.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Register</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Register</h2>
|
||||
<form method="POST">
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username" required><br>
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" id="password" name="password" required><br>
|
||||
<button type="submit">Register</button>
|
||||
</form>
|
||||
<a href="{{ url_for('login') }}">Login</a>
|
||||
</body>
|
||||
</html>
|
||||
18
templates/send_message.html
Normal file
18
templates/send_message.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Send Message</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Send Message</h2>
|
||||
<form method="POST">
|
||||
<label for="receiver">To:</label>
|
||||
<input type="text" id="receiver" name="receiver" required><br>
|
||||
<label for="content">Message:</label>
|
||||
<textarea id="content" name="content" required></textarea><br>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
<a href="{{ url_for('dashboard') }}">Back to Dashboard</a>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue