-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (106 loc) · 3.85 KB
/
index.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
<html>
<head>
<title>Authentication Required</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
background-color: #e3e3e3;
width: 99%;
font-family:'Verdana';
color: #595959;
}
.container {
margin: auto;
margin-top: 20%;
text-align: center;
}
.header {
font-weight:normal;
}
.icon {
margin: auto;
}
.error {
font-weight:bold;
color: red;
}
.description {
font-size: 12pt;
}
.footer {
position: fixed;
bottom: 0;
color: #8a8a8a;
padding: 10px;
font-size: 7.5pt;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
margin: auto;
animation: spin 2s linear infinite;
}
#loader {
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div id="loader" class="loader"></div>
<div id="main">
<svg version="1.1" class="has-solid icon" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" role="img" width="80" height="80" fill="#595959"><path d="M28,4H12a2,2,0,0,0-2,2H28V30H12V20.2H10V30a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V6A2,2,0,0,0,28,4Z" class="clr-i-outline clr-i-outline-path-1"/><path d="M15.12,18.46a1,1,0,1,0,1.41,1.41l5.79-5.79L16.54,8.29a1,1,0,0,0-1.41,1.41L18.5,13H4a1,1,0,0,0-1,1,1,1,0,0,0,1,1H18.5Z" class="clr-i-outline clr-i-outline-path-2"/><path d="M28,4H12a2,2,0,0,0-2,2v7h8.5L15.12,9.71a1,1,0,0,1,1.41-1.41l5.79,5.79-5.79,5.79a1,1,0,0,1-1.41-1.41L18.5,15H10V30a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V6A2,2,0,0,0,28,4Z" class="clr-i-solid clr-i-solid-path-1" style="display:none"/><path d="M10,13H4a1,1,0,0,0-1,1,1,1,0,0,0,1,1h6Z" class="clr-i-solid clr-i-solid-path-2" style="display:none"/></svg>
<h2 class="header">Authentication Required</h2>
<p class="error" id="message"></p>
<p class="description">Please insert and press Yubikey for authentication.<p>
</div>
</div>
<div class="footer">
Authentication provided by <a href="https://github.com/rctl/yubiwall" target="_blank">Yubiwall</a>.
</div>
<form action="/auth" method="POST" id="form">
<input type="hidden" name="secret" id="secret">
<input type="hidden" name="redirect" id="redirect">
</form>
<script>
// Preserve redirect on form submission
let params = new URLSearchParams(window.location.search)
document.getElementById("redirect").value = params.get('rd');
if (params.get("message")) {
document.getElementById("message").innerHTML = params.get("message")
}
function error(message) {
document.getElementById("main").style.display = "block";
document.getElementById("loader").style.display = "none";
document.getElementById("message").innerHTML = message;
}
let token = "";
window.addEventListener(
"keydown",
function(event) {
if (event.key == "Enter") {
document.getElementById("secret").value = token.slice(-44);
document.getElementById("form").submit();
}
token += event.key
if (token.length == 1) {
document.getElementById("main").style.display = "none";
document.getElementById("loader").style.display = "block";
setTimeout(function(){
//Reset token and display error message
token = ""
error("Timed out waiting for token, make sure your Yubikey is configured to send 'Enter' after token entry.")
}, 5000);
}
}
)
</script>
</body>
</html>