From f7cfa2f87ea546ddb7c12caf2d4418acd6390777 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 11 Jun 2024 16:42:37 +0000
Subject: [PATCH] Bug 30088: Improve forgotten password form to be more obvious
 that only one field must be filled out

This patch updates the OPAC's forgotten password form so that the form
fields are initially hidden. The user clicks on "I know my login" or "I
know my email address" to display the relevant form field.

To test, apply the patch and go to Administration to make sure the
"OpacResetPassword" preference is enabled.

- In the OPAC, click the "Forgot your password?" link on the home page.
- Test the two buttons, "I know my login" and "I know my email address."
  Each should display the correct parts of the form.
- Try submitting an email address which has been set to more than one
  patron.
  - You should get an error message, "Account identification with this
    email address only is ambiguous."
  - Both form fields should be visible.

Sponsored-By: Athens County Public Libraries
---
 .../opac-tmpl/bootstrap/css/src/opac.scss     |  23 +++
 .../en/modules/opac-password-recovery.tt      | 132 +++++++++++-------
 2 files changed, 104 insertions(+), 51 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index da3a8c4206..d298b363f7 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -1730,6 +1730,29 @@ nav {
     }
 }
 
+#password-recovery {
+    margin-bottom: 1rem;
+}
+
+#password_recovery_options {
+    background-color: #F0F3F3;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 1rem;
+    padding: 1rem;
+}
+
+#use_login a,
+#use_email a {
+    background-color: #FFF;
+    border: 1px solid #0074AD;
+    border-radius: 10px;
+    display: block;
+    font-size: 130%;
+    padding: 1rem;
+    white-space: nowrap;
+}
+
 #renewcontrols {
     float: right;
     font-size: 66%;
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 f83859599e..442fd03123 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
@@ -8,48 +8,6 @@
 <title>Forgotten password recovery &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% BLOCK cssinclude %][% END %]
-[% BLOCK jsinclude %]
-[% IF (new_password) %]
-    [% Asset.js("lib/jquery/plugins/jquery.validate.min.js") | $raw %]
-    [% PROCESS 'password_check.inc' new_password => 'newPassword', minPasswordLength => minPasswordLength, RequireStrongPassword => RequireStrongPassword %]
-[% END %]
-    <script>
-    $(function() {
-            $("#CheckAll").click(function(){
-                    $("[name=deleteRequest]").attr('checked', true);
-                    return false;
-                });
-
-            $("#CheckNone").click(function(){
-                    $("[name=deleteRequest]").attr('checked', false);
-                    return false;
-                });
-
-            $("select#type").change(function() {
-                $("fieldset#serial, fieldset#book, fieldset#chapter").hide()
-                $("fieldset#" + $(this).val() ).show();
-            });
-            $("#resendmail").click(function() {
-                $("#resendform").submit();
-            });
-        [% IF (new_password) %]
-            $("#mainform").validate({
-                rules: {
-                    newPassword: {
-                        required: true,
-                        password_strong: true,
-                        password_no_spaces: true
-                    },
-                    repeatPassword: {
-                        required: true,
-                        password_match: true
-                    }
-                }
-            });
-        [% END %]
-    });
-    </script>
-[% END %]
 </head>
 [% INCLUDE 'bodytag.inc' bodyid='opac-password-recovery' %]
 [% INCLUDE 'masthead.inc' %]
@@ -63,14 +21,14 @@
 
     <div class="container-fluid">
         <div class="row">
-            <div class="col-lg-2">
+            <div class="col-sm-12 col-lg-2">
                 [% IF ( OpacPublic ) %]
                     <div id="navigation">
                         [% INCLUDE 'navigation.inc' IsPatronPage=0 %]
                     </div>
                 [% END %]
             </div>
-            <div class="col-6 order-first order-md-first order-lg-2 maincontent">
+            <div class="col-sm-12 col-lg-10 order-first order-lg-2 maincontent">
                 <h1>Forgotten password recovery</h1>
                 [% IF (hasError) %]
                     <div class="alert alert-warning">
@@ -125,28 +83,47 @@
                     [% IF (! Categories.can_any_reset_password ) %]
                         <div class="alert alert-info">You can't reset your password.</div>
                     [% ELSIF (password_recovery) %]
+
                         <form action="/cgi-bin/koha/opac-password-recovery.pl" method="post" autocomplete="off">
                             [% 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>
                             <fieldset class="brief">
-                                <div class="form-group">
-                                    <label for="username">Login:</label>
-                                    <input class="form-control" type="text" id="username" size="40" name="username" value="[% username | html %]" />
+
+                                <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>
                                 </div>
 
-                                <div class="form-group">
-                                    <label for="email">Email:</label>
-                                    <input class="form-control" type="text" id="email" size="40" name="email" value="[% email | html %]" />
+                                <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 %]" />
+                                    </div>
                                 </div>
 
-                                <fieldset class="action">
+                                <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 %]" />
+                                    </div>
+                                </div>
+                                <fieldset class="action" id="password_recovery_submit" style="display:none">
                                     <input type="hidden" name="op" value="cud-sendEmail" />
                                     <input type="submit" value="Submit" class="btn btn-primary" name="sendEmail" />
+                                    <a href="#" class="password_recovery_cancel cancel">Cancel</a>
                                 </fieldset>
+
                             </fieldset>
                         </form>
+
+
+
                     [% ELSIF (new_password) %]
                         [% UNLESS ( errLinkNotValid ) %]
                             <form id="mainform" name="mainform" action="/cgi-bin/koha/opac-password-recovery.pl" method="post" autocomplete="off">
@@ -197,4 +174,57 @@
         </div><!-- / .row-fluid -->
     </div><!-- / .container-fluid -->
 </div><!-- / .main -->
+
 [% INCLUDE 'opac-bottom.inc' %]
+
+[% BLOCK jsinclude %]
+    [% IF (new_password) %]
+        [% Asset.js("lib/jquery/plugins/jquery.validate.min.js") | $raw %]
+        [% PROCESS 'password_check.inc' new_password => 'newPassword', minPasswordLength => minPasswordLength, RequireStrongPassword => RequireStrongPassword %]
+    [% END %]
+    <script>
+        $(document).ready(function(){
+            [% IF ( errMultipleAccountsForEmail ) %]
+                $("#password_recovery_login, #password_recovery_email, #password_recovery_submit").show();
+                $("#password_recovery_options").hide();
+            [% END %]
+            $("#resendmail").click(function() {
+                $("#resendform").submit();
+            });
+            [% IF (new_password) %]
+                $("#mainform").validate({
+                    rules: {
+                        newPassword: {
+                            required: true,
+                            password_strong: true,
+                            password_no_spaces: true
+                        },
+                        repeatPassword: {
+                            required: true,
+                            password_match: true
+                        }
+                    }
+                });
+            [% END %]
+
+            $("#use_email").on("click", function(){
+                $("#username").val("");
+                $("#password_recovery_login").hide();
+                $("#password_recovery_email, #password_recovery_submit").show();
+                $("#email").focus();
+            });
+
+            $("#use_login").on("click", function(){
+                $("#email").val("");
+                $("#password_recovery_email").hide();
+                $("#password_recovery_login, #password_recovery_submit").show();
+                $("#username").focus();
+            });
+
+            $(".password_recovery_cancel").on("click", function(){
+                $("#password_recovery_options").show();
+                $("#password_recovery_login, #password_recovery_email, #password_recovery_submit").hide();
+            });
+        })
+    </script>
+[% END %]
-- 
2.39.2