quicksetup.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. /*
  2. Quick Setup Tour
  3. This script file contains all the required script
  4. for quick setup tour and walkthrough
  5. */
  6. //tourStepFactory generate a function that renders the steps in tourModal
  7. //Keys: {element, title, desc, tab, pos, scrollto, callback}
  8. // elements -> Element (selector) to focus on
  9. // tab -> Tab ID to switch pages
  10. // pos -> Where to display the tour modal, {topleft, topright, bottomleft, bottomright, center}
  11. // scrollto -> Element (selector) to scroll to, can be different from elements
  12. function adjustTourModalOverlayToElement(element){;
  13. if ($(element) == undefined || $(element).offset() == undefined){
  14. return;
  15. }
  16. let padding = 12;
  17. $("#tourModalOverlay").css({
  18. "top": $(element).offset().top - padding - $(document).scrollTop(),
  19. "left": $(element).offset().left - padding,
  20. "width": $(element).width() + 2 * padding,
  21. "height": $(element).height() + 2 * padding,
  22. });
  23. }
  24. var tourOverlayUpdateTicker;
  25. function tourStepFactory(config){
  26. return function(){
  27. //Check if this step require tab swap
  28. if (config.tab != undefined && config.tab != ""){
  29. //This tour require tab swap. call to openTabById
  30. openTabById(config.tab);
  31. }
  32. if (config.element == undefined || !$(config.element).is(":visible")){
  33. //No focused element in this step.
  34. $(".tourFocusObject").removeClass("tourFocusObject");
  35. $("#tourModal").addClass("nofocus");
  36. $("#tourModalOverlay").hide();
  37. //If there is a target element to scroll to
  38. if (config.scrollto != undefined){
  39. $('html, body').animate({
  40. scrollTop: $(config.scrollto).offset().top - 100
  41. }, 500);
  42. }
  43. }else{
  44. let elementHighligher = function(){
  45. //Match the overlay to element position and size
  46. $(window).off("resize").on("resize", function(){
  47. adjustTourModalOverlayToElement(config.element);
  48. });
  49. if (tourOverlayUpdateTicker != undefined){
  50. clearInterval(tourOverlayUpdateTicker);
  51. }
  52. tourOverlayUpdateTicker = setInterval(function(){
  53. adjustTourModalOverlayToElement(config.element);
  54. }, 100);
  55. adjustTourModalOverlayToElement(config.element);
  56. $("#tourModalOverlay").fadeIn();
  57. }
  58. //Consists of focus element in this step
  59. $(".tourFocusObject").removeClass("tourFocusObject");
  60. $(config.element).addClass("tourFocusObject");
  61. $("#tourModal").removeClass("nofocus");
  62. $("#tourModalOverlay").hide();
  63. //If there is a target element to scroll to
  64. if (config.scrollto != undefined){
  65. $('html, body').animate({
  66. scrollTop: $(config.scrollto).offset().top - 100
  67. }, 300, function(){
  68. setTimeout(elementHighligher, 100);
  69. });
  70. }else{
  71. setTimeout(elementHighligher, 100);
  72. }
  73. }
  74. //Get the modal location of this step
  75. let showupZone = "center";
  76. if (config.pos != undefined){
  77. showupZone = config.pos
  78. }
  79. $("#tourModal").attr("position", showupZone);
  80. $("#tourModal .tourStepTitle").html(config.title);
  81. $("#tourModal .tourStepContent").html(config.desc);
  82. if (config.callback != undefined){
  83. config.callback();
  84. }
  85. }
  86. }
  87. //Hide the side warpper in tour mode and prevent body from restoring to
  88. //overflow scroll mode
  89. function hideSideWrapperInTourMode(){
  90. hideSideWrapper(); //Call to index.html hide side wrapper function
  91. $("body").css("overflow", "hidden"); //Restore overflow state
  92. }
  93. function startQuickStartTour(){
  94. if (currentQuickSetupClass == ""){
  95. msgbox("No selected setup service tour", false);
  96. return;
  97. }
  98. //Show the tour modal
  99. $("#tourModal").show();
  100. //Load the tour steps
  101. if (tourSteps[currentQuickSetupClass] == undefined || tourSteps[currentQuickSetupClass].length == 0){
  102. //This tour is not defined or empty
  103. let notFound = tourStepFactory({
  104. title: "😭 Tour not found",
  105. desc: "Seems you are requesting a tour that has not been developed yet. Check back on later!"
  106. });
  107. notFound();
  108. //Enable the finish button
  109. $("#tourModal .nextStepAvaible").hide();
  110. $("#tourModal .nextStepFinish").show();
  111. //Set step counter to 1
  112. $("#tourModal .tourStepCounter").text("0 / 0");
  113. return;
  114. }else{
  115. tourSteps[currentQuickSetupClass][0]();
  116. }
  117. updateTourStepCount();
  118. //Disable the previous button
  119. if (tourSteps[currentQuickSetupClass].length == 1){
  120. //There are only 1 step in this tour
  121. $("#tourModal .nextStepAvaible").hide();
  122. $("#tourModal .nextStepFinish").show();
  123. }else{
  124. $("#tourModal .nextStepAvaible").show();
  125. $("#tourModal .nextStepFinish").hide();
  126. }
  127. $("#tourModal .tourStepButtonBack").addClass("disabled");
  128. //Disable body scroll and let tour steps to handle scrolling
  129. $("body").css("overflow-y","hidden");
  130. $("#mainmenu").css("pointer-events", "none");
  131. }
  132. function updateTourStepCount(){
  133. let tourlistLength = tourSteps[currentQuickSetupClass]==undefined?1:tourSteps[currentQuickSetupClass].length;
  134. $("#tourModal .tourStepCounter").text((currentQuickSetupTourStep + 1) + " / " + tourlistLength);
  135. }
  136. function nextTourStep(){
  137. //Add one to the tour steps
  138. currentQuickSetupTourStep++;
  139. if (currentQuickSetupTourStep == tourSteps[currentQuickSetupClass].length - 1){
  140. //Already the last step
  141. $("#tourModal .nextStepAvaible").hide();
  142. $("#tourModal .nextStepFinish").show();
  143. }
  144. updateTourStepCount();
  145. tourSteps[currentQuickSetupClass][currentQuickSetupTourStep]();
  146. if (currentQuickSetupTourStep > 0){
  147. $("#tourModal .tourStepButtonBack").removeClass("disabled");
  148. }
  149. }
  150. function previousTourStep(){
  151. if (currentQuickSetupTourStep > 0){
  152. currentQuickSetupTourStep--;
  153. }
  154. if (currentQuickSetupTourStep != tourSteps[currentQuickSetupClass].length - 1){
  155. //Not at the last step
  156. $("#tourModal .nextStepAvaible").show();
  157. $("#tourModal .nextStepFinish").hide();
  158. }
  159. if (currentQuickSetupTourStep == 0){
  160. //Cant go back anymore
  161. $("#tourModal .tourStepButtonBack").addClass("disabled");
  162. }
  163. updateTourStepCount();
  164. tourSteps[currentQuickSetupClass][currentQuickSetupTourStep]();
  165. }
  166. //End tour and reset everything
  167. function endTourFocus(){
  168. $(".tourFocusObject").removeClass("tourFocusObject");
  169. $(".serviceOption.active").removeClass("active");
  170. currentQuickSetupClass = "";
  171. currentQuickSetupTourStep = 0;
  172. $("#tourModal").hide();
  173. $("#tourModal .nextStepAvaible").show();
  174. $("#tourModal .nextStepFinish").hide();
  175. $("#tourModalOverlay").hide();
  176. if (tourOverlayUpdateTicker != undefined){
  177. clearInterval(tourOverlayUpdateTicker);
  178. }
  179. $("body").css("overflow-y","auto");
  180. $("#mainmenu").css("pointer-events", "auto");
  181. }
  182. var tourSteps = {
  183. //Homepage steps
  184. "homepage": [
  185. tourStepFactory({
  186. title: "🎉 Congratulation on your first site!",
  187. desc: "In this tour, you will be guided through the steps required to setup a basic static website using your own domain name with Zoraxy."
  188. }),
  189. tourStepFactory({
  190. title: "👉 Pointing domain DNS to Zoraxy's IP",
  191. desc: `Setup a DNS A Record that points your domain name to this Zoraxy instances public IP address. <br>
  192. Assume your public IP is 93.184.215.14, you should have an A record like this.
  193. <table class="ui celled collapsing basic striped table">
  194. <thead>
  195. <tr>
  196. <th>Name</th>
  197. <th>Type</th>
  198. <th>Value</th>
  199. </tr>
  200. </thead>
  201. <tbody>
  202. <tr>
  203. <td>yourdomain.com</td>
  204. <td>A</td>
  205. <td>93.184.215.14</td>
  206. </tr>
  207. </tbody>
  208. </table>
  209. <br>If the IP of Zoraxy start from 192.168, you might want to use your router's public IP address and setup port forward for both port 80 and 443 as well.`,
  210. callback: function(){
  211. $.get("/api/acme/wizard?step=10", function(data){
  212. if (data.error == undefined){
  213. //Should return the public IP address from acme wizard
  214. //Overwrite the sample IP address
  215. let originalText = $("#tourModal .tourStepContent").html();
  216. originalText = originalText.split("93.184.215.14").join(data);
  217. $("#tourModal .tourStepContent").html(originalText);
  218. }
  219. })
  220. }
  221. }),
  222. tourStepFactory({
  223. title: "🏠 Setup Default Site",
  224. desc: `If you already have an apache or nginx web server running, use "Reverse Proxy Target" and enter your current web server IP address. <br>Otherwise, pick "Internal Static Web Server" and click "Apply Change"`,
  225. tab: "setroot",
  226. element: "#setroot",
  227. pos: "bottomright"
  228. }),
  229. tourStepFactory({
  230. title: "🌐 Enable Static Web Server",
  231. desc: `Enable the static web server if it is not already enabled. Skip this step if you are using external web servers like Apache or Nginx.`,
  232. tab: "webserv",
  233. element: "#webserv",
  234. pos: "bottomright"
  235. }),
  236. tourStepFactory({
  237. title: "📤 Upload Static Website",
  238. desc: `Upload your static website files (e.g. HTML files) to the web directory. If remote access is not avaible, you can also upload it with the web server file manager here.`,
  239. tab: "webserv",
  240. element: "#webserv_dirManager",
  241. pos: "bottomright",
  242. scrollto: "#webserv_dirManager"
  243. }),
  244. tourStepFactory({
  245. title: "💡 Start Zoraxy HTTP listener",
  246. desc: `Start Zoraxy (if it is not already running) by pressing the "Start Service" button.<br>You should now be able to visit your domain and see the static web server contents show up in your browser.`,
  247. tab: "status",
  248. element: "#status .poweroptions",
  249. pos: "bottomright",
  250. })
  251. ],
  252. //Subdomains tour steps
  253. "subdomain":[
  254. tourStepFactory({
  255. title: "🎉 Creating your first subdomain",
  256. desc: "Seems you are now ready to expand your site with more services! To do so, you can create a new subdomain for your new web services. <br><br>In this tour, you will be guided through the steps to setup a new subdomain reverse proxy.",
  257. pos: "center"
  258. }),
  259. tourStepFactory({
  260. title: "👉 Pointing subdomain DNS to Zoraxy's IP",
  261. desc: `Setup a DNS CNAME Record that points your subdomain to your root domain. <br>
  262. Assume your public IP is 93.184.215.14, you should have an CNAME record like this.
  263. <table class="ui celled collapsing basic striped table">
  264. <thead>
  265. <tr>
  266. <th>Name</th>
  267. <th>Type</th>
  268. <th>Value</th>
  269. </tr>
  270. </thead>
  271. <tbody>
  272. <tr>
  273. <td>example.com</td>
  274. <td>A</td>
  275. <td>93.184.215.14</td>
  276. </tr>
  277. <tr>
  278. <td>sub.example.com</td>
  279. <td>CNAME</td>
  280. <td>example.com</td>
  281. </tr>
  282. </tbody>
  283. </table>`,
  284. callback: function(){
  285. $.get("/api/acme/wizard?step=10", function(data){
  286. if (data.error == undefined){
  287. //Should return the public IP address from acme wizard
  288. //Overwrite the sample IP address
  289. let originalText = $("#tourModal .tourStepContent").html();
  290. originalText = originalText.split("93.184.215.14").join(data);
  291. $("#tourModal .tourStepContent").html(originalText);
  292. }
  293. })
  294. }
  295. }),
  296. tourStepFactory({
  297. title: "➕ Create New Proxy Rule",
  298. desc: `Next, you can now move on to create a proxy rule that reverse proxy your new subdomain in Zoraxy. You can easily add new rules using the "New Proxy Rule" web form.`,
  299. tab: "rules",
  300. pos: "topright"
  301. }),
  302. tourStepFactory({
  303. title: "🌐 Matching Keyword / Domain",
  304. desc: `Fill in your new subdomain in the "Matching Keyword / Domain" field.<br> e.g. sub.example.com`,
  305. element: "#rules .field[tourstep='matchingkeyword']",
  306. pos: "bottomright"
  307. }),
  308. tourStepFactory({
  309. title: "🖥️ Target IP Address or Domain Name with port",
  310. desc: `Fill in the Reverse Proxy Destination. e.g. localhost:8080 or 192.168.1.100:9096. <br><br>Please make sure your web services is accessible by Zoraxy.`,
  311. element: "#rules .field[tourstep='targetdomain']",
  312. pos: "bottomright"
  313. }),
  314. tourStepFactory({
  315. title: "🔐 Proxy Target require TLS Connection",
  316. desc: `If your upstream service only accept https connection, select this option.`,
  317. element: "#rules .field[tourstep='requireTLS']",
  318. pos: "bottomright",
  319. }),
  320. tourStepFactory({
  321. title: "🔓 Ignore TLS Validation Error",
  322. desc: `Some open source projects like Proxmox or NextCloud use self-signed certificate to serve its web UI. If you are proxying services like that, enable this option. `,
  323. element: "#rules #advanceProxyRules .field[tourstep='skipTLSValidation']",
  324. scrollto: "#rules #advanceProxyRules",
  325. pos: "bottomright",
  326. callback: function(){
  327. $("#advanceProxyRules").accordion();
  328. if (!$("#rules #advanceProxyRules .content").is(":visible")){
  329. //Open up the advance config menu
  330. $("#rules #advanceProxyRules .title")[0].click()
  331. }
  332. }
  333. }),
  334. tourStepFactory({
  335. title: "💾 Save New Proxy Rule",
  336. desc: `Now, click "Create Endpoint" to add this reverse proxy rule to runtime.`,
  337. element: "#rules div[tourstep='newProxyRule']",
  338. scrollto: "#rules div[tourstep='newProxyRule']",
  339. pos: "topright",
  340. }),
  341. tourStepFactory({
  342. title: "🎉 New Proxy Rule Setup Completed!",
  343. desc: `You can continue to add more subdomains or alias domain using this web form. To view the created reverse proxy rules, you can navigate to the HTTP Proxy tab.`,
  344. element: "#rules",
  345. tab: "rules",
  346. pos: "bottomright",
  347. }),
  348. tourStepFactory({
  349. title: "🌲 HTTP Proxy List",
  350. desc: `In this tab, you will see all the created HTTP proxy rules and edit them if needed. You should see your newly created HTTP proxy rule in the above list. <Br><Br>
  351. This is the end of this tour. If you want further documentation on how to setup access control filters or load balancer, check out our Github Wiki page.`,
  352. element: "#httprp",
  353. tab: "httprp",
  354. pos: "bottomright",
  355. }),
  356. ],
  357. //TLS and ACME tour steps
  358. "tls":[
  359. tourStepFactory({
  360. title: "🔐 Enable HTTPS (TLS) for your site",
  361. desc: `Some technologies only work with HTTPS for security reasons. In this tour, you will be guided through the steps to enable HTTPS in Zoraxy.`,
  362. pos: "center",
  363. }),
  364. tourStepFactory({
  365. title: "➡️ Change Listening Port",
  366. desc: `HTTPS listen on port 443 instead of 80. If your Zoraxy is currently listening to ports other than 443, change it to 443 in incoming port option and click "Apply"`,
  367. tab: "status",
  368. element: "#status div[tourstep='incomingPort']",
  369. scrollto: "#status div[tourstep='incomingPort']",
  370. pos: "bottomright",
  371. }),
  372. tourStepFactory({
  373. title: "🔑 Enable TLS Serving",
  374. desc: `Next, you can enable TLS by checking the "Use TLS to serve proxy request"`,
  375. element: "#tls",
  376. scrollto: "#tls",
  377. pos: "bottomright",
  378. }),
  379. tourStepFactory({
  380. title: "💻 Enable HTTP Server on Port 80",
  381. desc: `As we might want some proxy rules to be accessible by HTTP, turn on the HTTP server listener on port 80 as well.`,
  382. element: "#listenP80",
  383. scrollto: "#tls",
  384. pos: "bottomright",
  385. }),
  386. tourStepFactory({
  387. title: "↩️ Force redirect HTTP request to HTTPS",
  388. desc: `By default, if a HTTP host-name is not found, 404 error page will be returned. However, in common scenerio for self-hosting, you might want to redirect that request to your HTTPS server instead. <br><br>Enabling this option allows such redirection to be done automatically.`,
  389. element: "#status div[tourstep='forceHttpsRedirect']",
  390. scrollto: "#tls",
  391. pos: "bottomright",
  392. }),
  393. tourStepFactory({
  394. title: "🎉 HTTPS Enabled!",
  395. desc: `Now, your Zoraxy instance is ready to serve HTTPS requests.
  396. <br><br>By default, Zoraxy serve all your host-names by its internal self-signed certificate which is not a proper setup. That is why you will need to request a proper certificate for your site from your ISP or CA. `,
  397. tab: "status",
  398. pos: "center",
  399. }),
  400. tourStepFactory({
  401. title: "🔐 TLS / SSL Certificates",
  402. desc: `Zoraxy come with a simple and handy TLS management interface, where you can upload or request your certificates with a web form. You can click "TLS / SSL Certificate" from the side menu to open this page.`,
  403. tab: "cert",
  404. element: "#mainmenu",
  405. pos: "center",
  406. }),
  407. tourStepFactory({
  408. title: "📤 Uploading Fallback (Default) Certificate",
  409. desc: `If you are using Cloudflare, you can upload the Cloudflare (full) strict mode certificate in the "Fallback Certificate" section and let Cloudflare handle all the remaining certificate dispatch. <br><br>
  410. Public key usually use a file extension of .pub or .pem, and private key usually ends with .key.`,
  411. element: "#cert div[tourstep='defaultCertificate']",
  412. scrollto: "#cert div[tourstep='defaultCertificate']",
  413. pos: "bottomright",
  414. }),
  415. tourStepFactory({
  416. title: "⚙️ Setup ACME",
  417. desc: `If you didn't want to pay for a certificate, there are free CA where you can use to obtain a certificate. By default, Let's Encrypt is used and in order to use their service, you will need to fill in your webmin contact email in the "ACME EMAIL" field.
  418. <br><br> After you are done, click "Save Settings" and continue.`,
  419. element: "#cert div[tourstep='acmeSettings']",
  420. scrollto: "#cert div[tourstep='acmeSettings']",
  421. pos: "bottomright",
  422. }),
  423. tourStepFactory({
  424. title: "👉 Open ACME Tool",
  425. desc: `Open the ACME Tool by pressing the button below the ACME settings. You will see a tool window popup from the side.`,
  426. element: ".sideWrapper",
  427. pos: "center",
  428. callback: function(){
  429. //Call to function in cert.html
  430. openACMEManager();
  431. }
  432. }),
  433. tourStepFactory({
  434. title: "📃 Obtain Certificate with ACME",
  435. desc: `Now, we can finally start requesting a free certificate from the selected CA. Fill in the "Generate New Certificate" web-form and click <b>"Get Certificate"</b>.
  436. This usually will takes a few minutes. Wait until the spinning icon disappear before moving on the next step.
  437. <br><br>Tips: You can check the "Use DNS Challenge" if you are trying to request a certificate containing wildcard character (*).`,
  438. element: ".sideWrapper",
  439. pos: "topleft",
  440. }),
  441. tourStepFactory({
  442. title: "🔄 Enable Auto Renew",
  443. desc:`Free certificate only last for a few months. If you want Zoraxy to help you automate the certificate renew process, enable "Auto Renew" by clicking the <b>"Enable Certificate Auto Renew"</b> toggle switch.
  444. <br><br>You can fine tune which certificate to renew in the "Advance Renew Policy" dropdown.`,
  445. element: ".sideWrapper",
  446. pos: "bottomleft",
  447. callback: function(){
  448. //If the user arrive this step from "Back"
  449. if (!$(".sideWrapper").is(":visible")){
  450. openACMEManager();
  451. }
  452. }
  453. }),
  454. tourStepFactory({
  455. title: "🎉 Certificate Installed!",
  456. desc:`Now, your certificate is loaded into the database and it is ready to use! In Zoraxy, you do not need to manually assign the certificate to a domain. Zoraxy will do that automatically for you.
  457. <br><br>Now, you can try to visit your website with https:// and see your green lock shows up next to your domain name!`,
  458. element: "#cert div[tourstep='certTable']",
  459. scrollto: "#cert div[tourstep='certTable']",
  460. tab: "cert",
  461. pos: "bottomright",
  462. callback: function(){
  463. hideSideWrapperInTourMode();
  464. }
  465. }),
  466. ],
  467. }