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
This commit is contained in:
2025-10-11 23:58:01 -05:00
parent 29b4a9d339
commit 466badd326

View File

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