abalone 0.3.4 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: aa5b5ee45c18c4e1c7e2db9945967b297d0820da
-  data.tar.gz: 8baf74e20587c757447985d794195a21d879f965
+  metadata.gz: fc6db47f9f103f87a1e38c945833d736b4171008
+  data.tar.gz: 4fb8dce6cf6e70ba7e7ec011f7c250d8f540771f
 SHA512:
-  metadata.gz: a7c9247504cc5c6840796e6287b70436d727793a93c0f66f5c9fb340d356810952cfee98cf32c3c1114d2c14413a2a6a70464969688899c8f564a41038ca382b
-  data.tar.gz: 3909b638e6695e1633e55919798cca9fce3aec5c3db0ee383f667e78c00e9a572547b1ff7004b70e417860f16a753b5a46b3c6e39165ed41c12c9752995f2f9f
+  metadata.gz: 2b724a5188a06ab85f0495f2e4151ad27e0877887a34b569fa023f9feae31eae48850ef124be654cb18cec0eeacd34de57738622b54d1d39dc4dbc73aa0499a6
+  data.tar.gz: 211f4bc11c85e4e9cce72598fde669f1713515ba67b11850e017c9d9783b60d28c76f29833c1bd1cf93ad22415429ea4a36de227a72f6e9d02f6ac6364b5aabf

data/README.md

