Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use AJAX call to display form submission output #13

Open
wants to merge 14 commits into
base: hacktober
Choose a base branch
from
5 changes: 4 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# hashr
### _Password hash generator_

List of all PHP hashing algorithms ([hash_algos() function](http://php.net/manual/en/function.hash-algos.php)) and their result for an input string.
List of all PHP hashing algorithms ([hash_algos() function](http://php.net/manual/en/function.hash-algos.php)) and their result (and hashing time) for an input string.


#### The app is deployed on heroku: [Hashr](https://hashr-php.herokuapp.com/)
35 changes: 35 additions & 0 deletions ajax.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}

ready(function() {

document.hashform.addEventListener('submit', function(e) {
e.preventDefault();

var unhashedString = document.getElementById('unhashed-string'),
data = 'input=' + unhashedString.value.trim();

var request = new XMLHttpRequest();
request.open('POST', 'calculate_hashes.php', true);

request.onload = function() {

if (this.status >= 200 && this.status < 400) {

var hashesContainer = document.getElementById('hashes-container');

if (hashesContainer) {
hashesContainer.innerHTML = this.response;
}
}
};

request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
});
});
13 changes: 13 additions & 0 deletions calculate_hashes.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<?php
require("function.php");

foreach (hash_algos() as $i => $algo)
{
?>
<div class="hash_algo">
<p class="algo"><b><?= $algo; ?></b></p>
<p>Hash: <span style="font-family: Nunito"><?= $hashes[$algo]; ?></span></p>
<small>Execution time: <?= number_format($hashTime[$algo] * 1000000000, 0); ?> nanoseconds</small>
</div>
<?php
}
13 changes: 9 additions & 4 deletions function.php
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
<?php
$hashes = array();
if(isset($_POST['submit']) && !empty($_POST['input'])){
$hashTime = array();
if(isset($_POST['input']) && !empty($_POST['input'])){
foreach (hash_algos() as $algo) {
array_push($hashes, hash($algo, $_POST['input']));

$start = microtime(true);
$hash = hash($algo, $_POST['input']);
$timeElapsed = microtime(true) - $start;
$hashTime[$algo] = $timeElapsed;
$hashes[$algo] = $hash;
}
}
?>
}
29 changes: 12 additions & 17 deletions index.php
Original file line number Diff line number Diff line change
@@ -1,42 +1,37 @@
<?php
require_once("function.php");
?>
<!DOCTYPE html>
<html>
<head>
<title>Hashr</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="ajax.js" type="text/javascript"></script>
<style type="text/css">
html{
font-family: Orbitron;
background: black;
color: #1be71b;
}
.hashes {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
grid-auto-columns: minmax(20%, 30%);
}

.hash_algo{
border: 0.5px solid rgb(44, 140, 49);
padding: 10px;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Nunito|Orbitron" rel="stylesheet">
</head>
<body>
<form method="post">
<form name="hashform" method="post" onsubmit="return validateform()">
<label>Input string: </label>
<input type="text" name="input">
<input id="unhashed-string" type="text" name="input" required oninvalid="this.setCustomValidity('You can\'t leave the input string blank!')">
<input type="submit" name="submit" value="Hash!">
</form>
<br>
<div class="hashes">
<?php
foreach (hash_algos() as $i => $algo) { ?>
<div class="hash_algo">
<p class="algo"><b><?= $algo; ?></b></p>
<p>Hash: <span style="font-family: Nunito"><?= $hashes[$i]; ?></span></p>
</div>
<?php }
?>
</div>
<div id="hashes-container" class="hashes"></div>

</body>
</html>