-
Notifications
You must be signed in to change notification settings - Fork 0
/
connector.html
229 lines (219 loc) · 12.9 KB
/
connector.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
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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<!--
// SPDX-License-Identifier: AGPL-3.0-only
//
// Copyright 2022 OpenVPN Inc <[email protected]>
// Copyright 2022 Rohit Kalbag <[email protected]>
// Copyright 2022 Brent Moore <[email protected]>
// Copyright 2022 David Sommerseth <[email protected]>
//
-->
<html>
<head>
<title>OpenVPN Connector</title>
<meta charset="utf-8" />
<meta content="width=device-width" name="viewport" />
<script src="../base1/cockpit.js"></script>
<link rel="stylesheet" href="css/inter.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/modal.css" />
</head>
<body>
<div class="container">
<div class="col-12">
<div class="headContainer">
<img class="logo" src="img/openvpn.png" alt="OpenVPN Logo" height="56"/>
<h1 class="title">OpenVPN Connector</h1>
<div class="versionInfo">
<pre id="version"></pre>
</div>
<div class="divider" />
</div>
<div id="toast" class="toast-x">Toast Placeholder</div>
<section id="token_area" hidden>
<div class="content">
<h2 class="subtitle">How do I generate a connector token?</h2>
<div class="list-alt">
<a href="https://myaccount.openvpn.com/signup" target="_blank">Sign up</a>
for an CloudConnexa™ account. Create a Network or Host and name your connector.<br/>Instead of deploying the connector inside of CloudConnexa, copy the token and paste it in the token field below.
<br/><br/>Detailed instructions can be found in the OpenVPN <a href="https://openvpn.net/cloud-docs/connector-cockpit-user-guide/" target="_blank">Connector User Guide</a>.
</div>
<div class="tokenArea">
<div class="col-12">
<h1 class="subtitle">Submit Connector Token to get connected to CloudConnexa™</h1>
</div>
<div class="col-12">
<label for="token" class="tokenLabel">Token</label>
<input id="token" class="tokenField" name="token" maxlength="84" placeholder="Paste token here" required="" type="password" />
<svg id="show_token" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye showEye" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.33" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>
</svg>
<svg id="hide_token" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye-off hideEye" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="3" y1="3" x2="21" y2="21"></line>
<path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"></path>
<path d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341"></path>
</svg>
<div class="checkboxContainer">
<label for="boot_startup" class="checkboxLabel">
<input id="boot_startup" class="tokenCheckbox" type="checkbox" checked/>Start on boot
<div id="tooltipContainer" class="tooltip">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-help" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.33" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="9"></circle>
<line x1="12" y1="17" x2="12" y2="17.01"></line>
<path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"></path>
</svg>
<span class="tooltiptext">Caution: User account must be a member of the 'connector' user group to enable 'Start on boot'.</span>
</div>
</label>
<label for="enable_dco" class="checkboxLabel">
<input id="enable_dco" class="tokenCheckbox" type="checkbox" />Enable Data Channel Offload (DCO)
</label>
<div id="dco_alert" class="dco-alert">
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="9"></circle>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
<polyline points="11 12 12 12 12 16 13 16"></polyline>
</svg>
</span>
<div class="notes">
Caution: DCO moves data channel processing to the kernel level making throughput much faster, but is currently still in <a href="https://openvpn.net/blog/openvpn-data-channel-offload/" target="_blank">beta</a>.
</div>
</div>
</div>
<button id="submit_token" class="btn btn-primary" name="submit" type="submit" value="SUBMIT TOKEN">Submit Token</button>
</div>
</div>
</div>
</section>
<section id="disconnect_area" hidden>
<div class="btnContainer">
<button id="submit_connect" class="btn btn-success" name="submit" type="submit" value="CONNECT">Connect</button>
<button id="submit_remove" class="btn btn-ghost" name="submit" type="submit" value="REMOVE">Remove Profile</button>
</div>
<div class="content">
<div class="col-12 cardContainer">
<div class="col-12 cardHeader">
<h2 class="subtitle">Connection Statistics</h2>
</div>
<div class="statTable">
<div class="statRow">Status<span class="statValue statConnection disconnected">Disconnected from CloudConnexa</span></div>
</div>
</div>
</div>
</section>
</div>
</div>
<section id="session_area" hidden>
<div class="btnContainer">
<button id="submit_reconnect" class="btn btn-ghost" name="submit" type="submit" value="RECONNECT">Reconnect</button>
<button id="submit_disconnect" class="btn btn-warning" name="submit" type="submit" value="DISCONNECT">Disconnect</button>
</div>
<div class="content">
<div class="col-12 cardContainer">
<div class="col-12 cardHeader">
<h2 class="subtitle">Connection Statistics</h2>
<button id="submit_refresh" class="btn btn-primary" name="submit" type="submit" value="REFRESH">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.33" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
</svg>
Refresh</button>
</div>
<div class="statTable">
<div class="statRow">Status<span id="conn_status" class="statValue statConnection connected"></span></div>
<div id="stats_output"></div>
</div>
</div>
</div>
</section>
<div class="modal micromodal-slide" id="modal-loading" aria-hidden="true">
<div class="modal__overlay" tabindex="-1">
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
<header class="modal__header">
<h2 class="modal__title">
OpenVPN Connector
</h2>
</header>
<div class="modal-content-content">
<div id="modal_content" class="modal__content">
Modal content
</div>
<div class="spinnerContainer">
<div class="spinner"></div>
</div>
<footer class="modal__footer"></footer>
</div>
</div>
</div>
</div>
<div class="modal micromodal-slide" id="modal-confirm" aria-hidden="true">
<div class="modal__overlay" tabindex="-1">
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
<header class="modal__header">
<h2 class="modal__title" >
Are you sure you would like to disconnect from CloudConnexa?
</h2>
</header>
<div class="modal-content-content">
<footer class="modal__footer">
<div class="modalBtnContainer">
<button id="disconnect_confirm" class="btn btn-warning modal__btn" aria-label="Disconnect">Disconnect</button>
<button class="btn btn-ghost modal__btn" data-micromodal-close aria-label="Cancel">Cancel</button>
</div>
</footer>
</div>
</div>
</div>
</div>
<div class="modal micromodal-slide" id="modal-remove" aria-hidden="true">
<div class="modal__overlay" tabindex="-1">
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
<header class="modal__header">
<h2 class="modal__title" >
Are you sure you would like to DELETE the CloudConnexa configuration?
</h2>
</header>
<div class="modal-content-content">
<div id="modal_content" class="modal__content">
Warning: This cannot be undone, and you will be required to configure a new token should you proceed!
</div>
<footer class="modal__footer">
<div class="modalBtnContainer">
<button id="remove_confirm" class="btn btn-warning modal__btn" aria-label="Remove Configuration">Delete Profile</button>
<button class="btn btn-ghost modal__btn" data-micromodal-close aria-label="Cancel">Cancel</button>
</div>
</footer>
</div>
</div>
</div>
</div>
<div class="modal micromodal-slide" id="modal-error" aria-hidden="true">
<div class="modal__overlay" tabindex="-1">
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
<header class="modal__header">
<h2 class="modal__title" >
OpenVPN Connector Error
</h2>
</header>
<div id="modal_error_content" class="modal__content">
Modal content
</div>
<footer class="modal__footer">
<div class="modalBtnContainer">
<button class="btn btn-primary modal__btn" data-micromodal-close aria-label="OK">OK</button>
</div>
</footer>
</div>
</div>
</div>
<script src="micromodal.min.js"></script>
<script src="onload.js"></script>
</body>
</html>