function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
chaitanya Deloitchaitanya Deloit 

Custom Login Page

I created a vf page for login into partner portal with two tabs . 1 for login and 2 for Self registration.

For login i used standard site controller . The issue is when the user switching from one tab to another the error messages which dispalyed are remaining there only.. The requirement is when we toggle fromo one tab to another automatically that area should get refresh.

How to acheive this.. please help me with the snippet

Chaitanya
Akshay_DhimanAkshay_Dhiman
Hi Chaitanya Deloit,

Try the below code.

==================================      VF Page            =============================== 
<apex:page showHeader="false" sidebar="false" controller="LoginFormControler">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <style>
            
            #container{
            margin-top:30px;
            height:auto;
            width:500px;
            padding:30px;
            border-radius:30px;
            background: #f0f0f0;
            }
            
            label{
            color: blue;
            font-size: 20px;
            }
            
            input {
            font-family: "Helvetica Neue", Helvetica, sans-serif;
            font-size: 12px;
            outline: none;
            }
            .username,
            .password {
            color: #777;
            padding-left: 10px;
            margin: 10px;
            margin-left: 18px;
            width: 360px;
            height: 35px;
            border: 1px solid #c7d0d2;
            border-radius: 7px;
            box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
            transition: all .4s ease;
            }
            .username:hover,
            .password:hover {
            border: 1px solid #b6bfc0;
            box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
            }
            .username:focus,
            .password:focus {
            border: 1px solid blue;
            box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
            }
            #lower {
            background: #ecf2f5;
            width: 100%;
            height: 70px;
            margin-top: 20px;
            box-shadow: inset 0 1px 1px #fff;
            border-top: 1px solid #ccc;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            }
            input[type=checkbox] {
            margin-left: -220px;
            margin-top: 30px;
            font-size: 20px;
            }
            .check {
            margin-left: 10px;
            font-size: 11px;
            color: #444;
            text-shadow: 0 1px 0 #fff;
            }
            .but {
            float: right;
            width: 120px;
            height:40px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            background-color: #acd6ef; /*IE fallback*/
            border-radius: 10px;
            border: 1px solid #66add6;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
            cursor: pointer;
            }
            }
            
            a{
            font-size: 15px;
            color: blue;
            }
            p{
            font-size: 13px;
            margin-bottom:-3px;
            margin-left:30px;
            width:500px;
            color: red;
            }
            #conformation
            {
            font-size: 20px;
            margin-bottom:-3px;
            margin-left:30px;
            width:500px;
            color: Green;
            }
            .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            }
            .modal-content {
            background-color: #fefefe;
            border-radius: 10px;
            padding: 25px;
            border: 1px solid #888;
            width: 60%;
            }
            .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            margin-top:-50px;
            font-weight: bold;
            }
            .close:hover,
            .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
            }
        </style>
        <script>
        function formValidation()
        {
            
            var username= document.getElementById("j_id0:j_id2:username").value;
            var password= document.getElementById("j_id0:j_id2:password").value;
            var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            if(username!="")
            {
                if(username.match(mailformat))
                {
                    if(password!="")
                    {
                        myfun();
                        document.getElementById("errPass").innerHTML="";
                    }else{ document.getElementById("errPass").innerHTML="Password is required";}
                    document.getElementById("errName").innerHTML="";
                }else{ document.getElementById("errName").innerHTML="Username is must be in email formate";}
                
            }else{ document.getElementById("errName").innerHTML="Username is required";}
        }
        
        function forgetFun()
        {
            document.getElementById('myModal').style.display = "block";
        }
        function closewindow()
        {
            document.getElementById('myModal').style.display = "none";
            document.getElementById('showRegis').style.display = "none";
        }
        function formforget()
        {
            var forgUsename= document.getElementById("j_id0:j_id2:forgname").value;
            var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            if(forgUsename!="")
            {
                if(forgUsename.match(mailformat))
                {
                    myfunForget(forgUsename);
                    document.getElementById("errforget").innerHTML="Password send on your email";
                }else{ document.getElementById("errforget").innerHTML="Username is must be in email formate";}
            }else{ document.getElementById("errforget").innerHTML="Username is required";}
        }
        function ShowRegistration()
        {
            document.getElementById('showRegis').style.display = "block";
        }
        function registrationValidation()
        {
            var name1= document.getElementById("j_id0:j_id2:name1").value;
            var username1= document.getElementById("j_id0:j_id2:username1").value;
            var pass1= document.getElementById("j_id0:j_id2:pass1").value;
            var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            var nameformat = /^[A-Za-z\s]+$/;
            if(name1!="")
            {
                if(name1.match(nameformat))
                {
                    if(username1!="")
                    {
                        if(username1.match(mailformat))
                        {
                            if(pass1!="")
                            {
                                FormRegistration();
                                document.getElementById("erruname1").innerHTML="";
                                document.getElementById("errpass1").innerHTML="";
                             }
                            else{ document.getElementById("errpass1").innerHTML="Password is required";document.getElementById("regissuccessfully1").innerHTML="";}
                            document.getElementById("erruname1").innerHTML="";
                         }else{ document.getElementById("erruname1").innerHTML="Username is must be in email formate";document.getElementById("regissuccessfully1").innerHTML="";}
                        document.getElementById("errname1").innerHTML="";
                     }else{ document.getElementById("erruname1").innerHTML="Username is required";document.getElementById("regissuccessfully1").innerHTML="";}
                    document.getElementById("errname1").innerHTML="";
                  }else{ document.getElementById("errname1").innerHTML="Name must have character";document.getElementById("regissuccessfully1").innerHTML="";}
              }else{ document.getElementById("errname1").innerHTML="Name is required";document.getElementById("regissuccessfully1").innerHTML="";}
       }
       function refresh()
        {
            document.getElementById("conformation").innerHTML="";
        }
    </script>
    </head>
    <apex:form onclick="refresh()">
        
        <apex:actionFunction name="myfun" action="{!loginFun}" />
        <apex:actionFunction name="FormRegistration" action="{!FormRegistration}" />
        <apex:actionFunction name="myfunForget" action="{!loginFunforget}" >
            <apex:param name="xyz"  value=""/>
        </apex:actionFunction>
        <center> 
              <p id="conformation">{!coonformation}</p><br/>
                  
            <apex:image url="{!URLFOR($Resource.CALogo, 'CALogo.jpg')}" width="500" height="150" />
            <div id="container" >
                <p id="errName"></p>
                <label>Username:</label><apex:inputText styleClass="username" id="username" value="{!name}" /><br/>
                <p id="errPass"></p>
                <label>Password:</label><apex:inputSecret styleClass="password" id="password" value="{!pass}" /><br/>
                <input type="checkbox"/><label class="check" for="checkbox">Keep me logged in</label>
                <input type="button" Class="but" style="margin-right: 10px; margin-top: 20px;" value="Login" onclick="formValidation()" reRender="false" /><br/><br/><br/><br/>
                <a onclick="ShowRegistration()"> Registration..</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a onclick="forgetFun()" > Forget Password..?</a> 
            </div>
            <div id="myModal" class="modal">
                <div class="modal-content">
                    <span class="close" onclick="closewindow()">&times;</span>
                    <p id="errforget"></p><br/>
                    <label>Enter ther Username:</label><apex:inputText styleClass="username" id="forgname" value="{!names}" />
                    <input type="button" Class="but" style="margin-right: 10px; margin-top: 8px;" value="Forget" onclick="formforget()" reRender="false" />
                </div>
            </div>
            <div id="showRegis" class="modal">
                <div class="modal-content">
                    <span class="close" onclick="closewindow()">&times;</span>
                    <p id="errname1"></p><br/>
                     <label>Enter ther Name:</label>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
                    <apex:inputText styleClass="username" id="name1" value="{!name1}" /><br/>
                    <p id="erruname1"></p><br/>
                    <label>Enter ther Username:</label><apex:inputText styleClass="username" id="username1" value="{!username1}" /><br/>
                    <p id="errpass1"></p><br/>
                    <label>Enter ther Password:&nbsp;</label><apex:inputText styleClass="username" id="pass1" value="{!pass1}" /><br/><br/>
                    
                    <input type="button" Class="but" style="margin-right: -5px; margin-top: -20px;" value="Registration" onclick="registrationValidation()" reRender="false" />
                </div>
            </div>
        </center>
    </apex:form>
