From 102479524a8a6d4f03242a9740ac632c9469aaee Mon Sep 17 00:00:00 2001
From: Rebecca Shoptaw <rebecca.shoptaw@gmail.com>
Date: Fri, 19 Jul 2024 10:38:26 -0400
Subject: [PATCH 1/7] Add loading and success indicators for backend checks

---
 openlibrary/i18n/messages.pot                | 25 ++++++++++++++++----
 openlibrary/plugins/openlibrary/js/signup.js | 18 ++++++++++++++
 openlibrary/templates/account/create.html    |  9 +++++--
 static/css/page-signup.less                  |  4 ++--
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot
index 99b61dde84c..5d95836dd7e 100644
--- a/openlibrary/i18n/messages.pot
+++ b/openlibrary/i18n/messages.pot
@@ -1033,6 +1033,27 @@ msgid ""
 "nonprofit Internet Archive"
 msgstr ""
 
+#: account/create.html
+msgid "Toggle Password Visibility"
+msgstr ""
+
+#: account/create.html books/custom_carousel.html
+#: search/work_search_facets.html
+msgid "Loading..."
+msgstr ""
+
+#: account/create.html
+msgid "Loading spinner"
+msgstr ""
+
+#: account/create.html type/author/view.html
+msgid "Success!"
+msgstr ""
+
+#: account/create.html
+msgid "Checkmark"
+msgstr ""
+
 #: account/create.html
 msgid "Your URL"
 msgstr ""
@@ -6479,10 +6500,6 @@ msgstr ""
 msgid "Refresh the page?"
 msgstr ""
 
-#: type/author/view.html
-msgid "Success!"
-msgstr ""
-
 #: type/author/view.html
 msgid ""
 "OK. The merge is in motion. <i>It will take <u>a few minutes to "
