From 1ca8b3a4a8d4eac3a43aadb4d00fbc1973d05cc3 Mon Sep 17 00:00:00 2001
From: Chris Fulljames <christianfulljames@gmail.com>
Date: Tue, 4 Feb 2025 07:22:34 -0500
Subject: [PATCH] Add PFPs

---
 .gitignore             |   1 +
 main.py                |  30 ++++++++++++++++++++++++------
 static/styles.css      |  21 ++++++++++++++++++++-
 templates/profile.html |  25 ++++++++++++++++++++-----
 test/lsp_notes.png     | Bin 0 -> 214 bytes
 test/test_offline.py   |  31 ++++++++++++++++++++++++++++++-
 todo.txt               |   4 ++--
 7 files changed, 97 insertions(+), 15 deletions(-)
 create mode 100644 test/lsp_notes.png

diff --git a/.gitignore b/.gitignore
index b9030d3..1543466 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,5 +2,6 @@ venv
 __pycache__
 database.db
 songs
+images
 app.log*
 
diff --git a/main.py b/main.py
index a8ff878..a3497a6 100644
--- a/main.py
+++ b/main.py
@@ -165,18 +165,30 @@ def users_profile(profile_username):
             bio=profile_bio,
             song_list=render_template("song-list.html", songs=songs))
 
-@app.post("/update-bio")
-def update_bio():
+@app.post("/edit-profile")
+def edit_profile():
+    if not "userid" in session:
+        abort(401)
+
     query_db(
             "update users set bio = ? where userid = ?",
             [request.form["bio"], session["userid"]])
     get_db().commit()
-    flash("Bio updated successfully")
+
+    if request.files["pfp"]:
+        pfp_path = get_user_images_path(session["userid"]) / "pfp"
+        request.files["pfp"].save(pfp_path)
+
+    flash("Profile updated successfully")
 
     app.logger.info(f"{session['username']} updated bio")
 
     return redirect(f"/users/{session['username']}")
 
+@app.get("/pfp/<int:userid>")
+def pfp(userid):
+    return send_from_directory(DATA_DIR / "images" / str(userid), "pfp")
+
 @app.get("/edit-song")
 def edit_song():
     if not "userid" in session:
@@ -267,12 +279,18 @@ def validate_song_form():
 
     return error
 
-def get_user_path(userid):
+def get_user_songs_path(userid):
     userpath = DATA_DIR / "songs" / str(userid)
     if not userpath.exists():
         os.makedirs(userpath)
     return userpath
 
+def get_user_images_path(userid):
+    userpath = DATA_DIR / "images" / str(userid)
+    if not userpath.exists():
+        os.makedirs(userpath)
+    return userpath
+
 def update_song():
     songid = request.args["songid"]
     try:
@@ -300,7 +318,7 @@ def update_song():
 
             if passed:
                 # Move file to permanent location
-                filepath = get_user_path(session["userid"]) / (str(song_data["songid"]) + ".mp3")
+                filepath = get_user_songs_path(session["userid"]) / (str(song_data["songid"]) + ".mp3")
                 shutil.move(tmp_file.name, filepath)
             else:
                 error = True
@@ -345,7 +363,7 @@ def create_song():
                     "insert into songs (userid, title, description, created) values (?, ?, ?, ?) returning (songid)",
                     [session["userid"], title, description, timestamp], one=True)
             songid = song_data["songid"]
-            filepath = get_user_path(session["userid"]) / (str(song_data["songid"]) + ".mp3")
+            filepath = get_user_songs_path(session["userid"]) / (str(song_data["songid"]) + ".mp3")
 
             # Move file to permanent location
             shutil.move(tmp_file.name, filepath)
