[TASK] refactor alert messages

frontend/scss/app.scss

@@ -7,3 +7,4 @@
 @import 'components/btns';
 @import 'components/links';
 @import 'components/input';
+@import 'components/alert';

frontend/scss/components/_alert.scss

@@ -0,0 +1,9 @@
+.alert {
+  &-success {
+    @apply bg-[#15803d];
+  }
+
+  &-error {
+    @apply bg-[#f43f5e];
+  }
+}

templates/auth/login.html.tera

@@ -8,16 +8,7 @@
     </div>
 
     {% if flash %}
-      {% if flash.0 == "success" %}
-      <div class="bg-[#4ade80] text-white px-3 py-1 rounded-md text-center">
-        {{ flash.1 }}
-      </div>
-      {% endif %}
-      {% if flash.0 == "error" %}
-      <div class="bg-[#f43f5e] text-white px-3 py-1 rounded-md text-center">
-        {{ flash.1 }}
-      </div>
-      {% endif %}
+      {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3") }}
     {% endif %}
     <form class="mt-8 space-y-6" method="post" action="/auth">
       <input type="hidden" name="remember" value="true">

templates/includes/macros.html.tera

@@ -34,3 +34,10 @@
     <input type="checkbox" id="{{ name }}{{ id }}" name="{{ name }}"  {% if checked %} checked {% endif %}  class="h-4 w-4 accent-primary-600 mr-2"/> {{ label }}
   </label>
 {% endmacro checkbox %}
+
+{% macro alert(message, type, class='') %}
+<div class="{{ class }} alert-{{ type }} text-white px-3 py-1 rounded-md text-center">
+  {{ message }}
+</div>
+{% endmacro alert %}
+

templates/index.html.tera

@@ -5,16 +5,7 @@
 {% block content %}
 <div class="max-w-screen-xl w-full grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
   {% if flash %}
-    {% if flash.0 == "success" %}
-      <div class="sm:col-span-2 lg:col-span-3 bg-[#4ade80] text-white px-3 py-1 rounded-md text-center">
-        {{ flash.1 }}
-      </div>
-    {% endif %}
-    {% if flash.0 == "error" %}
-      <div class="sm:col-span-2 lg:col-span-3 bg-[#f43f5e] text-white px-3 py-1 rounded-md text-center">
-        {{ flash.1 }}
-      </div>
-    {% endif %}
+    {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3") }}
   {% endif %}
 
   <h1 class="h1 sm:col-span-2 lg:col-span-3">Ausfahrten</h1>