From f4b6ef9919efb61c462a0bb6dd9d504efb2494a3 Mon Sep 17 00:00:00 2001
From: Thomas Lynch <tom@69420.me>
Date: Sun, 16 Aug 2020 05:34:28 +0000
Subject: [PATCH] better affordance on captcha refresh icon

---
 gulp/res/css/style.css | 24 +++++++++++++++---------
 gulp/res/js/captcha.js |  7 +++++--
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css
index a25ea041..41393724 100644
--- a/gulp/res/css/style.css
+++ b/gulp/res/css/style.css
@@ -516,6 +516,19 @@ td, th {
 	display: inline-block;
 }
 
+.spin {
+	animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+ 	100% {
+		transform: rotate(360deg);
+	}
+}
+
 @keyframes pulsate {
 	0% {
 		opacity: 1;
@@ -1029,22 +1042,15 @@ iframe.bypass {
 }
 
 .captcharefresh {
+	line-height: 18px;
 	position: absolute;
-	bottom: 0;
+	bottom: 5px;
 	left: 5px;
 	font-size: 18px;
 	cursor: pointer;
 	color: black;
 }
 
-.captcharefresh {
-	position: absolute;
-	bottom: 0;
-	left: 5px;
-	font-size: 18px;
-	cursor: pointer;
-}
-
 .label, .rlabel {
 	padding: 3px;
 	border: 1px solid var(--box-border-color);
diff --git a/gulp/res/js/captcha.js b/gulp/res/js/captcha.js
index 526340bd..aad76274 100644
--- a/gulp/res/js/captcha.js
+++ b/gulp/res/js/captcha.js
@@ -22,11 +22,12 @@ class CaptchaController {
 		}
 	}
 
-	refreshCaptchas() {
+	refreshCaptchas(e) {
 		if (this.refreshing) {
 			return null;
 		}
 		this.refreshing = true;
+		e && e.target.classList.add('spin');
 		document.cookie = 'captchaid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
 		const xhr = new XMLHttpRequest();
 		xhr.onload = () => {
@@ -37,9 +38,11 @@ class CaptchaController {
 				}
 			}
 			this.refreshing = false;
+			e && e.target.classList.remove('spin');
 		}
 		xhr.onerror = () => {
 			this.refreshing = false;
+			e && e.target.classList.remove('spin');
 		}
 		xhr.open('GET', '/captcha', true);
 		xhr.send(null);
@@ -59,7 +62,7 @@ class CaptchaController {
 		const captchaImg = document.createElement('img');
 		const refreshDiv = document.createElement('div');
 		refreshDiv.classList.add('captcharefresh', 'noselect');
-		refreshDiv.addEventListener('click', () => this.refreshCaptchas(), true);
+		refreshDiv.addEventListener('click', (e) => this.refreshCaptchas(e), true);
 		refreshDiv.textContent = '↻';
 		field.placeholder = 'loading';
 		captchaImg.src = '/captcha';