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
Akash Choudhary 17Akash Choudhary 17 

Login and Register VisualForce Page

Hi All,

I am developing a website for aution on force.com and for that I  need a VF page. Which will be the homepage
Requirements:
1. This login  page should be divided in to two parts first for Sellers and second for Bidders
2. If they are new to the site there should be an option for Register as Seller or Register as Bidder
3. So when the people will click on it, they will be redirected to a new page, for which i already have a VF page for both Seller and Bidder
4. If already a member there has to be a process of authentication also. 
Basically normal fundamentals of a login page
Best Answer chosen by Akash Choudhary 17
Akshay_DhimanAkshay_Dhiman

 Hi Akash,
 
 Try for given below code.
 
 *******************************************************        VF  Page   (LoginPage             *********************************************************** 
<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>
  *******************************************************        Controler   (LoginFormControler)             ***********************************************************
  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;
    }
}

if this answer is useful for you please choose the best answer 


Thanks,
Akhsay