</apex:page>
==================================      Controller            ===============================
public class LoginFormControler {
    public String name{get;set;}
    public String pass{get;set;}
    public String names{get;set;}
     public String name1{get;set;}
     public String username1{get;set;}
     public String pass1{get;set;}
    public String coonformation{get;set;}
    public  PageReference loginFun()
    {
        List<Account> accList=new List<Account>();
        accList=[select username__c,password__c from Account where username__c=:name and password__c=:pass];
        System.debug(accList);
        System.debug(name);
        System.debug(pass);
        if(accList.size()>0&&accList.size()<2&&accList[0].username__c!=null)
        {
                        coonformation='';
            return   new PageReference('/apex/ConformaPage');
        }
        else{
           coonformation='Data is incorrect Please Enter the correct data';     
            return null;
        }
    }
    public  void loginFunforget()
    {
       // String namef= ApexPages.currentPage().getParameters().get('xyz');
            Blob blobKey = crypto.generateAesKey(128);
            String key = EncodingUtil.convertToHex(blobKey);
            String randomNumber = key.substring(0,10);
        
        List<Account> accList=new List<Account>();
        accList=[select username__c,password__c from Account where username__c=:names];
        System.debug(accList);
        System.debug(names);
        for(Account acc:accList)
        {
            acc.password__c=randomNumber;
        }
        if(accList.size()>0&&accList.size()<2&&accList[0].username__c!=null)
        {
                update accList;
                coonformation='Please check your email';
                User mess=[select name,email from user where id=:userinfo.getUserId()];
                String  emailBody ='<html><body><h2>Hi '+mess.name+'  </h2><br><h4>This '+names+' Username password is update. </h4><br><h4>Here is your password<span style="Color:red;font-size:20px;"> \" '+randomNumber+' \" </span></h4></body></html>';
                Messaging.SingleEmailMessage message =new Messaging.SingleEmailMessage();
               
                message.toAddresses = new String[] {accList[0].username__c};
                message.optOutPolicy = 'FILTER';
                message.subject = 'Forget Password';
                message.setHtmlBody(emailBody);
                Messaging.SendEmailResult[] results = Messaging.sendEmail(new List<Messaging.SingleEmailMessage> {message});
        }
        else
        {
             coonformation='Email does not exist in this org.'; 
        }
    }
    public void FormRegistration()
    {
        Account a=new Account();
        a.name=name1;
        a.username__c=username1;
        a.password__c=pass1;
        insert a;
    }
}



Thanks.
Akshay