Add onionshare CLI to cli folder, move GUI to desktop folder, and start refactoring it to work with briefcase

cli/onionshare_cli/resources/static/css/style.css

@@ -0,0 +1,393 @@
+.clearfix:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+
+body {
+  margin: 0;
+  font-family: Helvetica, sans-serif;
+}
+
+.d-flex {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background: #fcfcfc;
+  background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+  padding: 0.8rem;
+}
+
+header .logo {
+  vertical-align: middle;
+  width: 45px;
+  height: 45px;
+}
+
+header h1 {
+  display: inline-block;
+  margin: 0 0 0 0.5rem;
+  vertical-align: middle;
+  font-weight: normal;
+  font-size: 1.5rem;
+  color: #666666;
+}
+
+header .information {
+  font-size: 1rem;
+}
+
+.button {
+  color: #ffffff;
+  background-color: #4e064f;
+  padding: 10px;
+  border: 0;
+  border-radius: 5px;
+  text-decoration: none;
+  margin-left: 1rem;
+  cursor: pointer;
+}
+
+a.button:visited {
+  color: #ffffff;
+}
+
+.close-button {
+  color: #ffffff;
+  background-color: #c90c0c;
+  padding: 10px;
+  border: 0;
+  border-radius: 5px;
+  text-decoration: none;
+  margin-left: 1rem;
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+
+ul.breadcrumbs {
+  display: block;
+  list-style: none;
+  margin: 10px 0;
+  padding: 0;
+}
+
+ul.breadcrumbs li {
+  display: inline-block;
+  list-style: none;
+  margin: 0;
+  padding: 5px;
+  color: #999999;
+}
+
+ul.breadcrumbs li span.sep {
+  padding-left: 5px;
+}
+
+ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited {
+  color: #666666;
+  border-bottom: 1px solid #666666;
+}
+
+.file-list {
+  width: 100%;
+  margin: 0 auto;
+  border-collapse: collapse;
+}
+
+.file-list .heading {
+  text-align: left;
+  text-transform: uppercase;
+  font-weight: normal;
+  color: #666666;
+  padding: 0.5rem;
+}
+
+.file-list div.d-flex {
+  border-bottom: 1px solid #e0e0e0;
+  justify-content: flex-start;
+}
+
+.file-list div.d-flex div {
+  white-space: nowrap;
+  padding: 0.5rem 0.8rem 0.5rem 0.8rem;
+}
+
+.file-list div.d-flex div img {
+  vertical-align: middle;
+  margin-right: 0.5rem;
+}
+
+.file-list div.d-flex div:last-child {
+  padding-right: 0.8rem;
+  flex-basis: 0;
+  flex-grow: 1;
+}
+
+.file-list div.d-flex div:first-child {
+  flex-basis: 0;
+  flex-grow: 2;
+}
+
+@media (max-width: 950px) {
+  .file-list div.d-flex div:last-child {
+    flex-basis: auto;
+    flex-grow: 0;
+  }
+}
+
+@media (max-width: 655px) {
+  .file-list div.d-flex {
+    display: block;
+  }
+  .file-list div.d-flex span {
+    max-width: 100%;
+    word-break: break-all;
+    white-space: normal;
+  }
+  .file-list div.d-flex #size-header {
+    display: none;
+  }
+  .file-list div.d-flex div:last-child {
+    padding-left: 3.5rem;
+    font-size: 0.85rem;
+    padding-top: 0;
+  }
+  header .information {
+    padding: 1rem 0;
+  }
+}
+
+.chat-container {
+  display: flex;
+  font-family: monospace;
+}
+
+.chat-users {
+  width: 20%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  overflow: auto;
+  background: #f2f2f2;
+  margin: 1rem 0 1rem 1rem;
+}
+
+.chat-users .editable-username {
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+}
+
+.chat-users .editable-username input {
+  font-family: monospace;
+  font-size: 1em;
+}
+
+.chat-users .editable-username #username-error {
+  color: #c90c0c;
+  margin: 0.5rem;
+}
+
+.chat-users #user-list li {
+  margin-bottom: 1em;
+}
+
+.chat-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin: 1rem 1rem 0 1rem;
+  height: calc(100vh - (65px + 2em));
+}
+
+.chat-wrapper #chat {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  flex: 1;
+  overflow: auto;
+  background: #f2f2f2;
+  padding: 0 1rem;
+}
+
+.chat-wrapper .status {
+  font-style: italic;
+  font-size: 0.8em;
+  color: #666666;
+}
+
+.chat-wrapper .username {
+  font-weight: bold;
+  display: block;
+}
+.chat-wrapper .message {
+  font-weight: normal;
+  display: block;
+  margin-bottom: 0.3em;
+}
+
+.chat-wrapper .chat-form {
+  display: block;
+  margin: 0.2rem 1rem 1rem 0;
+  padding: -0.5em;
+}
+
+.chat-wrapper input#new-message {
+  height: 100%;
+  width: 100%;
+  font-family: monospace;
+  font-size: 1em;
+}
+
+@media (max-width: 992px) {
+  .chat-users .editable-username {
+    display: block;
+  }
+
+  .chat-users input#username {
+    width: 90%;
+  }
+}
+
+.no-js {
+  display: none;
+}
+
+.upload-wrapper {
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  text-align: center;
+}
+
+.upload-wrapper img.logo {
+  width: 120px;
+  height: 120px;
+}
+
+.upload-wrapper .upload-header {
+  font-size: 30px;
+  font-weight: normal;
+  color: #666666;
+  margin: 0 0 10px 0;
+}
+
+.upload-wrapper .upload-description {
+  color: #666666;
+  margin: 0 0 20px 0;
+}
+
+div#uploads {
+  width: 800px;
+  max-width: 90%;
+  margin: 0 auto;
+}
+
+div#uploads .upload {
+  border: 1px solid #DDDDDD;
+  margin: 20px 0;
+  padding: 10px;
+  text-align: left;
+}
+
+div#uploads .upload .upload-filename {
+  font-weight: bold;
+  font-family: monospace;
+  font-size: 1.1em;
+  margin-bottom: 5px;
+}
+
+div#uploads .upload .upload-status {
+  color: #999999;
+  font-size: 0.9em;
+  margin-bottom: 5px;
+}
+
+div#uploads .upload input.cancel {
+	color: #d0011b;
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0px;
+	cursor: pointer;
+	font-family: sans-serif;
+	font-size: 12px;
+	text-decoration: none;
+  display: inline-block;
+  float:right;
+}
+
+div#uploads .upload progress {
+  width: 100%;
+  height: 20px;
+}
+
+ul.flashes {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 800px;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+ul.flashes li {
+  margin: 0 0 5px 0;
+  padding: 5px;
+  list-style: none;
+  text-align: center;
+  word-break: break-word;
+}
+
+li.error {
+  color: #d0011b;
+}
+
+li.info {
+  color: #5fa416;
+}
+
+.closed-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+.info {
+  text-align: center;
+}
+
+.info img {
+  width: 120px;
+  height: 120px;
+}
+
+.info .info-header {
+  font-size: 30px;
+  font-weight: normal;
+  color: #666666;
+  margin: 0 0 10px 0;
+}
+
+.info .info-description {
+  color: #666666;
+  margin: 0 0 20px 0;
+}
+
+a {
+  text-decoration: none;
+  color: #1c1ca0;
+}
+
+a:visited {
+  color: #601ca0;
+}

cli/onionshare_cli/resources/static/js/chat.js

@@ -0,0 +1,165 @@
+$(function () {
+  $(document).ready(function () {
+    $('.chat-container').removeClass('no-js');
+    var socket = io.connect('http://' + document.domain + ':' + location.port + '/chat');
+
+    // Store current username received from app context
+    var current_username = $('#username').val();
+
+    // On browser connect, emit a socket event to be added to 
+    // room and assigned random username
+    socket.on('connect', function () {
+      socket.emit('joined', {});
+    });
+
+    // Triggered on any status change by any user, such as some
+    // user joined, or changed username, or left, etc.
+    socket.on('status', function (data) {
+      addMessageToRoom(data, current_username, 'status');
+      console.log(data, current_username);
+    });
+
+    // Triggered when message is received from a user. Even when sent
+    // by self, it get triggered after the server sends back the emit.
+    socket.on('message', function (data) {
+      addMessageToRoom(data, current_username, 'chat');
+      console.log(data, current_username);
+    });
+
+    // Triggered when disconnected either by server stop or timeout
+    socket.on('disconnect', function (data) {
+      addMessageToRoom({ 'msg': 'The chat server is disconnected.' }, current_username, 'status');
+    })
+    socket.on('connect_error', function (error) {
+      console.log("error");
+    })
+
+    // Trigger new message on enter or click of send message button.
+    $('#new-message').on('keypress', function (e) {
+      var code = e.keyCode || e.which;
+      if (code == 13) {
+        emitMessage(socket);
+      }
+    });
+
+    // Keep buttons disabled unless changed or not empty
+    $('#username').on('keyup', function (event) {
+      if ($('#username').val() !== '' && $('#username').val() !== current_username) {
+        if (event.keyCode == 13) {
+          current_username = updateUsername(socket) || current_username;
+        }
+      }
+    });
+
+    // Show warning of losing data
+    $(window).on('beforeunload', function (e) {
+      e.preventDefault();
+      e.returnValue = '';
+      return '';
+    });
+  });
+});
+
+var addMessageToRoom = function (data, current_username, messageType) {
+  var scrollDiff = getScrollDiffBefore();
+  if (messageType === 'status') {
+    addStatusMessage(data.msg);
+    if (data.connected_users) {
+      addUserList(data.connected_users, current_username);
+    }
+  } else if (messageType === 'chat') {
+    addChatMessage(data.username, data.msg)
+  }
+  scrollBottomMaybe(scrollDiff);
+}
+
+var emitMessage = function (socket) {
+  var text = $('#new-message').val();
+  $('#new-message').val('');
+  $('#chat').scrollTop($('#chat')[0].scrollHeight);
+  socket.emit('text', { msg: text });
+}
+
+var updateUsername = function (socket) {
+  var username = $('#username').val();
+  if (!checkUsernameExists(username)) {
+    socket.emit('update_username', { username: username });
+    $.ajax({
+      method: 'POST',
+      url: `http://${document.domain}:${location.port}/update-session-username`,
+      contentType: 'application/json',
+      dataType: 'json',
+      data: JSON.stringify({ 'username': username })
+    }).done(function (response) {
+      console.log(response);
+    });
+    return username;
+  }
+  return false;
+}
+
+/************************************/
+/********* Util Functions ***********/
+/************************************/
+
+var createUserListHTML = function (connected_users, current_user) {
+  var userListHTML = '';
+  connected_users.sort();
+  connected_users.forEach(function (username) {
+    if (username !== current_user) {
+      userListHTML += `<li>${sanitizeHTML(username)}</li>`;
+    }
+  });
+  return userListHTML;
+}
+
+var checkUsernameExists = function (username) {
+  $('#username-error').text('');
+  var userMatches = $('#user-list li').filter(function () {
+    return $(this).text() === username;
+  });
+  if (userMatches.length) {
+    $('#username-error').text('User with that username exists!');
+    return true;
+  }
+  return false;
+}
+
+var getScrollDiffBefore = function () {
+  return $('#chat').scrollTop() - ($('#chat')[0].scrollHeight - $('#chat')[0].offsetHeight);
+}
+
+var scrollBottomMaybe = function (scrollDiff) {
+  // Scrolls to bottom if the user is scrolled at bottom
+  // if the user has scrolled upp, it wont scroll at bottom.
+  // Note: when a user themselves send a message, it will still
+  // scroll to the bottom even if they had scrolled up before.
+  if (scrollDiff > 0) {
+    $('#chat').scrollTop($('#chat')[0].scrollHeight);
+  }
+}
+
+var addStatusMessage = function (message) {
+  $('#chat').append(
+    `<p class="status">${sanitizeHTML(message)}</p>`
+  );
+}
+
+var addChatMessage = function (username, message) {
+  $('#chat').append(`<p><span class="username">${sanitizeHTML(username)}</span><span class="message">${sanitizeHTML(message)}</span></p>`);
+}
+
+var addUserList = function (connected_users, current_username) {
+  $('#user-list').html(
+    createUserListHTML(
+      connected_users,
+      current_username
+    )
+  );
+}
+
+var sanitizeHTML = function (str) {
+  var temp = document.createElement('span');
+  temp.textContent = str;
+  return temp.innerHTML;
+};

cli/onionshare_cli/resources/static/js/receive.js

@@ -0,0 +1,130 @@
+$(function(){
+  // Add a flash message
+  var flash = function(category, message) {
+    $('#flashes').append($('<li>').addClass(category).text(message));
+  };
+
+  var scriptSrc = document.getElementById('receive-script').src;
+  var staticImgPath = scriptSrc.substr(0, scriptSrc.lastIndexOf( '/' )+1).replace('js', 'img');
+
+  // Intercept submitting the form
+  $('#send').submit(function(event){
+    event.preventDefault();
+
+    // Create form data, and list of filenames
+    var files = $('#file-select').get(0).files;
+    var filenames = [];
+    var formData = new FormData();
+    for(var i = 0; i < files.length; i++) {
+      var file = files[i];
+      filenames.push(file.name);
+      formData.append('file[]', file, file.name);
+    }
+
+    // Reset the upload form
+    $('#send').get(0).reset();
+
+    // Don't use jQuery for ajax request, because the upload progress event doesn't
+    // have access to the the XMLHttpRequest object
+    var ajax = new XMLHttpRequest();
+
+    ajax.upload.addEventListener('progress', function(event){
+      // Update progress bar for this specific upload
+      if(event.lengthComputable) {
+        $('progress', ajax.$upload_div).attr({
+          value: event.loaded,
+          max: event.total,
+        });
+      }
+
+      // If it's finished sending all data to the first Tor node, remove cancel button
+      // and update the status
+      if(event.loaded == event.total) {
+        $('.cancel', ajax.$upload_div).remove();
+        $('.upload-status', ajax.$upload_div).html('<img src="' + staticImgPath + '/ajax.gif" alt="" /> Waiting for data to finish traversing Tor network ...');
+      }
+    }, false);
+
+    ajax.addEventListener('load', function(event){
+      // Remove the upload div
+      ajax.$upload_div.remove();
+
+      // Parse response
+      try {
+        var response = JSON.parse(ajax.response);
+
+        // The 'new_body' response replaces the whole HTML document and ends
+        if('new_body' in response) {
+          $('body').html(response['new_body']);
+          return;
+        }
+
+        // Show error flashes
+        if('error_flashes' in response) {
+          for(var i=0; i<response['error_flashes'].length; i++) {
+            flash('error', response['error_flashes'][i]);
+          }
+        }
+
+        // Show info flashes
+        if('info_flashes' in response) {
+          for(var i=0; i<response['info_flashes'].length; i++) {
+            flash('info', response['info_flashes'][i]);
+          }
+        }
+      } catch(e) {
+        flash('error', 'Invalid response from server: '+data);
+      }
+    }, false);
+
+    ajax.addEventListener('error', function(event){
+      flash('error', 'Error uploading: '+filenames.join(', '));
+
+      // Remove the upload div
+      ajax.$upload_div.remove()
+    }, false);
+
+    ajax.addEventListener('abort', function(event){
+      flash('error', 'Upload aborted: '+filenames.join(', '));
+    }, false);
+
+    // Make the upload div
+
+    /*  The DOM for an upload looks something like this:
+    <div class="upload">
+      <div class="upload-meta">
+        <input class="cancel" type="button" value="Cancel" />
+        <div class="upload-filename">educational-video.mp4, secret-plans.pdf</div>
+        <div class="upload-status">Sending to first Tor node ...</div>
+      </div>
+      <progress value="25" max="100"></progress>
+    </div> */
+    var $progress = $('<progress>').attr({ value: '0', max: 100 });
+    var $cancel_button = $('<input>').addClass('cancel').attr({ type: 'button', value: 'Cancel' });
+    var $upload_filename = $('<div>').addClass('upload-filename').text(filenames.join(', '));
+    var $upload_status = $('<div>').addClass('upload-status').text('Sending data to initial Tor node ...');
+
+    var $upload_div = $('<div>')
+      .addClass('upload')
+      .append(
+        $('<div>').addClass('upload-meta')
+          .append($cancel_button)
+          .append($upload_filename)
+          .append($upload_status)
+      )
+      .append($progress);
+
+    $cancel_button.click(function(){
+      // Abort the upload, and remove the upload div
+      ajax.abort();
+      $upload_div.remove()
+    });
+
+    ajax.$upload_div = $upload_div;
+    $('#uploads').append($upload_div);
+
+    // Send the request
+    ajax.open('POST', '/upload-ajax', true);
+    ajax.send(formData);
+  });
+});

cli/onionshare_cli/resources/static/js/send.js

@@ -0,0 +1,75 @@
+// Function to convert human-readable sizes back to bytes, for sorting
+function unhumanize(text) {
+  var powers = {'b': 0, 'k': 1, 'm': 2, 'g': 3, 't': 4};
+  var regex = /(\d+(?:\.\d+)?)\s?(B|K|M|G|T)?/i;
+  var res = regex.exec(text);
+  if(res[2] === undefined) {
+    // Account for alphabetical words (file/dir names)
+    return text;
+  } else {
+    return res[1] * Math.pow(1024, powers[res[2].toLowerCase()]);
+  }
+}
+function sortTable(n) {
+  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+  table = document.getElementById("file-list");
+  switching = true;
+  // Set the sorting direction to ascending:
+  dir = "asc";
+  /* Make a loop that will continue until
+    no switching has been done: */
+  while (switching) {
+    // Start by saying: no switching is done:
+    switching = false;
+    rows = table.getElementsByTagName("TR");
+    /* Loop through all table rows (except the
+      first, which contains table headers): */
+    for (i = 1; i < (rows.length - 1); i++) {
+      // Start by saying there should be no switching:
+      shouldSwitch = false;
+      /* Get the two elements you want to compare,
+        one from current row and one from the next: */
+      x = rows[i].getElementsByTagName("TD")[n];
+      y = rows[i + 1].getElementsByTagName("TD")[n];
+      /* Check if the two rows should switch place,
+      based on the direction, asc or desc: */
+      if (dir == "asc") {
+          if (unhumanize(x.innerHTML.toLowerCase()) > unhumanize(y.innerHTML.toLowerCase())) {
+            // If so, mark as a switch and break the loop:
+            shouldSwitch= true;
+            break;
+          }
+      } else if (dir == "desc") {
+        if (unhumanize(x.innerHTML.toLowerCase()) < unhumanize(y.innerHTML.toLowerCase())) {
+          // If so, mark as a switch and break the loop:
+          shouldSwitch= true;
+          break;
+        }
+      }
+    }
+    if (shouldSwitch) {
+      /* If a switch has been marked, make the switch
+      and mark that a switch has been done: */
+      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+      switching = true;
+      // Each time a switch is done, increase this count by 1:
+      switchcount ++;
+    } else {
+      /* If no switching has been done AND the direction is "asc",
+      set the direction to "desc" and run the while loop again. */
+      if (switchcount == 0 && dir == "asc") {
+        dir = "desc";
+        switching = true;
+      }
+    }
+  }
+}
+
+
+// Set click handlers
+document.getElementById("filename-header").addEventListener("click", function(){
+  sortTable(0);
+});
+document.getElementById("size-header").addEventListener("click", function(){
+  sortTable(1);
+});

cli/onionshare_cli/resources/templates/401.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>OnionShare: 401 Unauthorized Access</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1"> 
+  <link href="{{ static_url_path }}/img/favicon.ico" rel="icon" type="image/x-icon" />
+  <link rel="stylesheet" rel="subresource" type="text/css" href="{{ static_url_path }}/css/style.css" media="all">
+</head>
+
+<body>
+  <div class="info-wrapper">
+    <div class="info">
+      <p><img class="logo" src="{{ static_url_path }}/img/logo_large.png" title="OnionShare"></p>
+      <p class="info-header">401 Unauthorized Access</p>
+    </div>
+  </div>
+</body>
+
+</html>

cli/onionshare_cli/resources/templates/403.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>OnionShare: 403 Forbidden</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1"> 
+  <link href="{{ static_url_path }}/img/favicon.ico" rel="icon" type="image/x-icon" />
+  <link rel="stylesheet" rel="subresource" type="text/css" href="{{ static_url_path }}/css/style.css" media="all">
+</head>
+
+<body>
+  <div class="info-wrapper">
+    <div class="info">
+      <p><img class="logo" src="{{ static_url_path }}/img/logo_large.png" title="OnionShare"></p>
+      <p class="info-header">You are not allowed to perform that action at this time.</p>
+    </div>
+  </div>
+</body>
+
+</html>

cli/onionshare_cli/resources/templates/404.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>OnionShare: 404 Not Found</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1"> 
+  <link href="{{ static_url_path }}/img/favicon.ico" rel="icon" type="image/x-icon">
+  <link rel="stylesheet" rel="subresource" type="text/css" href="{{ static_url_path }}/css/style.css" media="all">
+</head>
+
+<body>
+  <div class="info-wrapper">
+    <div class="info">
+      <p><img class="logo" src="{{ static_url_path }}/img/logo_large.png" title="OnionShare"></p>
+      <p class="info-header">404 Not Found</p>
+    </div>
+  </div>
+</body>
+
+</html>

cli/onionshare_cli/resources/templates/405.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>OnionShare: 405 Method Not Allowed</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1"> 
+  <link href="{{ static_url_path }}/img/favicon.ico" rel="icon" type="image/x-icon">
+  <link rel="stylesheet" rel="subresource" type="text/css" href="{{ static_url_path }}/css/style.css" media="all">
+</head>
+
+<body>
+  <div class="info-wrapper">
+    <div class="info">
+      <p><img class="logo" src="{{ static_url_path }}/img/logo_large.png" title="OnionShare"></p>
+      <p class="info-header">405 Method Not Allowed</p>
+    </div>
+  </div>
+</body>
+
+</html>

cli/onionshare_cli/resources/templates/chat.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>OnionShare</title>
+  <link href="{{ static_url_path }}/img/favicon.ico" rel="icon" type="image/x-icon">
+  <link rel="stylesheet" rel="subresource" type="text/css" href="{{ static_url_path }}/css/style.css" media="all">
+</head>
+
+<body>
+
+  <header class="clearfix">
+    <img class="logo" src="{{ static_url_path }}/img/logo.png" title="OnionShare">
+    <h1>OnionShare</h1>
+  </header>
+  <noscript>
+    <p>
+      Chat <b>requires JavaScript</b>, so you must set your Tor Browser security
+      level to <b>Safer</b> or <b>Standard</b> to join.
+    </p>
+  </noscript>
+
+  <div class="chat-container no-js">
+    <div class="chat-users">
+      <div class="editable-username">
+        <input id="username" value="{{ username }}" />
+        <p id="username-error"></p>
+      </div>
+      <ul id="user-list">
+      </ul>
+    </div>
+    <div class="chat-wrapper">
+      <div id="chat"></div>
+
+      <div class="chat-form">
+        <input type="text" id="new-message" name="new-message" placeholder="Type your message" />
+      </div>
+
+    </div>
+  </div>
+  <script src="{{ static_url_path }}/js/jquery-3.5.1.min.js"></script>
+  <script src="{{ static_url_path }}/js/socket.io.min.js"></script>
+  <script async src="{{ static_url_path }}/js/chat.js"></script>
+</body>
+
+</html>

cli/onionshare_cli/resources/templates/denied.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>OnionShare</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1"> 
+  <link href="{{ static_url_path }}/img/favicon.ico" rel="icon" type="image/x-icon" />
+</head>
+
+<body>
+  <p>OnionShare download in progress</p>
+</body>
+
+</html>

cli/onionshare_cli/resources/templates/listing.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+ <head>
+    <title>OnionShare</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1"> 
+    <link href="{{ static_url_path }}/img/favicon.ico" rel="icon" type="image/x-icon" />
+    <link href="{{ static_url_path }}/css/style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+
+    <header class="clearfix">
+      <img class="logo" src="{{ static_url_path }}/img/logo.png" title="OnionShare">
+      <h1>OnionShare</h1>
+    </header>
+
+    {% if breadcrumbs %}
+      <ul class="breadcrumbs">
+        {% for breadcrumb in breadcrumbs %}<li><a href="{{ breadcrumb[1] }}">{{ breadcrumb[0] }}</a> <span class="sep">&#8227;</span></li>{% endfor %}<li>{{ breadcrumbs_leaf }}</li>
+      </ul>
+    {% endif %}
+
+    <table class="file-list" id="file-list">
+      <tr>
+        <th id="filename-header">Filename</th>
+        <th id="size-header">Size</th>
+        <th></th>
+      </tr>
+
+      {% for info in dirs %}
+      <tr>
+        <td>
+          <img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_folder.png" />
+          <a href="{{ info.basename }}">
+            {{ info.basename }}
+          </a>
+        </td>
+        <td>&mdash;</td>
+      </tr>
+      {% endfor %}
+
+      {% for info in files %}
+      <tr>
+        <td>
+          <img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_file.png" />
+          <a href="{{ info.basename }}">
+            {{ info.basename }}
+          </a>
+        </td>
+        <td>{{ info.size_human }}</td>
+      </tr>
+      {% endfor %}
+    </table>
+  </body>
+</html>

cli/onionshare_cli/resources/templates/receive.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+    <title>OnionShare</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1"> 
+    <link href="{{ static_url_path }}/img/favicon.ico" rel="icon" type="image/x-icon">
+    <link rel="stylesheet" rel="subresource" type="text/css" href="{{ static_url_path }}/css/style.css" media="all">
+  </head>
+  <body>
+
+    <header class="clearfix">
+        <img class="logo" src="{{ static_url_path }}/img/logo.png" title="OnionShare">
+        <h1>OnionShare</h1>
+    </header>
+
+    <div class="upload-wrapper">
+      <p><img class="logo" src="{{ static_url_path }}/img/logo_large.png" title="OnionShare"></p>
+
+      <p class="upload-header">Send Files</p>
+      <p class="upload-description">Select the files you want to send, then click "Send Files"...</p>
+
+      <div id="uploads"></div>
+
+      <div>
+        <ul id="flashes" class="flashes">
+          {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+              {% for category, message in messages %}
+                <li class="{{ category }}">{{ message }}</li>
+              {% endfor %}
+            {% endif %}
+          {% endwith %}
+        </ul>
+      </div>
+
+      <form id="send" method="post" enctype="multipart/form-data" action="/upload">
+         <p><input type="file" id="file-select" name="file[]" multiple /></p>
+         <p><button type="submit" id="send-button" class="button">Send Files</button></p>
+      </form>
+
+    </div>
+    <script src="{{ static_url_path }}/js/jquery-3.5.1.min.js"></script>
+    <script async src="{{ static_url_path }}/js/receive.js" id="receive-script"></script>
+  </body>
+</html>

cli/onionshare_cli/resources/templates/send.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>OnionShare</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1"> 
+  <link href="{{ static_url_path }}/img/favicon.ico" rel="icon" type="image/x-icon">
+  <link rel="stylesheet" rel="subresource" type="text/css" href="{{ static_url_path }}/css/style.css" media="all">
+  <meta name="onionshare-filename" content="{{ filename }}">
+  <meta name="onionshare-filesize" content="{{ filesize }}">
+</head>
+
+<body>
+
+  <header class="d-flex">
+    <div class="logo-container">
+      <img class="logo" src="{{ static_url_path }}/img/logo.png" title="OnionShare">
+      <h1>OnionShare</h1>
+    </div>
+    <div class="information d-flex">
+      <div>Total size: <strong>{{ filesize_human }}</strong> {% if is_zipped %} (compressed){% endif %}</div>
+      <a class="button" href='/download'>Download Files</a>
+    </div>
+  </header>
+
+  {% if breadcrumbs %}
+      <ul class="breadcrumbs">
+        {% for breadcrumb in breadcrumbs %}<li><a href="{{ breadcrumb[1] }}">{{ breadcrumb[0] }}</a> <span class="sep">&#8227;</span></li>{% endfor %}<li>{{ breadcrumbs_leaf }}</li>
+      </ul>
+    {% endif %}
+
+  <div class="file-list" id="file-list">
+    <div class="d-flex">
+      <div id="filename-header" class="heading">Filename</div>
+      <div id="size-header" class="heading">Size</div>
+    </div>
+    {% for info in dirs %}
+    <div class="d-flex">
+      <div>
+        <img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_folder.png" />
+        <a href="{{ info.basename }}">
+          <span>{{ info.basename }}</span>
+        </a>
+      </div>
+      <div>&mdash;</div>
+    </div>
+    {% endfor %}
+
+    {% for info in files %}
+    <div class="d-flex">
+      <div>
+        <img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_file.png" />
+        {% if download_individual_files %}
+        <a href="{{ info.basename }}">
+          <span>{{ info.basename }}</span>
+        </a>
+        {% else %}
+        <span>{{ info.basename }}</span>
+        {% endif %}
+      </div>
+      <div>{{ info.size_human }}</div>
+    </div>
+    {% endfor %}
+  </div>
+  <script async src="{{ static_url_path }}/js/send.js" charset="utf-8"></script>
+</body>
+
+</html>

cli/onionshare_cli/resources/templates/thankyou.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>OnionShare is closed</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1"> 
+  <link href="{{ static_url_path }}/img/favicon.ico" rel="icon" type="image/x-icon">
+  <link rel="stylesheet" rel="subresource" type="text/css" href="{{ static_url_path }}/css/style.css" media="all">
+</head>
+
+<body>
+  <header class="clearfix">
+    <img class="logo" src="{{ static_url_path }}/img/logo.png" title="OnionShare">
+    <h1>OnionShare</h1>
+  </header>
+
+  <div class="info-wrapper">
+    <div class="info">
+      <p><img class="logo" src="{{ static_url_path }}/img/logo_large.png" title="OnionShare"></p>
+      <p class="info-header">Thank you for using OnionShare</p>
+      <p class="info-description">You may now close this window.</p>
+    </div>
+  </div>
+</body>
+
+</html>

cli/onionshare_cli/resources/torrc_template

@@ -0,0 +1,8 @@
+DataDirectory {{data_directory}}
+SocksPort {{socks_port}}
+CookieAuthentication 1
+CookieAuthFile {{cookie_auth_file}}
+AvoidDiskWrites 1
+Log notice stdout
+GeoIPFile {{geo_ip_file}}
+GeoIPv6File {{geo_ipv6_file}}

cli/onionshare_cli/resources/torrc_template-meek_lite_amazon

@@ -0,0 +1,2 @@
+Bridge meek_lite 0.0.2.0:2 B9E7141C594AF25699E0079C1F0146F409495296 url=https://d2cly7j4zqgua7.cloudfront.net/ front=a0.awsstatic.com
+UseBridges 1

cli/onionshare_cli/resources/torrc_template-meek_lite_azure

@@ -0,0 +1,2 @@
+Bridge meek_lite 0.0.2.0:3 97700DFE9F483596DDA6264C4D7DF7641E1E39CE url=https://meek.azureedge.net/ front=ajax.aspnetcdn.com
+UseBridges 1

cli/onionshare_cli/resources/torrc_template-obfs4

@@ -0,0 +1,27 @@
+Bridge obfs4 154.35.22.10:80 8FB9F4319E89E5C6223052AA525A192AFBC85D55 cert=GGGS1TX4R81m3r0HBl79wKy1OtPPNR2CZUIrHjkRg65Vc2VR8fOyo64f9kmT1UAFG7j0HQ iat-mode=0
+Bridge obfs4 83.212.101.3:50002 A09D536DD1752D542E1FBB3C9CE4449D51298239 cert=lPRQ/MXdD1t5SRZ9MquYQNT9m5DV757jtdXdlePmRCudUU9CFUOX1Tm7/meFSyPOsud7Cw iat-mode=0
+Bridge obfs4 109.105.109.165:10527 8DFCD8FB3285E855F5A55EDDA35696C743ABFC4E cert=Bvg/itxeL4TWKLP6N1MaQzSOC6tcRIBv6q57DYAZc3b2AzuM+/TfB7mqTFEfXILCjEwzVA iat-mode=1
+Bridge obfs4 154.35.22.11:80 A832D176ECD5C7C6B58825AE22FC4C90FA249637 cert=YPbQqXPiqTUBfjGFLpm9JYEFTBvnzEJDKJxXG5Sxzrr/v2qrhGU4Jls9lHjLAhqpXaEfZw iat-mode=0
+Bridge obfs4 37.218.245.14:38224 D9A82D2F9C2F65A18407B1D2B764F130847F8B5D cert=bjRaMrr1BRiAW8IE9U5z27fQaYgOhX1UCmOpg2pFpoMvo6ZgQMzLsaTzzQNTlm7hNcb+Sg iat-mode=0
+Bridge obfs4 154.35.22.9:443 C73ADBAC8ADFDBF0FC0F3F4E8091C0107D093716 cert=gEGKc5WN/bSjFa6UkG9hOcft1tuK+cV8hbZ0H6cqXiMPLqSbCh2Q3PHe5OOr6oMVORhoJA iat-mode=0
+Bridge obfs4 154.35.22.11:443 A832D176ECD5C7C6B58825AE22FC4C90FA249637 cert=YPbQqXPiqTUBfjGFLpm9JYEFTBvnzEJDKJxXG5Sxzrr/v2qrhGU4Jls9lHjLAhqpXaEfZw iat-mode=0
+Bridge obfs4 154.35.22.13:443 FE7840FE1E21FE0A0639ED176EDA00A3ECA1E34D cert=fKnzxr+m+jWXXQGCaXe4f2gGoPXMzbL+bTBbXMYXuK0tMotd+nXyS33y2mONZWU29l81CA iat-mode=0
+Bridge obfs4 154.35.22.10:443 8FB9F4319E89E5C6223052AA525A192AFBC85D55 cert=GGGS1TX4R81m3r0HBl79wKy1OtPPNR2CZUIrHjkRg65Vc2VR8fOyo64f9kmT1UAFG7j0HQ iat-mode=0
+Bridge obfs4 154.35.22.9:80 C73ADBAC8ADFDBF0FC0F3F4E8091C0107D093716 cert=gEGKc5WN/bSjFa6UkG9hOcft1tuK+cV8hbZ0H6cqXiMPLqSbCh2Q3PHe5OOr6oMVORhoJA iat-mode=0
+Bridge obfs4 192.99.11.54:443 7B126FAB960E5AC6A629C729434FF84FB5074EC2 cert=VW5f8+IBUWpPFxF+rsiVy2wXkyTQG7vEd+rHeN2jV5LIDNu8wMNEOqZXPwHdwMVEBdqXEw iat-mode=0
+Bridge obfs4 154.35.22.13:16815 FE7840FE1E21FE0A0639ED176EDA00A3ECA1E34D cert=fKnzxr+m+jWXXQGCaXe4f2gGoPXMzbL+bTBbXMYXuK0tMotd+nXyS33y2mONZWU29l81CA iat-mode=0
+Bridge obfs4 85.31.186.26:443 91A6354697E6B02A386312F68D82CF86824D3606 cert=PBwr+S8JTVZo6MPdHnkTwXJPILWADLqfMGoVvhZClMq/Urndyd42BwX9YFJHZnBB3H0XCw iat-mode=0
+Bridge obfs4 38.229.33.83:80 0BAC39417268B96B9F514E7F63FA6FBA1A788955 cert=VwEFpk9F/UN9JED7XpG1XOjm/O8ZCXK80oPecgWnNDZDv5pdkhq1OpbAH0wNqOT6H6BmRQ iat-mode=1
+Bridge obfs4 154.35.22.11:16488 A832D176ECD5C7C6B58825AE22FC4C90FA249637 cert=YPbQqXPiqTUBfjGFLpm9JYEFTBvnzEJDKJxXG5Sxzrr/v2qrhGU4Jls9lHjLAhqpXaEfZw iat-mode=0
+Bridge obfs4 154.35.22.9:12166 C73ADBAC8ADFDBF0FC0F3F4E8091C0107D093716 cert=gEGKc5WN/bSjFa6UkG9hOcft1tuK+cV8hbZ0H6cqXiMPLqSbCh2Q3PHe5OOr6oMVORhoJA iat-mode=0
+Bridge obfs4 109.105.109.147:13764 BBB28DF0F201E706BE564EFE690FE9577DD8386D cert=KfMQN/tNMFdda61hMgpiMI7pbwU1T+wxjTulYnfw+4sgvG0zSH7N7fwT10BI8MUdAD7iJA iat-mode=2
+Bridge obfs4 38.229.1.78:80 C8CBDB2464FC9804A69531437BCF2BE31FDD2EE4 cert=Hmyfd2ev46gGY7NoVxA9ngrPF2zCZtzskRTzoWXbxNkzeVnGFPWmrTtILRyqCTjHR+s9dg iat-mode=1
+Bridge obfs4 [2001:470:b381:bfff:216:3eff:fe23:d6c3]:443 CDF2E852BF539B82BD10E27E9115A31734E378C2 cert=qUVQ0srL1JI/vO6V6m/24anYXiJD3QP2HgzUKQtQ7GRqqUvs7P+tG43RtAqdhLOALP7DJQ iat-mode=1
+Bridge obfs4 85.17.30.79:443 FC259A04A328A07FED1413E9FC6526530D9FD87A cert=RutxZlu8BtyP+y0NX7bAVD41+J/qXNhHUrKjFkRSdiBAhIHIQLhKQ2HxESAKZprn/lR3KA iat-mode=0
+Bridge obfs4 154.35.22.10:15937 8FB9F4319E89E5C6223052AA525A192AFBC85D55 cert=GGGS1TX4R81m3r0HBl79wKy1OtPPNR2CZUIrHjkRg65Vc2VR8fOyo64f9kmT1UAFG7j0HQ iat-mode=0
+Bridge obfs4 37.218.240.34:40035 88CD36D45A35271963EF82E511C8827A24730913 cert=eGXYfWODcgqIdPJ+rRupg4GGvVGfh25FWaIXZkit206OSngsp7GAIiGIXOJJROMxEqFKJg iat-mode=1
+Bridge obfs4 192.95.36.142:443 CDF2E852BF539B82BD10E27E9115A31734E378C2 cert=qUVQ0srL1JI/vO6V6m/24anYXiJD3QP2HgzUKQtQ7GRqqUvs7P+tG43RtAqdhLOALP7DJQ iat-mode=1
+Bridge obfs4 154.35.22.12:80 00DC6C4FA49A65BD1472993CF6730D54F11E0DBB cert=N86E9hKXXXVz6G7w2z8wFfhIDztDAzZ/3poxVePHEYjbKDWzjkRDccFMAnhK75fc65pYSg iat-mode=0
+Bridge obfs4 85.31.186.98:443 011F2599C0E9B27EE74B353155E244813763C3E5 cert=ayq0XzCwhpdysn5o0EyDUbmSOx3X/oTEbzDMvczHOdBJKlvIdHHLJGkZARtT4dcBFArPPg iat-mode=0
+Bridge obfs4 154.35.22.12:4304 00DC6C4FA49A65BD1472993CF6730D54F11E0DBB cert=N86E9hKXXXVz6G7w2z8wFfhIDztDAzZ/3poxVePHEYjbKDWzjkRDccFMAnhK75fc65pYSg iat-mode=0
+UseBridges 1

cli/onionshare_cli/resources/version.txt

@@ -0,0 +1 @@
+0.1.3