Attachment #171802 for bug #30088

View | Details | Raw Unified | Return to bug 30088
Collapse All | Expand All




    }
}

#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%;




<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' %]


    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-lg-2">
                [% IF ( OpacPublic ) %]
                    <div id="navigation">
                        [% INCLUDE 'navigation.inc' IsPatronPage=0 %]
                    </div>
                [% END %]
            </div>
            <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">

                    [% 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 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-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>

                                <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">

        </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 %]

Return to bug 30088

Lines 1676-1681 nav { Link Here

(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss (+23 lines)
1676	}	1676	}
1677	}	1677	}
1678		1678
		1679	#password-recovery {
		1680	margin-bottom: 1rem;
		1681	}
		1682
		1683	#password_recovery_options {
		1684	background-color: #F0F3F3;
		1685	display: flex;
		1686	flex-wrap: nowrap;
		1687	gap: 1rem;
		1688	padding: 1rem;
		1689	}
		1690
		1691	#use_login a,
		1692	#use_email a {
		1693	background-color: #FFF;
		1694	border: 1px solid #0074AD;
		1695	border-radius: 10px;
		1696	display: block;
		1697	font-size: 130%;
		1698	padding: 1rem;
		1699	white-space: nowrap;
		1700	}
		1701
1679	#renewcontrols {	1702	#renewcontrols {
1680	float: right;	1703	float: right;
1681	font-size: 66%;	1704	font-size: 66%;

Lines 8-55 Link Here

(-)a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-password-recovery.tt (-52 / +81 lines)
8	<title>Forgotten password recovery &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle \| html %][% ELSE %]Koha online[% END %] catalog</title>	8	<title>Forgotten password recovery &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle \| html %][% ELSE %]Koha online[% END %] catalog</title>
9	[% INCLUDE 'doc-head-close.inc' %]	9	[% INCLUDE 'doc-head-close.inc' %]
10	[% BLOCK cssinclude %][% END %]	10	[% BLOCK cssinclude %][% END %]
11	[% BLOCK jsinclude %]
12	[% IF (new_password) %]
13	[% Asset.js("lib/jquery/plugins/jquery.validate.min.js") \| $raw %]
14	[% PROCESS 'password_check.inc' new_password => 'newPassword', minPasswordLength => minPasswordLength, RequireStrongPassword => RequireStrongPassword %]
15	[% END %]
16	<script>
17	$(function() {
18	$("#CheckAll").click(function(){
19	$("[name=deleteRequest]").attr('checked', true);
20	return false;
21	});
22
23	$("#CheckNone").click(function(){
24	$("[name=deleteRequest]").attr('checked', false);
25	return false;
26	});
27
28	$("select#type").change(function() {
29	$("fieldset#serial, fieldset#book, fieldset#chapter").hide()
30	$("fieldset#" + $(this).val() ).show();
31	});
32	$("#resendmail").click(function() {
33	$("#resendform").submit();
34	});
35	[% IF (new_password) %]
36	$("#mainform").validate({
37	rules: {
38	newPassword: {
39	required: true,
40	password_strong: true,
41	password_no_spaces: true
42	},
43	repeatPassword: {
44	required: true,
45	password_match: true
46	}
47	}
48	});
49	[% END %]
50	});
51	</script>
52	[% END %]
53	</head>	11	</head>
54	[% INCLUDE 'bodytag.inc' bodyid='opac-password-recovery' %]	12	[% INCLUDE 'bodytag.inc' bodyid='opac-password-recovery' %]
55	[% INCLUDE 'masthead.inc' %]	13	[% INCLUDE 'masthead.inc' %]
Lines 63-76 Link Here
63		21
64	<div class="container-fluid">	22	<div class="container-fluid">
65	<div class="row">	23	<div class="row">
66	<div class="col-lg-2">	24	<div class="col-sm-12 col-lg-2">
67	[% IF ( OpacPublic ) %]	25	[% IF ( OpacPublic ) %]
68	<div id="navigation">	26	<div id="navigation">
69	[% INCLUDE 'navigation.inc' IsPatronPage=0 %]	27	[% INCLUDE 'navigation.inc' IsPatronPage=0 %]
70	</div>	28	</div>
71	[% END %]	29	[% END %]
72	</div>	30	</div>
73	<div class="col-6 order-first order-md-first order-lg-2 maincontent">	31	<div class="col-sm-12 col-lg-10 order-first order-lg-2 maincontent">
74	<h1>Forgotten password recovery</h1>	32	<h1>Forgotten password recovery</h1>
75	[% IF (hasError) %]	33	[% IF (hasError) %]
76	<div class="alert alert-warning">	34	<div class="alert alert-warning">
Lines 125-152 Link Here
125	[% IF (! Categories.can_any_reset_password ) %]	83	[% IF (! Categories.can_any_reset_password ) %]
126	<div class="alert alert-info">You can't reset your password.</div>	84	<div class="alert alert-info">You can't reset your password.</div>
127	[% ELSIF (password_recovery) %]	85	[% ELSIF (password_recovery) %]
		86
