RSA-JavaScript/index.html at main · AmoxcalliDev/RSA-JavaScript · 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
158
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="RSA Encryption and Decryption Tool using JavaScript and JSEncrypt. Generate RSA keys of various sizes, and encrypt and decrypt text with a responsive interface built with Tailwind CSS.">
    <meta name="keywords" content="RSA, Encryption, Decryption, JavaScript, JSEncrypt, Cryptography, Tailwind CSS">
    <title>Encryption and Decryption with JSEncrypt</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.3.2/jsencrypt.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 flex items-center justify-center min-h-screen p-4">

    <div class="bg-white p-6 rounded-lg shadow-lg max-w-full sm:max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-6 gap-4">
        <!-- Key Size Selector and Title -->
        <div class="col-span-1 md:col-span-6 mb-4">
            <h2 class="text-2xl font-bold mb-4 text-center">Encryption and Decryption</h2>
            <label for="key-size" class="block text-gray-700 font-medium mb-2 text-center">Key Size (bits):</label>
            <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
                <button class="key-size-button bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600" data-value="512">512 bits</button>
                <button class="key-size-button bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600" data-value="1024">1024 bits</button>
                <button class="key-size-button bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600" data-value="2048">2048 bits</button>
                <button class="key-size-button bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600" data-value="4096">4096 bits</button>
            </div>
        </div>

        <!-- Keys -->
        <div class="col-span-1 md:col-span-3 mb-4">
            <label for="privkey" class="block text-gray-700 font-medium mb-2">Private Key:</label>
            <textarea id="privkey" rows="5" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"></textarea>
        </div>

        <div class="col-span-1 md:col-span-3 mb-4">
            <label for="pubkey" class="block text-gray-700 font-medium mb-2">Public Key:</label>
            <textarea id="pubkey" rows="5" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"></textarea>
        </div>

        <!-- Text to Encrypt and Encrypted Text -->
        <div class="col-span-1 md:col-span-3 mb-4">
            <label for="input" class="block text-gray-700 font-medium mb-2">Text to Encrypt:</label>
            <textarea id="input" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"></textarea>
        </div>

        <div class="col-span-1 md:col-span-3 mb-4">
            <label for="crypted" class="block text-gray-700 font-medium mb-2">Encrypted Text:</label>
            <textarea id="crypted" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"></textarea>
        </div>

        <!-- Button to Generate Keys -->
        <div class="col-span-1 md:col-span-6 mb-4">
            <div class="relative">
                <button id="generate" class="relative w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600 focus:outline-none" disabled>
                    Generate Keys
                    <div id="loader" class="absolute inset-0 flex items-center justify-center hidden">
                        <svg class="animate-ping h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0z"></path>
                        </svg>
                    </div>
                </button>
            </div>
            <p id="time-report" class="text-sm text-gray-600 mt-2 text-center"></p>
        </div>

        <!-- Button to Execute Encryption/Decryption -->
        <div class="col-span-1 md:col-span-6 mb-4">
            <button id="execute" class="w-full bg-indigo-500 text-white py-2 px-4 rounded hover:bg-indigo-600">Encrypt/Decrypt</button>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let selectedKeySize = 512; // Default key size

            // Preselect key size and set value
            document.querySelector(`.key-size-button[data-value="${selectedKeySize}"]`).classList.add('bg-blue-600');

            // Change key size
            const keySizeButtons = document.querySelectorAll(".key-size-button");
            keySizeButtons.forEach(button => {
                button.addEventListener('click', function () {
                    selectedKeySize = parseInt(button.getAttribute('data-value'));
                    keySizeButtons.forEach(btn => btn.classList.remove('bg-blue-600'));
                    button.classList.add('bg-blue-600');
                });
            });

            // Show loader and disable content
            function showLoader() {
                document.getElementById('loader').classList.remove('hidden');
                document.querySelectorAll('button, textarea').forEach(element => {
                    element.classList.add('opacity-50', 'pointer-events-none');
                });
                document.getElementById('generate').disabled = true;
            }

            // Hide loader and enable content
            function hideLoader() {
                document.getElementById('loader').classList.add('hidden');
                document.querySelectorAll('button, textarea').forEach(element => {
                    element.classList.remove('opacity-50', 'pointer-events-none');
                });
                document.getElementById('generate').disabled = false;
            }

            // Execute encryption/decryption
            document.getElementById('execute').addEventListener('click', function () {
                const crypt = new JSEncrypt();
                crypt.setPrivateKey(document.getElementById('privkey').value);

                const pubkey = document.getElementById('pubkey').value;
                if (!pubkey) {
                    document.getElementById('pubkey').value = crypt.getPublicKey();
                }

                const input = document.getElementById('input').value;
                const crypted = document.getElementById('crypted').value;

                if (input) {
                    document.getElementById('crypted').value = crypt.encrypt(input);
                    document.getElementById('input').value = '';
                } else if (crypted) {
                    const decrypted = crypt.decrypt(crypted);
                    document.getElementById('input').value = decrypted || 'Error decrypting. Check keys.';
                    document.getElementById('crypted').value = '';
                }
            });

            // Generate keys
            function generateKeys() {
                showLoader();
                const crypt = new JSEncrypt({ default_key_size: selectedKeySize });
                const startTime = performance.now();

                crypt.getKey(() => {
                    const endTime = performance.now();
                    const time = Math.round(endTime - startTime);
                    document.getElementById('time-report').textContent = `Generated in ${time} ms`;
                    document.getElementById('privkey').value = crypt.getPrivateKey();
                    document.getElementById('pubkey').value = crypt.getPublicKey();
                    hideLoader();
                });
            }

            // Generate new keys on click
            document.getElementById('generate').addEventListener('click', function() {
                generateKeys();
                // Disable button while generating keys
                document.getElementById('generate').disabled = true;
            });

            // Generate keys on page load
            generateKeys();
        });
    </script>

</body>
</html>