@@ -7,6 +7,7 @@ A simple Sinatra & hterm based web terminal.
 1. [Configuration](#configuration)
     1. [SSH](#configuring-ssh)
     1. [Custom Login Command](#configuring-a-custom-command)
+1. [jQuery plugin](#jquery-plugin)
 1. [Limitations](#limitations)
 
 ## Overview
@@ -42,6 +43,10 @@ can set several options:
   * File to display before login. This does not interpret special characters the way `getty` does.
   * `true`, `false`, or filename to display.
   * Default value: `false`, or `/etc/issue.net` if set to `true`.
+* `:welcome`
+  * A message to display prior to starting a session. This is on the overlay with the
+    *Start Session* button. Pass a string of text, or a filename. HTML will be interpreted.
+  * Default value: unset
 * `:logfile`
   * The path of a file to log to.
   * Default value: Log only to `STDERR`. If you pass `-l` at the command line
@@ -51,6 +56,15 @@ can set several options:
     end of that time. For example, set it to 300 for shells that last for up to
     five minutes.
   * Default value: unset.
+* `:ttl`
+  * The number of seconds a session should last after disconnecting. If you reconnect
+    within this grace period, you'll be reconnected to your session without interruption.
+    This cannot yet restore the secondary terminal buffer, so if you're running something
+    like Vim, you may have to run `clear` or `reset` after exiting to get your console
+    sane again.
+  * Note that `:timeout` takes precedence, so if your session times out, even during
+    the `:ttl` grace period, it will be killed. 
+  * Default value: unset.
 * One of [`:command`](#configuring-a-custom-command) or [`:ssh`](#configuring-ssh), exclusive.
   * The login method to use. Abalone can use `login`, SSH, or a custom command
     to start a shell. See configuration instructions below.
@@ -140,6 +154,79 @@ The options in this case will be passed to the command like:
   * http://localhost:9000/?username=bob&image=testing&invalid=value
   * `/usr/local/bin/run-container --username bob`
 
+## jQuery Plugin
+
+Abalone comes with a build in jQuery plugin that makes it very easy to use. You
+can attach the launcher to any element. If it's a `block` element, then a launcher
+button will be injected inside, and if it's `inline` then it will directly trigger
+the terminal.
+
+See a demo of the launcher in action after installation by starting the server and
+browsing to [http://localhost:9000/demo.html](http://localhost:9000/demo.html).
+Adjust the URL and port as needed.
+
+The minimum external dependencies are jQuery and jQuery UI:
+
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+
+To load and initialize the launcher, you'll need to load the CSS and Javascript
+from a running Abalone instance like below. Notice the full URL, including the
+port number. Alternatively, you can pull those from the repository and host them
+along with the rest of your HTML.
+
+    <link rel="stylesheet" href="http://localhost:9000/css/launcher.css">
+    <script src="http://localhost:9000/js/launcher.js"></script>
+
+Then you'll simply declare one or more launchers on any element you choose. Note
+that you must pass in the server parameter. This should be the location of your
+Abalone server, including the port it's running on.
+
+    <script>
+      $(document).ready(function() {
+
+        $('pre.popup').AbaloneLauncher({
+           label: "Try out a popup!",
+           title: "Isn't this neat?",
+          server: "http://localhost:9000",
+        });
+
+        $('pre.inline').AbaloneLauncher({
+             label: "Try it out inline!",
+            target: "inline",
+            server: "http://localhost:9000",
+        });
+
+        $('pre.targeted').AbaloneLauncher({
+             label: "Try it out!",
+            target: "#abalone-shell",
+          location: "se",
+            server: "http://localhost:9000",
+        });
+
+        $('a#launcher').AbaloneLauncher({
+          server: "http://localhost:9000",
+          params: { "type": "demo", "uuid": generateUUID() },
+        });
+
+      });
+    </script>
+
+### Configuration Options
+
+| Option     | Valid values                                          | Default               |
+|------------|-------------------------------------------------------|-----------------------|
+| `location` | `ne`, `se`, `sw`, `nw`                                | `ne`                  |
+| `label`    | *String*                                              | *Launch*              |
+| `title`    | *String*                                              | *Abalone Web Shell*   |
+| `target`   | `popup`, `inline`, `tab`, CSS selector of a container | `popup`               |
+| `params`   | parameters to be passed to the server                 | `{}`                  |
+| `server`   | URL to the Abalone server, including port             | `null` (**required**) |
+| `height`   | *Integer*                                             | `480`                 |
+| `width`    | *Integer*                                             | `640`                 |
+
+
 ## Limitations
 
 This is super early in development and has not yet been battle tested.

data/bin/abalone

@@ -2,8 +2,9 @@
 
 require 'rubygems'
 require 'optparse'
-require 'abalone'
 require 'yaml'
+require 'abalone'
+require 'abalone/terminal'
 
 defaults = {
   :port        => 9000,

data/lib/abalone.rb

@@ -3,15 +3,15 @@ require 'logger'
 require 'sinatra/base'
 require 'sinatra-websocket'
 
-require 'pty'
-require 'io/console'
-
 class Abalone < Sinatra::Base
   set :logging, true
   set :strict, true
   set :protection, :except => :frame_options
   set :public_folder, "#{settings.root}/../public"
   set :views, "#{settings.root}/../views"
+  set :active, {}
+
+  enable :sessions
 
   before {
     env["rack.logger"] = settings.logger if settings.logger
@@ -21,7 +21,6 @@ class Abalone < Sinatra::Base
       puts "Caught SIGINT. Terminating active sessions (#{Process.pid}) now."
       exit!
     end
-
   }
 
   # super low cost heartbeat response.
@@ -30,97 +29,50 @@ class Abalone < Sinatra::Base
     'alive'
   end
 
+  get '/api/reset' do
+    if @terminal = settings.active[session.id]
+      @terminal.terminate!
+    end
+    redirect to('/')
+  end
+
   get '/?:user?' do
     if !request.websocket?
-      #redirect '/index.html'
       @requestUsername = (settings.respond_to?(:ssh) and ! settings.ssh.include?(:user)) rescue false
       @autoconnect     = settings.autoconnect
+      if settings.respond_to?(:welcome)
+        begin
+          @welcome = File.file?(settings.welcome) ? File.read(settings.welcome) : settings.welcome
+        rescue => e
+          warn e.message
+        end
+      end
       erb :index
     else
       request.websocket do |ws|
-
+        uid = session.id
         ws.onopen do
           warn("websocket opened")
-          ENV['TERM'] ||= 'xterm' # make sure we've got a somewhat sane environment
-
-          if settings.respond_to?(:bannerfile)
-            ws.send({'data' => File.read(settings.bannerfile).encode(crlf_newline: true)}.to_json)
-            ws.send({'data' => "\r\n\r\n"}.to_json)
-          end
-
-          reader, @writer, @pid = PTY.spawn(*shell_command)
-          @writer.winsize = [24,80]
-
-#           reader.sync = true
-#           EM.add_periodic_timer(0.05) do
-#             begin
-#               PTY.check(@pid, true)
-#               data = reader.read_nonblock(512) # we read non-blocking to stream data as quickly as we can
-#               ws.send({'event' => 'output', 'data' => data}.to_json)
-#             rescue IO::WaitReadable
-#               # nop
-#             rescue PTY::ChildExited => e
-#               puts "Terminal has exited!"
-#               ws.send({'event' => 'logout'}.to_json)
-#             end
-#           end
-
-          # there must be some form of event driven pty interaction, EM or some gem maybe?
-          reader.sync = true
-          @term = Thread.new do
-            carry = []
-            loop do
-              begin
-                PTY.check(@pid, true)
-                output = reader.read_nonblock(512).unpack('C*') # we read non-blocking to stream data as quickly as we can
-                last_low = output.rindex { |x| x < 128 } # find the last low bit
-                trailing = last_low +1
-
-                # use inclusive slices here
-                data  = (carry + output[0..last_low]).pack('C*').force_encoding('UTF-8') # repack into a string up until the last low bit
-                carry = output[trailing..-1]             # save the any remaining high bits and partial chars for next go-round
-
-                ws.send({'data' => data}.to_json)
-
-              rescue IO::WaitReadable
-                IO.select([reader])
-                retry
-
-              rescue PTY::ChildExited => e
-                warn('Terminal has exited!')
-                ws.close_connection
-
-                @timer.terminate rescue nil
-                @timer.join rescue nil
-                Thread.exit
-              end
-
-              sleep(0.05)
-            end
-          end
-
-          if settings.respond_to? :timeout
-            @timer = Thread.new do
-              expiration = Time.now + settings.timeout
-              loop do
-                remaining = expiration - Time.now
-                stop_term if remaining < 0
-
-                time = {
-                  'event' => 'time',
-                  'data'  => Time.at(remaining).utc.strftime("%H:%M:%S"),
-                }
-                ws.send(time.to_json)
-                sleep 1
-              end
+          # expire all dead terminals
+          settings.active.delete_if {|uid, term| ! term.alive? }
+
+          if @terminal = settings.active[uid]
+            @terminal.reconnect(ws)
+          else
+            warn "Starting a new session for #{uid}."
+            @terminal = Abalone::Terminal.new(settings, ws, sanitized(params))
+
+            if settings.respond_to? :ttl
+              settings.active[uid] = @terminal
+              logger.debug "Saving session #{uid}."
+              logger.debug "Active sessions: #{settings.active.keys.inspect}"
             end
           end
-
         end
 
         ws.onclose do
           warn('websocket closed')
-          stop_term()
+          @terminal.stop! if @terminal
         end
 
         ws.onmessage do |message|
@@ -129,24 +81,27 @@ class Abalone < Sinatra::Base
           begin
             case message['event']
             when 'input'
-              @writer.write message['data']
+              @terminal.write(message['data'])
+
+            when 'modes'
+              @terminal.modes = message['data']
 
             when 'resize'
               row = message['row']
               col = message['col']
-              @writer.winsize = [row, col]
+              @terminal.resize(row, col)
 
             when 'logout', 'disconnect'
               warn("Client exited.")
-              stop_term()
+              @terminal.stop!
 
             else
               warn("Unrecognized message: #{message.inspect}")
             end
           rescue Errno::EIO => e
-            puts "Remote terminal closed."
-            puts e.message
-            stop_term()
+            warn "Remote terminal closed."
+            warn e.message
+            @terminal.stop!
 
           end
 
@@ -160,16 +115,10 @@ class Abalone < Sinatra::Base
   end
 
   helpers do
-    def stop_term()
-      Process.kill('TERM', @pid) rescue nil
-      sleep 1
-      Process.kill('KILL', @pid) rescue nil
-      @term.join rescue nil
-    end
 
     def sanitized(params)
       params.reject do |key,val|
-        ['captures','splat'].include? key
+        ['captures','splat'].include?(key) or not allowed(key, val)
       end
     end
 
@@ -192,48 +141,5 @@ class Abalone < Sinatra::Base
       false
     end
 
-    def shell_command()
-      if settings.respond_to? :command
-        return settings.command unless settings.respond_to? :params
-
-        command = settings.command
-        command = command.split if command.class == String
-
-        sanitized(params).each do |param, value|
-          next unless allowed(param, value)
-
-          config = settings.params[param]
-          case config
-          when nil
-            command << "--#{param}" << value
-          when Hash
-            command << (config[:map] || "--#{param}")
-            command << value
-          end
-        end
-
-        return command
-      end
-
-      if settings.respond_to? :ssh
-        config = settings.ssh.dup
-        config[:user] ||= params['user'] # if not in the config file, it must come from the user
-
-        if config[:user].nil?
-          warn "SSH configuration must include the user"
-          return ['echo', 'no username provided']
-        end
-
-        command = ['ssh', config[:host] ]
-        command << '-l' << config[:user] if config.include? :user
-        command << '-p' << config[:port] if config.include? :port
-        command << '-i' << config[:cert] if config.include? :cert
-
-        return command
-      end
-
-      # default just to running login
-      'login'
-    end
   end
 end

data/lib/abalone/buffer.rb

@@ -0,0 +1,22 @@
+require 'json'
+class Abalone::Buffer
+  def initialize
+    @buffer = ''
+  end
+
+  def send(message)
+    @buffer << JSON.parse(message)['data']
+  rescue
+    nil
+  end
+
+  def close_connection
+    # nop
+  end
+
+  def replay
+    retval  = @buffer
+    @buffer = ''
+    retval
+  end
+end

data/lib/abalone/terminal.rb

@@ -0,0 +1,188 @@
+require 'pty'
+require 'io/console'
+require 'abalone/buffer'
+
+class Abalone::Terminal
+  def initialize(settings, ws, params)
+    @settings = settings
+    @ws       = ws
+    @params   = params
+    @modes    = nil
+    @buffer   = Abalone::Buffer.new
+
+    ENV['TERM'] ||= 'xterm-256color' # make sure we've got a somewhat sane environment
+
+    if settings.respond_to?(:bannerfile)
+      @ws.send({'data' => File.read(settings.bannerfile).encode(crlf_newline: true)}.to_json)
+      @ws.send({'data' => "\r\n\r\n"}.to_json)
+    end
+
+    reader, @writer, @pid = PTY.spawn(*shell_command)
+    @writer.winsize = [24,80]
+
+    # there must be some form of event driven pty interaction, EM or some gem maybe?
+    reader.sync = true
+    @term = Thread.new do
+      carry = []
+      loop do
+        begin
+          PTY.check(@pid, true)
+          output = reader.read_nonblock(512).unpack('C*') # we read non-blocking to stream data as quickly as we can
+          last_low = output.rindex { |x| x < 128 } # find the last low bit
+          trailing = last_low +1
+
+          # use inclusive slices here
+          data  = (carry + output[0..last_low]).pack('C*').force_encoding('UTF-8') # repack into a string up until the last low bit
+          carry = output[trailing..-1]             # save the any remaining high bits and partial chars for next go-round
+
+          @ws.send({'data' => data}.to_json)
+
+        rescue IO::WaitReadable
+          IO.select([reader])
+          retry
+
+        rescue PTY::ChildExited => e
+          warn('Terminal has exited!')
+          @ws.close_connection
+
+          @timer.terminate rescue nil
+          @timer.join rescue nil
+          Thread.exit
+        end
+
+        sleep(0.05)
+      end
+    end
+
+    if @settings.respond_to? :timeout
+      @timer = Thread.new do
+        expiration = Time.now + @settings.timeout
+        loop do
+          remaining = expiration - Time.now
+          if remaining < 0
+            terminate!
+            Thread.exit
+          end
+
+          format = (remaining > 3600) ? "%H:%M:%S" : "%M:%S"
+          time = {
+            'event' => 'time',
+            'data'  => Time.at(remaining).utc.strftime(format),
+          }
+          @ws.send(time.to_json)
+          sleep 1
+        end
+      end
+    end
+  end
+
+  def alive?
+    @term.alive?
+  end
+
+  def reconnect(ws)
+    if @ttl # stop the countdown
+      warn "Stopping timeout"
+      @ttl.terminate rescue nil
+      @ttl.join rescue nil
+      @ttl = nil
+    end
+    @ws.close_connection if @ws
+    @ws = ws
+
+    sleep 0.25 # allow the terminal to finish initialization before we blast it.
+
+    if @modes
+      @ws.send({
+        'event' => 'modes',
+        'data'  => @modes
+      }.to_json)
+    end
+    @ws.send({'data' => @buffer.replay}.to_json)
+    @writer.write "\cl" # ctrl-l forces a screen redraw
+  end
+
+  def write(message)
+    @writer.write message
+  end
+
+  def modes=(message)
+    raise 'Invalid modes data type' unless message.is_a? Hash
+    @modes = message.select do |key, val|
+      ['cursorBlink', 'cursorVisible', 'bracketedPaste', 'applicationCursor'].include? key
+    end
+  end
+
+  def stop!
+    if @settings.respond_to? :ttl
+      @ws  = @buffer
+      @ttl = Thread.new do
+        warn "Providing a shutdown grace period of #{@settings.ttl} seconds."
+        sleep @settings.ttl
+        terminate!
+      end
+    else
+      terminate!
+    end
+  end
+
+  def terminate!
+    warn "Terminating session."
+    Process.kill('TERM', @pid) rescue nil
+    sleep 1
+    Process.kill('KILL', @pid) rescue nil
+
+    [@ttl, @timer, @term].each do |thread|
+      thread.terminate rescue nil
+      thread.join rescue nil
+    end
+  end
+
+  def resize(rows, cols)
+    @writer.winsize = [rows, cols]
+  end
+
+  private
+  def shell_command
+    if @settings.respond_to? :command
+      return @settings.command unless @settings.respond_to? :params
+
+      command = @settings.command
+      command = command.split if command.class == String
+
+      @params.each do |param, value|
+        config = @settings.params[param]
+        case config
+        when nil
+          command << "--#{param}" << value
+        when Hash
+          command << (config[:map] || "--#{param}")
+          command << value
+        end
+      end
+
+      return command
+    end
+
+    if @settings.respond_to? :ssh
+      config = @settings.ssh.dup
+      config[:user] ||= @params['user'] # if not in the config file, it must come from the user
+
+      if config[:user].nil?
+        warn "SSH configuration must include the user"
+        return ['echo', 'no username provided']
+      end
+
+      command = ['ssh', config[:host] ]
+      command << '-l' << config[:user] if config.include? :user
+      command << '-p' << config[:port] if config.include? :port
+      command << '-i' << config[:cert] if config.include? :cert
+
+      return command
+    end
+
+    # default just to running login
+    'login'
+  end
+
+end

data/public/css/launcher.css

@@ -0,0 +1,43 @@
+input[type=button].abalone.control {
+  position: absolute;
+  border-radius: 3px;
+  background-color: #dedede;
+  border: 1px solid #ccc;
+  font-size: 0.75em;
+  margin: 0.25em;
+}
+input[type=button].abalone.control:hover {
+  background-color: #707070;
+  color: #fff;
+}
+input[type=button].abalone.control:hover:disabled,
+input[type=button].abalone.control:disabled {
+  background-color: #e4e4e4;
+  color: #afafaf;
+}
+
+
+.abalone.control.location-ne,
+.abalone.control.location-nw {
+  top: 0;
+}
+.abalone.control.location-se,
+.abalone.control.location-sw {
+  bottom: 0;
+}
+.abalone.control.location-ne,
+.abalone.control.location-se {
+  right: 0;
+}
+.abalone.control.location-nw,
+.abalone.control.location-sw {
+  left: 0;
+}
+
+iframe.abalone {
+  width: 100% !important;
+}
+iframe.abalone.popup {
+  padding: 0;
+  margin: 0;
+}

data/public/css/terminal.css

@@ -0,0 +1,95 @@
+html,
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0px;
+    background-color: #000;
+}
+#timer {
+    position: absolute;
+    z-index: 1000;
+    top: 15px;
+    right: 15px;
+    opacity: 0.25;
+    font-size: 3em;
+    font-weight: bolder;
+    color: red;
+    display: none;
+}
+#settings {
+    position: absolute;
+    z-index: 1000;
+    top: 3px;
+    right: 3px;
+    height: 16px;
+    width: 16px;
+    opacity: 0.15;
+    background-image: url(gear.png);
+    background-position: right top;
+    background-repeat: no-repeat;
+}
+    #settings a,
+    #settings:hover ul,
+    #settings:hover ul li {
+        display: block;
+        padding: 0;
+        margin: 0;
+    }
+    #settings ul {
+        display: none;
+    }
+    #settings a {
+        text-decoration: none;
+        padding-right: 1em;
+        color: blue;
+    }
+    #settings:hover {
+        opacity: 1.0;
+        width: auto;
+        height: auto;
+        background-color: #b6a5a0;
+        background-image: none;
+        color: #fff;
+        font-weight: bold;
+        border: 1px solid #ccc;
+    }
+        #settings:hover ul {
+            list-style-type: none;
+        }
+        #settings:hover ul li:hover {
+            background-color: #ccc;
+        }
+#overlay {
+    position: absolute;
+    z-index: 1000;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0,0,0,0.75);
+}
+  #overlay input {
+      display: block;
+      margin: auto;
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+  }
+  #overlay #welcome {
+      color: white;
+      width: 65%;
+      margin: 4em auto 0;
+      padding: 0.5em 1em;
+      font-size: 2em;
+      border: 1px solid #ccc;
+      border-radius: 0.15em;
+      background-color: #1c0d00;
+      box-shadow: 3px 3px 5px 2px #333;
+  }
+  #overlay #welcome + input {
+      top: 35%;
+  }
+#terminal {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+}