128	<form action="/cgi-bin/koha/opac-password-recovery.pl" method="post" autocomplete="off">	87	<form action="/cgi-bin/koha/opac-password-recovery.pl" method="post" autocomplete="off">
129	[% INCLUDE 'csrf-token.inc' %]	88	[% INCLUDE 'csrf-token.inc' %]
130	<legend class="sr-only">Password recovery</legend>	89	<legend class="sr-only">Password recovery</legend>
131	<input type="hidden" name="koha_login_context" value="opac" />	90	<input type="hidden" name="koha_login_context" value="opac" />
132	<p>To reset your password, enter your login or your email address.</p>	91	<p>To reset your password, enter your login or your email address.</p>
133	<fieldset class="brief">	92	<fieldset class="brief">
134	<div class="form-group">	93
135	<label for="username">Login:</label>	94	<div id="password_recovery_options">
136	<input class="form-control" type="text" id="username" size="40" name="username" value="[% username \| html %]" />	95	<div id="use_login">
		96	<a href="#"><i class="fa fa-user" aria-hidden="true"></i> I know my login</a>
		97	</div>
		98	<div id="use_email">
		99	<a href="#"><i class="fa fa-envelope" aria-hidden="true"></i> I know my email address</a>
		100	</div>
137	</div>	101	</div>
138		102
139	<div class="form-group">	103	<div class="form-row" id="password_recovery_login" style="display:none">
140	<label for="email">Email:</label>	104	<div class="col-md-6">
141	<input class="form-control" type="text" id="email" size="40" name="email" value="[% email \| html %]" />	105	<label for="username">Login:</label>
		106	<input class="form-control" type="text" id="username" size="40" name="username" value="[% username \| html %]" />
		107	</div>
142	</div>	108	</div>
143		109
144	<fieldset class="action">	110	<div class="form-row" id="password_recovery_email" style="display:none">
		111	<div class="col-md-6">
		112	<label for="email">Email:</label>
		113	<input class="form-control" type="text" id="email" size="40" name="email" value="[% email \| html %]" />
		114	</div>
		115	</div>
		116	<fieldset class="action" id="password_recovery_submit" style="display:none">
145	<input type="hidden" name="op" value="cud-sendEmail" />	117	<input type="hidden" name="op" value="cud-sendEmail" />
146	<input type="submit" value="Submit" class="btn btn-primary" name="sendEmail" />	118	<input type="submit" value="Submit" class="btn btn-primary" name="sendEmail" />
		119	<a href="#" class="password_recovery_cancel cancel">Cancel</a>
147	</fieldset>	120	</fieldset>
		121
148	</fieldset>	122	</fieldset>
149	</form>	123	</form>
		124
		125
		126
150	[% ELSIF (new_password) %]	127	[% ELSIF (new_password) %]
151	[% UNLESS ( errLinkNotValid ) %]	128	[% UNLESS ( errLinkNotValid ) %]
152	<form id="mainform" name="mainform" action="/cgi-bin/koha/opac-password-recovery.pl" method="post" autocomplete="off">	129	<form id="mainform" name="mainform" action="/cgi-bin/koha/opac-password-recovery.pl" method="post" autocomplete="off">
Lines 198-201 Link Here
198	</div><!-- / .row-fluid -->	175	</div><!-- / .row-fluid -->
199	</div><!-- / .container-fluid -->	176	</div><!-- / .container-fluid -->
200	</div><!-- / .main -->	177	</div><!-- / .main -->
		178
201	[% INCLUDE 'opac-bottom.inc' %]	179	[% INCLUDE 'opac-bottom.inc' %]
202	-	180
		181	[% BLOCK jsinclude %]
		182	[% IF (new_password) %]
		183	[% Asset.js("lib/jquery/plugins/jquery.validate.min.js") \| $raw %]
		184	[% PROCESS 'password_check.inc' new_password => 'newPassword', minPasswordLength => minPasswordLength, RequireStrongPassword => RequireStrongPassword %]
		185	[% END %]
		186	<script>
		187	$(document).ready(function(){
		188	[% IF ( errMultipleAccountsForEmail ) %]
		189	$("#password_recovery_login, #password_recovery_email, #password_recovery_submit").show();
		190	$("#password_recovery_options").hide();
		191	[% END %]
		192	$("#resendmail").click(function() {
		193	$("#resendform").submit();
		194	});
		195	[% IF (new_password) %]
		196	$("#mainform").validate({
		197	rules: {
		198	newPassword: {
		199	required: true,
		200	password_strong: true,
		201	password_no_spaces: true
		202	},
		203	repeatPassword: {
		204	required: true,
		205	password_match: true
		206	}
		207	}
		208	});
		209	[% END %]
		210
		211	$("#use_email").on("click", function(){
		212	$("#username").val("");
		213	$("#password_recovery_login").hide();
		214	$("#password_recovery_email, #password_recovery_submit").show();
		215	$("#email").focus();
		216	});
		217
		218	$("#use_login").on("click", function(){
		219	$("#email").val("");
		220	$("#password_recovery_email").hide();
		221	$("#password_recovery_login, #password_recovery_submit").show();
		222	$("#username").focus();
		223	});
		224
		225	$(".password_recovery_cancel").on("click", function(){
		226	$("#password_recovery_options").show();
		227	$("#password_recovery_login, #password_recovery_email, #password_recovery_submit").hide();
		228	});
		229	})
		230	</script>
		231	[% END %]