index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>wssh</title>
  6. <link href="{{url_for('static', filename='bootstrap.min.css')}}" rel="stylesheet" />
  7. <link href="{{url_for('static', filename='style.css')}}" rel="stylesheet" />
  8. </head>
  9. <body>
  10. <div class="navbar navbar-fixed-top">
  11. <div class="navbar-inner">
  12. <div class="container">
  13. <a class="brand" href="#">wssh</a>
  14. </div>
  15. </div>
  16. </div>
  17. <div class="container">
  18. <!-- Connection form -->
  19. <form id="connect" class="form-horizontal">
  20. <fieldset>
  21. <legend>Connect to a remote SSH server</legend>
  22. <div class="control-group">
  23. <label class="control-label">
  24. Destination
  25. </label>
  26. <div class="controls">
  27. <input type="text" id="username"
  28. class="input-small"
  29. placeholder="root" />
  30. <div class="input-prepend">
  31. <span class="add-on">@</span><input
  32. type="text"
  33. id="hostname"
  34. class="input-large"
  35. placeholder="localhost" />
  36. <span class="add-on">port</span><input
  37. type="text"
  38. id="portnumber"
  39. class="input-small"
  40. value=22 />
  41. </div>
  42. </div>
  43. </div>
  44. <div class="control-group">
  45. <label class="control-label">
  46. Authentication method
  47. </label>
  48. <div class="controls">
  49. <label class="radio">
  50. <input type="radio" name="authentication_method"
  51. value="password" checked />
  52. Password
  53. </label>
  54. <label class="radio">
  55. <input type="radio" name="authentication_method"
  56. value="private_key" />
  57. Private Key
  58. </label>
  59. </div>
  60. </div>
  61. <div class="control-group" id="password_authentication">
  62. <label class="control-label">
  63. Password
  64. </label>
  65. <div class="controls">
  66. <input type="password" id="password"
  67. class="input-large" />
  68. </div>
  69. </div>
  70. <div id="private_key_authentication">
  71. <div class="control-group">
  72. <label class="control-label">
  73. Private Key
  74. </label>
  75. <div class="controls">
  76. <textarea id="private_key" rows="6"
  77. class="input-xxlarge"></textarea>
  78. <p class="help-block">
  79. Copy &amp; Paste your SSH private from
  80. <code>~/.ssh/id_rsa</code> or
  81. <code>~/.ssh/id_dsa</code>
  82. </p>
  83. </div>
  84. </div>
  85. <div class="control-group">
  86. <label class="control-label">
  87. Key Passphrase
  88. </label>
  89. <div class="controls">
  90. <input type="password" id="key_passphrase"
  91. class="input-large" />
  92. <p class="help-block">
  93. Enter your private key passphrase if it
  94. is encrypted. Leave empty otherwise.
  95. </p>
  96. </div>
  97. </div>
  98. </div>
  99. <div class="control-group">
  100. <label class="control-label">
  101. Command
  102. </label>
  103. <div class="controls">
  104. <input type="text" id="command" class="input-large" />
  105. <p class="help-block">
  106. Enter command to be executed or
  107. empty for interactive.
  108. </p>
  109. </div>
  110. </div>
  111. <div class="form-actions">
  112. <button type="submit" class="btn btn-primary">
  113. Connect
  114. </button>
  115. </div>
  116. </fieldset>
  117. </form>
  118. <div id="term">
  119. </div>
  120. </div>
  121. <script type="application/javascript" src="{{url_for('static', filename='jquery.min.js')}}">
  122. </script>
  123. <script type="application/javascript" src="{{url_for('static', filename='term.js')}}">
  124. </script>
  125. <script type="application/javascript" src="{{url_for('static', filename='wssh.js')}}">
  126. </script>
  127. <script type="application/javascript">
  128. function openTerminal(options) {
  129. var client = new WSSHClient();
  130. var term = new Terminal(80, 24, function(key) {
  131. client.send(key);
  132. });
  133. term.open();
  134. $('.terminal').detach().appendTo('#term');
  135. term.resize(80, 24);
  136. term.write('Connecting...');
  137. client.connect($.extend(options, {
  138. onError: function(error) {
  139. term.write('Error: ' + error + '\r\n');
  140. },
  141. onConnect: function() {
  142. // Erase our connecting message
  143. term.write('\r');
  144. },
  145. onClose: function() {
  146. term.write('Connection Reset By Peer');
  147. },
  148. onData: function(data) {
  149. term.write(data);
  150. }
  151. }));
  152. }
  153. </script>
  154. <script type='application/javascript'>
  155. $(document).ready(function() {
  156. $('#ssh').hide();
  157. $('#private_key_authentication', '#connect').hide();
  158. $('input:radio[value=private_key]', '#connect').click(
  159. function() {
  160. $('#password_authentication').hide();
  161. $('#private_key_authentication').show();
  162. }
  163. );
  164. $('input:radio[value=password]', '#connect').click(
  165. function() {
  166. $('#password_authentication').show();
  167. $('#private_key_authentication').hide();
  168. }
  169. );
  170. $('#connect').submit(function(ev) {
  171. ev.preventDefault();
  172. function validate(fields) {
  173. var success = true;
  174. fields.forEach(function(field) {
  175. if (!field.val()) {
  176. field.closest('.control-group')
  177. .addClass('error');
  178. success = false;
  179. }
  180. });
  181. return success;
  182. }
  183. // Clear errors
  184. $('.error').removeClass('error');
  185. var username = $('input:text#username');
  186. var hostname = $('input:text#hostname');
  187. var portnumber = $('input:text#portnumber');
  188. var command = $('input:text#command');
  189. var authentication = $(
  190. 'input[name=authentication_method]:checked',
  191. '#connect').val();
  192. var options = {
  193. username: username.val(),
  194. hostname: hostname.val(),
  195. command: command.val(),
  196. authentication_method: authentication
  197. };
  198. var port = parseInt(portnumber.val())
  199. if (port > 0 && port < 65535) {
  200. $.extend(options, {port: port});
  201. } else {
  202. $.extend(options, {port: 22});
  203. }
  204. if (authentication == 'password') {
  205. var password = $('input:password#password');
  206. if (!validate([username, hostname, password]))
  207. return false;
  208. $.extend(options, {password: password.val()});
  209. } else if (authentication == 'private_key') {
  210. var private_key = $('textarea#private_key');
  211. if (!validate([username, hostname, private_key]))
  212. return false;
  213. $.extend(options, {private_key: private_key.val()});
  214. var key_passphrase = $('input:password#key_passphrase');
  215. if (key_passphrase.val()) {
  216. $.extend(options,
  217. {key_passphrase: key_passphrase.val()});
  218. }
  219. }
  220. $('#connect').hide();
  221. $('#ssh').show();
  222. openTerminal(options);
  223. });
  224. });
  225. </script>
  226. </body>
  227. </html>