3 files changed, 31 insertions, 0 deletions
diff --git a/static/css/main.css b/static/css/main.css
index a524db34..32afdeb8 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -153,6 +153,22 @@ nav > ul > li {
     display: none;
 }
 
+#captcha {
+    display: flex;
+    flex-direction: row;
+}
+
+#captcha > img:nth-child(1) {
+    height: 60px;
+    margin-right: 10px;
+}
+
+#captcha > img:nth-child(2) {
+    height: 30px;
+    transform: translateY(15px);
+    cursor: pointer;
+}
+
 /* Optimize for phones */
 @media only screen and (max-width: 480px) {
     body {
diff --git a/static/images/icons/button_refresh.jpeg b/static/images/icons/button_refresh.jpeg
new file mode 100644
index 00000000..1d6b5567
--- /dev/null
+++ b/static/images/icons/button_refresh.jpeg
diff --git a/static/js/captcha.js b/static/js/captcha.js
new file mode 100644
index 00000000..93be88da
--- /dev/null
+++ b/static/js/captcha.js
@@ -0,0 +1,15 @@
+const refreshCaptchaButton = document.getElementById('refresh_captcha');
+
+refreshCaptchaButton.addEventListener('click', function() {
+    const refreshCaptchaURl = refreshCaptchaButton.getAttribute('data-refresh-captcha-url');
+
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', refreshCaptchaURl, true);
+    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+    xhr.onload = function() {
+        const data = JSON.parse(this.responseText);
+        const captchaImage = document.getElementById('captcha_image');
+        captchaImage.src = data['captcha'];
+    }
+    xhr.send();
+});