From 4fe5dfae56bf862551ed3261686df7476005d17d Mon Sep 17 00:00:00 2001 From: tobi Date: Tue, 29 Apr 2025 10:49:10 +0000 Subject: [PATCH] [chore] nollamas: show tick + time taken on completion, use `window.location.replace` (#4088) # Description > If this is a code change, please include a summary of what you've coded, and link to the issue(s) it closes/implements. > > If this is a documentation change, please briefly describe what you've changed and why. Tweak to show time taken when solving nollamas, and use a pulser rather than a spinner to indicate work being done. Also use `window.location.replace` for doing the redirect instead of setting window.location.href: https://developer.mozilla.org/en-US/docs/Web/API/Location/replace ## Checklist Please put an x inside each checkbox to indicate that you've read and followed it: `[ ]` -> `[x]` If this is a documentation change, only the first checkbox must be filled (you can delete the others if you want). - [x] I/we have read the [GoToSocial contribution guidelines](https://codeberg.org/superseriousbusiness/gotosocial/src/branch/main/CONTRIBUTING.md). - [x] I/we have discussed the proposed changes already, either in an issue on the repository, or in the Matrix chat. - [x] I/we have not leveraged AI to create the proposed changes. - [x] I/we have performed a self-review of added code. - [x] I/we have written code that is legible and maintainable by others. - [x] I/we have commented the added code, particularly in hard-to-understand areas. - [ ] I/we have made any necessary changes to documentation. - [ ] I/we have added tests that cover new code. - [ ] I/we have run tests and they pass locally with the changes. - [ ] I/we have run `go fmt ./...` and `golangci-lint run`. Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4088 Co-authored-by: tobi Co-committed-by: tobi --- web/source/css/nollamas.css | 5 +++- web/source/nollamas/index.js | 51 +++++++++++++++++++++++++++++------- 2 files changed, 45 insertions(+), 11 deletions(-) diff --git a/web/source/css/nollamas.css b/web/source/css/nollamas.css index 2f6671a62..5fe861364 100644 --- a/web/source/css/nollamas.css +++ b/web/source/css/nollamas.css @@ -21,7 +21,10 @@ display: flex; flex-direction: column; - .nollamas-solving { + .nollamas-status { + display: flex; + flex-direction: column; align-self: center; + align-items: center; } } diff --git a/web/source/nollamas/index.js b/web/source/nollamas/index.js index 792a5c7f5..b32cae423 100644 --- a/web/source/nollamas/index.js +++ b/web/source/nollamas/index.js @@ -17,6 +17,8 @@ along with this program. If not, see . */ +const explanation = "Your browser is currently solving a proof-of-work challenge designed to deter \"ai\" scrapers. This should take no more than a few seconds..."; + document.addEventListener('DOMContentLoaded', function() { // Get the nollamas section container. const nollamas = document.querySelector(".nollamas"); @@ -25,16 +27,19 @@ document.addEventListener('DOMContentLoaded', function() { // a proof-of-work captcha is being done. const p = this.createElement("p"); p.className = "nollamas-explanation"; - p.appendChild(document.createTextNode("Your browser is currently solving a proof-of-work challenge designed to deter \"ai\" scrapers. This should take no more than a few seconds...")); + p.appendChild(document.createTextNode(explanation)); nollamas.appendChild(p); - // Add a loading spinner as well if motion is allowed. + // Add a loading spinner, but only + // animate it if motion is allowed. + const spinner = document.createElement("i"); + spinner.className = "fa fa-spinner fa-2x fa-fw nollamas-status"; if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) { - const i = this.createElement("i"); - i.className = "fa fa-2x fa-spin fa-refresh nollamas-solving"; - i.setAttribute("title","Solving..."); - nollamas.appendChild(i); + spinner.className += " fa-pulse"; } + spinner.setAttribute("title","Solving..."); + spinner.setAttribute("aria-label", "Solving"); + nollamas.appendChild(spinner); // Read the challenge and difficulty from // data attributes on the nollamas section. @@ -46,6 +51,7 @@ document.addEventListener('DOMContentLoaded', function() { // Prepare the worker with task function. const worker = new Worker("/assets/dist/nollamasworker.js"); + const startTime = performance.now(); worker.postMessage({ challenge: challenge, difficulty: difficulty, @@ -54,10 +60,35 @@ document.addEventListener('DOMContentLoaded', function() { // Set the main worker function. worker.onmessage = function (e) { if (e.data.done) { - console.log('solution found for:', e.data.nonce); // eslint-disable-line no-console - let url = new URL(window.location.href); - url.searchParams.set('nollamas_solution', e.data.nonce); - window.location.href = url.toString(); + const endTime = performance.now(); + const duration = endTime - startTime; + + // Remove spinner and replace it with a tick + // and info about how long it took to solve. + nollamas.removeChild(spinner); + const solutionWrapper = document.createElement("div"); + solutionWrapper.className = "nollamas-status"; + + const tick = document.createElement("i"); + tick.className = "fa fa-check fa-2x fa-fw"; + tick.setAttribute("title","Solved!"); + tick.setAttribute("aria-label", "Solved!"); + solutionWrapper.appendChild(tick); + + const took = document.createElement("span"); + took.appendChild(document.createTextNode(`Solved in ${duration.toString()}ms!`)); + solutionWrapper.appendChild(took); + + nollamas.appendChild(solutionWrapper); + + // Wait for 500ms before redirecting, to give + // visitors a shot at reading the message, but + // not so long that they have to wait unduly. + setTimeout(() => { + let url = new URL(window.location.href); + url.searchParams.set('nollamas_solution', e.data.nonce); + window.location.replace(url.toString()); + }, 500); } }; });