From 466badd326e57efdcd076a9dff119a4d1fedd441 Mon Sep 17 00:00:00 2001
From: chelsea <chelsea@chelseawoodruff.net>
Date: Sat, 11 Oct 2025 23:58:01 -0500
Subject: [PATCH] Fix avatar upload requiring username/email (Issue #12)

- Remove unnecessary wrapper form around Profile Picture section
- Avatar upload form is now standalone, not nested
- Prevents browser validation from requiring username/email when uploading avatar

Fixes #12
---
 templates/settings_profile.html | 44 ++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/templates/settings_profile.html b/templates/settings_profile.html
index 65286ec..df3a700 100644
--- a/templates/settings_profile.html
+++ b/templates/settings_profile.html
@@ -243,31 +243,29 @@
             {% endwith %}
         </div>
 
-        <form method="POST">
-            <div class="profile-section">
-                <h2>Profile Picture</h2>
-                <div class="profile-avatar">
-                    <div class="avatar-preview">
-                        {% if user.profile_picture_url %}
-                            <img src="{{ user.profile_picture_url }}" alt="{{ user.username }}">
-                        {% else %}
-                            {{ user.username[0]|upper }}
-                        {% endif %}
-                    </div>
-                    <div class="avatar-info">
-                        <h3>Current Avatar</h3>
-                        <p>Upload a new profile picture to personalize your account</p>
-                        <form id="upload-form" method="POST" action="{{ url_for('upload_avatar') }}" enctype="multipart/form-data">
-                            <div class="file-upload">
-                                <input type="file" id="avatar" name="avatar" accept="image/*" onchange="this.form.submit()">
-                                <label for="avatar" class="file-upload-label">Choose New Picture</label>
-                            </div>
-                            <p class="help-text">PNG, JPG, or GIF. Maximum size 2MB.</p>
-                        </form>
-                    </div>
+        <div class="profile-section">
+            <h2>Profile Picture</h2>
+            <div class="profile-avatar">
+                <div class="avatar-preview">
+                    {% if user.profile_picture_url %}
+                        <img src="{{ user.profile_picture_url }}" alt="{{ user.username }}">
+                    {% else %}
+                        {{ user.username[0]|upper }}
+                    {% endif %}
+                </div>
+                <div class="avatar-info">
+                    <h3>Current Avatar</h3>
+                    <p>Upload a new profile picture to personalize your account</p>
+                    <form id="upload-form" method="POST" action="{{ url_for('upload_avatar') }}" enctype="multipart/form-data">
+                        <div class="file-upload">
+                            <input type="file" id="avatar" name="avatar" accept="image/*" onchange="this.form.submit()">
+                            <label for="avatar" class="file-upload-label">Choose New Picture</label>
+                        </div>
+                        <p class="help-text">PNG, JPG, or GIF. Maximum size 2MB.</p>
+                    </form>
                 </div>
             </div>
-        </form>
+        </div>
 
         <form method="POST">
             <div class="profile-section">