OasisFlow Login

<style>
  :root {
    --ofw-bg: #f0f4f8;
    --ofw-card: #ffffff;
    --ofw-primary: #0e7c47;
    --ofw-primary-hover: #0a5e36;
    --ofw-text: #1a2332;
    --ofw-text-2: #5a6577;
    --ofw-border: #dde3eb;
    --ofw-error: #dc2626;
    --ofw-error-bg: #fef2f2;
    --ofw-input-bg: #f8fafc;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ofw-bg: #0f1419;
      --ofw-card: #1a2028;
      --ofw-primary: #22c55e;
      --ofw-primary-hover: #16a34a;
      --ofw-text: #e2e8f0;
      --ofw-text-2: #94a3b8;
      --ofw-border: #2d3748;
      --ofw-error: #f87171;
      --ofw-error-bg: #1f1215;
      --ofw-input-bg: #1e2530;
    }
  }
  body { background: var(--ofw-bg) !important; }
  .navbar, .web-footer, footer, .page-header { display: none !important; }
  .main-section { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
  .container { max-width: 100% !important; padding: 0 !important; }
  .ofw-login-wrap {
    min-height: 100vh; display: flex; align-items: center;
    justify-content: center; padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  }
  .ofw-login-card {
    background: var(--ofw-card); border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px 36px 36px; width: 100%; max-width: 400px;
  }
  .ofw-logo { display: block; margin: 0 auto 8px; height: 56px; width: auto; }
  .ofw-title {
    text-align: center; font-size: 1.35rem; font-weight: 700;
    color: var(--ofw-text); margin: 0 0 4px;
  }
  .ofw-subtitle {
    text-align: center; font-size: 0.85rem; color: var(--ofw-text-2); margin: 0 0 28px;
  }
  .ofw-field { margin-bottom: 16px; }
  .ofw-label {
    display: block; font-size: 0.8rem; font-weight: 600;
    color: var(--ofw-text); margin-bottom: 5px; letter-spacing: 0.02em;
  }
  .ofw-input-wrap { position: relative; }
  .ofw-input {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--ofw-border); border-radius: 8px;
    font-size: 0.92rem; background: var(--ofw-input-bg);
    color: var(--ofw-text); outline: none;
    transition: border-color 0.15s; box-sizing: border-box;
  }
  .ofw-input:focus { border-color: var(--ofw-primary); box-shadow: 0 0 0 3px rgba(14,124,71,0.12); }
  .ofw-toggle-pw {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--ofw-text-2);
    cursor: pointer; font-size: 0.8rem; padding: 4px;
  }
  .ofw-btn {
    width: 100%; padding: 11px; background: var(--ofw-primary);
    color: #fff; border: none; border-radius: 8px;
    font-size: 0.95rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s; margin-top: 4px;
  }
  .ofw-btn:hover { background: var(--ofw-primary-hover); }
  .ofw-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .ofw-error {
    background: var(--ofw-error-bg); color: var(--ofw-error);
    padding: 10px 14px; border-radius: 8px; font-size: 0.84rem;
    margin-bottom: 16px; display: none;
  }
  .ofw-forgot { text-align: center; margin-top: 16px; }
  .ofw-forgot a { color: var(--ofw-text-2); font-size: 0.82rem; text-decoration: none; }
  .ofw-forgot a:hover { color: var(--ofw-primary); }
  .ofw-footer { text-align: center; margin-top: 24px; font-size: 0.75rem; color: var(--ofw-text-2); }
  .ofw-spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
    border-radius: 50%; animation: ofw-spin 0.6s linear infinite;
    vertical-align: middle; margin-right: 6px;
  }
  @keyframes ofw-spin { to { transform: rotate(360deg); } }
</style>

<div class="ofw-login-wrap">
  <div class="ofw-login-card">
    <img class="ofw-logo" src="/files/oasisflow-logo.png" alt="OasisFlow"
         onerror="this.style.display='none'">
    <h1 class="ofw-title">OasisFlow</h1>
    <p class="ofw-subtitle">Water Delivery Management</p>

    <div class="ofw-error" id="login-error"></div>

    <form id="ofw-login-form" onsubmit="return ofwLogin(event)">
      <div class="ofw-field">
        <label class="ofw-label" for="ofw-user">Email or Username</label>
        <input class="ofw-input" type="text" id="ofw-user" name="usr"
               autocomplete="username" required autofocus>
      </div>
      <div class="ofw-field">
        <label class="ofw-label" for="ofw-pass">Password</label>
        <div class="ofw-input-wrap">
          <input class="ofw-input" type="password" id="ofw-pass" name="pwd"
                 autocomplete="current-password" required style="padding-right:60px">
          <button type="button" class="ofw-toggle-pw" onclick="ofwTogglePw()">Show</button>
        </div>
      </div>
      <button class="ofw-btn" type="submit" id="ofw-submit">Sign In</button>
    </form>

    <div class="ofw-forgot">
      <a href="/update-password?forgot=1">Forgot password?</a>
    </div>
    <div class="ofw-footer">&copy; 2026 OasisFlow Water Delivery</div>
  </div>
</div>

<script>
function ofwTogglePw() {
  var inp = document.getElementById('ofw-pass');
  var btn = inp.nextElementSibling;
  if (inp.type === 'password') { inp.type = 'text'; btn.textContent = 'Hide'; }
  else { inp.type = 'password'; btn.textContent = 'Show'; }
}
function ofwLogin(e) {
  e.preventDefault();
  var errEl = document.getElementById('login-error');
  var btn = document.getElementById('ofw-submit');
  var usr = document.getElementById('ofw-user').value.trim();
  var pwd = document.getElementById('ofw-pass').value;
  if (!usr || !pwd) {
    errEl.textContent = 'Please enter your email and password.';
    errEl.style.display = 'block'; return false;
  }
  errEl.style.display = 'none';
  btn.disabled = true;
  btn.innerHTML = '<span class="ofw-spinner"></span>Signing in…';

  var csrfMeta = document.querySelector('meta[name="csrf_token"]');
  var csrf = csrfMeta ? csrfMeta.content : 'None';

  fetch('/api/method/login', {
    method: 'POST',
    headers: {'Content-Type': 'application/json', 'X-Frappe-CSRF-Token': csrf},
    body: JSON.stringify({usr: usr, pwd: pwd})
  })
  .then(function(r) { return r.json(); })
  .then(function(data) {
    if (data.message === 'Logged In' || data.home_page) {
      fetch('/api/method/oasisflow.oasisflow.api.auth.get_my_portal', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-Frappe-CSRF-Token': 'fetch'},
        body: '{}'
      })
      .then(function(r2) { return r2.json(); })
      .then(function(d2) {
        var p = d2.message && d2.message.portal;
        if (p === 'desk') window.location.href = '/app';
        else if (p === 'salesman') window.location.href = '/salesman';
        else if (p === 'driver') window.location.href = '/driverpanel';
        else window.location.href = '/portal';
      })
      .catch(function() { window.location.href = '/app'; });
    } else {
      btn.disabled = false; btn.textContent = 'Sign In';
      errEl.textContent = data._server_messages
        ? JSON.parse(JSON.parse(data._server_messages)[0]).message
        : (data.message || 'Invalid credentials.');
      errEl.style.display = 'block';
    }
  })
  .catch(function() {
    btn.disabled = false; btn.textContent = 'Sign In';
    errEl.textContent = 'Connection error. Please try again.';
    errEl.style.display = 'block';
  });
  return false;
}
</script>