From 12d4fdbdfe02af0a14be8b4efbdf9c900039066c Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 7 Aug 2024 18:47:02 +0000
Subject: [PATCH] Bug 30088: (follow-up) Improve behavior when email is
 ambiguous

This patch makes a few changes to the way the form appears when you
submit an email which is attached to more than one patron account.

Apply the patch and rebuild the OPAC CSS.

- If you submit an email address which isn't unique, the "enter your
  login or your email address" message is hidden.
- The login and email fields are marked as required.

This patch also changes the behavior of the "I know my..." buttons
so that they change style when clicked.
---
 .../opac-tmpl/bootstrap/css/src/opac.scss     | 22 ++++++++--
 .../en/modules/opac-password-recovery.tt      | 42 ++++++++++++-------
 2 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 4a5c571dc1..b40e15900e 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -825,7 +825,6 @@ th {
         color: #C00;
         display: block;
         font-size: 95%;
-        margin-left: 10rem;
         margin-top: 3px;
     }
 }
@@ -1049,6 +1048,12 @@ fieldset {
             display: block;
             margin-left: 10rem;
         }
+
+        .required_label {
+            &.required {
+                margin-left: 10rem;
+            }
+        }
     }
 
     div {
@@ -1736,6 +1741,12 @@ nav {
     margin-bottom: 1rem;
 }
 
+#password_recovery_login,
+#password_recovery_email,
+#password_recovery_submit {
+    padding: 1rem;
+}
+
 #password_recovery_options {
     background-color: #F0F3F3;
     display: flex;
@@ -1744,8 +1755,8 @@ nav {
     padding: 1rem;
 }
 
-#use_login a,
-#use_email a {
+#use_login,
+#use_email {
     background-color: #FFF;
     border: 1px solid #0074AD;
     border-radius: 10px;
@@ -1753,6 +1764,11 @@ nav {
     font-size: 130%;
     padding: 1rem;
     white-space: nowrap;
+
+    &.select-login-active {
+        background-color: #0074AD;
+        color: #FFF;
+    }
 }
 
 #renewcontrols {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-password-recovery.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-password-recovery.tt
index 442fd03123..f142f657db 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-password-recovery.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-password-recovery.tt
@@ -88,29 +88,39 @@
                             [% INCLUDE 'csrf-token.inc' %]
                             <legend class="sr-only">Password recovery</legend>
                             <input type="hidden" name="koha_login_context" value="opac" />
-                            <p>To reset your password, enter your login or your email address.</p>
+                            [% UNLESS ( errMultipleAccountsForEmail ) %]
+                                <p id="password_recovery_msg">To reset your password, enter your login or your email address.</p>
+                            [% END %]
                             <fieldset class="brief">
 
                                 <div id="password_recovery_options">
-                                    <div id="use_login">
-                                        <a href="#"><i class="fa fa-user" aria-hidden="true"></i> I know my login</a>
-                                    </div>
-                                    <div id="use_email">
-                                        <a href="#"><i class="fa fa-envelope" aria-hidden="true"></i> I know my email address</a>
-                                    </div>
+                                    <a id="use_login" href="#"><i class="fa fa-user" aria-hidden="true"></i> I know my login</a>
+                                    <a id="use_email" href="#"><i class="fa fa-envelope" aria-hidden="true"></i> I know my email address</a>
                                 </div>
 
                                 <div class="form-row" id="password_recovery_login" style="display:none">
                                     <div class="col-md-6">
-                                        <label for="username">Login:</label>
-                                        <input class="form-control" type="text" id="username" size="40" name="username" value="[% username | html %]" />
+                                        [% IF ( errMultipleAccountsForEmail ) %]
+                                            <label for="username" class="required">Login:</label>
+                                            <input class="form-control required" required="required" type="text" id="username" size="40" name="username" value="[% username | html %]" />
+                                            <div class="required_label required">Required</div>
+                                        [% ELSE %]
+                                            <label for="username">Login:</label>
+                                            <input class="form-control" type="text" id="username" size="40" name="username" value="[% username | html %]" />
+                                        [% END %]
                                     </div>
                                 </div>
 
                                 <div class="form-row" id="password_recovery_email" style="display:none">
                                     <div class="col-md-6">
-                                        <label for="email">Email:</label>
-                                        <input class="form-control" type="text" id="email" size="40" name="email" value="[% email | html %]" />
+                                        [% IF ( errMultipleAccountsForEmail ) %]
+                                            <label for="email" class="required">Email:</label>
+                                            <input class="form-control required" required="required" type="text" id="email" size="40" name="email" value="[% email | html %]" />
+                                            <div class="required_label required">Required</div>
+                                        [% ELSE %]
+                                            <label for="email">Email:</label>
+                                            <input class="form-control" type="text" id="email" size="40" name="email" value="[% email | html %]" />
+                                        [% END %]
                                     </div>
                                 </div>
                                 <fieldset class="action" id="password_recovery_submit" style="display:none">
@@ -208,21 +218,25 @@
             [% END %]
 
             $("#use_email").on("click", function(){
+                $("#use_login").removeClass("select-login-active");
+                $(this).addClass("select-login-active");
                 $("#username").val("");
-                $("#password_recovery_login").hide();
+                $("#password_recovery_login, #password_recovery_msg").hide();
                 $("#password_recovery_email, #password_recovery_submit").show();
                 $("#email").focus();
             });
 
             $("#use_login").on("click", function(){
+                $("#use_email").removeClass("select-login-active");
+                $(this).addClass("select-login-active");
                 $("#email").val("");
-                $("#password_recovery_email").hide();
+                $("#password_recovery_email, #password_recovery_msg").hide();
                 $("#password_recovery_login, #password_recovery_submit").show();
                 $("#username").focus();
             });
 
             $(".password_recovery_cancel").on("click", function(){
-                $("#password_recovery_options").show();
+                $("#password_recovery_options, #password_recovery_msg").show();
                 $("#password_recovery_login, #password_recovery_email, #password_recovery_submit").hide();
             });
         })
-- 
2.39.2