data/public/demo.html

@@ -0,0 +1,161 @@
+<html
+	<head>
+		<title>Abalone Web Shell Demo</title>
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <link rel="stylesheet" href="http://localhost:9000/css/launcher.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <script src="http://localhost:9000/js/launcher.js"></script>
+    <script>
+      hljs.initHighlightingOnLoad();
+
+      $(document).ready(function() {
+
+        $('pre.popup').AbaloneLauncher({
+           label: "Try out a popup!",
+           title: "Isn't this neat?",
+          server: "http://localhost:9000",
+        });
+
+        $('pre.inline').AbaloneLauncher({
+             label: "Try it out inline!",
+            target: "inline",
+            server: "http://localhost:9000",
+        });
+
+        $('pre.targeted').AbaloneLauncher({
+             label: "Try it out!",
+            target: "#abalone-shell",
+          location: "se",
+            server: "http://localhost:9000",
+        });
+
+        $('pre.tab').AbaloneLauncher({
+             label: "Try it in a new tab/window!",
+            target: "tab",
+          location: "se",
+            server: "http://localhost:9000",
+        });
+
+        $('a#launcher').AbaloneLauncher({
+          server: "http://localhost:9000",
+        });
+
+      });
+    </script>
+
+    <style>
+      #container {
+        display: flex;
+        justify-content: space-between;
+        border-top: 1px solid #ccc;
+      }
+      table {
+        width: 75%;
+        margin: 0 auto;
+        border-collapse: collapse;
+      }
+      th, td {
+        border: 1px solid black;
+        padding: 0 0.25em;
+      }
+      .column {
+        width: 50%;
+        margin: 0 1em;
+      }
+      .console {
+        border: 4px solid #a53737;
+        padding: 8px;
+        margin: 0;
+      }
+      #abalone-shell iframe {
+        height: 500px;
+      }
+    </style>
+
+	</head>
+	<body>
+  	<h1>Abalone Web Shell launcher demo</h1>
+    <p>
+      This page demonstrates some of the ways you can use the Abalone launcher system.
+      The minimum external dependencies are jQuery and jQuery UI. See the source code
+      of this page and read the <code>README.me</code> for more configuration info.
+    </p>
+
+  	<div id="container">
+    	<div id="content" class="column">
+        <h3>Targeted Demo</h3>
+        <p>
+          If you pass a selector to a container element when you declare the launcher
+          then the terminal window will be injected into that container.
+        </p>
+
+        <pre class="targeted"><code class="language-javascript">$('pre.targeted').AbaloneLauncher({
+     label: "Try it out!",
+    target: "#abalone-shell",
+  location: "se",
+    server: "http://localhost:9000",
+});</code></pre>
+
+        <h3>Inline Demo</h3>
+        <p>
+          Declare the target as <code>inline</code> and the terminal will be appended
+          to the container element that you attached the launcher to.
+        </p>
+
+        <pre class="inline"><code class="language-javascript">$('pre.inline').AbaloneLauncher({
+   label: "Try it out inline!",
+  target: "inline",
+  server: "http://localhost:9000",
+});</code></pre>
+
+        <h3>Popup Demo</h3>
+        <p>
+          If you don't declare a target, or if you set it to <code>popup</code>, then you'll
+          get a popup dialog with a terminal in it.
+        </p>
+
+        <pre class="popup"><code class="language-javascript">$('pre.popup').AbaloneLauncher({
+   label: "Try out a popup!",
+   title: "Isn't this neat?",
+  server: "http://localhost:9000",
+});</code></pre>
+
+        <h3>Tab/Window Demo</h3>
+        <p>
+          Declare the target as <code>tab</code> and the terminal will be opened in a new
+          tab or window, depending on browser preferences.
+        </p>
+
+        <pre class="tab"><code class="language-javascript">$('pre.tab').AbaloneLauncher({
+     label: "Try it in a new tab/window!",
+    target: "tab",
+  location: "se",
+    server: "http://localhost:9000",
+});</code></pre>
+
+        <h3>Trigger via a link</h3>
+        <p>
+          You can attach the launcher to any element. If it's a <code>block</code> element,
+          like the prior examples, then the launcher button will be injected into it and if
+          it's an <code>inline</code> element, <a href="#" id="launcher">like this</a>
+          then it will trigger the terminal directly.
+        </p>
+
+        <pre><code class="language-javascript">$('a#launcher').AbaloneLauncher({
+  server: "http://localhost:9000",
+});</code></pre>
+
+      </div>
+
+      <div id="workspace" class="column">
+        <h2>Workspace</h2>
+        <div class="console"><div id="abalone-shell"></div></div>
+      </div>
+
+    </div>
+	</body>
+</html>

