dictia-public/templates/login.html

{% extends 'marketing/base.html' %}

{% block title %}Connexion — DictIA{% endblock %}
{% block description %}Connectez-vous à votre compte DictIA. Microsoft 365, Google, lien magique ou mot de passe.{% endblock %}

{% block content %}
<section class="min-h-[calc(100vh-62px)] bg-brand-bg py-16 px-4" aria-labelledby="login-title">
  <div class="max-w-md mx-auto bg-white p-8 rounded-[18px] border border-brand-border shadow-cta">
    <h1 id="login-title" class="text-3xl font-black text-brand-navy mb-2">Connexion</h1>
    <p class="text-sm text-brand-navy/70 mb-6">{{ "Bienvenue sur DictIA — la transcription IA conforme à la Loi&nbsp;25." | safe }}</p>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div role="alert" class="mb-3 p-3 rounded-lg text-sm
            {% if category == 'danger' %}bg-red-50 text-red-900 border border-red-200
            {% elif category == 'warning' %}bg-amber-50 text-amber-900 border border-amber-200
            {% elif category == 'success' %}bg-green-50 text-green-900 border border-green-200
            {% else %}bg-blue-50 text-blue-900 border border-blue-200{% endif %}">
            {{ message }}
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    {# OAuth providers (Microsoft 365 + Google) — rendered only if env-enabled #}
    {% if oauth_microsoft_enabled or oauth_google_enabled or sso_enabled %}
      <div class="space-y-3 mb-6" aria-label="Connexion fédérée">
        {% if oauth_microsoft_enabled %}
          <a href="{{ url_for('auth.oauth_provider_login', provider='microsoft') }}"
             class="w-full inline-flex items-center justify-center gap-3 px-4 py-3 bg-white border border-brand-border rounded-[0.75rem] text-brand-navy font-semibold hover:bg-brand-bg transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
            {# Official Microsoft 4-square logo #}
            <svg width="20" height="20" viewBox="0 0 21 21" aria-hidden="true" focusable="false">
              <rect x="1"  y="1"  width="9" height="9" fill="#F25022"/>
              <rect x="11" y="1"  width="9" height="9" fill="#7FBA00"/>
              <rect x="1"  y="11" width="9" height="9" fill="#00A4EF"/>
              <rect x="11" y="11" width="9" height="9" fill="#FFB900"/>
            </svg>
            <span>Continuer avec Microsoft 365</span>
          </a>
        {% endif %}

        {% if oauth_google_enabled %}
          <a href="{{ url_for('auth.oauth_provider_login', provider='google') }}"
             class="w-full inline-flex items-center justify-center gap-3 px-4 py-3 bg-white border border-brand-border rounded-[0.75rem] text-brand-navy font-semibold hover:bg-brand-bg transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
            {# Official Google "G" logo #}
            <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09Z"/>
              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.99.66-2.25 1.06-3.72 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"/>
              <path fill="#FBBC05" d="M5.84 14.11A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.11V7.05H2.18a11 11 0 0 0 0 9.9l3.66-2.84Z"/>
              <path fill="#EA4335" d="M12 5.38c1.62 0 3.07.56 4.21 1.64l3.16-3.16C17.46 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.05l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38Z"/>
            </svg>
            <span>Continuer avec Google</span>
          </a>
        {% endif %}

        {% if sso_enabled %}
          <a href="{{ url_for('auth.sso_login') }}"
             class="w-full inline-flex items-center justify-center gap-3 px-4 py-3 bg-white border border-brand-border rounded-[0.75rem] text-brand-navy font-semibold hover:bg-brand-bg transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
              <rect x="3" y="11" width="18" height="11" rx="2"/>
              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
            </svg>
            <span>Se connecter avec {{ sso_provider_name }}</span>
          </a>
        {% endif %}

        {% if not password_login_disabled %}
          <div class="flex items-center text-xs uppercase tracking-wide text-brand-navy/60 my-3">
            <span class="flex-grow border-t border-brand-border"></span>
            <span class="mx-3">ou</span>
            <span class="flex-grow border-t border-brand-border"></span>
          </div>
        {% endif %}
      </div>
    {% endif %}

    {% if not password_login_disabled %}
      <form method="POST" action="{{ url_for('auth.login') }}" class="space-y-4" novalidate>
        {{ form.hidden_tag() }}

        <div>
          <label for="email" class="block text-sm font-medium text-brand-navy mb-1">Courriel <span class="text-red-600" aria-hidden="true">*</span></label>
          {{ form.email(id='email', type='email', autocomplete='email', required=true, **{'aria-required':'true', 'class':'w-full px-3 py-2 border border-brand-border rounded-[0.5rem] text-brand-navy focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2'}) }}
          {% if form.email.errors %}<p class="text-xs text-red-700 mt-1" role="alert">{{ form.email.errors[0] }}</p>{% endif %}
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-brand-navy mb-1">Mot de passe <span class="text-red-600" aria-hidden="true">*</span></label>
          {{ form.password(id='password', autocomplete='current-password', required=true, **{'aria-required':'true', 'class':'w-full px-3 py-2 border border-brand-border rounded-[0.5rem] text-brand-navy focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2'}) }}
          {% if form.password.errors %}<p class="text-xs text-red-700 mt-1" role="alert">{{ form.password.errors[0] }}</p>{% endif %}
        </div>

        <div class="flex items-center justify-between text-sm">
          <label for="remember" class="flex items-center gap-2 text-brand-navy/90 cursor-pointer">
            {{ form.remember(id='remember', **{'class':'focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2'}) }}
            <span>Se souvenir de moi</span>
          </label>
          <a href="{{ url_for('auth.forgot_password') }}" class="grad-text font-semibold hover:underline">Mot de passe oublié&nbsp;?</a>
        </div>

        <button type="submit" class="w-full grad-bg text-white font-semibold py-3 rounded-[0.75rem] shadow-cta hover:shadow-cta-hover transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
          Se connecter
        </button>
      </form>

      <p class="text-center text-sm mt-4">
        <a href="{{ url_for('auth.magic_link_request') }}" class="grad-text font-semibold hover:underline">
          {{ "Recevoir un lien de connexion par courriel (sans mot de passe)" | safe }}
        </a>
      </p>
    {% endif %}

    <p class="text-center text-sm text-brand-navy/70 mt-6">
      Pas encore de compte&nbsp;?
      <a href="{{ url_for('auth.signup') }}" class="grad-text font-semibold hover:underline">Créer un compte</a>
    </p>
  </div>
</section>
{% endblock %}