DockFlare/dockflare/app/templates/restore_restarting.html

{% extends "base.html" %}

{% block title %}DockFlare is Restarting{% endblock %}

{% block content %}
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center space-y-6">
  <img src="{{ url_for('static', filename='images/logo.gif') }}" alt="DockFlare Logo" class="w-24 h-24 animate-pulse" />
  <div class="space-y-2">
    <h1 class="text-3xl font-semibold">Hold tight, DockFlare is rebooting...</h1>
    <p class="text-lg opacity-80">We’re loading your restored configuration and giving the tunnel hamsters a quick pep talk.</p>
  </div>
  <div class="bg-base-200 rounded-box px-6 py-4 text-left">
    <p class="font-medium">What’s happening?</p>
    <ul class="list-disc list-inside opacity-80 text-left">
      <li>Encrypted secrets were imported successfully.</li>
      <li>Agents and rules are warming up.</li>
      <li>We’ll refresh this page automatically in <span id="countdown">{{ countdown_seconds }}</span> seconds.</li>
    </ul>
  </div>
  <progress class="progress progress-primary w-64" value="0" max="{{ countdown_seconds }}" id="progress"></progress>
</div>

<script>
  (function() {
    const seconds = {{ countdown_seconds }};
    const redirectUrl = "{{ url_for('auth.login') }}";
    const pingUrl = "{{ url_for('web.ping') }}";
    const countdownEl = document.getElementById('countdown');
    const progressEl = document.getElementById('progress');
    let remaining = seconds;

    const pollForReady = () => {
      fetch(pingUrl, { cache: 'no-store' })
        .then(response => {
          if (response.ok) {
            window.location.replace(redirectUrl);
            return;
          }
          setTimeout(pollForReady, 1000);
        })
        .catch(() => {
          setTimeout(pollForReady, 1000);
        });
    };

    const tick = () => {
      remaining -= 1;
      if (remaining < 0) {
        clearInterval(timerId);
        countdownEl.textContent = 0;
        progressEl.value = seconds;
        pollForReady();
        return;
      }
      countdownEl.textContent = remaining;
      progressEl.value = seconds - remaining;
    };

    countdownEl.textContent = seconds;
    progressEl.setAttribute('max', seconds);
    progressEl.value = 0;
    const timerId = setInterval(tick, 1000);
  })();
</script>
{% endblock %}