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
[sourcecode lang=“html” toolbar=“true”]
<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>
[/sourcecode]
Miva 5.5 Page Header
[sourcecode lang=“html” toolbar=“true”]
<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>
[/sourcecode]
Miva 5.5 Wombat Page Header
[sourcecode lang=“html” toolbar=“true”]
<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>
[/sourcecode]
Page Footer
[sourcecode lang=“html” toolbar=“true”]
<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" />
[/sourcecode]
What enhancements would you make? Leave a comment below so we know
Join the Discussion
- July 05, 2011
Would be interested in seeking working Demo, however, link above appears to lead to missing page or is in need of update. Look forward to seeing this in action before investing much time into upgrading our Login Page. Thanks
- July 15, 2011
hi
- July 22, 2011
Same here…. missing demo link. Would like to see this feature in Miva without having to buy a module. Recoding would be good, but like to see how it works.
- July 22, 2011
Also doesn’t help that all the code above is character encoded too: " < etc…. no bueno
