sftp.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  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. <div class="ui form">
  22. <div class="field">
  23. <i class="large user icon" style="margin-top: -0.2em; margin-right: 0.4em;"></i>
  24. <div class="ui mini horizontal statistic">
  25. <div id="connectedUsers" class="value">
  26. 0
  27. </div>
  28. <div class="label">
  29. Connected Users
  30. </div>
  31. </div>
  32. <br>
  33. <small>Notes: Setting change will disconnect all clients and restart all the connections</small>
  34. </div>
  35. <div class="field">
  36. <div class="ui toggle checkbox">
  37. <input id="useUPNP" type="checkbox" name="upnp" onchange="toggleUPNP(this.checked);">
  38. <label>Enable UPnP on SFTP Server Port</label>
  39. <small>Aka Auto Port Forwarding. Disable this option if you are connecting within Local Area Network</small>
  40. </div>
  41. </div>
  42. <div class="field">
  43. <label>Listening Port</label>
  44. <div class="ui labeled input">
  45. <input id="listeningPort" type="number" placeholder="2022" min="22">
  46. </div>
  47. </div>
  48. <button class="ui black right floated button" onclick="updatePort();">Save Changes</button>
  49. <br><br>
  50. <div id="ok" class="ui secondary inverted green segment" style="display:none;">
  51. <i class="checkmark icon"></i> Setting Applied
  52. </div>
  53. <div id="error" class="ui secondary inverted red segment" style="display:none;">
  54. <i class="remove icon"></i> <span class="msg">Something went wrong</span>
  55. </div>
  56. <div class="ui divider"></div>
  57. </div>
  58. <br><br>
  59. <script>
  60. var serverAllowUPNP = false;
  61. function initConfigs(){
  62. $.get("../../system/storage/sftp/port", function(data){
  63. $("#listeningPort").val(data);
  64. });
  65. $.get("../../system/storage/sftp/upnp", function(data){
  66. if (data == true){
  67. $("#useUPNP").parent().checkbox("set checked");
  68. }else{
  69. $("#useUPNP").parent().checkbox("set unchecked");
  70. }
  71. });
  72. $.get("../../system/storage/sftp/users", function(data){
  73. $("#connectedUsers").text(data);
  74. })
  75. }
  76. initConfigs();
  77. function toggleUPNP(checked){
  78. $.ajax({
  79. url:"../../system/storage/sftp/upnp",
  80. data: {enabled: checked},
  81. method: "POST",
  82. success: function(data){
  83. }
  84. })
  85. }
  86. function updatePort(){
  87. var newPort = $("#listeningPort").val();
  88. if (isNaN(parseInt(newPort)) || parseInt(newPort) < 20 ){
  89. alert("Invalid port number entered");
  90. return
  91. }
  92. $.ajax({
  93. url:"../../system/storage/sftp/port",
  94. data: {port: newPort},
  95. method: "POST",
  96. success: function(data){
  97. if (data.error !== undefined){
  98. showError(data.error);
  99. }else{
  100. showOK();
  101. }
  102. }
  103. })
  104. }
  105. function showOK(){
  106. $("#ok").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
  107. }
  108. function showError(msg){
  109. $("#error").find(".msg").text(msg);
  110. $("#error").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
  111. }
  112. </script>
  113. </body>
  114. </html>