ReTexture/backend-test.html at main · ImAshishChoudhary/ReTexture · 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
134
<!DOCTYPE html>
<html>
<head>
    <title>Backend Connection Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
        }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .loading { background: #fff3cd; color: #856404; }
    </style>
</head>
<body>
    <h1>ReTexture Backend Connection Test</h1>

    <div class="test-section">
        <h2>Backend URL</h2>
        <input type="text" id="backendUrl" style="width: 100%; padding: 8px;"
               value="https://retexture.onrender.com" />
    </div>

    <div class="test-section">
        <h2>Test 1: Health Check</h2>
        <button onclick="testHealth()">Test Health Endpoint</button>
        <div id="healthResult" class="result"></div>
    </div>

    <div class="test-section">
        <h2>Test 2: Root Endpoint</h2>
        <button onclick="testRoot()">Test Root Endpoint</button>
        <div id="rootResult" class="result"></div>
    </div>

    <div class="test-section">
        <h2>Test 3: CORS Check</h2>
        <button onclick="testCORS()">Test CORS</button>
        <div id="corsResult" class="result"></div>
    </div>

    <script>
        function getBackendUrl() {
            return document.getElementById('backendUrl').value;
        }

        async function testHealth() {
            const resultDiv = document.getElementById('healthResult');
            resultDiv.className = 'result loading';
            resultDiv.textContent = 'Testing... (May take 30-60 seconds if service is sleeping)';

            try {
                const response = await fetch(`${getBackendUrl()}/health`, {
                    method: 'GET',
                });

                const data = await response.json();
                resultDiv.className = 'result success';
                resultDiv.textContent = `✓ Success: ${JSON.stringify(data)}`;
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `✗ Error: ${error.message}`;
            }
        }

        async function testRoot() {
            const resultDiv = document.getElementById('rootResult');
            resultDiv.className = 'result loading';
            resultDiv.textContent = 'Testing...';

            try {
                const response = await fetch(`${getBackendUrl()}/`, {
                    method: 'GET',
                });

                const data = await response.json();
                resultDiv.className = 'result success';
                resultDiv.textContent = `✓ Success: ${JSON.stringify(data)}`;
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `✗ Error: ${error.message}`;
            }
        }

        async function testCORS() {
            const resultDiv = document.getElementById('corsResult');
            resultDiv.className = 'result loading';
            resultDiv.textContent = 'Testing CORS...';

            try {
                const response = await fetch(`${getBackendUrl()}/health`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                });

                if (response.ok) {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = '✓ CORS is configured correctly';
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `✗ Response status: ${response.status}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                if (error.message.includes('CORS')) {
                    resultDiv.textContent = '✗ CORS Error: Backend needs to allow your domain';
                } else {
                    resultDiv.textContent = `✗ Error: ${error.message}`;
                }
            }
        }
    </script>
</body>
</html>