data/public/js/abalone.js

@@ -53,6 +53,16 @@ function connected() {
           buf = '';
       }
   });
+
+  /* save our terminal state on the server periodically, just in case we restart a session */
+  // Note: Don't try to tie it to the setDECMode() method as that's called all the time.
+  setInterval(function() {
+    socket.send(JSON.stringify({
+      event: 'modes',
+       data: getModes()
+    }));
+  }, 5000);
+
 }
 
 function disconnected() {
@@ -71,6 +81,9 @@ function messageHandler(message) {
       document.getElementById("timer").innerHTML = data;
       break;
 
+    case 'modes':
+      setModes(data);
+
     default:
       if (!term) {
           buf += data;
@@ -80,6 +93,22 @@ function messageHandler(message) {
   }
 }
 
+function getModes() {
+  return {
+    "cursorBlink"       : term.vt.terminal.options_.cursorBlink,
+    "cursorVisible"     : term.vt.terminal.options_.cursorVisible,
+    "bracketedPaste"    : term.vt.terminal.options_.bracketedPaste,
+    "applicationCursor" : term.vt.terminal.keyboard.applicationCursor
+  };
+}
+
+function setModes(modes) {
+  term.vt.terminal.options_.cursorBlink       = modes["cursorBlink"];
+  term.vt.terminal.options_.cursorVisible     = modes["cursorVisible"];
+  term.vt.terminal.options_.bracketedPaste    = modes["bracketedPaste"];
+  term.vt.terminal.keyboard.applicationCursor = modes["applicationCursor"];
+}
+
 /* borrowed from https://github.com/krishnasrinivas/wetty */
 function Abalone(argv) {
   this.argv_ = argv;

data/public/js/launcher.js

@@ -0,0 +1,112 @@
+(function ( $ ) {
+    /* global counter for constructing unique IDs */
+    abaloneInstanceCount = 0;
+
+    $.fn.AbaloneLauncher = function(options) {
+      var settings = $.extend({
+      location: 'ne',
+         label: "Launch",
+         title: "Abalone Web Shell",
+        target: "popup",
+        params: {},
+        server: null,
+        height: 480,
+         width: 640,
+      }, options );
+
+      return this.each(function() {
+        if (settings.server == null) {
+          console.log("[FATAL] Abalone: server is a required parameter.")
+          return;
+        }
+
+        abaloneInstanceCount++;
+        var element   = $(this);
+        var serverURL = settings.server + '?' + $.param(settings.params);
+
+        if (element.css("display") == "block") {
+          var launcher = $("<input>", {
+                             "type": "button",
+                            "class": "launcher",
+                            "value": settings.label,
+                          });
+
+          launcher.addClass("control");
+
+          if (-1 != $.inArray(settings.location, ["ne", "se", "sw", "nw"])) {
+            launcher.addClass("location-" + settings.location);
+          }
+
+          /* we need this for the absolutely posititioned button */
+          if (element.css("position") == "static" ) {
+            element.css("position", "relative");
+          }
+
+          element.prepend(launcher);
+        } else {
+          if (settings.target == "inline") {
+            console.log("[FATAL] Abalone: you cannot use the inline target without a container.")
+            return;
+          }
+          var launcher = element;
+        }
+        launcher.addClass("abalone launcher instance-"+abaloneInstanceCount);
+        launcher.click(function(e) {
+          e.preventDefault();
+          var button = $(this);
+          switch(settings.target) {
+            case "popup":
+              var abalone = $("<iframe>", { "class": "abalone popup", "src": serverURL });
+              abalone.dialog({
+                height: settings.height,
+                 width: settings.width,
+                 title: settings.title,
+                 close: function( event, ui ) {
+                          button.prop('disabled', false);
+                          abalone.remove();
+                        }
+              });
+              button.prop('disabled', true);
+              break;
+
+            case "inline":
+              var abalone = $("<iframe>", { "class": "abalone inline", "src": serverURL });
+              element.append(abalone);
+              break;
+
+            case "tab":
+              window.open(serverURL, 'abaloneTerminal');
+              break
+
+            /* Assume that the user has passed in a string as a selector target */
+            default:
+              var abalone = $("<iframe>", { "class": "abalone targeted", "src": serverURL });
+              var target  = $(settings.target)
+              target.append(abalone);
+              break;
+          }
+
+          /* swap out for the close button, unless we're using a popup/tab */
+          if (["popup", "tab"].indexOf(settings.target) == -1) {
+            var close = $("<input>", {
+               "type": "button",
+              "class": "abalone inline control exit location-" + settings.location,
+              "value": "Close",
+            });
+            close.on("click", function() {
+              $(this).remove();
+              abalone.remove();
+              button.show();
+            });
+
+            element.prepend(close);
+            button.hide();
+          }
+
+        });
+
+        return this;
+      });
+    };
+
+}(jQuery));

data/views/index.erb

@@ -3,53 +3,31 @@
   <head>
       <meta charset="UTF-8">
       <title>Abalone Web Shell</title>
+      <link rel="stylesheet" href="css/terminal.css">
       <script src="js/hterm_all.js"></script>
       <script src="js/abalone.js"></script>
+
+      <% if @autoconnect %>
       <style>
-          html,
-          body {
-              height: 100%;
-              width: 100%;
-              margin: 0px;
-          }
-          #timer {
-              position: absolute;
-              z-index: 1000;
-              top: 15px;
-              right: 15px;
-              opacity: 0.25;
-              font-size: 3em;
-              font-weight: bolder;
-              color: red;
-              display: none;
-          }
-          #overlay {
-              position: absolute;
-              z-index: 1000;
-              height: 100%;
-              width: 100%;
-              background-color: rgba(0,0,0,0.75);
-              <% if @autoconnect %>display: none;<% end %>
-          }
-          #overlay input {
-              display: block;
-              margin: auto;
-              position: relative;
-              top: 50%;
-              transform: translateY(-50%);
-          }
-          #terminal {
-              display: block;
-              position: relative;
-              width: 100%;
-              height: 100%;
-          }
+        #overlay {
+            display: none;
+        }
       </style>
