fix: add smooth auto-dismiss for Django messages Notification remove

poetry.toml

@@ -1,2 +1,2 @@
 [virtualenvs]
-create = false
+create = true

pyproject.toml

@@ -39,6 +39,7 @@ django-redis = "^5.4.0"
 redis = "^6.4.0"
 mysqlclient = "^2.2.4"
 psutil = "^7.1.3"
+pyjwt = "^2.13.0"
 
 [tool.poetry.group.dev.dependencies]
 djlint = "^1.34.1"

web/settings.py

@@ -142,6 +142,8 @@
     "channels",
     "allauth",
     "allauth.account",
+    "allauth.socialaccount",
+    "allauth.socialaccount.providers.google",
     "captcha",
     "markdownx",
     "web",

web/templates/account/login.html

@@ -1,7 +1,7 @@
 {% extends "allauth/layouts/base.html" %}
 
 {% load static %}
-{% load account %}
+{% load account socialaccount %}
 
 {% block extra_head %}
   {{ block.super }}
@@ -87,6 +87,27 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
           </button>
         </div>
       </form>
+
+      <div class="mt-6">
+        <div class="relative">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
+          </div>
+          <div class="relative flex justify-center text-sm">
+            <span class="bg-white dark:bg-gray-800 px-2 text-gray-500 dark:text-gray-400">
+              Or continue with
+            </span>
+          </div>
+        </div>
+
+        <a href="{% provider_login_url 'google' %}"
+          class="mt-6 flex w-full items-center justify-center rounded-md bg-white dark:bg-gray-700 px-4 py-2 text-base font-semibold leading-6 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600">
+          <i class="fab fa-google mr-2 text-sm text-red-500" aria-hidden="true"></i>
+          Continue with Google
+        </a>
+      </div>
+
+
       <p class="mt-10 text-center text-sm text-gray-500 dark:text-gray-400">
         Don't have an account?
         <a href="{% url 'account_signup' %}"

web/templates/account/signup.html

@@ -2,6 +2,8 @@
 
 {% load static %}
 
+{% load account socialaccount %}
+
 {% block extra_head %}
   {{ block.super }}
   <style>
@@ -249,6 +251,27 @@ <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center jus
           </a>
         </p>
       </form>
+
+      <div class="mt-6">
+        <div class="relative">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
+          </div>
+          <div class="relative flex justify-center text-sm">
+            <span class="bg-white dark:bg-gray-800 px-2 text-gray-500 dark:text-gray-400">
+              Or continue with
+            </span>
+          </div>
+        </div>
+
+        <a href="{% provider_login_url 'google' %}"
+          class="mt-6 flex w-full items-center justify-center rounded-md bg-white dark:bg-gray-700 px-4 py-2 text-base font-semibold leading-6 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600">
+          <i class="fab fa-google mr-2 text-sm text-red-500" aria-hidden="true"></i>
+          Continue with Google
+        </a>
+      </div>
+
+
     </div>
   </div>
 {% endblock content %}

web/templates/base.html

@@ -855,33 +855,70 @@
         </div>
       </div>
     </header>
-    {% if messages %}
-      <div class="fixed left-1/2 transform -translate-x-1/2 top-20 z-50 w-full max-w-lg space-y-2">
-        {% for message in messages %}
-          <div class="flex items-center p-4 rounded-lg shadow-lg {% if message.tags == 'error' %}bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200{% elif message.tags == 'success' %}bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-200{% elif message.tags == 'warning' %}bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-200{% else %}bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200{% endif %}">
-            <div class="mr-3">
-              {% if message.tags == 'error' %}
-                <i class="fas fa-exclamation-circle"></i>
-              {% elif message.tags == 'success' %}
-                <i class="fas fa-check-circle"></i>
-              {% elif message.tags == 'warning' %}
-                <i class="fas fa-exclamation-triangle"></i>
-              {% else %}
-                <i class="fas fa-info-circle"></i>
-              {% endif %}
-            </div>
-            <p class="flex-1">{{ message }}</p>
-            <button type="button" class="ml-auto" onclick="this.parentElement.remove()">
-              <i class="fas fa-times"></i>
-            </button>
-          </div>
-        {% endfor %}
+
+
+
+{% if messages %}
+  <div class="fixed left-1/2 transform -translate-x-1/2 top-20 z-50 w-full max-w-lg space-y-2">
+    {% for message in messages %}
+      <div class="django-message flex items-center p-4 rounded-lg shadow-lg transition-all duration-500 ease-in-out {% if message.tags == 'error' %}bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200{% elif message.tags == 'success' %}bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-200{% elif message.tags == 'warning' %}bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-200{% else %}bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200{% endif %}">
+
+        <div class="mr-3">
+          {% if message.tags == 'error' %}
+            <i class="fas fa-exclamation-circle"></i>
+          {% elif message.tags == 'success' %}
+            <i class="fas fa-check-circle"></i>
+          {% elif message.tags == 'warning' %}
+            <i class="fas fa-exclamation-triangle"></i>
+          {% else %}
+            <i class="fas fa-info-circle"></i>
+          {% endif %}
+        </div>
+
+        <p class="flex-1">{{ message }}</p>
+
+        <button type="button" class="ml-auto" onclick="removeMessage(this.parentElement)">
+          <i class="fas fa-times"></i>
+        </button>
+
       </div>
-    {% endif %}
-    {% block extra_body %}
-      {% block content %}
-      {% endblock content %}
-    {% endblock extra_body %}
+    {% endfor %}
+  </div>
+{% endif %}
+
+<style>
+  .django-message {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .django-message.hide {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+</style>
+
+<script>
+  function removeMessage(message) {
+    message.classList.add('hide');
+
+    setTimeout(function () {
+      message.remove();
+    }, 500);
+  }
+
+  setTimeout(function () {
+    document.querySelectorAll('.django-message').forEach(function (message) {
+      removeMessage(message);
+    });
+  }, 3000);
+</script>
+
+{% block extra_body %}
+  {% block content %}
+  {% endblock content %}
+{% endblock extra_body %}
+
     <!-- FOOTER -->
     <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-auto">
       <div class="max-w-[90rem] mx-auto px-4 md:px-6 py-12">