PIKDProgressTracker/index.html at main · 35socks/PIKDProgressTracker · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login - PIKD Progress Tracker</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      background: radial-gradient(circle, rgba(17,24,39,1) 0%, rgba(2,0,36,1) 100%);
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
<body class="min-h-screen flex items-center justify-center bg-gray-900">
  <div class="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
    <div class="text-center">
          <h2 class="text-2xl font-bold text-black mb-6">PIKD Progress Tracker <br> Login</h2>
    </div>
    <form id="loginForm">
      <div class="mb-4">
        <label for="email" class="block text-gray-700">Email</label>
        <input type="email" id="email" class="w-full p-2 mt-2 border border-gray-300 rounded" required>
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700">Password</label>
        <input type="password" id="password" class="w-full p-2 mt-2 border border-gray-300 rounded" required>
      </div>
      <button type="submit" class="w-full bg-black text-white p-2 rounded hover:bg-gray-800">Login</button>
    </form>
    <div class="mt-4 text-center">
      <a href="#" class="text-sm text-gray-600 hover:text-gray-900">Forgot your password?</a>
    </div>
  </div>

  <script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.0/firebase-app.js";
    import { getAuth, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.14.0/firebase-auth.js";

    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "AUTH_DOMAIN.firebaseapp.com",
      projectId: "PROJECT_ID",
      storageBucket: "STORAGE_BUCKET.appspot.com",
      messagingSenderId: "MESSAGING_SENDER_ID",
      appId: "APP_ID"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);

    document.getElementById('loginForm').addEventListener('submit', async function(event) {
      event.preventDefault();

      const email = document.getElementById("email").value;
      const password = document.getElementById("password").value;

      try {
        const userCredential = await signInWithEmailAndPassword(auth, email, password);
        console.log("Login successful:", userCredential.user);

        // Redirect to dashboard
        window.location.href = "/app";
      } catch (error) {
        console.error("Error during login:", error);
        alert("Login failed: " + error.message);
      }
    });
  </script>
</body>
</html>