<!--
 * location: ~/public/pages/layouts/default.hbs
 * description: This HBS file sets up the basic structure and necessary resources for a web page.
 * 							It includes metadata for character set and viewport settings, links to external CSS
 * 							and JavaScript libraries (such as jQuery and Bootstrap), and placeholders for the
 * 							title and body content.
 * installation: Save this file with a .hbs extension and open it in a web browser to render the
 * 							 page.
 * usage: Replace Sign In — IT Dashboard with your desired page title and &lt;div class&#x3D;&quot;container-fluid p-0&quot;&gt;
  &lt;div id&#x3D;&quot;bodyWrapper&quot; class&#x3D;&quot;min-vh-100 d-flex align-items-center justify-content-center&quot;&gt;
    &lt;div class&#x3D;&quot;container&quot;&gt;
      &lt;div class&#x3D;&quot;row justify-content-center&quot;&gt;
        &lt;div class&#x3D;&quot;col-md-6 col-lg-5 col-xl-4&quot;&gt;

          &lt;div class&#x3D;&quot;card shadow-lg border-0&quot;&gt;
            &lt;div class&#x3D;&quot;card-body p-5&quot;&gt;

              &lt;div class&#x3D;&quot;text-center mb-4&quot;&gt;
                &lt;img
                  src&#x3D;&quot;https://rlglobalwiki.com/wp-content/uploads/2023/04/RL-Global-Logistics-Logo_CTP.png&quot;
                  alt&#x3D;&quot;RL Global Logistics&quot;
                  height&#x3D;&quot;60&quot;
                  width&#x3D;&quot;180&quot;
                  class&#x3D;&quot;mb-3&quot;
                /&gt;
                &lt;h2 class&#x3D;&quot;h4 text-dark mb-1&quot;&gt;Welcome Back&lt;/h2&gt;
                &lt;p class&#x3D;&quot;text-muted small&quot;&gt;Sign in to your dashboard&lt;/p&gt;
              &lt;/div&gt;

              &lt;div id&#x3D;&quot;step-email&quot;&gt;
                &lt;p class&#x3D;&quot;text-muted small text-center mb-3&quot;&gt;
                  Enter your work email to receive a sign-in code.
                &lt;/p&gt;
                &lt;div class&#x3D;&quot;mb-3&quot;&gt;
                  &lt;label for&#x3D;&quot;email-input&quot; class&#x3D;&quot;form-label small fw-semibold&quot;&gt;Work Email&lt;/label&gt;
                  &lt;input
                    type&#x3D;&quot;email&quot;
                    class&#x3D;&quot;form-control&quot;
                    id&#x3D;&quot;email-input&quot;
                    placeholder&#x3D;&quot;you@rlglobal.com&quot;
                    autocomplete&#x3D;&quot;email&quot;
                    autofocus
                  /&gt;
                &lt;/div&gt;
                &lt;div class&#x3D;&quot;form-check mb-3&quot;&gt;
                  &lt;input class&#x3D;&quot;form-check-input&quot; type&#x3D;&quot;checkbox&quot; id&#x3D;&quot;remember-me&quot; /&gt;
                  &lt;label class&#x3D;&quot;form-check-label small text-muted&quot; for&#x3D;&quot;remember-me&quot;&gt;
                    Keep me signed in for 30 days
                  &lt;/label&gt;
                &lt;/div&gt;
                &lt;div class&#x3D;&quot;d-grid&quot;&gt;
                  &lt;button type&#x3D;&quot;button&quot; class&#x3D;&quot;btn btn-primary&quot; id&#x3D;&quot;send-code-btn&quot;&gt;
                    &lt;span id&#x3D;&quot;send-code-text&quot;&gt;Send Sign-In Code&lt;/span&gt;
                    &lt;span class&#x3D;&quot;spinner-border spinner-border-sm ms-2 d-none&quot; id&#x3D;&quot;send-code-spinner&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;

              &lt;div id&#x3D;&quot;step-code&quot; class&#x3D;&quot;d-none&quot;&gt;
                &lt;p class&#x3D;&quot;text-muted small text-center mb-1&quot;&gt;
                  A 6-digit code was sent to
                &lt;/p&gt;
                &lt;p class&#x3D;&quot;text-center fw-semibold mb-3&quot; id&#x3D;&quot;code-sent-to&quot;&gt;&lt;/p&gt;
                &lt;div class&#x3D;&quot;mb-3&quot;&gt;
                  &lt;label for&#x3D;&quot;code-input&quot; class&#x3D;&quot;form-label small fw-semibold&quot;&gt;Sign-In Code&lt;/label&gt;
                  &lt;input
                    type&#x3D;&quot;text&quot;
                    class&#x3D;&quot;form-control form-control-lg text-center&quot;
                    id&#x3D;&quot;code-input&quot;
                    placeholder&#x3D;&quot;000000&quot;
                    maxlength&#x3D;&quot;6&quot;
                    inputmode&#x3D;&quot;numeric&quot;
                    autocomplete&#x3D;&quot;one-time-code&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div class&#x3D;&quot;d-grid mb-2&quot;&gt;
                  &lt;button type&#x3D;&quot;button&quot; class&#x3D;&quot;btn btn-primary&quot; id&#x3D;&quot;verify-code-btn&quot;&gt;
                    &lt;span id&#x3D;&quot;verify-code-text&quot;&gt;Sign In&lt;/span&gt;
                    &lt;span class&#x3D;&quot;spinner-border spinner-border-sm ms-2 d-none&quot; id&#x3D;&quot;verify-code-spinner&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div class&#x3D;&quot;text-center d-flex justify-content-between align-items-center&quot;&gt;
                  &lt;button type&#x3D;&quot;button&quot; class&#x3D;&quot;btn btn-link btn-sm text-muted p-0&quot; id&#x3D;&quot;back-to-email-btn&quot;&gt;
                    &amp;larr; Use a different email
                  &lt;/button&gt;
                  &lt;button type&#x3D;&quot;button&quot; class&#x3D;&quot;btn btn-link btn-sm p-0&quot; id&#x3D;&quot;resend-code-btn&quot;&gt;
                    Resend code
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div class&#x3D;&quot;text-center mt-1&quot;&gt;
                  &lt;span class&#x3D;&quot;text-muted small d-none&quot; id&#x3D;&quot;resend-countdown&quot;&gt;&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;

              &lt;div class&#x3D;&quot;alert d-none mt-3 py-2 px-3 small&quot; id&#x3D;&quot;login-alert&quot; role&#x3D;&quot;alert&quot;&gt;&lt;/div&gt;

            &lt;/div&gt;
          &lt;/div&gt;

          &lt;div class&#x3D;&quot;text-center mt-4&quot;&gt;
            &lt;p class&#x3D;&quot;text-muted small mb-1&quot;&gt;© 2025 RL Global Logistics. All rights reserved.&lt;/p&gt;
            &lt;p class&#x3D;&quot;text-muted small&quot;&gt;
              &lt;i class&#x3D;&quot;fas fa-lock me-1&quot;&gt;&lt;/i&gt;Passwordless sign-in
            &lt;/p&gt;
          &lt;/div&gt;

        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
