feat(templates/allauth): style allauth elements

kursy/templates/allauth/elements/field.html

@@ -0,0 +1,101 @@
+{% load allauth %}
+{% if attrs.type == "checkbox" or attrs.type == "radio" %}
+    <div class="mb-3 flex items-start gap-3">
+        <input {% if attrs.required %}required{% endif %}
+               name="{{ attrs.name }}"
+               class="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+               id="{{ attrs.id }}"
+               {% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
+               {% if attrs.disabled %}disabled{% endif %}
+               type="{{ attrs.type }}">
+        <label class="text-sm font-medium text-slate-700" for="{{ attrs.id }}">
+            {% slot label %}
+            {% endslot %}
+        </label>
+        {% if slots.help_text %}
+            <div class="text-xs text-slate-500">
+                {% slot help_text %}
+                {% endslot %}
+            </div>
+        {% endif %}
+    </div>
+{% elif attrs.type == "textarea" %}
+    <div class="mb-3">
+        <label class="mb-1 block text-sm font-medium text-slate-700" for="{{ attrs.id }}">
+            {% slot label %}
+            {% endslot %}
+        </label>
+        <textarea {% if attrs.required %}required{% endif %}
+                  {% if attrs.rows %}rows="{{ attrs.rows }}"{% endif %}
+                  class="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  name="{{ attrs.name }}"
+                  {% if attrs.readonly %}readonly{% endif %}
+                  id="{{ attrs.id }}"
+                  {% if attrs.disabled %}disabled{% endif %}>{% slot value %}{% endslot %}</textarea>
+    </div>
+{% elif attrs.type == "hidden" %}
+    <input {% if attrs.required %}required{% endif %}
+           name="{{ attrs.name }}"
+           id="{{ attrs.id }}"
+           {% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
+           type="hidden">
+{% elif attrs.type == "select" %}
+    <div class="mb-3">
+        {% if not attrs.unlabeled %}
+            <label class="mb-1 block text-sm font-medium text-slate-700" for="{{ attrs.id }}">
+                {% slot label %}
+                {% endslot %}
+            </label>
+        {% endif %}
+        <select id="{{ attrs.id }}"
+                name="{{ attrs.name }}"
+                class="block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
+            {% for option in attrs.choices %}
+                <option {% if option.0 == attrs.value %}selected{% endif %}
+                        value="{{ option.0 }}">{{ option.1 }}</option>
+            {% endfor %}
+        </select>
+        {% if attrs.unlabeled %}
+            <label class="sr-only" for="{{ attrs.id }}">
+                {% slot label %}
+                {% endslot %}
+            </label>
+        {% endif %}
+    </div>
+{% else %}
+    <div class="mb-3">
+        {% if not attrs.unlabeled %}
+            <label class="mb-1 block text-sm font-medium text-slate-700" for="{{ attrs.id }}">
+                {% slot label %}
+                {% endslot %}
+            </label>
+        {% endif %}
+        <input {% if attrs.required %}required{% endif %}
+               name="{{ attrs.name }}"
+               {% if attrs.placeholder %}placeholder="{{ attrs.placeholder }}" {% elif attrs.unlabeled %}placeholder="{% slot label %}{% endslot %}"{% endif %}
+               class="block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 {% if attrs.errors %}border-red-500 focus:border-red-500 focus:ring-red-500{% else %}border-slate-300 focus:border-blue-500 focus:ring-blue-500{% endif %}"
+               id="{{ attrs.id }}"
+               {% if attrs.readonly %}readonly{% endif %}
+               {% if attrs.disabled %}disabled{% endif %}
+               {% if attrs.tabindex %}tabindex="{{ attrs.tabindex }}"{% endif %}
+               {% if attrs.style %}style="{{ attrs.style }}"{% endif %}
+               {% if attrs.autocomplete %}autocomplete="{{ attrs.autocomplete }}"{% endif %}
+               {% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
+               type="{{ attrs.type }}">
+        {% if attrs.unlabeled %}
+            <label class="sr-only" for="{{ attrs.id }}">
+                {% slot label %}
+                {% endslot %}
+            </label>
+        {% endif %}
+        {% if slots.help_text %}
+            <div class="mt-1 text-xs text-slate-500">
+                {% slot help_text %}
+                {% endslot %}
+            </div>
+        {% endif %}
+        {% if attrs.errors %}
+            {% for error in attrs.errors %}<div role="alert" class="mt-1 text-xs text-red-600">{{ error }}</div>{% endfor %}
+        {% endif %}
+    </div>
+{% endif %}