Creating a custom login page

Creating a custom login page:
An important section that needs tuning is the admin login form.we are going to see how to customize the admin access page with a custom logo and a custom design.The login file is login.phmtl, placed under app/design/adminhtml/default/default/template/.

If you take a look at the code of the login.phtml file, you can see that its structure is a full HTML document and we have full control of the login page. This means that you can totally customize it, creating your own custom structure.The final result that we are going to reach is shown in the following screenshot, and we will use a custom code structure to make it unique:

178328823X_Mastering

Creating the custom login.phtml file:
To create your custom login file, create the login.phtml file in your theme admin folder under app/design/adminhtml/default/bookstore/template.We start by creating a basic HTML5 structure using the following code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title><?php echo Mage::helper('adminhtml')->__('Bookstore Admin Login') ?></title>
		<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">	</script>
		<![endif]-->
	</head>
	<body id="login_page">
	...
	</body>
</html>

As you can see, inside the <head> tag, we inserted a conditional script for Internet Explorer to make it HTML5 ready.To insert our CSS modifications, we need to call the custom.css file.
This can be done by adding the following code inside the <head> tag, which will take the CSS from the custom adminhtml skin folder:

<link type="text/css" rel="stylesheet" href="<?php echo $this->getSkinUrl('../../default/bookstore/custom.css') ?>" media="all" /

Creating the login form:
Now, let’s create the HTML file of the form container that will include the form with the input, the button to sign in, and the link to retrieve the password.

1.First, we create a container that will include all the elements:

<div id="loginContainer"></div>

2.Then, create a logo image named logo-login.gif.
3.Inside the div id=”loginContainer” tag, create the logo box within the logo image as follows:

<div class="login_logo">
	<img src="<?php echo $this->getSkinUrl('../../default/bookstore/images/logo-login.gif') ?>" alt="<?php echo Mage::helper('adminhtml')->__('Log into Magento Admin Page') ?>">
</div>

4.Then, let’s create the form with all the elements using the following code:

<div class="login_form">
	<form method="post" action="" id="loginForm">
		<div class="form-title">
			<h1><?php echo Mage::helper('adminhtml')->__('Welcome to the login panel') ?></h1>
			<h2><?php echo Mage::helper('adminhtml')->__('Log into Magento Admin Page') ?></h2>
		</div>
		<!-- /.form-title -->
		<div class="input-container">
			<input type="text" class="form-control" id="login-username" name="login[username]" placeholder="
			<?php echo Mage::helper('adminhtml')->__('User Name:') ?>" required>				
			<input type="password" class="form-control" id="login-password" name="login[password]" 	placeholder="
			<?php echo Mage::helper('adminhtml')->__('Password:') ?>" required>
		</div>
		<!-- /.input-container -->
		<button type="submit" id="login-btn" class="btn-login">
			<?php echo Mage::helper('adminhtml')->__('Login') ?> &raquo;
		</button>
	</form>
	<!-- retrieve link -->
	<a href="<?php echo Mage::helper('adminhtml')->getUrl('adminhtml/index/forgotpassword',array('_nosecret' => true)) ?>">
		<?php echo Mage::helper('adminhtml')->__('Forgot your password?') ?>
	</a>
</div>
<!-- /.login_form -->

As you can see in the preceding code, we added the required attribute to the input to avoid a blank form submission.

5.After the form, insert the link to retrieve the password using the following code:

already you have included after </form>;
<a href="<?php echo Mage::helper('adminhtml')->getUrl('adminhtml/index/forgotpassword',array('_nosecret' => true)) ?>">
	<?php echo Mage::helper('adminhtml')->__('Forgot your password?') ?>
</a>

We will later see how to customize the Forgot Password page as well.

6.Now, at the very bottom of the page, outside div id=”loginContainer” ,we will add a custom link to go back to the frontend using the following code:

<a href=" <?php echo $this->getBaseUrl() ?>" class="link-frontend">
	<?php echo Mage::helper('adminhtml')->__('&laquo; Back to the store') ?>
</a>

7.Finally, the script that will make the form work is given as follows:

<script type="text/javascript">
	var loginForm = new varienForm('loginForm');
</script>

Done. The HTML code for the custom login page is finished. But if you refresh the page, we will have a blank form
Styling the login form:

/* Login form */
#login_page {
	background: url(images/bg.gif) repeat #000;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

