Display info about image constraints on frontend

Author: chriscarrollsmith

docs/installation.qmd

@@ -165,7 +165,9 @@ Before running the development server, make sure the development database is run
 uvicorn main:app --host 0.0.0.0 --port 8000 --reload
 ```
 
-Navigate to http://localhost:8000/
+Navigate to http://localhost:8000/.
+
+(Note: If startup fails with a sqlalchemy/psycopg2 connection error, make sure that Docker Desktop and the database service are running and that the environment variables in the `.env` file are correctly populated, and then try again.)
 
 ## Lint types with mypy
 

main.py

@@ -11,6 +11,7 @@
 from utils.auth import get_user_with_relations, get_optional_user, NeedsNewTokens, get_user_from_reset_token, PasswordValidationError, AuthenticationError
 from utils.models import User, Organization
 from utils.db import get_session, set_up_db
+from utils.images import MAX_FILE_SIZE, MIN_DIMENSION, MAX_DIMENSION, ALLOWED_CONTENT_TYPES
 
 logger = logging.getLogger("uvicorn.error")
 logger.setLevel(logging.DEBUG)
@@ -246,6 +247,13 @@ async def read_dashboard(
 async def read_profile(
     params: dict = Depends(common_authenticated_parameters)
 ):
+    # Add image constraints to the template context
+    params.update({
+        "max_file_size_mb": MAX_FILE_SIZE / (1024 * 1024),  # Convert bytes to MB
+        "min_dimension": MIN_DIMENSION,
+        "max_dimension": MAX_DIMENSION,
+        "allowed_formats": list(ALLOWED_CONTENT_TYPES.keys())
+    })
     return templates.TemplateResponse(params["request"], "users/profile.html", params)
 
 

templates/authentication/register.html

@@ -24,7 +24,7 @@
         <!-- Password Input -->
         <div class="mb-3">
             <label for="password" class="form-label">Password</label>
-            <!-- Make sure 9g,X*88w[6"W passes validation -->
+            <!-- Make sure 9g,X*88w[6"W and ^94cPSf2^)z2^,& pass validation -->
             <input type="password" class="form-control" id="password" name="password" 
                    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@$!%*?&\{\}\<\>\.\,\\\\'#\-_=\+\(\)\[\]:;\|~\/])[A-Za-z\d@$!%*?&\{\}\<\>\.\,\\\\'#\-_=\+\(\)\[\]:;\|~\/]{8,}"
                    title="Must contain at least one number, one uppercase and lowercase letter, one special character, and at least 8 or more characters" 

templates/users/profile.html

@@ -47,6 +47,15 @@ <h1 class="mb-4">User Profile</h1>
                 <div class="mb-3">
                     <label for="avatar_file" class="form-label">Avatar</label>
                     <input type="file" class="form-control" id="avatar_file" name="avatar_file" accept="image/*">
+                    <div class="form-text">
+                        <ul class="mb-0">
+                            <li>Maximum file size: {{ max_file_size_mb }} MB</li>
+                            <li>Minimum dimension: {{ min_dimension }}x{{ min_dimension }} pixels</li>
+                            <li>Maximum dimension: {{ max_dimension }}x{{ max_dimension }} pixels</li>
+                            <li>Allowed formats: {{ allowed_formats|join(', ') }}</li>
+                            <li>Image will be cropped to a square</li>
+                        </ul>
+                    </div>
                 </div>
                 <button type="submit" class="btn btn-primary">Save Changes</button>
             </form>

tests/test_images.py

@@ -6,8 +6,7 @@
     InvalidImageError,
     MAX_FILE_SIZE,
     MIN_DIMENSION,
-    MAX_DIMENSION,
-    TARGET_SIZE
+    MAX_DIMENSION
 )
 
 def create_test_image(width: int, height: int, format: str = 'PNG') -> bytes:
@@ -28,7 +27,7 @@ def test_valid_square_image():
 
     # Verify the processed image
     processed_image = Image.open(io.BytesIO(processed_data))
-    assert processed_image.size == (TARGET_SIZE, TARGET_SIZE)
+    assert processed_image.size == (500, 500)
     assert content_type == 'image/png'
 
 def test_valid_rectangular_image():
@@ -38,7 +37,7 @@ def test_valid_rectangular_image():
 
     # Verify the processed image
     processed_image = Image.open(io.BytesIO(processed_data))
-    assert processed_image.size == (TARGET_SIZE, TARGET_SIZE)
+    assert processed_image.size == (600, 600)
     assert content_type == 'image/png'
 
 def test_minimum_size_image():
@@ -47,7 +46,7 @@ def test_minimum_size_image():
     processed_data, content_type = validate_and_process_image(image_data, 'image/png')
 
     processed_image = Image.open(io.BytesIO(processed_data))
-    assert processed_image.size == (TARGET_SIZE, TARGET_SIZE)
+    assert processed_image.size == (100, 100)
 
 def test_too_small_image():
     """Test that too small images are rejected"""
@@ -99,6 +98,6 @@ def test_different_image_formats():
 
         # Verify the processed image
         processed_image = Image.open(io.BytesIO(processed_data))
-        assert processed_image.size == (TARGET_SIZE, TARGET_SIZE)
+        assert processed_image.size == (500, 500)
         # Output should match input format
         assert result_type == content_type

utils/images.py

@@ -13,7 +13,6 @@
 }
 MIN_DIMENSION = 100
 MAX_DIMENSION = 2000
-TARGET_SIZE = 500
 
 
 class InvalidImageError(HTTPException):
@@ -30,6 +29,7 @@ def validate_and_process_image(
     """
     Validates and processes an image file.
     Returns a tuple of (processed_image_data, content_type).
+    Ensures the image is square by center-cropping.
     
     Raises:
         InvalidImageError: If the image is invalid or doesn't meet requirements
@@ -67,15 +67,14 @@ def validate_and_process_image(
             message=f"Image too large. Maximum dimension is {MAX_DIMENSION}px"
         )
 
-    # Crop to square and resize
+    # Crop to square
     min_dim = min(width, height)
     left = (width - min_dim) // 2
     top = (height - min_dim) // 2
     right = left + min_dim
     bottom = top + min_dim
 
     image = image.crop((left, top, right, bottom))
-    image = image.resize((TARGET_SIZE, TARGET_SIZE), Image.Resampling.LANCZOS)
 
     # Get the format from the content type
     output_format = ALLOWED_CONTENT_TYPES[content_type]