webdav.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  6. <meta charset="UTF-8">
  7. <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
  8. <script src="../../script/jquery.min.js"></script>
  9. <script src="../../script/semantic/semantic.min.js"></script>
  10. <style>
  11. .hidden{
  12. display:none;
  13. }
  14. .disabled{
  15. opacity: 0.5;
  16. pointer-events: none;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <br>
  22. <div class="ui container">
  23. <div class="ui header">
  24. WebDAV Server
  25. <div class="sub header">Access your arozos user root with WebDAV protocols.</div>
  26. </div>
  27. <div class="ui message maconly" style="display:none">
  28. <h4><i class="apple icon"></i> Login Method for MacOS</h4>
  29. <p>If you are using MacOS, you can select "Connect to Network Server", enter the endpoint of the arozos WebDAV service (<span class="protocol"></span>//<span class="hostname"></span>:<span class="port"></span>/webdav/{vroot_name}) and login with your arozos username and password.</p>
  30. </div>
  31. <div class="ui blue message windowonly nontls" style="display:none">
  32. <h4><i class="windows icon"></i> Login Method for Windows (Non SSL / TLS Mode)</h4>
  33. <p>If you are using Windows File Explorer as your WebDAV Client without TLS enabled on arozos server, <b>WebDAV will run in compatibility mode and Basic Auth is not usable. You must authenticate through this Web UI. </b> Please follow the steps below to authenticate your Windows WebDAV Client.</p>
  34. <ol class="ui list">
  35. <li>Mount the WebDAV endpoint in your File Explorer (Endpoint: <span class="protocol"></span>//<span class="hostname"></span>:<span class="port"></span>/webdav/{vroot_name})</li>
  36. <li>Connect with no username and password</li>
  37. <li>You will be directed to a READONLY directory. Refresh this page and see if there is a new client pop up in the "Access Pending Clients" list.</li>
  38. <li>Click "Allow Access" to assign your user storage pool to be accessiable by this Windows WebDAV Client(s). (Sometime more than 1 conncetions will be used by the same File Explorer)</li>
  39. <li>Refresh your file list in File Explorer and your root folder (user:/) should be listed</li>
  40. </ol>
  41. </div>
  42. <div class="ui blue message windowonly tls" style="display:none">
  43. <h4><i class="windows icon"></i> Login Method for Windows (With SSL / TLS MODE)</h4>
  44. <p>If you are using Windows File Explorer as your WebDAV Client, go to "My Computer" and add a network drive with the following endpoint: <span class="protocol"></span>//<span class="hostname"></span>:<span class="port"></span>/webdav/{vroot_name}</p>
  45. </div>
  46. <!-- General Settings -->
  47. <h3>Basic Settings</h3>
  48. <form class="ui form">
  49. <div class="field">
  50. <div class="ui toggle checkbox">
  51. <input type="checkbox" id="serverToggle" tabindex="0" class="hidden" onchange="toggleWebDAVServer(this.checked);">
  52. <label>Enable WebDAV Server</label>
  53. </div>
  54. </div>
  55. </form>
  56. <div id="status" class="ui icon message">
  57. <i class="exchange icon"></i>
  58. <div class="content">
  59. <div class="header">
  60. <span class="onlinestatus">Status: Offline</span>
  61. </div>
  62. <p>Server might take a few seconds to startup / shutdown after switching on and off.</p>
  63. </div>
  64. </div>
  65. <!-- Connection Endpoint List -->
  66. <div class="ui segment">
  67. <p>The following are the endpoints that you can connect via WebDAV with your user account.</p>
  68. <div class="ui list" id="vrootList">
  69. </div>
  70. </div>
  71. <!-- NON TLS Windows Only Mode-->
  72. <div id="nontlsWindowsSettings">
  73. <br>
  74. <h3>Non-TLS Windows Client Connection Settings</h3>
  75. <h4>Access Pending Clients</h4>
  76. <table class="ui very basic collapsing celled table">
  77. <thead>
  78. <tr>
  79. <th>Client IP</th>
  80. <th>Last Request</th>
  81. <th>Connection UUID</th>
  82. <th>Action</th>
  83. </tr>
  84. </thead>
  85. <tbody id="accessPendingClientList">
  86. <tr><td>
  87. <h4 class="ui header">
  88. <div class="content">
  89. 192.168.0.1
  90. </div>
  91. </h4>
  92. </td>
  93. <td>
  94. 1 Jan 1970 08:00:00
  95. </td>
  96. <td>
  97. 5bfba525-00ba-4d00-b8cc-7938fd8a0175
  98. </td>
  99. <td>
  100. <button class="ui tiny primary button">Allow Access</button>
  101. </td>
  102. </tr>
  103. </tbody>
  104. </table>
  105. <div class="ui divider"></div>
  106. <h4>Access Allowed Clients</h4>
  107. <table class="ui very basic collapsing celled table">
  108. <thead>
  109. <tr>
  110. <th>Client IP</th>
  111. <th>Last Request</th>
  112. <th>Connection UUID</th>
  113. <th>Owner</th>
  114. <th>Action</th>
  115. </tr>
  116. </thead>
  117. <tbody id="permittedClientList">
  118. </tbody>
  119. </table>
  120. <div class="ui divider"></div>
  121. <button class="ui blue button" onclick="refreshList();"><i class="refresh icon"></i> Refresh List</button>
  122. <button class="ui button" onclick="clearPendings();"><i class="remove icon"></i> Clear All Pending Request</button>
  123. </div>
  124. <br><br>
  125. </div>
  126. <script>
  127. var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
  128. var isWindows = navigator.platform.indexOf('Win') > -1;
  129. //Initiate UI elements
  130. $(".ui.checkbox").checkbox();
  131. //Generate endpoint list
  132. generateConnectionEndpointList();
  133. function toggleWebDAVServer(value){
  134. if (value == true){
  135. $("#status").addClass("green");
  136. $("#status").find(".onlinestatus").text("Status: Online");
  137. $.get("../../system/network/webdav/status?set=enable", function(data){
  138. initServerStatus();
  139. });
  140. }else{
  141. $("#status").removeClass("green");
  142. $("#status").find(".onlinestatus").text("Status: Offline");
  143. $.get("../../system/network/webdav/status?set=disable", function(data){
  144. initServerStatus();
  145. });
  146. }
  147. }
  148. function generateConnectionEndpointList(){
  149. $.get("../../system/file_system/listRoots", function(data){
  150. if (data.error != undefined){
  151. console.log(data.error);
  152. }else{
  153. $("#vrootList").html("");
  154. var port = (window.location.port);
  155. if (window.location.port == ""){
  156. if (location.protocol == 'https:') {
  157. port = 443;
  158. }else{
  159. port = 80;
  160. }
  161. }
  162. data.forEach(vroot => {
  163. if (vroot.BufferedFs){
  164. return;
  165. }
  166. $("#vrootList").append(`<div class="item">
  167. <i class="disk icon"></i>
  168. <div class="content">
  169. <div class="header">${vroot.RootName}</div>
  170. <div class="description">${location.protocol}//${window.location.hostname}:${port}/webdav/${vroot.RootPath.replace(":/","")}</div>
  171. </div>
  172. </div>`);
  173. });
  174. }
  175. });
  176. }
  177. //Check server toggle state
  178. initServerStatus();
  179. function initServerStatus(){
  180. $.get("../../system/network/webdav/status", function(data){
  181. if (data[0] == true){
  182. $("#serverToggle")[0].checked = true;
  183. $("#status").addClass("green");
  184. $("#status").find(".onlinestatus").text("Status: Online");
  185. }else{
  186. $("#serverToggle")[0].checked = false;
  187. $("#status").removeClass("green");
  188. $("#status").find(".onlinestatus").text("Status: Offline");
  189. }
  190. if (data[1] == false){
  191. $("#serverToggle").parent().addClass("disabled");
  192. $("#serverToggle").parent().parent().attr("title","Administrator Only");
  193. }
  194. });
  195. }
  196. //Update tutorial information
  197. $(".hostname").text(window.location.hostname);
  198. $(".port").text(window.location.port);
  199. if (window.location.port == ""){
  200. $(".port").text("80");
  201. }
  202. $(".protocol").text(location.protocol);
  203. if (isMac){
  204. $(".maconly").show();
  205. }else if (isWindows){
  206. $(".windowonly").show();
  207. }
  208. //Check if running in HTTPS mode. If yes, hide this functions
  209. if (location.protocol == 'https:'){
  210. $("#nontlsWindowsSettings").hide();
  211. $(".nontls").hide();
  212. }else{
  213. $(".tls").hide();
  214. }
  215. initAccessPendingList();
  216. initAccessPermittedList();
  217. function initAccessPermittedList(){
  218. $.get("../../system/network/webdav/list?target=loggedin", function(data){
  219. $("#permittedClientList").html("");
  220. data.forEach(client => {
  221. $("#permittedClientList").append(`<tr><td>
  222. <h4 class="ui header">
  223. <div class="content">
  224. ${client.ClientIP}
  225. </div>
  226. </h4>
  227. </td>
  228. <td>
  229. ${timeConverter(client.LastConnectionTimestamp)}
  230. </td>
  231. <td>
  232. ${client.UUID}
  233. </td>
  234. <td>
  235. ${client.Username}
  236. </td>
  237. <td>
  238. <button clientid="${client.UUID}" onclick="removeAllowAccess(this);" class="ui tiny red button">Remove Access</button>
  239. </td>
  240. </tr>`);
  241. });
  242. if (data.length == 0){
  243. $("#permittedClientList").append(`<tr><td colspan="4"><i class="remove icon"></i> NO PERMITTED CLIENT</td></tr>`);
  244. }
  245. })
  246. }
  247. function refreshList(){
  248. initAccessPendingList();
  249. initAccessPermittedList();
  250. }
  251. function initAccessPendingList(){
  252. $.get("../../system/network/webdav/list", function(data){
  253. $("#accessPendingClientList").html("")
  254. data.forEach(client => {
  255. $("#accessPendingClientList").append(`<tr><td>
  256. <h4 class="ui header">
  257. <div class="content">
  258. ${client.ClientIP}
  259. </div>
  260. </h4>
  261. </td>
  262. <td>
  263. ${timeConverter(client.LastConnectionTimestamp)}
  264. </td>
  265. <td>
  266. ${client.UUID}
  267. </td>
  268. <td>
  269. <button clientid="${client.UUID}" onclick="setAllowAccess(this);" class="ui tiny primary button">Allow Access</button>
  270. </td>
  271. </tr>`);
  272. })
  273. if (data.length == 0){
  274. $("#accessPendingClientList").append(`<tr><td colspan="4"><i class="remove icon"></i> NO CLIENTS PENDING</td></tr>`);
  275. }
  276. });
  277. }
  278. function setAllowAccess(object){
  279. var clientUUID = $(object).attr("clientid");
  280. $.ajax({
  281. url: "../../system/network/webdav/edit",
  282. data: {"opr": "set", "uuid": clientUUID},
  283. success: function(data){
  284. initAccessPendingList();
  285. initAccessPermittedList();
  286. }
  287. })
  288. }
  289. function removeAllowAccess(object){
  290. var clientUUID = $(object).attr("clientid");
  291. $.ajax({
  292. url: "../../system/network/webdav/edit",
  293. data: {"opr": "remove", "uuid": clientUUID},
  294. success: function(data){
  295. initAccessPendingList();
  296. initAccessPermittedList();
  297. }
  298. })
  299. }
  300. function clearPendings(){
  301. $.get("../../system/network/webdav/clear", function(data){
  302. //Done. Refresh list
  303. initAccessPendingList();
  304. initAccessPermittedList();
  305. });
  306. }
  307. function timeConverter(UNIX_timestamp){
  308. var a = new Date(UNIX_timestamp * 1000);
  309. var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  310. var year = a.getFullYear();
  311. var month = months[a.getMonth()];
  312. var date = a.getDate();
  313. var hour = a.getHours();
  314. var min = a.getMinutes();
  315. var sec = a.getSeconds();
  316. var time = date + ' ' + month + ' ' + year + ' ' + (hour + "").padStart(2,"0") + ':' + (min + "").padStart(2,"0") + ':' + (sec + "").padStart(2,"0") ;
  317. return time;
  318. }
  319. </script>
  320. </body>
  321. </html>