Resize images to max 512px in resolution

TFR/server/account.py

@@ -1,6 +1,7 @@
 import uuid
 import re
 import os
+from PIL import Image
 
 from flask import Blueprint, request, render_template, flash, redirect, url_for
 from flask_login import login_required, current_user, logout_user
@@ -10,9 +11,9 @@ from .config import (
     USER_REGEX,
     USER_EMAIL_REGEX,
     UPLOAD_EXTENSIONS,
-    UPLOAD_RESOLUTION,
     UPLOAD_MAX_SIZE,
     UPLOAD_DIR,
+    UPLOAD_RESOLUTION,
 )
 from .models import Users, Sessions, Scores, ProfileTags, PasswordReset
 from .extensions import db
@@ -47,9 +48,14 @@ def settings():
             if file_ext not in UPLOAD_EXTENSIONS:
                 error.append("Picture is not a valid image!")
             if picture.content_length > UPLOAD_MAX_SIZE:
-                error.append(
-                    f"Picture is too large! Must be less than {UPLOAD_EXTENSIONS / 1000000}MB!"
-                )
+                error.append(f"Picture must be less than {UPLOAD_EXTENSIONS / 1000000}MB!")
+
+            image = Image.open(picture.stream)
+            image_x, image_y = image.size
+            image.thumbnail((
+                min(image_x, UPLOAD_RESOLUTION),
+                min(image_y, UPLOAD_RESOLUTION)
+            ))
 
             if error:
                 for err in error:
@@ -60,7 +66,8 @@ def settings():
                 os.remove(os.path.join(UPLOAD_DIR, user.picture))
 
             user.picture = file_name
-            picture.save(os.path.join(UPLOAD_DIR, file_name))
+            image.save(os.path.join(UPLOAD_DIR, file_name))
+            image.close()
 
         if username:
             if user_regex.match(username):

TFR/server/config.py

@@ -3,7 +3,7 @@ from os import getenv
 
 UPLOAD_DIR = "/data/uploads"
 UPLOAD_EXTENSIONS = ["png", "jpg", "jpeg", "gif"]
-UPLOAD_RESOLUTION = (512, 512)
+UPLOAD_RESOLUTION = 512
 UPLOAD_MAX_SIZE = 3 * 1024 * 1024  # 3MB
 
 GAME_VERSION = "alpha"

TFR/server/static/sass/button.sass

@@ -48,7 +48,7 @@
 
 	> label
 		padding: 0.5rem 0.7rem
-		min-width: 6rem
+		min-width: 7rem
 
 		text-decoration: none
 		text-align: end

TFR/server/static/sass/profile-settings.sass

@@ -59,12 +59,14 @@
 
     .other
         width: 100%
-        height: 100%
-
         display: flex
         flex-direction: column
-        justify-content: flex-start
+        justify-content: space-between
         gap: 0.5rem
+
+        > .text-input
+            margin: 0 !important
+
 @media (max-width: 621px)
 	.profile-settings
 		flex-direction: column

TFR/server/templates/views/account_settings.html

@@ -19,9 +19,12 @@
                     {{ text(id="profile-username", name="username", value=current_user.username) }}
                     {{ text(id="profile-email", name="email") }}
                     {{ text(id="profile-password", name="password", type="password", required=True, minlength=8) }}
-                </div>
-            </div>
+
+                    <span style="height: 100%"></span>
+
                     <button type="submit" class="button primary">Save changes</button>
+                </div>
+            </div>
         </form>
     </div>