add app user management allauth

templates/includes/header.html

@@ -0,0 +1,38 @@
+{% load static %}
+<header class="d-flex align-items-center justify-content-between bg-dark text-white py-3 px-4 sticky-top z-40">
+  <div>
+    <a class="d-flex align-items-center gap-2 text-decoration-none text-white" href="/">
+      <img class="h-6" src="{% static 'images/ase-logo.png' %}" alt="ASE" height="40"/>
+      <span class="text-lg fw-bold">MQTT User Management</span>
+    </a>
+  </div>
+  <nav class="position-relative">
+    <ul class="nav nav-pills align-items-center">
+      {% if request.user.is_authenticated %}
+      <li class="nav-item">
+        <a class="nav-link text-white" href="/">Home</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle d-flex align-items-center gap-2 text-white" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+          <img class="h-8 w-8 rounded-circle object-cover" src="{{ request.user.profile.avatar }}" alt="Avatar" height="40"/>
+          {{ request.user.profile.name }}
+        </a>
+        <ul class="dropdown-menu dropdown-menu-end shadow-lg" style="min-width: 200px;">
+          <li><a class="dropdown-item" href="{% url 'profile' %}">My Profile</a></li>
+          <li><a class="dropdown-item" href="{% url 'profile-edit' %}">Edit Profile</a></li>
+          <li><a class="dropdown-item" href="{% url 'profile-settings' %}">Settings</a></li>
+          <li><hr class="dropdown-divider" /></li>
+          <li><a class="dropdown-item" href="{% url 'account_logout' %}">Log Out</a></li>
+        </ul>
+      </li>
+      {% else %}
+      <li class="nav-item">
+        <a class="nav-link text-white" href="{% url 'account_login' %}">Login</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link text-white" href="{% url 'account_signup' %}?next={% url 'profile-onboarding' %}">Signup</a>
+      </li>
+      {% endif %}
+    </ul>
+  </nav>
+</header>

templates/includes/messages.html

@@ -0,0 +1,29 @@
+<messages>
+  {% if messages %}
+  <div>
+    {% for message in messages %}
+    <div
+      class="position-fixed top-0 start-50 translate-middle-x mt-3 z-50"
+      style="width: 100%; max-width: 576px"
+    >
+      <div
+        class="alert alert-{{ message.tags }} alert-dismissible fade show"
+        role="alert"
+      >
+        <div class="d-flex align-items-center">
+          <div class="me-3">
+            <div class="text-lg">{{ message }}</div>
+          </div>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="alert"
+            aria-label="Close"
+          ></button>
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</messages>