implement login, registration and posting

app.py

@@ -1,14 +1,17 @@
-from flask import Flask, url_for, redirect, render_template, request
+from flask import Flask, url_for, redirect, render_template, request, session, Response
 from pymongo import MongoClient
 from datetime import datetime
 from bson.objectid import ObjectId
+from werkzeug.security import generate_password_hash, check_password_hash
 
 app = Flask(__name__)
+app.secret_key = 'secret_key'
 
 #initialize the database
 client = MongoClient('localhost', 27017)
 db = client.flask_db
 posts_collection = db.posts_collection
+users_collection = db.users_collection
 
 
 #app routes
@@ -29,10 +32,10 @@ def board(board_name):
         {'name': 's', 'display_name': '/s/ - soyjaks'},
         {'name': 'pol', 'display_name': '/pol/ - politically incorrect'}
     ]
-    #global posts
-    #posts = posts_collection.find({'board_name': board_name}).sort('timestamp', -1)
+    
+    posts = posts_collection.find({'board_name': board_name}).sort('timestamp', -1)
     display_name = next((link['display_name'] for link in links if link['name'] == board_name), board_name)
-    return render_template('board.html', title=board_name, header=display_name, links=links)
+    return render_template('board.html', title=board_name, header=display_name, links=links, posts=posts)
 
 @app.route('/post', methods=['POST'])
 def post():
@@ -42,15 +45,66 @@ def post():
     timestamp = datetime.now()
 
     #insert the post into MongoDB
-    posts.insert_one({
+    post_data = {
         'board_name': board_name,
         'content': content,
-        'image': image.read(),
         'timestamp': timestamp
-    })
+    }
+
+    if image:
+        post_data['image'] = image.read()
+
+    posts_collection.insert_one(post_data)
 
     return redirect(url_for('board', board_name=board_name))
 
+@app.route('/image/<post_id>')
+def image(post_id):
+    post = posts_collection.find_one({'_id': ObjectId(post_id)})
+    if post and 'image' in post:
+        return Response(post['image'], mimetype='image/jpeg')
+    else:
+        return 'Image not found', 404
+
+@app.route('/login', methods=['GET'])
+def login():
+    return render_template('login.html')
+
+@app.route('/login', methods=['POST'])
+def login_post():
+    username = request.form['username']
+    password = request.form['password']
+
+    user = users_collection.find_one({'username': username})
+    if user and check_password_hash(user['password'], password):
+        session['user_id'] = str(user['_id'])
+        return redirect(url_for('index'))
+    else:
+        return redirect(url_for('login'))
+    
+@app.route('/register', methods=['GET'])
+def register():
+    return render_template('register.html')
+
+@app.route('/register', methods=['POST'])
+def register_post():
+    username = request.form['username']
+    password = request.form['password']
+    hashed_password = generate_password_hash(password, method='pbkdf2:sha256')
+
+    #insert the user into MongoDB
+    users_collection.insert_one({
+        'username': username,
+        'password': hashed_password
+    })
+
+    return redirect(url_for('login'))
+
+@app.route('/logout')
+def logout():
+    session.pop('user_id', None)
+    return redirect(url_for('index'))
+
 
 if __name__ == '__main__':
     app.run(debug=True)

mongo.py

@@ -1,11 +0,0 @@
-from flask import Flask, url_for, redirect, render_template, request
-from pymongo import MongoClient
-from datetime import datetime
-from bson.objectid import ObjectId
-
-app = Flask(__name__)
-
-#initialize the database
-client = MongoClient('localhost', 27017)
-db = client.flask_db
-posts = db.posts

static/css/styles.css

@@ -44,10 +44,21 @@ button:hover {
 }
 
 input, textarea {
-    background-color: black;
+    text-align: center;
+    width: 10vw;
+    height: auto;
+    font-size: 1.5vw;
+    background-color: rgb(42, 42, 42);
     color: #00FF00;
     border: 1px solid #00FF00;
     padding: 5px;
+    margin: 2vw;
+}
+
+label, button {
+    text-align: center;
+    font-size: 1.5vw;
+    color: #00FF00;
 }
 
 input::placeholder, textarea::placeholder {
@@ -63,3 +74,27 @@ h4 {
     font-size: 2vw;
     color: #00FF00;
 }
+
+img {
+    width: 20vw;
+    height: auto;
+    margin: 2vw;
+}
+
+.post {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    text-align: left;
+    height: 50% auto;
+    width: 50% auto;
+    background-color: rgb(42, 42, 42);
+    border: 1px solid #00FF00;
+    padding: 10px;
+    margin: 2vw;
+}
+
+.post:hover {
+    background-color: #00FF00;
+    color: black;
+}

templates/board.html

@@ -11,7 +11,7 @@
     <div class="link-container">
         <h2>{{ header }}</h2>
         <form action="{{ url_for('post') }}" method="post" enctype="multipart/form-data">
-            <input type="hidden" name="board_name" value="{{ header }}">
+            <input type="hidden" name="board_name" value="{{ title }}">
             <textarea name="content" rows="4" cols="50" placeholder="Write your post here..."></textarea>
             <input type="file" name="image">
             <button type="submit">Post</button>
@@ -19,10 +19,10 @@
         <div class="posts">
             {% for post in posts %}
                 <div class="post">
-                    <p>{{ post.content }}</p>
                     {% if post.image %}
                         <img src="{{ url_for('image', post_id=post._id) }}" alt="Post Image">
                     {% endif %}
+                    <p>{{ post.content }}</p>
                     <small>{{ post.timestamp }}</small>
                 </div>
             {% endfor %}

templates/index.html

@@ -19,7 +19,12 @@
         <a href="{{ url_for('board', board_name='t') }}">/t/ - test</a>
         <a href="{{ url_for('board', board_name='s') }}">/s/ - soyjaks</a>
         <a href="{{ url_for('board', board_name='pol') }}">/pol/ - politically incorrect</a>
-    </div> 
+    </div>
+    <div class="link-container">
+      <h4>registration is optional</h4>
+        <a href="{{ url_for('login') }}">login</a>
+        <a href="{{ url_for('register') }}">register</a>
+    </div>
     <div class="bottom">
       <a>lainlounge.xyz - copyleft all wrongs released</a>
     </div>

templates/login.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>login</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body>
+    <h1>login</h1>
+    <form action="{{ url_for('login_post') }}" 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>
+</body>
+</html>

templates/register.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>register</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body>
+    <div class="link-container">
+        <h1>register</h1>
+            <form action="{{ url_for('register_post') }}" 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>
+    </div>
+</body>
+</html>