ignitepartshare/test-firebase.html at main · IGNITE-Pathways/ignitepartshare · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        .info { background-color: #d1ecf1; color: #0c5460; }
        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn-primary { background-color: #007bff; color: white; }
        .btn-success { background-color: #28a745; color: white; }
    </style>
</head>
<body>
    <h1>Firebase Connection Test</h1>

    <div id="status"></div>

    <div>
        <h3>Authentication Test</h3>
        <button class="btn-primary" onclick="testAuth()">Test Auth Connection</button>
        <button class="btn-success" onclick="testFirestore()">Test Firestore Connection</button>
    </div>

    <div id="results"></div>

    <!-- Firebase SDK -->
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore-compat.js"></script>

    <!-- Firebase Config -->
    <script src="firebase-config.js"></script>

    <script>
        function showStatus(message, type = 'info') {
            const statusDiv = document.getElementById('status');
            statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
        }

        function addResult(message, type = 'info') {
            const resultsDiv = document.getElementById('results');
            const div = document.createElement('div');
            div.className = `status ${type}`;
            div.textContent = message;
            resultsDiv.appendChild(div);
        }

        // Test Firebase initialization
        window.addEventListener('load', function() {
            try {
                if (typeof firebase !== 'undefined') {
                    showStatus('✅ Firebase SDK loaded successfully', 'success');
                } else {
                    showStatus('❌ Firebase SDK not loaded', 'error');
                }
            } catch (error) {
                showStatus('❌ Error loading Firebase: ' + error.message, 'error');
            }
        });

        function testAuth() {
            try {
                if (auth) {
                    addResult('✅ Authentication service initialized', 'success');

                    // Test auth state listener
                    auth.onAuthStateChanged(function(user) {
                        if (user) {
                            addResult('✅ User is signed in: ' + user.email, 'success');
                        } else {
                            addResult('ℹ️ No user signed in', 'info');
                        }
                    });
                } else {
                    addResult('❌ Authentication service not available', 'error');
                }
            } catch (error) {
                addResult('❌ Auth test failed: ' + error.message, 'error');
            }
        }

        function testFirestore() {
            try {
                if (db) {
                    addResult('✅ Firestore service initialized', 'success');

                    // Test a simple write operation
                    db.collection('test').add({
                        timestamp: new Date(),
                        message: 'Firebase connection test'
                    })
                    .then(function(docRef) {
                        addResult('✅ Test document written with ID: ' + docRef.id, 'success');

                        // Clean up - delete the test document
                        return docRef.delete();
                    })
                    .then(function() {
                        addResult('✅ Test document cleaned up', 'success');
                    })
                    .catch(function(error) {
                        addResult('❌ Firestore test failed: ' + error.message, 'error');
                    });
                } else {
                    addResult('❌ Firestore service not available', 'error');
                }
            } catch (error) {
                addResult('❌ Firestore test failed: ' + error.message, 'error');
            }
        }
    </script>
</body>
</html>