Add account deletion confirmation page, privacy settings template, and profile view template

- Created a new HTML template for account deletion confirmation with user-friendly messaging and a return link.
- Developed a privacy settings page allowing users to control visibility of their personal information with appropriate messaging for success and error states.
- Implemented a profile view template displaying user information, statistics, teams, and achievements based on user permissions.
- Added responsive design elements and improved user interface with Tailwind CSS classes for better aesthetics and usability.

app/templates/auth/profile.html

@@ -9,6 +9,13 @@
     </div>
     {% endif %}
     
+    <!-- Display errors if present -->
+    {% if error %}
+    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+      {{ error }}
+    </div>
+    {% endif %}
+    
     <div class="flex flex-col md:flex-row items-center md:items-start md:space-x-8">
       <!-- Profile Image -->
       <div class="mb-6 md:mb-0">
@@ -19,6 +26,26 @@
             {{ user.username[0]|upper }}
           </div>
         {% endif %}
+        
+        <!-- Profile Picture Upload Form -->
+        <div class="mt-3">
+          <form action="/auth/update-profile-picture" method="post" enctype="multipart/form-data">
+            <label class="block w-full bg-gray-200 text-center py-2 px-3 rounded{% if not user.picture %}-md{% else %}-t{% endif %} cursor-pointer hover:bg-gray-300 transition">
+              <i class="fas fa-camera mr-1"></i> Change Picture
+              <input type="file" name="file" accept="image/jpeg,image/png" class="hidden" onchange="this.form.submit()">
+            </label>
+          </form>
+          
+          {% if user.picture %}
+          <form action="/auth/delete-profile-picture" method="post">
+            <button type="submit" class="w-full bg-red-100 text-red-700 text-center py-2 px-3 rounded-b hover:bg-red-200 transition">
+              <i class="fas fa-trash-alt mr-1"></i> Remove Picture
+            </button>
+          </form>
+          {% endif %}
+          
+          <p class="text-xs text-gray-500 mt-1 text-center">JPG/PNG only</p>
+        </div>
       </div>
       
       <!-- User Info -->
@@ -41,6 +68,15 @@
         <div class="space-y-4">
           <h2 class="text-xl font-semibold text-irish-green">Account Settings</h2>
           
+          <div class="border-b border-gray-200 pb-4">
+            <h3 class="text-gray-700 font-medium mb-2">Username</h3>
+            <form action="/auth/update-username" method="post" class="flex">
+              <input type="text" name="username" value="{{ user.username }}" class="flex-grow border border-gray-300 rounded-l-md px-3 py-2">
+              <button type="submit" class="bg-irish-green text-white px-4 py-2 rounded-r-md">Update</button>
+            </form>
+            <p class="text-xs text-gray-500 mt-1">Change your username (must be unique)</p>
+          </div>
+          
           <div class="border-b border-gray-200 pb-4">
             <h3 class="text-gray-700 font-medium mb-2">Change Password</h3>
             <p class="text-sm text-gray-600 mb-3">Update your password to keep your account secure.</p>
@@ -49,13 +85,22 @@
             </a>
           </div>
           
+          <div class="border-b border-gray-200 pb-4">
+            <h3 class="text-gray-700 font-medium mb-2">Privacy Settings</h3>
+            <p class="text-sm text-gray-600 mb-3">Control who can see your profile information.</p>
+            <a href="/auth/privacy-settings" class="inline-block bg-irish-green text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition">
+              Manage Privacy Settings
+            </a>
+          </div>
+          
           <div class="pt-4">
             <h3 class="text-gray-700 font-medium mb-2">Danger Zone</h3>
             <p class="text-sm text-gray-600 mb-3">Permanently delete your account and all of your data.</p>
-            <button class="border border-red-600 text-red-600 py-2 px-4 rounded-md hover:bg-red-600 hover:text-white transition" disabled>
-              Delete Account
-              <span class="text-xs">(Coming Soon)</span>
-            </button>
+            <form action="/auth/delete-account" method="post" onsubmit="return confirm('Are you sure you want to delete your account? This action cannot be undone.');">
+              <button type="submit" class="border border-red-600 text-red-600 py-2 px-4 rounded-md hover:bg-red-600 hover:text-white transition">
+                Delete Account
+              </button>
+            </form>
           </div>
         </div>
       </div>