Attachment 167642 Details for Bug 30088 – Bug 30088: Improve forgotten password form to be more obvious that only one field must be filled out

[patch] Bug 30088: Improve forgotten password form to be more obvious that only one field must be filled out

Bug-30088-Improve-forgotten-password-form-to-be-mo.patch (text/plain), 10.63 KB, created by Owen Leonard on 2024-06-11 17:39:09 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2024-06-11 17:39:09 UTC

Size: 10.63 KB

patch

obsolete

>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>
>     </div>
> </div>
>+
> [% 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

Actions: View | Diff | Splinter Review

Attachments on bug 30088: 134654 | 167642 | 167675 | 170146 | 171802 | 171803