#login_page h1 {
	font-size: 24px;
	margin: 0;
}
#login_page h2 {
	font-size: 14px;
	font-weight: normal;
	margin: 0 0 15px;
}

#loginContainer {
	/* Border Radius */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	/* Box Shadow */
	-moz-box-shadow: 0 0 47px 4px rgba(0,0,0,.24);
	-webkit-box-shadow: 0 0 47px 4px rgba(0,0,0,.24);
	box-shadow: 0 0 47px 4px rgba(0,0,0,.24);
	background-color: #FFFFFF;
	border-radius: 3px;
	box-shadow: 0 0 47px 4px rgba(0, 0, 0, 0.24);
	margin: 100px auto 20px;
	padding: 10px 20px 20px;
	text-align: center;
	width: 460px;
}

#loginContainer .login_logo {
	text-align: center;
	margin: 20px auto;
}

#loginContainer .login_form {
	background: none repeat scroll 0 0 #F69235;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #FFFFFF;
	display: block;
	margin-bottom: 15px;
	padding: 20px;
}
#loginContainer .login_form .form-title {
	color: #fff;
	text-align: center;
}
#loginContainer .login_form input {
	border: 0 none;
	display: block;
	margin-bottom: 20px;
	padding: 10px;
	width: 410px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
#loginContainer .login_form .btn-login {
	background: none repeat scroll 0 0 #333;
	border: 0 none;
	clear: both;
	color: #FFFFFF;
	cursor: pointer;
	font-weight: bold;
	line-height: 50px;
	width: 100%;
}
#loginContainer .login_form .btn-login:hover {
	background: #000;
}
#loginContainer a {
	text-align: center;
	color: #000;
	font-size: 12px;
}
#login_page .link-frontend {
	color: #888888;
	display: block;
	font-size: 14px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	text-decoration: none;
}

6.Refresh the page and the login page should now look like the following screenshot:

login-fomr

Adding the alert message if the data is incorrect:
If a user inserts a wrong combination of username and password, the system returns an alert message. To make it appear in our custom form, you can insert the following code just after the code for the logo image.

<?php echo $this->getMessagesBlock()->getGroupedHtml() ?>

You can style the preceding code with CSS using the following code:

#loginContainer .messages {
	background: none repeat scroll 0 0 #FFEBDA;
	border: 1px solid #FF7C0A;
	color: #DD6700;
	font-size: 15px;
	list-style-type: none;
	margin: 0 0 10px;
	padding: 10px;
	text-transform: uppercase;
}
#loginContainer .messages li {
	list-style-type: none;
}

Now try to insert a wrong password, and the following message will appear:

warning message

Customizing the retrieve password form
If you click on the Forgot your password? Click here! link, you can see that this page too needs customization:

To customize the preceding page, duplicate the file you created for the login page,login.phtml, and name it forgotpassword.phtml in the same bookstore folder under app/design/adminhtml/default/bookstore/template. What we need to do is only change the title using the following code:

<div class="form-title">
	<h1><?php echo Mage::helper('adminhtml')->__('Forgot your user name or password?') ?></h1>
	<h2><?php echo Mage::helper('adminhtml')->__('Insert your email to restore the password') ?></h2>
</div>

Then, change the content of the form, inserting only the e-mail input as follows:

<div class="input-container">
	<input type="text" id="email" name="email" value=" " class="required-entry input-text forgot-password validate-email" placeholder=" <?php echo Mage::helper('adminhtml')->__('Email Address:'); ?>" required>
</div>
<!-- /.input-container -->

Now, of course, we need to make a change in the button text too:

<button type="submit" id="login-btn" class="btn-login"> 
	<?php echo Mage::helper('adminhtml')->__('Retrieve Password'); ?> &raquo;
</button>

After the form, modify the Forgot your password? Click here! link using the following code. Clicking on this link will send you back to the login form:

<a class="left" href="<?php echo $this->getUrl('adminhtml',array('_nosecret' => true)); ?>">&laquo;
	<?php echo Mage::helper('adminhtml')->__('Back to Login'); ?>
</a>

Done! Now you don’t need to change anything else, because the page action is already set to perform the password reset, which will send an email to the user with the link to change the password or with the new password, depending on the settings.

Refresh the page. You will now see the new design of the pages, made in few simple steps, as shown in the following screenshot:

retrieve

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s