Clicking "Enter" pulls a 404 page

sayhijordy commented 2 years ago

If I click "Enter" inside the text field it goes to a 404 Not Found page. Here's the error that is printing:

NotFoundError: Not Found
    at /var/www/html/dloader/app.js:27:8
    at Layer.handle [as handle_request] (/var/www/html/dloader/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/var/www/html/dloader/node_modules/express/lib/router/index.js:317:13)
    at /var/www/html/dloader/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/var/www/html/dloader/node_modules/express/lib/router/index.js:335:12)
    at next (/var/www/html/dloader/node_modules/express/lib/router/index.js:275:10)
    at /var/www/html/dloader/node_modules/express/lib/router/index.js:635:15
    at next (/var/www/html/dloader/node_modules/express/lib/router/index.js:260:14)
    at Function.handle (/var/www/html/dloader/node_modules/express/lib/router/index.js:174:3)
    at router (/var/www/html/dloader/node_modules/express/lib/router/index.js:47:12)

sayhijordy commented 2 years ago

A temporary fix I used was disabling the "Enter" key from being used in the form by adding

<form onkeydown="return event.key != 'Enter';" method="get" class="form" action="/search">

AhmadIbrahiim commented 2 years ago

I think we can prevent the form from getting submitted with empty text if we set the input field to required

sayhijordy commented 2 years ago

I get the 404 error even if there's a website in the input field and I press enter.

sayhijordy commented 2 years ago

Here's what I did to fix the issue.

views/index.hbs

<!-- partial:index.partial.html -->
<header>
  <div aria-busy="true" id="progress" hidden aria-label="Loading, please wait." role="progressbar"></div>
</header>
<main role="main">
  <img src="https://www.google.com/inbox/assets/images/intro/intro-logo.png" width="100" alt="" />
  <h1>Website Downloader</h1>
  <p>Download all the source code and assets of any website </p>
   <div class="container">
  <div class="row">
    <div class="col-lg-12" style="float: none; margin: 0 auto;">
      <div id="custom-search-input">
    <form onkeydown="return event.key != 'Enter';" method="get" class="form-inline" action="/search">
        <div class="input-group col-md-12">
                <input type="text" class="form-control input-lg" id="website" placeholder="https://www.google.com" />
                <span class="input-group-btn">
                    <button class="btn btn-info btn-lg" id="download" type="button">
                        <i class="glyphicon glyphicon-download"></i>
                    </button>
                </span><br>
              </form>
        </div><br>
          <center><!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/Ahmadibrahiim/Website-downloader" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Ahmadibrahiim/Website-downloader on GitHub">Star</a></center>

      </div>
      <br>
    </div>
  </div>
  <h5 hidden id='nFilesP'>Total Downloaded file: <span  id='nFiles' style="color: red;font-weight: bold">10</span></h5>
  <p  class="log" id='log'></p>
  <button style="display: none" class="btn btn-success">Download website assets</button>
</div>

</main>
<!-- partial -->
<script>
var input = document.getElementById("website");
input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("download").click();
    }
});
</script>

AhmadIbrahiim commented 2 years ago

Can you create a PR of that?

AhmadIbrahiim / Website-downloader

Clicking "Enter" pulls a 404 page #18