picatz/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Subfinder v2</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
    <script src="https://cdn.rawgit.com/picatz/builderJS/8ca588fc/src/builder.js"></script>
  </head>
  <body>
  </body>
</html>
<script>

var endp = '/api/v1/enumerate';

var b = new Builder();

var resultsCounter = b.span({
  class: "tag",
  text: "0"
})

var searchHeader = b.header({
  class: "card-header",
  html: [
    b.paragraph({
      class: "card-header-title is-large title is-3 is-marginless",
      text: "SubFinder"
    }),
    b.div({
      style: "padding: .75rem",
      class: "tags has-addons is-pulled-right",
      html: [
        b.span({ class: "tag is-info", text: "Results" }),
        resultsCounter
      ]
    })
  ]
})

var searchHeaderInfo = b.div({
  class: "card-content",
  html: b.div({
    class: "content",
    text: "This is a demo application."
  })
})

var readerInterval = null

var searchInput =  b.input({
  id: "searchInput",
  class: "input is-large",
  type: "text",
  placeholder: "google.com",
  events: {
    change: function() {
      if (readerInterval || searchResults.childElementCount > 0) {
        resultsCounter.innerText = 0
        clearInterval(readerInterval);
        searchInputControlWrapper.classList.remove("is-loading")
        while (searchResults.firstChild) {
          searchResults.removeChild(searchResults.firstChild);
        }
      }
      console.log("add loading")
      searchInputControlWrapper.classList.add("is-loading")

      var reader = null
      var internalBuffer = [];

      var opts = {method: 'POST', body: JSON.stringify({'domain': searchInput.value})};

      fetch(endp, opts).then(function(response) {
        reader = response.body.getReader();
      });


      stopButton.disabled = false

      readerInterval = setInterval(function(){
        if (reader) {
          reader.read().then(data => {
            if (data.done) {
              searchInputControlWrapper.classList.remove("is-loading")
              clearInterval(readerInterval);
              readerInterval = null
              return;
            }
            data.value.forEach(function(e) {
              internalBuffer.push(e);
              if (e == 125) {
                var json = JSON.parse(new TextDecoder("utf-8").decode(Uint8Array.from(internalBuffer)));
                newSearchResult(json.Success, json.Type)
                internalBuffer = []; // reset internal raw data buffer
              }
            });
          });
        }
      }, 3000);
    }
  }
})

var searchInputControlWrapper = b.div({
  class: "content control is-large",
  html: searchInput
})

var stopButton = b.button({
  disabled: true,
  style: "border-radius: 0px;",
  class: "button is-danger is-large is-fullwidth",
  text: "STOP",
  events: {
    click: function() {
      stopButton.disabled = false
      searchInputControlWrapper.classList.remove("is-loading")
      clearInterval(readerInterval);
      readerInterval = null
      return;
    }
  }
})

var searchInterface = b.div({
  id: "topInterface",
  class: "card",
  html: [
    searchHeader,
    b.div({
      class: "card-content",
      html: searchInputControlWrapper
    }),
    stopButton
  ]
})

var searchResults = b.div()

function newSearchResult(domain, type) {
  resultsCounter.innerText++
  var result = b.div({
    class: "card",
    html: b.div({
      class: "card-content",
      html: b.div({
        class: "content",
        html: [
          b.hyperlink({ href: "https://" + domain, text: domain, target: "_blank"}),
          b.span({ class: "tag is-info is-pulled-right", text: type })
        ]
      })
    })
  })
  searchResults.append(result)
}

var topNotificationClose = b.button({
    class: "delete",
    events: {
      click: function() {
        console.log("clicked")
        topNotification.hidden = true
      }
    }
})

var topNotification = b.div({
  class: "notification is-info is-marginless",
  style: "border-radius: 0px",
  text: "This is a limited demo application."
})

topNotification.innerHTML += "<br><a target=\"_blank\" href=\"https://github.com/subfinder/research\"><strong>Check out the source behind this application here!</strong></a>"

b.append(topNotificationClose, { to: topNotification })