+      <% end %>
   </head>
 
   <body <% if @autoconnect %>onload="connect(<%= @requestUsername %>);"<% end %>>
       <div id="timer"></div>
-      <div id="overlay"><input type="button" onclick="javascript:connect(<%= @requestUsername %>);" value="Start Session" /></div>
+      <div id="settings">
+        <ul>
+          <li><a href="/api/reset">Reset Terminal</a></li>
+          <li><a href="https://github.com/binford2k/abalone" target="_new">Project Page</a></li>
+        </ul>
+      </div>
+      <div id="overlay">
+        <% if @welcome %><div id="welcome"><%= @welcome %></div><% end %>
+        <input type="button" onclick="javascript:connect(<%= @requestUsername %>);" value="Start Session" />
+      </div>
       <div id="terminal"></div>
   </body>
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: abalone
 version: !ruby/object:Gem::Version
-  version: 0.3.4
+  version: 0.4.0
 platform: ruby
 authors:
 - Ben Ford
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-02-07 00:00:00.000000000 Z
+date: 2017-02-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -52,12 +52,19 @@ files:
 - README.md
 - LICENSE
 - bin/abalone
+- lib/abalone/buffer.rb
+- lib/abalone/terminal.rb
 - lib/abalone/watchdog.rb
 - lib/abalone.rb
 - views/index.erb
