Hugging Face's logo

Spaces:
PTRNL
/
oraclepasswizard
Running

App Files Community
oraclepasswizard
File size: 5,599 Bytes
2053963
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oracle Password Changer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
    <style>
        .oracle-card {
            backdrop-filter: blur(16px);
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .input-field {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .input-field:focus {
            background: rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-900 to-indigo-900 text-white" id="vanta-bg">
    <div class="container mx-auto px-4 py-12">
        <div class="max-w-md mx-auto oracle-card p-8">
            <div class="text-center mb-8">
                <div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i data-feather="key" class="w-10 h-10"></i>
                </div>
                <h1 class="text-2xl font-bold">Oracle Password Wizard</h1>
                <p class="text-blue-200">Cambio seguro de contraseñas</p>
            </div>
            <form class="space-y-6" onsubmit="changePassword(event)">
<div>
                    <label for="username" class="block text-sm font-medium mb-1">Usuario Oracle</label>
                    <input type="text" id="username" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div>
                    <label for="current-password" class="block text-sm font-medium mb-1">Contraseña Actual</label>
                    <div class="relative">
                        <input type="password" id="current-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<button type="button" class="absolute right-3 top-3 text-blue-300 hover:text-white" onclick="togglePassword('current-password')">
                            <i data-feather="eye" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
                <div>
                    <label for="new-password" class="block text-sm font-medium mb-1">Nueva Contraseña</label>
                    <div class="relative">
                        <input type="password" id="new-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none focus:ring-2 focus:ring-blue-500" required minlength="8">
                        <button type="button" class="absolute right-3 top-3 text-blue-300 hover:text-white" onclick="togglePassword('new-password')">
                            <i data-feather="eye" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>

                <div>
                    <label for="confirm-password" class="block text-sm font-medium mb-1">Confirmar Nueva Contraseña</label>
                    <div class="relative">
                        <input type="password" id="confirm-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none focus:ring-2 focus:ring-blue-500" required minlength="8">
                        <button type="button" class="absolute right-3 top-3 text-blue-300 hover:text-white" onclick="togglePassword('confirm-password')">
                            <i data-feather="eye" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center gap-2">
                    <i data-feather="refresh-cw" class="w-5 h-5"></i>
                    Cambiar Contraseña
                </button>
<script>
        function changePassword(e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const currentPass = document.getElementById('current-password').value;
            const newPass = document.getElementById('new-password').value;
            
            // Simulando conexión a Oracle
            try {
                // Código real para cambiar contraseña en Oracle
                // ALTER USER username IDENTIFIED BY new_password REPLACE old_password;
                
                alert(`Contraseña cambiada exitosamente para el usuario: ${username}`);
                
                // Limpiar formulario
                e.target.reset();
            } catch (error) {
                alert('Error al cambiar la contraseña: ' + error.message);
            }
        }

        function togglePassword(id) {
            const input = document.getElementById(id);
            input.type = input.type === 'password' ? 'text' : 'password';
            feather.replace();
        }

        // Inicializar efectos de fondo
        VANTA.NET({
            el: "#vanta-bg",
            color: 0x3a86ff,
            backgroundColor: 0x0,
            points: 12,
            maxDistance: 20,
            spacing: 15
        });

        feather.replace();
    </script>
</body>
</html>