forked from ken3stokes/theprivacyst
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathssh_key_generator.html
122 lines (112 loc) · 4.85 KB
/
ssh_key_generator.html
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
<!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="A simple tool to generate secure passwords">
<meta name="keywords" content="Key Generator, Security">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style type="text/css">
:root {
--background-color-light: #ffffff;
--background-color-dark: #121212;
--text-color-light: #000000;
--text-color-dark: #e0e0e0;
--generated-data-color-light: #000000; /* Black color for light mode */
--generated-data-color-dark: #000000; /* Black color for dark mode */
}
[data-theme='light'] {
--background-color: var(--background-color-light);
--text-color: var(--text-color-light);
--generated-data-color: var(--generated-data-color-light);
}
[data-theme='dark'] {
--background-color: var(--background-color-dark);
--text-color: var(--text-color-dark);
--generated-data-color: var(--generated-data-color-dark);
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
.generated-data {
color: var(--generated-data-color);
}
</style>
<title>SSH Key Generator</title>
</head>
<body data-theme="light">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h1 class="my-4">SSH Key Generator</h1>
<button onclick="toggleTheme()" class="btn btn-outline-secondary btn-sm">Toggle Dark Mode</button>
</div>
{% if error_message %}
<div class="alert alert-danger">
{{ error_message }}
</div>
{% endif %}
<form method="POST" class="mb-3">
<div class="mb-3">
<label for="key_length" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Select the length for your RSA key. A longer key provides more security.">Select RSA Key Length:</label>
<select name="key_length" id="key_length" class="form-select">
<option value="2048">2048</option>
<option value="4096">4096</option>
</select>
</div>
<div class="mb-3">
<label for="key_type" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Select the type of key to generate. Different key types have different security properties.">Select Key Type:</label>
<select name="key_type" id="key_type" class="form-select">
<option value="RSA">RSA</option>
<option value="DSA">DSA</option>
<option value="ECDSA">ECDSA</option>
<option value="Ed25519">Ed25519</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Generate</button>
</form>
{% if private_key %}
<div>
<h2>Generated SSH Keys</h2>
<h3>Private Key</h3>
<pre id="private_key" class="bg-light p-2 rounded generated-data">{{ private_key }}</pre>
<button onclick="copyToClipboard('#private_key')" class="btn btn-secondary">Copy Private Key</button>
<h3>Public Key</h3>
<pre id="public_key" class="bg-light p-2 rounded generated-data">{{ public_key }}</pre>
<button onclick="copyToClipboard('#public_key')" class="btn btn-secondary">Copy Public Key</button>
</div>
{% endif %}
<a href="/" class="btn btn-link">Home</a>
</div>
<script>
function copyToClipboard(element) {
var text = document.querySelector(element).innerText;
var inputElement = document.createElement('input');
inputElement.type = 'text';
inputElement.value = text;
document.body.appendChild(inputElement);
inputElement.select();
document.execCommand('copy');
document.body.removeChild(inputElement);
}
function toggleTheme() {
const currentTheme = document.body.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
document.body.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
}
// On page load, apply the user's preferred theme
document.addEventListener('DOMContentLoaded', (event) => {
const savedTheme = localStorage.getItem('theme') || 'light';
document.body.setAttribute('data-theme', savedTheme);
});
</script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>