File size: 3,966 Bytes
45e997f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PotholeIQ — Supervisor Login</title>
<style>
  :root{ --blue:#0061d5; --blue-deep:#003a85; --ink:#0b2545; --muted:#5b6b85; --line:#dbe6f5; --bg:#f4f8fd; }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Segoe UI',Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
  .card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 24px rgba(11,37,69,.08);padding:30px 28px;width:100%;max-width:380px}
  .logo{width:46px;height:46px;border-radius:12px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;margin:0 auto 14px}
  h1{font-size:19px;font-weight:800;color:var(--blue-deep);text-align:center}
  .sub{font-size:12.5px;color:var(--muted);text-align:center;margin-top:4px;margin-bottom:20px}
  label{font-size:12px;color:var(--muted);display:block;margin:12px 0 5px;font-weight:600}
  input{width:100%;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
  input:focus{outline:none;border-color:var(--blue)}
  button{width:100%;margin-top:18px;font:inherit;font-weight:700;cursor:pointer;border:none;background:var(--blue);color:#fff;padding:11px;border-radius:9px;font-size:14px}
  button:hover{background:var(--blue-deep)}
  button:disabled{opacity:.6;cursor:default}
  .msg{margin-top:14px;font-size:12.5px;text-align:center;min-height:16px}
  .msg.err{color:#c0341d}
  .msg.ok{color:#0c6b46}
  .foot{margin-top:16px;font-size:11px;color:var(--muted);text-align:center}
</style>
</head>
<body>
  <form class="card" id="form">
    <div class="logo">🛣️</div>
    <h1>PotholeIQ Command Center</h1>
    <div class="sub">Supervisor access only</div>
    <label for="email">Email</label>
    <input id="email" type="email" autocomplete="username" required />
    <label for="password">Password</label>
    <input id="password" type="password" autocomplete="current-password" required />
    <button id="btn" type="submit">Sign in</button>
    <div class="msg" id="msg"></div>
  </form>

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
  const SUPABASE_URL = 'https://knvoctdesiwogofcyced.supabase.co';
  const SUPABASE_PUBLISHABLE = 'sb_publishable_pCMhOVA6YYg2948wi6ValQ_hhhC-xfK';
  const sb = supabase.createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE);
  const msg = document.getElementById('msg');
  const btn = document.getElementById('btn');

  // already signed in as supervisor? skip the form
  (async () => {
    const { data } = await sb.auth.getSession();
    if (data.session && data.session.user?.app_metadata?.role === 'supervisor') {
      location.href = 'command-center.html';
    }
  })();

  document.getElementById('form').addEventListener('submit', async (e) => {
    e.preventDefault();
    msg.className = 'msg'; msg.textContent = '';
    btn.disabled = true; btn.textContent = 'Signing in…';
    const email = document.getElementById('email').value.trim();
    const password = document.getElementById('password').value;
    const { data, error } = await sb.auth.signInWithPassword({ email, password });
    if (error) {
      msg.className = 'msg err'; msg.textContent = error.message;
      btn.disabled = false; btn.textContent = 'Sign in';
      return;
    }
    if (data.user?.app_metadata?.role !== 'supervisor') {
      await sb.auth.signOut();
      msg.className = 'msg err'; msg.textContent = 'This account is not a supervisor.';
      btn.disabled = false; btn.textContent = 'Sign in';
      return;
    }
    msg.className = 'msg ok'; msg.textContent = 'Welcome — loading dashboard…';
    location.href = 'command-center.html';
  });
</script>
</body>
</html>