binproxy 1.0.0

data/views/application.scss

@@ -0,0 +1,335 @@
+@import "common.scss";
+
+* { box-sizing: border-box; }
+html, body, #UIRoot {
+  height: 100%;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.BinProxyUI {
+  display: flex;
+  flex-flow: column nowrap;
+  margin: 0;
+  padding: 5px;
+  height: 100%;
+
+  > .StatusBar {
+    @include blue-box;
+    flex: 0 0 auto;
+    margin: 5px 0;
+    span { margin-right: 1em; }
+    input[type=checkbox] { vertical-align: text-bottom; }
+
+    .websocket        { color: #800000 }
+    .websocket.active { color: #008000 }
+
+    .intercept.ready  { color: #008000 }
+    .intercept.active { color: #800000 }
+  }
+
+  > .MessagesTable {
+    flex: 0 0 auto;
+    z-index: 0;
+
+    // Steal the important stuff from react-bootstrap-table.css, and fix broken
+    // hardcoded values with... better hardcoded values?
+
+    //common table attributes
+    table {
+      width: 100%;
+      th, td, .table-header-column {
+        line-height: 25px;
+        vertical-align: top;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .table-header {
+      position: relative;
+      z-index: 2;
+      overflow: hidden;
+      table {
+        margin-bottom: 0;
+        th {
+          border: 1px solid black;
+          div {
+            padding-left: 1ex;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            background-color: #F2F9FF;
+          }
+        }
+      }
+    }
+
+    .table-container {
+      position: relative;
+      z-index: 1;
+      table {
+        //min-height: 200px;
+        th { visibility: hidden }
+      }
+      margin-top: -29px;
+      overflow-y: scroll;
+      height: 100%;
+    }
+
+    table {
+      border-collapse: collapse;
+      border: 1px solid black;
+      > tbody > tr {
+        > td {
+          background-color: #FFFFFF;
+          border: 1px solid black;
+          padding-left: 2px;
+        }
+        &.selected > td { background-color: #FFFFDD; }
+      }
+    }
+  }
+  > .MessageMeta {
+    flex: 0 0 auto;
+
+    fieldset.msginfo {
+      @include blue-box;
+      display: flex;
+      flex-flow: column nowrap;
+      //flex: 0 0 auto;
+      margin: 0;
+      padding-left: 6px;
+      padding-right: 6px;
+      margin-bottom: 1ex;
+      &.pending {
+        background: $light_green;
+      }
+
+      > .msginfo-fields {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+
+        > .msginfo-fieldgroup {
+          flex-grow: 0;
+          display: flex;
+          flex-flow: row wrap;
+          &:first-child { flex-wrap: nowrap;}
+        }
+
+        input {
+          margin-left: 0.5ex;
+        }
+
+        input[type="text"] {
+          width: 8ex;
+          margin-right: 2ex;
+        }
+      }
+    }
+  }
+  > .MessageContent {
+    flex: 1 1 100%;
+    @include flex;
+
+    > div.react-tabs {
+      flex: 1 1 100%;
+      @include flex;
+      @include blue-box(0);
+
+      > ul[role='tablist'] {
+        flex: 0 0 auto;
+        @include flex(row);
+
+        margin: 2px 2px 0 2px;
+        padding: 0;
+
+        > li[role='tab'] {
+          list-style: none;
+          padding: 6px 12px;
+          @include ui-element;
+
+          border: 1px solid black;
+          border-bottom: none;
+          border-radius: 5px 5px 0 0;
+          //margin-right: 1px;
+
+          &[aria-selected=true] {
+            background: $light_gray;
+            border-bottom: 1px solid $light_gray;
+          }
+        }
+      }
+      > div[role='tabpanel'] {
+        flex: 1 1 auto;
+        @include flex;
+        background: $light_gray;
+        margin: 0 1px 1px 1px;
+        padding: 2px;
+        overflow-y: scroll;
+        align-self: stretch;
+
+
+      }
+    }
+    .EscapedPane {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  input:not([type=button]):disabled, textarea:disabled {
+    background: #F3F3F3;
+  }
+}
+
+[data-validation-error] {
+  background: #FEE;
+}
+
+.ParsedMessage {
+  @include flex;
+
+  .PMTreeNode {
+    @include flex(row);
+    margin-bottom: 5px;
+  }
+
+  .FieldName, {
+    flex: 1 1 10ex;
+    font-weight: bold;
+  }
+
+  .FieldContent {
+    flex: 0 1 100%;
+    @include flex(column);
+    > * { flex: 1 0 auto; }
+  }
+}
+
+
+.HexView {
+  @include flex(row);
+
+  pre:first-child {
+    text-align: right;
+  }
+  pre:last-child {
+    padding-left: 0.5ex;
+  }
+
+  pre, textarea {
+    padding: 2px;
+    font: 13px monospace;
+  }
+  pre {
+    margin-top: 0px;
+    border-top: 0px;
+  }
+  // bug/weirdness workaround
+  div {
+    position: relative;
+    > textarea {
+      height: 100%;
+    }
+  }
+  textarea {
+    height: 100%;
+    margin-top: 0px;
+    border-top: 1px solid black;
+    margin-left: 1ex;
+    margin-right: 1ex;
+  }
+}
+
+
+/*
+  }
+}
+/*
+.headers {
+  border: 1px solid black;
+  flex: 0 0 auto;
+
+  > div {
+  display: inline-block;
+  margin: 0px;
+  text-align: center;
+  font-weight: bold;
+  white-space: nowrap;
+
+  border-left: 1px solid black;
+  &:first-child { border-left: none; }
+
+  }
+}
+
+.scroller {
+  height: 150px;
+  flex: 0 0 auto;
+  overflow-y: scroll;
+  //resize: vertical; need to not break the rest of the layout!
+  border-top: none;
+  outline: 0; //don't highlight when focused;
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    cursor: default;
+
+    tr.pending  { color: #AAAAAA; }
+
+    td { border: 1px solid black; }
+    tr:first-child td { border-top: none; }
+    tr:last-child  td { border-bottom: none; }
+    td:first-child    { border-left: none; }
+    td:last-child     { border-right: none; }
+  }
+}
+
+
+#content_tabs {
+*/
+
+
+
+
+/*
+    //border: none; padding: 0; margin: 0;
+
+    display: flex;
+    flex-flow: column nowrap;
+    ul { flex: 0 0 auto; }
+    > div {
+      height: 100%;
+      flex: 1 1 auto;
+      overflow: auto;
+      //margin: 6px 0 0 0;
+      padding: 1ex;
+    }
+
+    fieldset {
+      margin: 0;
+      width: 100%;
+      @include blue-box;
+    }
+    &.pending fieldset {
+      background: $light_green;
+    }
+
+    label {
+      display: flex;
+      flex-flow: row nowrap;
+      :first-child { min-width: 120px; }
+      :last-child { flex-grow: 1; }
+    }
+
+    input, textarea {
+      &:disabled {
+        background: #EEE;
+      }
+    }
+*/

data/views/common.scss

@@ -0,0 +1,90 @@
+@mixin center-block {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin ui-element {
+  cursor: pointer;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+$light_blue: #F2F9FF;
+$light_green: #F2FFF9;
+$light_gray: #EEE;
+
+@mixin blue-box($pad: 6px) {
+  border: 1px solid black;
+  background: $light_blue;
+  padding-left: $pad;
+  padding-right: $pad;
+}
+
+@mixin flex($dir: column) {
+  display: flex;
+  flex-flow: $dir;
+  //border: 1px dashed red;
+}
+
+//classes from jQueryUI
+@mixin tab-box {
+  ul.ui-tabs-nav {
+    margin: 0px;
+    padding-left: 0px;
+    :focus {
+      outline: none;
+      color: darken($light_blue, 60%);
+    }
+    li {
+      display: inline-block;
+      padding: 2px;
+      border-top: 1px solid black;
+      border-left: 1px solid black;
+      border-right: 1px solid black;
+      a {
+        color: inherit;
+        font-weight: bold;
+        text-decoration: none;
+      }
+      &.ui-tabs-active {
+        background-color: $light_blue;
+        border-bottom: 1px solid $light_blue;
+        margin-bottom: -1px;
+        a {
+        }
+      }
+    }
+  }
+  div.ui-tabs-panel {
+    @include blue-box;
+    margin-top: 0px;
+    padding-bottom: 2px;
+  }
+}
+
+body {
+  background: url('/bright_squares.png'); 
+  font-size: 14px;
+  font-family: 'Helvetica Neue', sans-serif;
+}
+
+div.error {
+  color: red;
+  border: 2px solid red;
+  background: yellow;
+  padding: 2px;
+}
+
+@mixin form-grid($label-width, $input-width) {
+  label {
+    display: inline-block;
+    min-width: $label-width;
+  }
+  input[type="text"],
+  select {
+    display: inline-block;
+    min-width: $input-width;
+  }
+}

data/views/config.haml

@@ -0,0 +1,54 @@
+:ruby
+  presets = {
+    'Generic Text'    => 'PlainText',
+    'Generic Binary'  => 'RawMessage' ,
+    'DNS (TCP)'       => 'Dns::TcpPacket' ,
+    'HTTP (Text)'     => 'DumbHttp::Message',
+    'HTTP (Binary)'   => 'DumbHttp::BinMessage',
+  }
+  opt_fields = {
+    lhost: 'Proxy Host',
+    lport: 'Proxy Port',
+    dhost: 'Destination Host',
+    dport: 'Destination Port',
+    class_name: 'Parser Class Name',
+    class_file: 'Parser Class File (optional)'
+  }
+%html
+  %head
+    %meta(charset="UTF-8")
+    %title Custom Protocol Proxy Configuration
+    %link(rel="stylesheet" type="text/css" media="all" href="/config.css")
+  %body
+    %h1 Proxy Configuration
+    %div.main
+      - if defined? err_msg and !err_msg.nil?
+        %div.error= err_msg
+      %form.grid(action="/config" method='post')
+        %div
+          %label(for="preset")
+            %b Preset Classes
+          %select(id="preset_selector")
+            %option
+            - presets.each do |k,v|
+              %option(value=v)= k
+          :javascript
+            var ps = document.getElementById('preset_selector');
+            ps.onchange = function() {
+              document.getElementById('config_class_name').value = ps.value;
+              document.getElementById('config_class_file').value = '';
+            }
+        %hr
+        - opt_fields.each do |k, name|
+          %div
+            %label(for="config_#{k}")= name
+            %input(id="config_#{k}" name=k value="#{opt_vals[k]}")
+        %div
+          %label
+          %input(type="submit" value="Update")
+      %p
+        Configuration for UDP, SSL, debugging, and other options is still to-do.
+        Please use command line flags for now.
+      %p
+        Note: Changing host/port options when UDP flag is specified is
+        currently broken; please restart BinProxy to change UDP host/port.