diff --git a/static/styles.css b/static/styles.css
index 3500ea4..3cb63a3 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -59,6 +59,7 @@ input[type=text], input[type=password] {
     font-family: sans-serif;
     font-size: 16px;
     font-weight: bold;
+    text-decoration: none;
     color: var(--yellow);
     background: var(--purple);
     border: 0px;
@@ -165,8 +166,26 @@ input[type=file] {
     font-size: 40px;
 }
 
+.big-pfp-container {
+    margin: 0 auto;
+    width: 200px;
+    max-width: 80%;
+    background: var(--purple);
+    padding: 5px;
+    border-radius: 10px;
+}
+
+.big-pfp {
+    width: 100%;
+    max-height: 200px;
+    margin: 0px;
+    padding: 0px;
+    display: block;
+    border-radius: 5px;
+}
+
 .profile-action {
-    margin: 10px;
+    margin-bottom: 20px;
 }
 
 .profile-edit-buttons {
diff --git a/templates/profile.html b/templates/profile.html
index 3f8bcee..308cb69 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -4,19 +4,34 @@
 
 {% block body %}
 
+<!-- Username -->
 <h1 class="profile-name">{{ name }}</h1>
 
+<!-- Profile Picture -->
+<div class="big-pfp-container">
+    <img src="/pfp/{{ userid }}" onerror="hidePfp(this)" class="big-pfp">
+</div>
+
+<script>
+    function hidePfp(pfp) {
+        pfp.parentElement.hidden = true;
+    }
+</script>
+
 <!-- Bio -->
 <div class="profile-bio" id="profile-bio">{{ (bio.replace("\n", "<br>"))|safe }}</div>
 
-<!-- Bio edit form -->
+<!-- Profile edit form -->
 {% if session["userid"] == userid %}
 
 <div class="profile-action">
-    <a href="javascript:showEditForm();" id="profile-bio-edit-btn">Edit Bio</a>
+    <button class="button" onclick="showEditForm()" id="profile-bio-edit-btn">Edit Profile</button>
 </div>
 
-<form id="profile-edit-form" action="/update-bio" method="post" hidden>
+<form id="profile-edit-form" action="/edit-profile" method="post" enctype="multipart/form-data" hidden>
+    <h2> Profile Picture </h2>
+    <input type="file" name="pfp" accept="image/png, image/jpg, image/gif, image/svg" />
+
     <h2> Edit Bio </h2>
     <p>Common HTML tags (&lt;a&gt;, &lt;b&gt;, &lt;i&gt;, &lt;img&gt;, etc.) are allowed.</p>
     <p>Examples:</p>
@@ -35,7 +50,7 @@
     </div>
 </form>
 
-<!-- Show/hide bio edit form -->
+<!-- Show/hide profile edit form -->
 <script>
     function showEditForm() {
         document.getElementById("profile-bio").hidden = true;
@@ -56,7 +71,7 @@
 <!-- Upload New Song button -->
 {% if session["userid"] == userid %}
 <div class="profile-action">
-    <a href="/edit-song">Upload New Song</a>
+    <a class="button" href="/edit-song">Upload New Song</a>
 </div>
 {% endif %}
 
diff --git a/test/lsp_notes.png b/test/lsp_notes.png
new file mode 100644
index 0000000000000000000000000000000000000000..97625d2eafe9bfedccd75bf33a44313e4d652e30
GIT binary patch
literal 214
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD3?#3*wSy!Wi-X*q7}lMWc?sn32l#}z0_hje
zwoWcyxu;=$@99G~g1d}>LaZf0e!&d?fk5Vh8pxy+PZ!6KjK;T@47m;%@US=@|6gBn
zt3mL@A*I&muS73r*qoIHsw&`^F&k)GgWZBKCWiZ)znQZFIV=I%j6gYtAKWtzW~n|f
xQ?QCS|49`n@P_H)$6HUl56nGq6R5x;Nq^BHz07NC(*J{0d%F6$taD0e0ss?UNv;3@

literal 0
HcmV?d00001

diff --git a/test/test_offline.py b/test/test_offline.py
index 6af5082..6decc13 100644
--- a/test/test_offline.py
+++ b/test/test_offline.py
@@ -165,13 +165,42 @@ def test_default_bio_empty(client):
 def test_update_bio(client):
     _create_user(client, "user", "password", login=True)
 
-    response = client.post("/update-bio", data={"bio": "this is the bio"})
+    response = client.post("/edit-profile", data={"bio": "this is the bio", "pfp": (b"", "", "aplication/octet-stream")})
     assert response.status_code == 302
     assert response.headers["Location"] == "/users/user"
 
     response = client.get("/users/user")
     assert b'<div class="profile-bio" id="profile-bio">this is the bio</div>' in response.data
 
+def test_upload_pfp(client):
+    _create_user(client, "user", "password", login=True)
+    response = client.post("/edit-profile", data={"bio": "", "pfp": open("lsp_notes.png", "rb")})
+    assert response.status_code == 302
+
+def test_edit_profile_not_logged_in(client):
+    response = client.post("/edit-profile", data={"bio": "", "pfp": open("lsp_notes.png", "rb")})
+    assert response.status_code == 401
+
+def test_get_pfp(client):
+    _create_user(client, "user", "password", login=True)
+    client.post("/edit-profile", data={"bio": "", "pfp": open("lsp_notes.png", "rb")})
+
+    response = client.get("/pfp/1")
+    assert response.status_code == 200
+    with open("lsp_notes.png", "rb") as expected:
+        assert expected.read() == response.data
+
+def test_get_pfp_no_file(client):
+    _create_user(client, "user", "password", login=True)
+    # User exists but doesn't have a pfp
+    response = client.get("/pfp/1")
+    assert response.status_code == 404
+
+def test_get_pfp_invalid_user(client):
+    response = client.get("/pfp/1")
+    # User doesn't exist
+    assert response.status_code == 404
+
 ################################################################################
 # Upload Song
 ################################################################################
diff --git a/todo.txt b/todo.txt
index eeb02f5..2c6a490 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,8 +1,8 @@
 NOW
-- Profile pictures
+- PFP in song list
+- Additional song info in player (collabs, description, tags, pfp)
 - Dark mode/site color customization
 - YouTube importer
-- Additional song info in player (collabs, description, tags)
 
 SOON
 - Shuffle all
-- 
2.39.5