servala-portal/src/servala/frontend/templates/account/login.html

{% extends "frontend/base.html" %}
{% load static i18n %}
{% load allauth account socialaccount %}
{% block html_title %}
    {% translate "Sign in" %}
{% endblock html_title %}
{% block page_title %}
    {% translate "Welcome to Servala - Sovereign App Store" %}
{% endblock page_title %}
{% block card_header %}
    <div class="card-header text-center py-4"
         style="background: linear-gradient(135deg, var(--bs-primary), #8B5CF6);
                border-radius: 0.5rem 0.5rem 0 0">
        <img src="{% static 'img/Servala-4.png' %}"
             alt="Servala"
             class="mb-3"
             style="height: 70px">
    </div>
{% endblock card_header %}
{% block card_content %}
    <!-- Main Sign In Section -->
    {% if SOCIALACCOUNT_ENABLED %}
        {% get_providers as socialaccount_providers %}
        {% if socialaccount_providers %}
            <div class="mb-4">
                <div class="text-center mb-4">
                    <h5 class="text-primary mb-2">{% translate "Ready to get started?" %}</h5>
                    <p class="text-muted mb-0">
                        {% translate "Sign in to your account or create a new one to access your managed service instances and the Servala service catalog" %}
                    </p>
                </div>
                {% for provider in socialaccount_providers %}
                    {% provider_login_url provider process=process scope=scope auth_params=auth_params as href %}
                    <form method="post" action="{{ href }}" class="d-flex justify-content-center">
                        {% csrf_token %}
                        {{ redirect_field }}
                        <button type="submit"
                                class="btn btn-primary btn-lg py-2 px-4 mb-4 fw-semibold"
                                title="{{ provider.name }}"
                                style="border-radius: 12px;
                                       box-shadow: 0 4px 15px rgba(154, 99, 236, 0.2);
                                       background: linear-gradient(135deg, var(--bs-primary), #8B5CF6)">
                            <span>{% translate "Sign in or Register" %}</span>
                        </button>
                    </form>
                {% endfor %}
            </div>
        {% endif %}
    {% endif %}
    <!-- Feature Preview & Learn More Section -->
    <div class="mt-4 pt-3 border-top">
        <div class="row g-3 text-center">
            <!-- Feature Icons -->
            <div class="col-3">
                <div class="text-primary mb-1">
                    <i class="bi bi-shield-check" style="font-size: 1.2rem;"></i>
                </div>
                <small class="text-muted fw-medium">{% translate "Secure" %}</small>
            </div>
            <div class="col-3">
                <div class="text-primary mb-1">
                    <i class="bi bi-lightning" style="font-size: 1.2rem;"></i>
                </div>
                <small class="text-muted fw-medium">{% translate "Fast" %}</small>
            </div>
            <div class="col-3">
                <div class="text-primary mb-1">
                    <i class="bi bi-cloud" style="font-size: 1.2rem;"></i>
                </div>
                <small class="text-muted fw-medium">{% translate "Scalable" %}</small>
            </div>
            <!-- Learn More -->
            <div class="col-3">
                <div class="text-primary mb-1">
                    <i class="bi bi-info-circle" style="font-size: 1.2rem;"></i>
                </div>
                <small class="text-muted fw-medium">
                    <a href="https://servala.com"
                       target="_blank"
                       class="text-decoration-none text-muted">
                        {% translate "Learn more" %}
                        <i class="bi bi-arrow-up-right ms-1" style="font-size: 0.7rem;"></i>
                    </a>
                </small>
            </div>
        </div>
    </div>
    <!-- Alternative Login Options (Admin) -->
    <div class="mt-4 pt-3 border-top text-center">
        <small class="text-muted">
            <a data-bs-toggle="collapse"
               href="#login-form"
               role="button"
               aria-controls="login-form"
               class="text-muted text-decoration-none">
                <i class="bi bi-envelope me-1" style="font-size: 0.8rem;"></i>
                {% translate "Local sign in with email and password" %}
            </a>
        </small>
    </div>
    <div class="collapse mt-3" id="login-form">
        <div class="card bg-light border-0 shadow-sm" style="border-radius: 12px;">
            <div class="card-body p-4">
                <div class="form form-vertical">
                    {% url 'account_login' as form_action %}
                    {% translate "Sign In" as form_submit_label %}
                    {% include "includes/form.html" with extra_field=redirect_field %}
                </div>
            </div>
        </div>
    </div>
{% endblock card_content %}