diff --git a/openlibrary/plugins/openlibrary/js/signup.js b/openlibrary/plugins/openlibrary/js/signup.js
index 782f801d3cb..32fdfa70683 100644
--- a/openlibrary/plugins/openlibrary/js/signup.js
+++ b/openlibrary/plugins/openlibrary/js/signup.js
@@ -3,6 +3,10 @@ import { debounce } from './nonjquery_utils.js';
 export function initSignupForm() {
     const signupForm = document.querySelector('form[name=signup]');
     const i18nStrings = JSON.parse(signupForm.dataset.i18n);
+    const emailLoadingIcon = $('.ol-signup-form__input--email .ol-signup-form__icon--loading');
+    const usernameLoadingIcon = $('.ol-signup-form__input--username .ol-signup-form__icon--loading');
+    const emailSuccessIcon = $('.ol-signup-form__input--email .ol-signup-form__icon--success');
+    const usernameSuccessIcon = $('.ol-signup-form__input--username .ol-signup-form__icon--success');
 
     // Keep the same with openlibrary/plugins/upstream/forms.py
     const VALID_EMAIL_RE = /^.*@.*\..*$/;
@@ -60,6 +64,8 @@ export function initSignupForm() {
     function validateUsername() {
         const value_username = $('#username').val();
 
+        usernameSuccessIcon.hide();
+
         if (value_username === '') {
             clearError('#username', '#usernameMessage');
             return;
@@ -76,14 +82,19 @@ export function initSignupForm() {
         }
 
         clearError('#username', '#usernameMessage');
+        usernameLoadingIcon.show();
 
         $.ajax({
             url: '/account/validate',
             data: { username: value_username },
             type: 'GET',
             success: function(errors) {
+                usernameLoadingIcon.hide();
+
                 if (errors.username) {
                     renderError('#username', '#usernameMessage', errors.username);
+                } else {
+                    usernameSuccessIcon.show();
                 }
             }
         });
@@ -92,6 +103,8 @@ export function initSignupForm() {
     function validateEmail() {
         const value_email = $('#emailAddr').val();
 
+        emailSuccessIcon.hide();
+
         if (value_email === '') {
             clearError('#emailAddr', '#emailAddrMessage');
             return;
@@ -103,14 +116,19 @@ export function initSignupForm() {
         }
 
         clearError('#emailAddr', '#emailAddrMessage');
+        emailLoadingIcon.show();
 
         $.ajax({
             url: '/account/validate',
             data: { email: value_email },
             type: 'GET',
             success: function(errors) {
+                emailLoadingIcon.hide();
+
                 if (errors.email) {
                     renderError('#emailAddr', '#emailAddrMessage', errors.email);
+                } else {
+                    emailSuccessIcon.show();
                 }
             }
         });
diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html
index 29828a0f954..cfe02696bb0 100644
--- a/openlibrary/templates/account/create.html
+++ b/openlibrary/templates/account/create.html
@@ -29,7 +29,7 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
         $# :param openlibrary.utils.form.Input input:
         $# :param str suffix: HTML to put at bottom of input
 
-        <div class="formElement ol-signup-form__input">
+        <div class="formElement ol-signup-form__input ol-signup-form__input--$(input.id)">
             <div class="label">
                 <label for="$input.id">$input.description</label>
                 $if input.help:
@@ -39,9 +39,14 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
             <div class="input">
                 $:input.render()
                 $if input.name == 'password':
-                    <a href="javascript:;" class="password-visibility-toggle">
+                    <a href="javascript:;" class="password-visibility-toggle ol-signup-form__icon-wrap">
                         <img src="/static/images/icons/icon_eye-closed.svg" title="$_('Toggle Password Visibility')" alt="$_('Toggle Password Visibility')"/>
                     </a>
+                $else:
+                    <a href="javascript:;" class="ol-signup-form__icon-wrap">
+                        <img src="/static/images/ajax-loader.gif" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading spinner')" style="display:none"/>
+                        <img src="/static/images/icons/icon_check.png" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Checkmark')" style="display:none" />
+                    </a>
             </div>
             <div class="ol-signup-form__suffix">$:suffix</div>
         </div>
diff --git a/static/css/page-signup.less b/static/css/page-signup.less
index 873f6dfb326..c76be8f2eb9 100644
--- a/static/css/page-signup.less
+++ b/static/css/page-signup.less
@@ -167,13 +167,13 @@
     position: relative;
   }
 
-  .password-visibility-toggle {
+  .ol-signup-form__icon-wrap {
     position: absolute;
     right: 5px;
     top: 5px;
   }
 
-  .password-visibility-toggle > img {
+  .ol-signup-form__icon-wrap > img {
     width: 22px;
     height: 22px;
   }

From da8b679f8eff594a9ade8151b33e751bb3528f92 Mon Sep 17 00:00:00 2001
From: Rebecca Shoptaw <rebecca.shoptaw@gmail.com>
Date: Fri, 9 Aug 2024 15:18:03 -0400
Subject: [PATCH 2/7] Adjust email input class name to match HTML

---
 openlibrary/plugins/openlibrary/js/signup.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/openlibrary/plugins/openlibrary/js/signup.js b/openlibrary/plugins/openlibrary/js/signup.js
index 32fdfa70683..5a7056e3c43 100644
--- a/openlibrary/plugins/openlibrary/js/signup.js
+++ b/openlibrary/plugins/openlibrary/js/signup.js
@@ -3,9 +3,9 @@ import { debounce } from './nonjquery_utils.js';
 export function initSignupForm() {
     const signupForm = document.querySelector('form[name=signup]');
     const i18nStrings = JSON.parse(signupForm.dataset.i18n);
-    const emailLoadingIcon = $('.ol-signup-form__input--email .ol-signup-form__icon--loading');
+    const emailLoadingIcon = $('.ol-signup-form__input--emailAddr .ol-signup-form__icon--loading');
     const usernameLoadingIcon = $('.ol-signup-form__input--username .ol-signup-form__icon--loading');
-    const emailSuccessIcon = $('.ol-signup-form__input--email .ol-signup-form__icon--success');
+    const emailSuccessIcon = $('.ol-signup-form__input--emailAddr .ol-signup-form__icon--success');
     const usernameSuccessIcon = $('.ol-signup-form__input--username .ol-signup-form__icon--success');
 
     // Keep the same with openlibrary/plugins/upstream/forms.py

From a711c23c9315cb85d35c111b5eabfdd98194bc5e Mon Sep 17 00:00:00 2001
From: Rebecca Shoptaw <rebecca.shoptaw@gmail.com>
Date: Fri, 9 Aug 2024 15:21:13 -0400
Subject: [PATCH 3/7] Persist error until after API validation checks pass

---
 openlibrary/plugins/openlibrary/js/signup.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/openlibrary/plugins/openlibrary/js/signup.js b/openlibrary/plugins/openlibrary/js/signup.js
index 5a7056e3c43..e3d8f16a31f 100644
--- a/openlibrary/plugins/openlibrary/js/signup.js
+++ b/openlibrary/plugins/openlibrary/js/signup.js
@@ -81,7 +81,6 @@ export function initSignupForm() {
             return;
         }
 
-        clearError('#username', '#usernameMessage');
         usernameLoadingIcon.show();
 
         $.ajax({
@@ -94,6 +93,7 @@ export function initSignupForm() {
                 if (errors.username) {
                     renderError('#username', '#usernameMessage', errors.username);
                 } else {
+                    clearError('#username', '#usernameMessage');
                     usernameSuccessIcon.show();
                 }
             }
@@ -115,7 +115,6 @@ export function initSignupForm() {
             return;
         }
 
-        clearError('#emailAddr', '#emailAddrMessage');
         emailLoadingIcon.show();
 
         $.ajax({
@@ -128,6 +127,7 @@ export function initSignupForm() {
                 if (errors.email) {
                     renderError('#emailAddr', '#emailAddrMessage', errors.email);
                 } else {
+                    clearError('#emailAddr', '#emailAddrMessage');
                     emailSuccessIcon.show();
                 }
             }

From e522dfc1ae9fc7104dd4c5538acac5e56143a2f7 Mon Sep 17 00:00:00 2001
From: Rebecca Shoptaw <rebecca.shoptaw@gmail.com>
Date: Fri, 9 Aug 2024 15:22:53 -0400
Subject: [PATCH 4/7] Make icons not tabbable

---
 openlibrary/templates/account/create.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html
index cfe02696bb0..c54bdd8b07f 100644
--- a/openlibrary/templates/account/create.html
+++ b/openlibrary/templates/account/create.html
@@ -43,10 +43,10 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
                         <img src="/static/images/icons/icon_eye-closed.svg" title="$_('Toggle Password Visibility')" alt="$_('Toggle Password Visibility')"/>
                     </a>
                 $else:
-                    <a href="javascript:;" class="ol-signup-form__icon-wrap">
+                    <div class="ol-signup-form__icon-wrap">
                         <img src="/static/images/ajax-loader.gif" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading spinner')" style="display:none"/>
                         <img src="/static/images/icons/icon_check.png" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Checkmark')" style="display:none" />
-                    </a>
+                    </div>
             </div>
             <div class="ol-signup-form__suffix">$:suffix</div>
         </div>

From e350230474c535ee44abab52ad9d55c52023ab6b Mon Sep 17 00:00:00 2001
From: Rebecca Shoptaw <rebecca.shoptaw@gmail.com>
Date: Fri, 9 Aug 2024 16:14:55 -0400
Subject: [PATCH 5/7] Switch out loading indicator and check mark for new SVGs

---
 openlibrary/i18n/messages.pot             | 12 ++----------
 openlibrary/templates/account/create.html |  4 ++--
 static/images/bubble-loader.svg           |  1 +
 static/images/icons/icon_check-circle.svg |  1 +
 4 files changed, 6 insertions(+), 12 deletions(-)
 create mode 100644 static/images/bubble-loader.svg
 create mode 100644 static/images/icons/icon_check-circle.svg

diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot
index 5d95836dd7e..9856311dbde 100644
--- a/openlibrary/i18n/messages.pot
+++ b/openlibrary/i18n/messages.pot
@@ -429,7 +429,8 @@ msgstr ""
 msgid "Library Explorer"
 msgstr ""
 
-#: books/custom_carousel.html login.html search/work_search_facets.html
+#: account/create.html books/custom_carousel.html login.html
+#: search/work_search_facets.html
 msgid "Loading..."
 msgstr ""
 
@@ -1033,15 +1034,6 @@ msgid ""
 "nonprofit Internet Archive"
 msgstr ""
 
-#: account/create.html
-msgid "Toggle Password Visibility"
-msgstr ""
-
-#: account/create.html books/custom_carousel.html
-#: search/work_search_facets.html
-msgid "Loading..."
-msgstr ""
-
 #: account/create.html
 msgid "Loading spinner"
 msgstr ""
diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html
index c54bdd8b07f..3029dcfb32d 100644
--- a/openlibrary/templates/account/create.html
+++ b/openlibrary/templates/account/create.html
@@ -44,8 +44,8 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
                     </a>
                 $else:
                     <div class="ol-signup-form__icon-wrap">
-                        <img src="/static/images/ajax-loader.gif" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading spinner')" style="display:none"/>
-                        <img src="/static/images/icons/icon_check.png" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Checkmark')" style="display:none" />
+                        <img src="/static/images/bubble-loader.svg" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading spinner')" style="display:none"/>
+                        <img src="/static/images/icons/icon_check-circle.svg" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Checkmark')" style="display:none" />
                     </div>
             </div>
             <div class="ol-signup-form__suffix">$:suffix</div>
diff --git a/static/images/bubble-loader.svg b/static/images/bubble-loader.svg
new file mode 100644
index 00000000000..3dd35191723
--- /dev/null
+++ b/static/images/bubble-loader.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0"><animateTransform attributeName="transform" calcMode="discrete" dur="1.2s" repeatCount="indefinite" type="rotate" values="0 12 12;90 12 12;180 12 12;270 12 12"/><animate attributeName="opacity" dur="0.3s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/></circle><circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0"><animateTransform attributeName="transform" begin="0.1s" calcMode="discrete" dur="1.2s" repeatCount="indefinite" type="rotate" values="30 12 12;120 12 12;210 12 12;300 12 12"/><animate attributeName="opacity" begin="0.1s" dur="0.3s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/></circle><circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0"><animateTransform attributeName="transform" begin="0.2s" calcMode="discrete" dur="1.2s" repeatCount="indefinite" type="rotate" values="60 12 12;150 12 12;240 12 12;330 12 12"/><animate attributeName="opacity" begin="0.2s" dur="0.3s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/></circle></svg>
\ No newline at end of file
diff --git a/static/images/icons/icon_check-circle.svg b/static/images/icons/icon_check-circle.svg
new file mode 100644
index 00000000000..3c1c2b8ca81
--- /dev/null
+++ b/static/images/icons/icon_check-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" viewBox="0 0 256 256"><g fill="hsl(130, 61%, 33%)"><path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity="0.2"/><path d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"/></g></svg>
\ No newline at end of file

From 962e963f2a40279ce79aa93491803d8377d3b1b3 Mon Sep 17 00:00:00 2001
From: Drini Cami <cdrini@gmail.com>
Date: Mon, 30 Sep 2024 21:04:29 +0200
Subject: [PATCH 6/7] Use alt text targetted for screen readers

---
 openlibrary/templates/account/create.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html
index 3029dcfb32d..2db12b20538 100644
--- a/openlibrary/templates/account/create.html
+++ b/openlibrary/templates/account/create.html
@@ -44,8 +44,8 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
                     </a>
                 $else:
                     <div class="ol-signup-form__icon-wrap">
-                        <img src="/static/images/bubble-loader.svg" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading spinner')" style="display:none"/>
-                        <img src="/static/images/icons/icon_check-circle.svg" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Checkmark')" style="display:none" />
+                        <img src="/static/images/bubble-loader.svg" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading...')" style="display:none"/>
+                        <img src="/static/images/icons/icon_check-circle.svg" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Success!')" style="display:none" />
                     </div>
             </div>
             <div class="ol-signup-form__suffix">$:suffix</div>

From ba3aa44f2cfc111f480ea11a052fbe67948139da Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Mon, 30 Sep 2024 19:05:59 +0000
Subject: [PATCH 7/7] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 openlibrary/i18n/messages.pot | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot
index 9856311dbde..12a99a3b7c3 100644
--- a/openlibrary/i18n/messages.pot
+++ b/openlibrary/i18n/messages.pot
@@ -1034,18 +1034,10 @@ msgid ""
 "nonprofit Internet Archive"
 msgstr ""
 
-#: account/create.html
-msgid "Loading spinner"
-msgstr ""
-
 #: account/create.html type/author/view.html
 msgid "Success!"
 msgstr ""
 
-#: account/create.html
-msgid "Checkmark"
-msgstr ""
-
 #: account/create.html
 msgid "Your URL"
 msgstr ""