Partner Portal Login Page Customization & URL Masking for Partner Portal

Hope you are totally aware about the partner portal & site before going through this post. In the partner portal salesforce internally provide the default login page that is not user friendly. Here are some issues with the default portal login page-

#1-If you want to do some customization on the page like position, styles etc than it will a little bit difficult. Although you can use header & footer to add the custom style but there is some limitation if you want to fully customize this login box.

#2-Salesforce provide some default url for portal that is not user friendly. It will be something like as below

https://XXX.salesforce.com/secur/login_portal.jsp?orgId=XXXXXXXXX&portalId=XXXXXXXXX

The url looks not good & not easy to remember if you want to spread to the portal users.

#3-Probably customer required branding at home page & in that case customize login page is a good option.

To avoid these issues you can create a custom login page & can also use site for URL masking (for any partner portal which in the same org). here is the steps 

by which you can do this-

#1-Hope you already having a partner portal in your org.

#2-Create a new site by registering a domain for that org.

let's say you rgister a site with below domain -

SitePortal so you site url will be http://SitePortal-developer-edition.ap1.force.com

#3-Create a dummy login VF page (Name - VFPortalLogin) for now, leave it blank, we will use this page in next step.

#4-Now go to Setup--> Site

create a site with some label. let's say you create MySite. So your site address will be

http://SitePortal-developer-edition.ap1.force.com/MySite

set the step #3 PortalLogin page as the default page

give the access to site as well as portal for this new page.

#5-Go to Setup--> Site --> Click on recently registered site --> click on Login Setting

Enable the Login (check the checkbox) for the partner which we created at first.

now open that page by site url, your url will be something like

http://SitePortal-developer-edition.ap1.force.com/MySite OR

http://SitePortal-developer-edition.ap1.force.com/MySite/PartnerLogin

you will see that blank login page which we created in previous steps. Upto this step notice that we are using the url masking for the portal. now we are going to start in the code part. here is the login VF page code, copy this code & paste in your VF page

<apex:page sidebar="false" showHeader="false" controller="PortalLoginController">

<apex:form forceSSL="true">

   <apex:styleSheet value="{!URLFOR($Resource.PortalResource,'/PortalCSS/elements.css')}" />

   <apex:styleSheet value="{!URLFOR($Resource.PortalResource,'/PortalCSS/common.css')}" />

   <apex:styleSheet value="{!URLFOR($Resource.PortalResource,'/PortalCSS/extended.css')}" />

   <apex:styleSheet value="{!URLFOR($Resource.PortalResource,'/PortalCSS/portal.css')}" />

   

    <style type="text/css">

        .username, .pw {

            width: 175px;

        }

    </style>

    <apex:pageMessages id="msg" />

       <div style="margin-top:60px;">

              <div class="portalheaderPRM">

                     <div style="width: 400px; margin: 0px auto; text-align: center; padding-right: 66px; padding-bottom: 10px; padding-top: 10px; margin-bottom: 10px;">

                            Put your LOGO here

                           

                     </div>

              </div>

       </div>

<div style="margin: 0px auto; width: 400px;">

       <table id="loginBox" class="bPageBlock" border="0" cellpadding="0" cellspacing="0" width="85%">

           <tr valign="top">

               <td>

                     <input type="hidden" name="startURL" value="" />

                       <div class="pbHeader">

                           <table border="0" cellpadding="0" cellspacing="0">

                               <tr>

                                   <td>

                                      

                                   </td>

                               </tr>

                               <tr>

                                   <td class="pbTitle">

                                       <h2>Secure Customer Login

                                       </h2>

                                   </td>

                               </tr>

                           </table>

                       </div>

                       <div class="pbBody">

                           <table border="0" cellpadding="0" cellspacing="0">

                               <tr>

                                   <td class="portalLoginLabel"><label for="username">User Name:</label></td>

                                   <td>

                                         <apex:inputText value="{!UserId}"  Styleclass="username" />

                                   </td>

                               </tr>

                               <tr>

                                   <td class="portalLoginLabel"><label for="password">Password:

                                   </label></td>

                                   <td>

                                         <apex:inputSecret value="{!UserPassword}"  Styleclass="pw" />

                                   </td>

                               </tr>

                           </table>

                           <div><a id="forgotPassword" href="/XXX_PortalPrefix/apex/PortalForgotPasswordVF">Forgot your password?

                                                </a>

                           </div>

                       </div>

                       <div class="pbBottomButtons">

                           <table border="0" cellpadding="0" cellspacing="0">

                               <tr>

                                   <td class="pbTitle"><img width="1" height="1" title="" class="minWidth" alt="" src="/s.gif" /></td>

                                   <td class="pbButtonb">

                                         <apex:commandButton value="Login" action="{!login}" />

                                   </td>

                               </tr>

                           </table>

                       </div>

             

               </td>

                     <td>

               <div class="pbFooter secondaryPalette"><div class="bg"></div></div>

               </td>

           </tr>

       </table>

</div>

</apex:form>

</apex:page>

you see that there are some resource used in the page. you can download these resource from the partner portal default login page>> view source. save all four CSS in a folder & upload it in static resource. set the path in the VF page as per your folder hierarchy.

now here is the controller code for that login page -

public class PortalLoginController {

      

       public String UserId {get;set;}

       public String UserPassword {get;set;}

       public PortalLoginController(){

       }

       public PageReference login(){

              PageReference pr =  Site.login(UserId, UserPassword,  '/apex/PortalHomepage');

              return pr;

       }

      

     

}

Create a new VF page & set it's name in controller so user will be redirect on that home page after logged in.

It's done, now you see that you can use a custom url for you portal, means we have done url masking.

whenever you need to add a new page you just need to add it at portal & you can use that with the same masked url..!!