// Store the post-login redirect target if the server specified one
(function() {
  var redirect &#x3D; &#x27;&#x27;;
  if (redirect &amp;&amp; redirect !&#x3D;&#x3D; &#x27;undefined&#x27; &amp;&amp; redirect !&#x3D;&#x3D; &#x27;&#x27;) {
    sessionStorage.setItem(&#x27;postLoginRedirect&#x27;, redirect);
  }
})();
&lt;/script&gt;
&lt;script&gt;
(function () {
  &#x27;use strict&#x27;;

  // ── DOM refs ────────────────────────────────────────────────────────────
  const stepEmail  &#x3D; document.getElementById(&#x27;step-email&#x27;);
  const stepCode   &#x3D; document.getElementById(&#x27;step-code&#x27;);
  const emailInput &#x3D; document.getElementById(&#x27;email-input&#x27;);
  const codeInput  &#x3D; document.getElementById(&#x27;code-input&#x27;);
  const rememberMe &#x3D; document.getElementById(&#x27;remember-me&#x27;);
  const alertEl    &#x3D; document.getElementById(&#x27;login-alert&#x27;);
  const codeSentTo &#x3D; document.getElementById(&#x27;code-sent-to&#x27;);

  const sendCodeBtn     &#x3D; document.getElementById(&#x27;send-code-btn&#x27;);
  const sendCodeText    &#x3D; document.getElementById(&#x27;send-code-text&#x27;);
  const sendCodeSpinner &#x3D; document.getElementById(&#x27;send-code-spinner&#x27;);

  const verifyCodeBtn     &#x3D; document.getElementById(&#x27;verify-code-btn&#x27;);
  const verifyCodeText    &#x3D; document.getElementById(&#x27;verify-code-text&#x27;);
  const verifyCodeSpinner &#x3D; document.getElementById(&#x27;verify-code-spinner&#x27;);

  const backBtn         &#x3D; document.getElementById(&#x27;back-to-email-btn&#x27;);
  const resendBtn       &#x3D; document.getElementById(&#x27;resend-code-btn&#x27;);
  const resendCountdown &#x3D; document.getElementById(&#x27;resend-countdown&#x27;);

  // ── resend cooldown ──────────────────────────────────────────────────────
  var _resendTimer &#x3D; null;

  function startResendCooldown(seconds) {
    resendBtn.disabled &#x3D; true;
    resendCountdown.classList.remove(&#x27;d-none&#x27;);
    var remaining &#x3D; seconds;
    resendCountdown.textContent &#x3D; &#x27;Resend available in &#x27; + remaining + &#x27;s&#x27;;
    _resendTimer &#x3D; setInterval(function () {
      remaining--;
      if (remaining &lt;&#x3D; 0) {
        clearInterval(_resendTimer);
        resendBtn.disabled &#x3D; false;
        resendCountdown.classList.add(&#x27;d-none&#x27;);
      } else {
        resendCountdown.textContent &#x3D; &#x27;Resend available in &#x27; + remaining + &#x27;s&#x27;;
      }
    }, 1000);
  }

  // ── helpers ─────────────────────────────────────────────────────────────
  function showAlert(msg, type) {
    alertEl.className &#x3D; &#x27;alert alert-&#x27; + (type || &#x27;danger&#x27;) + &#x27; mt-3 py-2 px-3 small&#x27;;
    alertEl.textContent &#x3D; msg;
  }

  function hideAlert() {
    alertEl.className &#x3D; &#x27;alert d-none mt-3 py-2 px-3 small&#x27;;
  }

  function setLoading(isSendStep, loading) {
    var btn     &#x3D; isSendStep ? sendCodeBtn     : verifyCodeBtn;
    var textEl  &#x3D; isSendStep ? sendCodeText    : verifyCodeText;
    var spinner &#x3D; isSendStep ? sendCodeSpinner : verifyCodeSpinner;
    btn.disabled &#x3D; loading;
    textEl.textContent &#x3D; loading
      ? (isSendStep ? &#x27;Sending\u2026&#x27; : &#x27;Signing in\u2026&#x27;)
      : (isSendStep ? &#x27;Send Sign-In Code&#x27; : &#x27;Sign In&#x27;);
    spinner.classList.toggle(&#x27;d-none&#x27;, !loading);
  }

  function showStep(step) {
    stepEmail.classList.toggle(&#x27;d-none&#x27;, step !&#x3D;&#x3D; &#x27;email&#x27;);
    stepCode.classList.toggle(&#x27;d-none&#x27;,  step !&#x3D;&#x3D; &#x27;code&#x27;);
    hideAlert();
  }

  // ── Step 1: request code ────────────────────────────────────────────────
  async function requestCode() {
    var email &#x3D; emailInput.value.trim().toLowerCase();
    if (!email || !email.includes(&#x27;@&#x27;)) {
      showAlert(&#x27;Please enter a valid email address.&#x27;);
      return;
    }

    hideAlert();
    setLoading(true, true);

    try {
      var res &#x3D; await fetch(&#x27;/auth/request-code&#x27;, {
        method: &#x27;POST&#x27;,
        headers: { &#x27;Content-Type&#x27;: &#x27;application/json&#x27; },
        credentials: &#x27;include&#x27;,
        body: JSON.stringify({ email: email }),
      });

      if (res.status &#x3D;&#x3D;&#x3D; 429) {
        showAlert(&#x27;Too many requests. Please wait a moment and try again.&#x27;, &#x27;warning&#x27;);
        return;
      }

      // Always advance — avoids user enumeration
      codeSentTo.textContent &#x3D; email;
      showStep(&#x27;code&#x27;);
      codeInput.focus();
      startResendCooldown(60);
    } catch (_) {
      showAlert(&#x27;Network error. Please check your connection and try again.&#x27;);
    } finally {
      setLoading(true, false);
    }
  }

  // ── Step 2: verify code ─────────────────────────────────────────────────
  async function verifyCode() {
    var email &#x3D; emailInput.value.trim().toLowerCase();
    var code  &#x3D; codeInput.value.trim();

    if (!code || code.length !&#x3D;&#x3D; 6) {
      showAlert(&#x27;Please enter the 6-digit code from your email.&#x27;);
      return;
    }

    hideAlert();
    setLoading(false, true);

    try {
      var res &#x3D; await fetch(&#x27;/auth/verify-code&#x27;, {
        method: &#x27;POST&#x27;,
        headers: { &#x27;Content-Type&#x27;: &#x27;application/json&#x27; },
        credentials: &#x27;include&#x27;,
        body: JSON.stringify({ email: email, code: code, rememberMe: rememberMe.checked }),
      });

      if (res.ok) {
        var redirectUrl &#x3D; sessionStorage.getItem(&#x27;postLoginRedirect&#x27;) || &#x27;/it-dashboard&#x27;;
        sessionStorage.removeItem(&#x27;postLoginRedirect&#x27;);
        window.location.href &#x3D; redirectUrl;
        return;
      }

      var data &#x3D; {};
      try { data &#x3D; await res.json(); } catch (_) {}
      var msg &#x3D; (data &amp;&amp; data.error &amp;&amp; data.error.message) || &#x27;Invalid or expired code.&#x27;;

      if (res.status &#x3D;&#x3D;&#x3D; 401) {
        showAlert(&#x27;Incorrect code. Please check your email and try again.&#x27;);
      } else if (res.status &#x3D;&#x3D;&#x3D; 403) {
        showAlert(&#x27;Your account is not active. Contact your administrator.&#x27;);
      } else {
        showAlert(msg);
      }
    } catch (_) {
      showAlert(&#x27;Network error. Please check your connection and try again.&#x27;);
    } finally {
      setLoading(false, false);
    }
  }

  // ── events ───────────────────────────────────────────────────────────────
  sendCodeBtn.addEventListener(&#x27;click&#x27;, requestCode);
  emailInput.addEventListener(&#x27;keydown&#x27;, function (e) { if (e.key &#x3D;&#x3D;&#x3D; &#x27;Enter&#x27;) requestCode(); });

  verifyCodeBtn.addEventListener(&#x27;click&#x27;, verifyCode);
  codeInput.addEventListener(&#x27;keydown&#x27;, function (e) { if (e.key &#x3D;&#x3D;&#x3D; &#x27;Enter&#x27;) verifyCode(); });

  // Digits only + paste cleanup + auto-submit on 6 digits
  codeInput.addEventListener(&#x27;input&#x27;, function () {
    var cleaned &#x3D; codeInput.value.replace(/\D/g, &#x27;&#x27;).slice(0, 6);
    codeInput.value &#x3D; cleaned;
    if (cleaned.length &#x3D;&#x3D;&#x3D; 6) {
      verifyCode();
    }
  });

  codeInput.addEventListener(&#x27;paste&#x27;, function (e) {
    e.preventDefault();
    var pasted &#x3D; (e.clipboardData || window.clipboardData).getData(&#x27;text&#x27;);
    var digits &#x3D; pasted.replace(/\D/g, &#x27;&#x27;).slice(0, 6);
    codeInput.value &#x3D; digits;
    if (digits.length &#x3D;&#x3D;&#x3D; 6) {
      verifyCode();
    }
  });

  resendBtn.addEventListener(&#x27;click&#x27;, async function () {
    codeInput.value &#x3D; &#x27;&#x27;;
    hideAlert();
    resendBtn.disabled &#x3D; true;
    resendBtn.textContent &#x3D; &#x27;Sending\u2026&#x27;;
    try {
      var email &#x3D; emailInput.value.trim().toLowerCase();
      await fetch(&#x27;/auth/request-code&#x27;, {
        method: &#x27;POST&#x27;,
        headers: { &#x27;Content-Type&#x27;: &#x27;application/json&#x27; },
        credentials: &#x27;include&#x27;,
        body: JSON.stringify({ email: email }),
      });
      showAlert(&#x27;A new code has been sent.&#x27;, &#x27;info&#x27;);
      startResendCooldown(60);
    } catch (_) {
      showAlert(&#x27;Failed to resend. Please try again.&#x27;);
      resendBtn.disabled &#x3D; false;
    } finally {
      resendBtn.textContent &#x3D; &#x27;Resend code&#x27;;
    }
  });

  backBtn.addEventListener(&#x27;click&#x27;, function () {
    codeInput.value &#x3D; &#x27;&#x27;;
    if (_resendTimer) clearInterval(_resendTimer);
    resendBtn.disabled &#x3D; false;
    resendCountdown.classList.add(&#x27;d-none&#x27;);
    showStep(&#x27;email&#x27;);
    emailInput.focus();
  });

})();
&lt;/script&gt;

&lt;style&gt;
  .min-vh-100 { min-height: 100vh; }
  .card { border-radius: 1rem; }
  .shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; }
  #code-input { font-size: 1.5rem; font-weight: 600; letter-spacing: .3em; }
  .alert { border-radius: .5rem; border: none; }
  @media (max-width: 576px) { .card-body { padding: 2rem !important; } }
&lt;/style&gt; with your content. Customize
 *			  the links to assets and libraries as needed for your project.
-->

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="icon" type="image/x-icon" href="https://blue.cc/favicon.ico" />
		<link rel="stylesheet" href="https://releases.jquery.com/git/ui/jquery-ui-git.css" />
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
			crossorigin="anonymous"
		/>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
		
		<!-- Load main CSS for all contexts -->
		<link rel="stylesheet" href="/css/style.css" />
		
		<!-- Conditionally load sidebar CSS only for sidebar context (performance optimization) -->
		
		<!-- Critical: Bootstrap (blocks rendering, must load before other scripts) -->
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
			crossorigin="anonymous"
		></script>
		
		<!-- Defer non-critical scripts to avoid blocking page render (performance optimization) -->
		<script
			src="https://code.jquery.com/jquery-3.7.1.js"
			integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
			crossorigin="anonymous"
			defer
		></script>
		<script
			src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"
			integrity="sha256-9zljDKpE/mQxmaR4V2cGVaQ7arF3CcXxarvgr7Sj8Uc="
			crossorigin="anonymous"
			defer
		></script>
		<script src="https://cdn.jsdelivr.net/npm/date-fns@4.1.0/cdn.min.js" defer></script>
		
		<!-- Chart.js for dashboard charts and metrics -->
		<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" defer></script>
		
		<title>Sign In — IT Dashboard</title>
		<script>
			(function() {
			// Get the current host
			var host = window.location.hostname.toLowerCase();

			// Redirect if it's the non-www domain
			if (host === 'rlgblue.com') {
				var newUrl = 'https://www.rlgblue.com' + window.location.pathname + window.location.search;
				window.location.replace(newUrl); // Permanent redirect
			}
			})();
		</script>
	</head>

	<body >
		<div class="container-fluid p-0">
  <div id="bodyWrapper" class="min-vh-100 d-flex align-items-center justify-content-center">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5 col-xl-4">

          <div class="card shadow-lg border-0">
            <div class="card-body p-5">

              <div class="text-center mb-4">
                <img
                  src="https://rlglobalwiki.com/wp-content/uploads/2023/04/RL-Global-Logistics-Logo_CTP.png"
                  alt="RL Global Logistics"
                  height="60"
                  width="180"
                  class="mb-3"
                />
                <h2 class="h4 text-dark mb-1">Welcome Back</h2>
                <p class="text-muted small">Sign in to your dashboard</p>
              </div>

              <div id="step-email">
                <p class="text-muted small text-center mb-3">
                  Enter your work email to receive a sign-in code.
                </p>
                <div class="mb-3">
                  <label for="email-input" class="form-label small fw-semibold">Work Email</label>
                  <input
                    type="email"
                    class="form-control"
                    id="email-input"
                    placeholder="you@rlglobal.com"
                    autocomplete="email"
                    autofocus
                  />
                </div>
                <div class="form-check mb-3">
                  <input class="form-check-input" type="checkbox" id="remember-me" />
                  <label class="form-check-label small text-muted" for="remember-me">
                    Keep me signed in for 30 days
                  </label>
                </div>
                <div class="d-grid">
                  <button type="button" class="btn btn-primary" id="send-code-btn">
                    <span id="send-code-text">Send Sign-In Code</span>
                    <span class="spinner-border spinner-border-sm ms-2 d-none" id="send-code-spinner"></span>
                  </button>
                </div>
              </div>

              <div id="step-code" class="d-none">
                <p class="text-muted small text-center mb-1">
                  A 6-digit code was sent to
                </p>
                <p class="text-center fw-semibold mb-3" id="code-sent-to"></p>
                <div class="mb-3">
                  <label for="code-input" class="form-label small fw-semibold">Sign-In Code</label>
                  <input
                    type="text"
                    class="form-control form-control-lg text-center"
                    id="code-input"
                    placeholder="000000"
                    maxlength="6"
                    inputmode="numeric"
                    autocomplete="one-time-code"
                  />
                </div>
                <div class="d-grid mb-2">
                  <button type="button" class="btn btn-primary" id="verify-code-btn">
                    <span id="verify-code-text">Sign In</span>
                    <span class="spinner-border spinner-border-sm ms-2 d-none" id="verify-code-spinner"></span>
                  </button>
                </div>
                <div class="text-center d-flex justify-content-between align-items-center">
                  <button type="button" class="btn btn-link btn-sm text-muted p-0" id="back-to-email-btn">
                    &larr; Use a different email
                  </button>
                  <button type="button" class="btn btn-link btn-sm p-0" id="resend-code-btn">
                    Resend code
                  </button>
                </div>
                <div class="text-center mt-1">
                  <span class="text-muted small d-none" id="resend-countdown"></span>
                </div>
              </div>

              <div class="alert d-none mt-3 py-2 px-3 small" id="login-alert" role="alert"></div>

            </div>
          </div>

          <div class="text-center mt-4">
            <p class="text-muted small mb-1">© 2025 RL Global Logistics. All rights reserved.</p>
            <p class="text-muted small">
              <i class="fas fa-lock me-1"></i>Passwordless sign-in
            </p>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Store the post-login redirect target if the server specified one
(function() {
  var redirect = '';
  if (redirect && redirect !== 'undefined' && redirect !== '') {
    sessionStorage.setItem('postLoginRedirect', redirect);
  }
})();
</script>
<script>
(function () {
  'use strict';

  // ── DOM refs ────────────────────────────────────────────────────────────
  const stepEmail  = document.getElementById('step-email');
  const stepCode   = document.getElementById('step-code');
  const emailInput = document.getElementById('email-input');
  const codeInput  = document.getElementById('code-input');
  const rememberMe = document.getElementById('remember-me');
  const alertEl    = document.getElementById('login-alert');
  const codeSentTo = document.getElementById('code-sent-to');

  const sendCodeBtn     = document.getElementById('send-code-btn');
  const sendCodeText    = document.getElementById('send-code-text');
  const sendCodeSpinner = document.getElementById('send-code-spinner');

  const verifyCodeBtn     = document.getElementById('verify-code-btn');
  const verifyCodeText    = document.getElementById('verify-code-text');
  const verifyCodeSpinner = document.getElementById('verify-code-spinner');

  const backBtn         = document.getElementById('back-to-email-btn');
  const resendBtn       = document.getElementById('resend-code-btn');
  const resendCountdown = document.getElementById('resend-countdown');

  // ── resend cooldown ──────────────────────────────────────────────────────
  var _resendTimer = null;

  function startResendCooldown(seconds) {
    resendBtn.disabled = true;
    resendCountdown.classList.remove('d-none');
    var remaining = seconds;
    resendCountdown.textContent = 'Resend available in ' + remaining + 's';
    _resendTimer = setInterval(function () {
      remaining--;
      if (remaining <= 0) {
        clearInterval(_resendTimer);
        resendBtn.disabled = false;
        resendCountdown.classList.add('d-none');
      } else {
        resendCountdown.textContent = 'Resend available in ' + remaining + 's';
      }
    }, 1000);
  }

  // ── helpers ─────────────────────────────────────────────────────────────
  function showAlert(msg, type) {
    alertEl.className = 'alert alert-' + (type || 'danger') + ' mt-3 py-2 px-3 small';
    alertEl.textContent = msg;
  }

  function hideAlert() {
    alertEl.className = 'alert d-none mt-3 py-2 px-3 small';
  }

  function setLoading(isSendStep, loading) {
    var btn     = isSendStep ? sendCodeBtn     : verifyCodeBtn;
    var textEl  = isSendStep ? sendCodeText    : verifyCodeText;
    var spinner = isSendStep ? sendCodeSpinner : verifyCodeSpinner;
    btn.disabled = loading;
    textEl.textContent = loading
      ? (isSendStep ? 'Sending\u2026' : 'Signing in\u2026')
      : (isSendStep ? 'Send Sign-In Code' : 'Sign In');
    spinner.classList.toggle('d-none', !loading);
  }

  function showStep(step) {
    stepEmail.classList.toggle('d-none', step !== 'email');
    stepCode.classList.toggle('d-none',  step !== 'code');
    hideAlert();
  }

  // ── Step 1: request code ────────────────────────────────────────────────
  async function requestCode() {
    var email = emailInput.value.trim().toLowerCase();
    if (!email || !email.includes('@')) {
      showAlert('Please enter a valid email address.');
      return;
    }

    hideAlert();
    setLoading(true, true);

    try {
      var res = await fetch('/auth/request-code', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ email: email }),
      });

      if (res.status === 429) {
        showAlert('Too many requests. Please wait a moment and try again.', 'warning');
        return;
      }

      // Always advance — avoids user enumeration
      codeSentTo.textContent = email;
      showStep('code');
      codeInput.focus();
      startResendCooldown(60);
    } catch (_) {
      showAlert('Network error. Please check your connection and try again.');
    } finally {
      setLoading(true, false);
    }
  }

  // ── Step 2: verify code ─────────────────────────────────────────────────
  async function verifyCode() {
    var email = emailInput.value.trim().toLowerCase();
    var code  = codeInput.value.trim();

    if (!code || code.length !== 6) {
      showAlert('Please enter the 6-digit code from your email.');
      return;
    }

    hideAlert();
    setLoading(false, true);

    try {
      var res = await fetch('/auth/verify-code', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ email: email, code: code, rememberMe: rememberMe.checked }),
      });

      if (res.ok) {
        var redirectUrl = sessionStorage.getItem('postLoginRedirect') || '/it-dashboard';
        sessionStorage.removeItem('postLoginRedirect');
        window.location.href = redirectUrl;
        return;
      }

      var data = {};
      try { data = await res.json(); } catch (_) {}
      var msg = (data && data.error && data.error.message) || 'Invalid or expired code.';

      if (res.status === 401) {
        showAlert('Incorrect code. Please check your email and try again.');
      } else if (res.status === 403) {
        showAlert('Your account is not active. Contact your administrator.');
      } else {
        showAlert(msg);
      }
    } catch (_) {
      showAlert('Network error. Please check your connection and try again.');
    } finally {
      setLoading(false, false);
    }
  }

  // ── events ───────────────────────────────────────────────────────────────
  sendCodeBtn.addEventListener('click', requestCode);
  emailInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') requestCode(); });

  verifyCodeBtn.addEventListener('click', verifyCode);
  codeInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') verifyCode(); });

  // Digits only + paste cleanup + auto-submit on 6 digits
  codeInput.addEventListener('input', function () {
    var cleaned = codeInput.value.replace(/\D/g, '').slice(0, 6);
    codeInput.value = cleaned;
    if (cleaned.length === 6) {
      verifyCode();
    }
  });

  codeInput.addEventListener('paste', function (e) {
    e.preventDefault();
    var pasted = (e.clipboardData || window.clipboardData).getData('text');
    var digits = pasted.replace(/\D/g, '').slice(0, 6);
    codeInput.value = digits;
    if (digits.length === 6) {
      verifyCode();
    }
  });

  resendBtn.addEventListener('click', async function () {
    codeInput.value = '';
    hideAlert();
    resendBtn.disabled = true;
    resendBtn.textContent = 'Sending\u2026';
    try {
      var email = emailInput.value.trim().toLowerCase();
      await fetch('/auth/request-code', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ email: email }),
      });
      showAlert('A new code has been sent.', 'info');
      startResendCooldown(60);
    } catch (_) {
      showAlert('Failed to resend. Please try again.');
      resendBtn.disabled = false;
    } finally {
      resendBtn.textContent = 'Resend code';
    }
  });

  backBtn.addEventListener('click', function () {
    codeInput.value = '';
    if (_resendTimer) clearInterval(_resendTimer);
    resendBtn.disabled = false;
    resendCountdown.classList.add('d-none');
    showStep('email');
    emailInput.focus();
  });

})();
</script>

<style>
  .min-vh-100 { min-height: 100vh; }
  .card { border-radius: 1rem; }
  .shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; }
  #code-input { font-size: 1.5rem; font-weight: 600; letter-spacing: .3em; }
  .alert { border-radius: .5rem; border: none; }
  @media (max-width: 576px) { .card-body { padding: 2rem !important; } }
</style>
	</body>
</html>