-- public/index.html
+- public/css/gear.full.png
+- public/css/gear.png
+- public/css/launcher.css
+- public/css/terminal.css
+- public/demo.html
 - public/js/abalone.js
 - public/js/hterm_all.js
+- public/js/launcher.js
 homepage: https://github.com/binford2k/abalone/
 licenses: []
 metadata: {}

data/public/index.html

@@ -1,53 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-      <meta charset="UTF-8">
-      <title>Abalone Web Shell</title>
-      <script src="js/hterm_all.js"></script>
-      <script src="js/abalone.js"></script>
-      <style>
-          html,
-          body {
-              height: 100%;
-              width: 100%;
-              margin: 0px;
-          }
-          #timer {
-              position: absolute;
-              z-index: 1000;
-              top: 15px;
-              right: 15px;
-              opacity: 0.5;
-              display: none;
-          }
-          #overlay {
-              position: absolute;
-              z-index: 1000;
-              height: 100%;
-              width: 100%;
-              background-color: rgba(0,0,0,0.75);
-              display: none;
-          }
-          #overlay input {
-              display: block;
-              margin: auto;
-              position: relative;
-              top: 50%;
-              transform: translateY(-50%);
-          }
-          #terminal {
-              display: block;
-              position: relative;
-              width: 100%;
-              height: 100%;
-          }
-      </style>
-  </head>
-
-  <body onload="connect();">
-      <div id="timer"></div>
-      <div id="overlay"><input type="button" onclick="javascript:connect();" value="reconnect" /></div>
-      <div id="terminal"></div>
-  </body>
-
-</html>