can now use custom path

This commit is contained in:
unurled 2022-09-05 18:41:06 +02:00
parent eb9d276ac4
commit 3f4c835bd1
3 changed files with 78 additions and 17 deletions

View file

@ -16,6 +16,10 @@
<label for="longUrl">Long Url</label>
<input class="bg-coolgray-700 text-emerald-400 focus:border-coolgray-50 rounded-lg" type="text" id="longUrl" placeholder="www.example.com/very-long-url/and/totally/hard-to-remember" name="longUrl">
</div>
<div id="customPathDiv">
<label for="customPath">custom Path</label>
<input class="bg-coolgray-700 text-emerald-400 focus:border-coolgray-50 rounded-lg" type="text" id="customPath" placeholder="cool_path" name="customPath">
</div>
<div class="form-button">
<button type="submit" class="btn-submit hover:bg-red-700 focus:bg-red-700" id="btnSubmit">
Submit
@ -28,6 +32,14 @@
<p id="longUrl"></p>
<a id="shortUrl" class="text-emerald-500" href=""></a>
</div>
<div id="edit">
<br>
<br>
<p class="text-emerald-500">New Url for the site </p>
<a class="text-emerald-500" href="" id="oldLongUrl"></a>
<br>
<a class="text-emerald-500" href="" id="oldShortUrl"></a>
</div>
<script type="module" src="public/js/app.js"></script>
</body>
</html>

View file

@ -24,6 +24,16 @@ async function submitForm(e, form) {
document.getElementById("shortUrl").innerHTML = response.shortUrl
document.getElementById("shortUrl").href = response.shortUrl
document.getElementById("longUrl").innerHTML = "Long Url: " + response.longUrl
if (response.edit) {
console.log("Already have this path, editing.")
}
if (response.old) {
document.getElementById("edit").style.visibility = "visible"
document.getElementById("oldLongUrl").innerHTML = response.old.longUrl
document.getElementById("oldLongUrl").href = response.old.longUrl
document.getElementById("oldShortUrl").innerHTML = response.old.shortUrl
document.getElementById("oldShortUrl").href = response.old.shortUrl
}
}
else
alert(`An error occured.`);
@ -44,8 +54,11 @@ function buildJsonFormData(form) {
}
return jsonFormData;
}
/*--/Functions--*/
document.getElementById("edit").style.visibility = 'hidden'
/*--Event Listeners--*/
const sampleForm = document.querySelector("#form");
if(sampleForm) {