Creating User Friendly Customer Login Page (LOGN)
In this episode of Matt’s Musings (episode 2), we’re talking about forgetfulness. Okay, so I’ll admit it, the default functions of the Miva customer log in page are a bit lacking. The forgotten password operation is confusing and there is no built-in way to help with a lost user name.
Well that all changes now. Today I am going to show you how, with a little HTML, JavaScript and the Tool Kit module, you can have a fully functional log in process that just needs your CSS applied. Included are versions for both Miva 5.5 and Miva 5.5 Wombat. Just copy each section and paste it into the appropriate regions of your LOGN page.
Until the next episode, happy coding.
Matt Zimmermann
Miva Merchant
Here is a list of the files you will need: (Right-click download links and choose “Save Link As”)
- jquery.js (1.3.2 or higher) – DOWNLOAD – LINK
- jquery.cookie.js – DOWNLOAD
- jquery.lognSlider.js – DOWNLOAD
- logn_demo.css – DOWNLOAD
- Tool Kit by Emporium Plus – PURCHASE
Page Code
<mvt:item name="html_profile" />
<head>
<title>&mvt:store:name;: Customer Login</title>
<mvt:item name="head" param="head_tag" />
<link type="text/css" href="css/logn_demo.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script> <!-- Using v1.3.2 -->
<script type="text/javascript" src="js/jquery.cookie.js"></script> <!-- Using v1.0 -->
<script type="text/javascript" src="js/jquery.lognSlider.js"></script> <!-- Using v1.5.0 -->
</head>
<body>
<mvt:item name="hdft" param="global_header" />
<div id="logn_left" class="clearfix">
<h2 style="margin-bottom:0.50em;">Create an Account</h2>
<div class="logn_wrappers">
<h3 title="Register Now">Register Now</h3>
Creating an account with &mvt:global:store:name; is optional and give you the following benefits:
<ul>
<li>Express Checkout</li>
<li>Access to Order History</li>
</ul>
<input type="button" value="Register" title="Register" class="input_btn" onclick="location='&mvt:global:secure_sessionurl;Screen=ACAD'" style="float:right;" />
</div>
</div>
<div id="logn_right" class="clearfix">
<h2 style="margin-bottom:0.50em;">Registered Customers</h2>
<div class="logn_wrappers">
<h3>Welcome Back</h3>
To access your account, please enter your user name and password.
<form method="post" action="&mvt:global:secure_sessionurl;Screen=ACLN" id="submit_form">
<input type="hidden" name="Action" value="LOGN" />
<mvt:if expr="g.invUser"><label for="Customer_Login" style="color:#c00;"><strong>User Name:</strong></label><mvt:else><label for="Customer_Login"><strong>User Name:</strong></label></mvt:if><br /><input type="text" size="40" name="Customer_Login" value="&mvte:global:Customer_Login;" style="width:225px;" /><br />
<mvt:if expr="g.invPass"><label for="Customer_Password" style="color:#c00;"><strong>Password:</strong></label><mvt:else><label for="Customer_Password"><strong>Password:</strong></label></mvt:if><br /><input type="password" size="30" name="Customer_Password" style="width:225px;" /><br />
<input type="submit" value="Log In" title="Log In" class="input_btn" style="float:right;" />
</form>
<p>Forgot your user name? <a href="#" title="Click Here" id="show_un">Click Here</a></p>
<p>Forgot your password? <a href="#" title="Click Here" id="show_pw">Click Here</a></p>
</div>
</div>
<br clear="all" />
<div id="hdft_footer"><mvt:item name="hdft" param="footer" /></div>
<mvt:item name="hdft" param="global_footer" />
</body>
</html>
Miva 5.5 Page Header
<mvt:if expr="g.Error_Message_Count">
<mvt:foreach iterator="message" array="global:error_messages">
<mvt:if expr="l.settings:message EQ 'Unknown login'">
<p style="font-weight:bold; color:#c00; margin:0.75em 0;">Invalid User Name.<br />Please confirm and re-enter your user name or click Forgot User Name below.</p>
<mvt:item name="toolkit" param="sassign|invUser|true" />
<mvt:elseif expr="l.settings:message EQ 'Invalid Password'">
<p style="font-weight:bold; color:#c00; margin:0.75em 0;">Invalid Password.<br />Please confirm and re-enter your password or click Forgot Password below.</p>
<mvt:item name="toolkit" param="sassign|invPass|true" />
</mvt:if>
</mvt:foreach>
</mvt:if>
<mvt:if expr="g.email_sent"><p style="font-weight:bold; color:#00a9e0; margin:0.75em 0;">Your user name has been sent to &mvte:global:email_sent;.<br />Please wait a few minutes to check your email and try to log in again.</p></mvt:if>
<mvt:foreach iterator="message" array="messages:information_messages">
<mvt:if expr="l.settings:message EQ 'Your password has been sent'"><p style="font-weight:bold; color:#00a9e0; margin:0.75em 0;">Your password has been sent to your email address.<br />Please wait a few minutes to check your email and try to log in again.</p></mvt:if>
</mvt:foreach>
Miva 5.5 Wombat Page Header
<mvt:if expr="g.Customer_Login_Invalid"> <p style="font-weight:bold; color:#c00; margin:0.75em 0;">Invalid User Name.<br />Please confirm and re-enter your user name or click Forgot User Name below.</p> <mvt:item name="toolkit" param="sassign|invUser|true" /> <mvt:elseif expr="g.Customer_Password_Invalid"> <p style="font-weight:bold; color:#c00; margin:0.75em 0;">Invalid Password.<br />Please confirm and re-enter your password or click Forgot Password below.</p> <mvt:item name="toolkit" param="sassign|invPass|true" /> </mvt:if> <mvt:if expr="g.Error_Messages EQ 'Customer not found'"> <p style="font-weight:bold; color:#c00; margin:0.75em 0;">Invalid Email Address.<br />We were unable to locate an account with that email address.</p> </mvt:if> <mvt:if expr="g.email_sent"><p style="font-weight:bold; color:#00a9e0; margin:0.75em 0;">Your user name has been sent to &mvte:global:email_sent;.<br />Please wait a few minutes to check your email and try to log in again.</p></mvt:if> <mvt:foreach iterator="message" array="messages:information_messages"> <mvt:if expr="l.settings:message EQ 'Your password has been sent'"><p style="font-weight:bold; color:#00a9e0; margin:0.75em 0;">Your password has been sent to your email address.<br />Please wait a few minutes to check your email and try to log in again.</p></mvt:if> </mvt:foreach>
Page Footer
<div class="panelUN" style="clear:both; width:75%; margin:10px auto;"> <h3 style="margin-bottom:0.75em;">Customer User Name Lookup:</h3> <form method="post" action="&mvt:global:secure_sessionurl;" id="fguser_form"> <mvt:item name="toolkit" param="loginlookup" /> <input type="hidden" name="Screen" value="&mvt:global:screen;" /> <input type="hidden" name="Action" value="NEW" /> <input type="hidden" name="charset" value="utf-8" /> <input type="hidden" name="email_subject" value="Your &mvt:global:store:company; User Name" /> <input type="hidden" name="email_message" value="Your &mvt:global:store:company; user name is: %customer_login%. Click on to the link to sign into &mvt:global:store:company;: &mvt:global:secure_sessionurl;?Screen=LOGN" /> Your Email Address: <input type="text" size="40" name="Customer_Email_Lookup" value="&mvte:global:Customer_Email_Lookup;" /> <input type="submit" value="Retrieve User Name" title="Retrieve User Name" id="user_btn" class="input_btn" /> </form> </div> <br clear="all" /> <div class="panelPW" style="clear:both; width:75%; margin:10px auto;"> <h3 style="margin-bottom:0.75em;">Customer Password Lookup:</h3> <form method="post" action="&mvt:global:secure_sessionurl;" id="fgpass_form"> <input type="hidden" name="Screen" value="&mvt:global:screen;" /> <input type="hidden" name="Action" value="EMPW" /> <mvt:if expr="g.invUser"><label for="Customer_Login" style="color:#c00;"><strong>User Name:</strong></label><mvt:else><label for="Customer_Login">User Name:</label></mvt:if> <input type="text" size="40" name="Customer_Login" value="&mvte:global:Customer_Login;" style="width:225px;" /> <input type="submit" value="Retrieve Password" title="Retrieve Password" id="pass_btn" class="input_btn" /> </form> </div> <br clear="all" />
What enhancements would you make? Leave a comment below so we know
If you enjoyed this post, please consider leaving a comment or subscribe to the feed and get future articles delivered to your feed reader.
1) The disconnect between the link to retrieve the username / password and where the form actually appears could be confusing. Depending on the site’s layout, it could even fall below the fold.
2) Combining the two links (forgot username and forgot password) into a single link that sends all information upon request would simplify things. Just have to tweak that module.
3) On the OINF screen, don’t forget to include a button (or something prominent) that says registration is optional.
P.S. The link to the demo is broken. It should be: http://blog.mivamerchant.com/wp-content/uploads/2010/03/lognPage/index.html