Remove reliance on JavaScript to function

Add LocalStorage to cache message contents
This commit is contained in:
Andrew Dinh 2021-06-08 00:00:01 -07:00
parent c4f3922ef0
commit 5f69ef38dd
Signed by: andrewkdinh
GPG Key ID: 2B557D93C6C08B86
4 changed files with 54 additions and 9 deletions

View File

@ -2,6 +2,8 @@
Extremely simple contact form with a CAPTCHA. Entries are sent to the specified HTTP endpoint. Extremely simple contact form with a CAPTCHA. Entries are sent to the specified HTTP endpoint.
JavaScript is not required to fill out the form, but if it is, then form fields are cached in localStorage.
## Building ## Building
1. Install `git`, `docker`, and `docker-compose` 1. Install `git`, `docker`, and `docker-compose`

View File

@ -29,15 +29,15 @@ def index():
return render_template('message.html', message = "Failed captcha", attempts_left = trials_left) return render_template('message.html', message = "Failed captcha", attempts_left = trials_left)
message = request.form.get('message') message = request.form.get('message')
if ESCAPE_HTML: if ESCAPE_HTML:
message = message.replace("<", "&lt;").replace(">", "&gt;") message = message.replace("<", "&lt;").replace(">", "&gt;").replace("&", "&amp;")
if message != "": if message != "":
requests.post(HTTP_ENDPOINT, data={'subject': 'New Simple Contact message', 'message': message}) requests.post(HTTP_ENDPOINT, data={'subject': 'New Simple Contact message', 'message': message})
return render_template('message.html', message = "Your message was sent successfully") return render_template('message.html', message = "Your message was sent successfully", success=True)
else: else:
raise TypeError("Invalid method") raise TypeError("Invalid method")
except Exception as e: except Exception as e:
print(e) print(e)
return render_template('message.html', message="Error occurred") return render_template('message.html', message="Error occurred"), 500
def captcha_get(max_tries: int = 3, ttl: int = 120, difficulty: str = "medium") -> List[str]: def captcha_get(max_tries: int = 3, ttl: int = 120, difficulty: str = "medium") -> List[str]:
""" Creates a captcha and returns [id, base64 encoded png] """ """ Creates a captcha and returns [id, base64 encoded png] """

View File

@ -20,17 +20,39 @@
<hr /> <hr />
<form action="/" method="POST"> <form action="/" method="POST">
<textarea required id="message" name="message" placeholder="Message"></textarea> <textarea class="formcache" required id="message" name="message" placeholder="Message"></textarea>
<div style="padding: 5px 0"> <div style="padding: 5px 0">
<img src="data:image/png;base64, {{ captcha_png }}" /> <img src="data:image/png;base64, {{ captcha_png }}" />
</div> </div>
<input required type="text" name="captcha-solution" placeholder="CAPTCHA Solution"> <input required type="text" name="captcha-solution" placeholder="CAPTCHA Solution">
<input type="hidden" name="captcha-id" value="{{ captcha_id }}"> <input type="hidden" name="captcha-id" value="{{ captcha_id }}">
<noscript>
<p><em>Works without JavaScript!</em></p>
</noscript>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>
<p>Source code available on <a target="_blank" rel="noopener noreferrer" href="https://github.com/andrewkdinh/simple-contact">GitHub</a> and <a target="_blank" rel="noopener noreferrer" href="https://gitea.andrewkdinh.com/andrewkdinh/simple-contact">Gitea</a></p> <p>Source code available on <a target="_blank" rel="noopener noreferrer" href="https://github.com/andrewkdinh/simple-contact">GitHub</a> and <a target="_blank" rel="noopener noreferrer" href="https://gitea.andrewkdinh.com/andrewkdinh/simple-contact">Gitea</a></p>
<p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL 3.0</a> | Styling with <a target="_blank" rel="noopener noreferrer" href="https://github.com/kognise/water.css">water.css</a></p> <p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL 3.0</a> | Styling with <a target="_blank" rel="noopener noreferrer" href="https://github.com/kognise/water.css">water.css</a></p>
<script>
(function () {
// https://jlelse.blog/dev/form-cache-localstorage
const fc = 'formcache'
Array.from(document.querySelectorAll('form .' + fc)).forEach(element => {
let elementName = fc + '-' + location.pathname + '#' + element.id
// Load from cache
let cached = localStorage.getItem(elementName)
if (cached != null) {
element.value = cached
}
// Auto save to cache
element.addEventListener('input', function () {
localStorage.setItem(elementName, element.value)
})
})
})()
</script>
</body> </body>
</html> </html>

View File

@ -9,16 +9,37 @@
<!-- water.dark.css --> <!-- water.dark.css -->
<style> <style>
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#161f27}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73} body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#161f27}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73}
.script-only {
display: none !important;
}
</style> </style>
</head> </head>
<body> <body>
<p>{{ message }}</p> <p>{{ message }}</p>
{% if attempts_left %} {% if attempts_left %}
<p>You have {{ attempts_left }} attempt(s) left</p> <p class="script-only">You have {{ attempts_left }} attempt(s) left</p>
<input type="button" value="Go back" onclick="window.history.back()" /> <input class="script-only" type="button" value="Go back" onclick="window.history.back()" />
<noscript>
<a href="/">Go back to homepage</a>
</noscript>
{% elif attempts_left == 0 %} {% elif attempts_left == 0 %}
<p>Captcha is now invalid (reload page after you go back)</p> <p>Captcha is now invalid</p>
<input type="button" value="Go back" onclick="window.history.back()" /> <a href="/">Go back to homepage</a>
{% endif %} {% endif %}
{% if success %}
<script>
localStorage.clear();
</script>
{% endif %}
<script>
let elems = document.getElementsByClassName("script-only");
let i;
for (i=0; i < elems.length; i++) {
elems[i].classList.remove("script-only");
}
</script>
</body> </body>
</html> </html>