b.append(topNotification)
b.append(searchInterface)
b.append(searchResults)
</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Subfinder v2</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
	<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
	<script src="https://cdn.rawgit.com/picatz/builderJS/8ca588fc/src/builder.js"></script>
	</head>
	<body>
	</body>
	</html>
	<script>

	var endp = '/api/v1/enumerate';

	var b = new Builder();

	var resultsCounter = b.span({
	class: "tag",
	text: "0"
	})

	var searchHeader = b.header({
	class: "card-header",
	html: [
	b.paragraph({
	class: "card-header-title is-large title is-3 is-marginless",
	text: "SubFinder"
	}),
	b.div({
	style: "padding: .75rem",
	class: "tags has-addons is-pulled-right",
	html: [
	b.span({ class: "tag is-info", text: "Results" }),
	resultsCounter
	]
	})
	]
	})

	var searchHeaderInfo = b.div({
	class: "card-content",
	html: b.div({
	class: "content",
	text: "This is a demo application."
	})
	})

	var readerInterval = null

	var searchInput = b.input({
	id: "searchInput",
	class: "input is-large",
	type: "text",
	placeholder: "google.com",
	events: {
	change: function() {
	if (readerInterval \|\| searchResults.childElementCount > 0) {
	resultsCounter.innerText = 0
	clearInterval(readerInterval);
	searchInputControlWrapper.classList.remove("is-loading")
	while (searchResults.firstChild) {
	searchResults.removeChild(searchResults.firstChild);
	}
	}
	console.log("add loading")
	searchInputControlWrapper.classList.add("is-loading")

	var reader = null
	var internalBuffer = [];

	var opts = {method: 'POST', body: JSON.stringify({'domain': searchInput.value})};

	fetch(endp, opts).then(function(response) {
	reader = response.body.getReader();
	});


	stopButton.disabled = false

	readerInterval = setInterval(function(){
	if (reader) {
	reader.read().then(data => {
	if (data.done) {
	searchInputControlWrapper.classList.remove("is-loading")
	clearInterval(readerInterval);
	readerInterval = null
	return;
	}
	data.value.forEach(function(e) {
	internalBuffer.push(e);
	if (e == 125) {
	var json = JSON.parse(new TextDecoder("utf-8").decode(Uint8Array.from(internalBuffer)));
	newSearchResult(json.Success, json.Type)
	internalBuffer = []; // reset internal raw data buffer
	}
	});
	});
	}
	}, 3000);
	}
	}
	})

	var searchInputControlWrapper = b.div({
	class: "content control is-large",
	html: searchInput
	})

	var stopButton = b.button({
	disabled: true,
	style: "border-radius: 0px;",
	class: "button is-danger is-large is-fullwidth",
	text: "STOP",
	events: {
	click: function() {
	stopButton.disabled = false
	searchInputControlWrapper.classList.remove("is-loading")
	clearInterval(readerInterval);
	readerInterval = null
	return;
	}
	}
	})

	var searchInterface = b.div({
	id: "topInterface",
	class: "card",
	html: [
	searchHeader,
	b.div({
	class: "card-content",
	html: searchInputControlWrapper
	}),
	stopButton
	]
	})

	var searchResults = b.div()

	function newSearchResult(domain, type) {
	resultsCounter.innerText++
	var result = b.div({
	class: "card",
	html: b.div({
	class: "card-content",
	html: b.div({
	class: "content",
	html: [
	b.hyperlink({ href: "https://" + domain, text: domain, target: "_blank"}),
	b.span({ class: "tag is-info is-pulled-right", text: type })
	]
	})
	})
	})
	searchResults.append(result)
	}

	var topNotificationClose = b.button({
	class: "delete",
	events: {
	click: function() {
	console.log("clicked")
	topNotification.hidden = true
	}
	}
	})

	var topNotification = b.div({
	class: "notification is-info is-marginless",
	style: "border-radius: 0px",
	text: "This is a limited demo application."
	})

	topNotification.innerHTML += "<br><a target=\"_blank\" href=\"https://github.com/subfinder/research\"><strong>Check out the source behind this application here!</strong></a>"

	b.append(topNotificationClose, { to: topNotification })

	b.append(topNotification)
	b.append(searchInterface)
	b.append(searchResults)
	</script>