api-Django/teste.html at main · elaccel/api-Django · 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teste de Conexão API</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 {
            background-color: #febd69;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #f3a847;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .success { background-color: #d4edda; }
        .error { background-color: #f8d7da; }
    </style>
</head>
<body>
    <h1>🔍 Teste de Conexão com API</h1>

    <div class="test-section">
        <h2>1. Teste de Produtos (GET)</h2>
        <button onclick="testarProdutos()">Buscar Produtos</button>
        <div id="result-produtos" class="result"></div>
    </div>

    <div class="test-section">
        <h2>2. Teste de Login</h2>
        <input type="email" id="email-login" placeholder="Email" value="maria@example.com">
        <input type="password" id="senha-login" placeholder="Senha" value="Pass1234">
        <button onclick="testarLogin()">Fazer Login</button>
        <div id="result-login" class="result"></div>
    </div>

    <div class="test-section">
        <h2>3. Teste de Cadastro</h2>
        <button onclick="testarCadastro()">Cadastrar Novo Usuário</button>
        <div id="result-cadastro" class="result"></div>
    </div>

    <div class="test-section">
        <h2>4. Status da API</h2>
        <p><strong>URL da API:</strong> http://localhost:8000</p>
        <p><strong>Token salvo:</strong> <span id="token-status">Verificando...</span></p>
        <button onclick="verificarToken()">Verificar Token</button>
    </div>

    <script src="js/api.js"></script>
    <script>
        async function testarProdutos() {
            const result = document.getElementById('result-produtos');
            result.textContent = 'Buscando produtos...';
            result.className = 'result';

            try {
                const produtos = await api.getProdutos();
                result.textContent = JSON.stringify(produtos, null, 2);
                result.className = 'result success';
            } catch (error) {
                result.textContent = 'ERRO:\n' + JSON.stringify(error, null, 2);
                result.className = 'result error';
            }
        }

        async function testarLogin() {
            const result = document.getElementById('result-login');
            const email = document.getElementById('email-login').value;
            const senha = document.getElementById('senha-login').value;

            result.textContent = 'Fazendo login...';
            result.className = 'result';

            try {
                const response = await api.login(email, senha);
                result.textContent = 'LOGIN REALIZADO!\n\n' + JSON.stringify(response, null, 2);
                result.className = 'result success';
                verificarToken();
            } catch (error) {
                result.textContent = 'ERRO NO LOGIN:\n' + JSON.stringify(error, null, 2);
                result.className = 'result error';
            }
        }

        async function testarCadastro() {
            const result = document.getElementById('result-cadastro');
            result.textContent = 'Cadastrando usuário...';
            result.className = 'result';

            const randomNum = Math.floor(Math.random() * 10000);
            const dadosCadastro = {
                nome: `Teste Usuario ${randomNum}`,
                email: `teste${randomNum}@example.com`,
                cpf: `111222333${randomNum.toString().padStart(2, '0')}`,
                senha: 'Teste123',
                senha_confirmacao: 'Teste123',
                cep: '01310100',
                logradouro: 'Av Paulista',
                numero: `${randomNum}`,
                complemento: '',
                bairro: 'Bela Vista',
                cidade: 'Sao Paulo',
                estado: 'SP'
            };

            try {
                const response = await api.cadastro(dadosCadastro);
                result.textContent = 'CADASTRO REALIZADO!\n\n' + JSON.stringify(response, null, 2);
                result.className = 'result success';
            } catch (error) {
                result.textContent = 'ERRO NO CADASTRO:\n' + JSON.stringify(error, null, 2);
                result.className = 'result error';
            }
        }

        function verificarToken() {
            const token = TokenManager.getAccessToken();
            const tokenStatus = document.getElementById('token-status');

            if (token) {
                tokenStatus.textContent = 'SIM - Token presente';
                tokenStatus.style.color = 'green';
            } else {
                tokenStatus.textContent = 'NÃO - Nenhum token salvo';
                tokenStatus.style.color = 'red';
            }
        }

        // Verificar token ao carregar
        verificarToken();
    </script>
</body>
</html>