Complete authentication and profile features

frontend/templates/feed.html

@@ -23,7 +23,13 @@
       {% if profile %}
       <section class="link-item profile-summary">
         <div class="link-header">
-          <div class="avatar">{{ profile.username[:1].upper() }}</div>
+          <div class="avatar">
+            {% if profile.avatar_url %}
+            <img src="{{ profile.avatar_url }}" alt="{{ profile.username }} avatar" />
+            {% else %}
+            {{ profile.username[:1].upper() }}
+            {% endif %}
+          </div>
           <div class="user-name">{{ profile.username }}</div>
         </div>
         <p>{{ profile.bio or 'No profile information provided.' }}</p>
@@ -39,13 +45,15 @@
         </label>
         <label>
           User filter
-          <input id="user-filter" type="text" placeholder="alice" />
+          <select id="user-filter">
+            <option value="">All users</option>
+          </select>
         </label>
       </section>
 
       <section id="feed" class="feed" aria-live="polite"></section>
     </main>
 
-    <script src="/static/feed.js"></script>
+    <script src="/static/feed.js?v=4"></script>
   </body>
 </html>

frontend/templates/user_profile.html

@@ -37,9 +37,10 @@
             <textarea id="bio" name="bio" rows="4"></textarea>
           </label>
           <label>
-            Avatar URL
-            <input id="avatar-url" name="avatar_url" type="url" value="https://example.com/avatar.png" />
+            Avatar image
+            <input id="avatar-file" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp" />
           </label>
+          <img id="avatar-preview" class="profile-avatar-preview hidden" alt="Avatar preview" />
           <button type="submit">Save profile</button>
           <p id="profile-status" class="status" role="status"></p>
         </form>