96 lines
No EOL
4.1 KiB
HTML
96 lines
No EOL
4.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Authentification en attente - Debug{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h1><i class="fas fa-key"></i> Authentification en attente</h1>
|
|
<p class="text-muted">Complétez l'authentification manuellement</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Étape 1: Autoriser l'application</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Allez sur l'URL suivante dans votre navigateur :</p>
|
|
<div class="mb-3">
|
|
<a href="{{ device_code_data.verification_uri }}" target="_blank" class="btn btn-primary">
|
|
<i class="fas fa-external-link-alt"></i> {{ device_code_data.verification_uri }}
|
|
</a>
|
|
</div>
|
|
<p>Et entrez le code d'utilisateur :</p>
|
|
<div class="text-center my-3">
|
|
<h3><code>{{ device_code_data.user_code }}</code></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Étape 2: Compléter l'authentification</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="POST" action="{{ url_for('outlook_test.complete_auth') }}" id="manual-form">
|
|
<input type="hidden" name="account_id" value="{{ account.id }}">
|
|
<input type="hidden" name="device_code" value="{{ device_code_data.device_code }}">
|
|
<div class="mb-3">
|
|
<label for="refresh_token" class="form-label">Refresh Token (optionnel - le polling auto le récupère)</label>
|
|
<textarea class="form-control" id="refresh_token" name="refresh_token" rows="3" placeholder="Laissez vide pour polling automatique"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-success">
|
|
<i class="fas fa-check"></i> Activer le compte
|
|
</button>
|
|
<a href="{{ url_for('outlook_test.index') }}" class="btn btn-secondary">
|
|
<i class="fas fa-times"></i> Annuler
|
|
</a>
|
|
</form>
|
|
|
|
<div id="polling-status" class="mt-3" style="display: none;">
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-spinner fa-spin"></i> Attente de l'autorisation... (polling automatique)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
const deviceCode = "{{ device_code_data.device_code }}";
|
|
const accountId = {{ account.id }};
|
|
const pollUrl = "{{ url_for('outlook_test.poll_auth', account_id=account.id) }}";
|
|
const statusDiv = document.getElementById('polling-status');
|
|
|
|
function poll() {
|
|
fetch(pollUrl + '?device_code=' + encodeURIComponent(deviceCode))
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
window.location.href = data.redirect;
|
|
} else if (data.status === 'error') {
|
|
statusDiv.innerHTML = '<div class="alert alert-danger">Erreur: ' + data.message + '</div>';
|
|
}
|
|
// 'pending' : continuer le polling
|
|
})
|
|
.catch(err => {
|
|
statusDiv.innerHTML = '<div class="alert alert-warning">Erreur réseau: ' + err + '</div>';
|
|
});
|
|
}
|
|
|
|
// Démarrer le polling auto
|
|
statusDiv.style.display = 'block';
|
|
const interval = setInterval(poll, 5000); // Toutes les 5 secondes
|
|
poll(); // Premier appel immédiat
|
|
})();
|
|
</script>
|
|
|
|
{% endblock %} |