From 5cbb4ef449da114a1f2c215ae77e7e701f386746 Mon Sep 17 00:00:00 2001
From: Tobias Kunze <r@rixx.de>
Date: Mon, 17 Mar 2025 18:33:21 +0100
Subject: [PATCH] Build login page

---
 .../frontend/templates/account/login.html     | 43 +++++++++++++++++++
 src/servala/static/img/keycloak.svg           |  6 +++
 2 files changed, 49 insertions(+)
 create mode 100644 src/servala/frontend/templates/account/login.html
 create mode 100644 src/servala/static/img/keycloak.svg

diff --git a/src/servala/frontend/templates/account/login.html b/src/servala/frontend/templates/account/login.html
new file mode 100644
index 0000000..bb945ee
--- /dev/null
+++ b/src/servala/frontend/templates/account/login.html
@@ -0,0 +1,43 @@
+{% extends "frontend/base.html" %}
+{% load static i18n %}
+{% load allauth account socialaccount %}
+{% block html_title %}
+    {% block page_title %}
+        {% translate "Sign In" %}
+    {% endblock page_title %}
+{% endblock html_title %}
+{% block content %}
+    <section class="section">
+        <div class="card">
+            <div class="card-content">
+                <div class="card-body">
+                    {% if SOCIALACCOUNT_ENABLED %}
+                        {% get_providers as socialaccount_providers %}
+                        {% if socialaccount_providers %}
+                            {% for provider in socialaccount_providers %}
+                                {% provider_login_url provider process=process scope=scope auth_params=auth_params as href %}
+                                <form method="post" action="{{ href }}">
+                                    {% csrf_token %}
+                                    <button href="{{ href }}"
+                                            class="btn btn-warning btn-lg icon icon-left"
+                                            title="{{ provider.name }}">
+                                        <img src="{% static 'img/keycloak.svg' %}" style="height: 30px">
+                                        <span class="mx-1">{% translate "Sign in with your" %} {{ provider.name }}</span>
+                                    </button>
+                                </form>
+                            {% endfor %}
+                        {% endif %}
+                    {% endif %}
+                    <details class="mt-2">
+                        <summary>{% translate "Log in with email and password instead" %}</summary>
+                        <form method="post" action="{% url 'account_login' %}">
+                            {% csrf_token %}
+                            {{ form }}
+                            <button class="btn btn-primary" type="submit">{% translate "Sign In" %}</button>
+                        </form>
+                    </details>
+                </div>
+            </div>
+        </div>
+    </section>
+{% endblock content %}
diff --git a/src/servala/static/img/keycloak.svg b/src/servala/static/img/keycloak.svg
new file mode 100644
index 0000000..cdcd0fa
--- /dev/null
+++ b/src/servala/static/img/keycloak.svg
@@ -0,0 +1,6 @@
+<svg width="107" height="60" fill="none" xmlns="http://www.w3.org/2000/svg" class="image" aria-hidden="true">
+    <circle cx="53.002" cy="30" r="19" fill="#4CC3FF"></circle>
+    <path opacity="0.25" d="M67.833 41.874A18.92 18.92 0 0071.999 30c0-10.493-8.506-19-19-19a18.932 18.932 0 00-12.868 5.021c14.446.554 26.182 11.675 27.702 25.853z" fill="#000D1A"></path>
+    <path d="M31.594 6.491v8.571l5.217-3.173a31.165 31.165 0 0132.426 0l.622.378v.006l.14.078v-8.39l-.137-.07a38.382 38.382 0 00-36.807 1.712l-1.461.888zM74.436 53.508v-8.57l-5.218 3.173a31.165 31.165 0 01-32.425 0l-.625-.38v-.005L36 47.64v8.39l.168.079a38.382 38.382 0 0036.807-1.712l1.461-.889z" fill="#4CC3FF"></path>
+    <path d="M31.571 15.063v-8.57L0 25.694v8.614L31.571 53.51v-8.57L7.011 30l24.56-14.938zM74.432 53.511l31.571-19.202v-8.614L74.432 6.492v8.571l24.56 14.939-24.56 14.938v8.571z" fill="#000D1A"></path>
+</svg>