webdav.html 10 KB

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