Custom Communities Forgot Password Page On Visualforce

CUSTOM COMMUNITIES FORGOT PASSWORD PAGE ON VISUALFORCE


Step 1 : Create a Visualforce Page


<apex:page showHeader="false" sidebar="false" title="2020 Password Reset" controller="ForgotpasswordApexController">
    <html>
        <style type="text/css">
            .UserName123{
            margin-bottom:10px;
            padding: 10px;
            width:90%;
            background-color:white;
            border: 1px solid #CCC;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            }
            .sfdc_button {
            width: 100%;
            margin-top: 15px;
            margin-bottom: 5px !important;
            color: #fff  !important;
            background-color: #0070d2  !important;
            border-color: #357ebd  !important;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            padding: 10px 12px !important;
            font-size: 16px !important;
            font-family: 'Open Sans',sans-serif !important;
            font-weight: 300 !important;
            line-height: 1.42857143;
            border-radius: 2px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            }
            .login-icon {
            color:#ccc;font-size:22px;
            }
            #sfdc_user{
            float:left;
            width:23px;
            height:25px;
            padding-top:1px;
            padding-left:2px;
            margin:0px;
            }
            body
            {
            background: url('https://dev-2020brands.cs50.force.com/team/resource/1495541559000/SwirlyImageWithFullOpacity') 50% 50%/cover no-repeat fixed rgba(235, 239, 242, 0.01);
            z-index: -1;
            min-height: 100%;
            width: 100%;
            text-align: center;
            position: absolute;
            font-family: Lato;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            }
            .center-div
            {
            position: fixed;
            top: 50%;
            left: 50%;
            /* bring your own prefixes */
            transform: translate(-50%, -50%);
            }
            .wrapper {
            padding:25px;
            opacity:0.75;
            background-color:white;
            }
            .can,.can:hover{
            color: #333;
            text-decoration: none;
            text-align: left;
            font-family: Lato;
            font-size: 14px;
            line-height: 1.375;
            }
        </style>
        <body>
            <div class="center-div">
                <div class="sfdc">
                    <center>
                        <div class="wrapper">
                            <img src="{!$Resource.logo}" style="max-width:250px;margin-bottom: 5%;"/>
                            <apex:form styleClass="form-signin" > 
                                <div><apex:inputText id="UserName" value="{!username}" styleClass="UserName123" html-placeholder="Username"/> </div>
                                <div class="sfdc"><apex:commandButton value="Send Password Reset Email"  action="{!forgotPassword12}" styleClass="sfdc_button " style="background:#1E90FF;color:#FFFFFF" /></div>
                                <apex:outputLink value="https://dev-678brand.cs50.force.com/team" id="theLink" rendered="{!$Profile.Name==' Managers Profile'}" styleClass="can">Cancel</apex:outputLink>
                                <apex:outputLink value="https://dev-678brand.cs50.force.com/dispensary" id="theLink12" rendered="{!$Profile.Name!='Managers Profile'}" styleClass="can">Cancel</apex:outputLink>
                            </apex:form> 
                        </div>
                    </center>
                </div>  
            </div>
        </body>
    </html>
</apex:page>

Step 2: Create an Apex Class

public class ForgotpasswordApexController {
    public String username {get; set;}   

    public ForgotpasswordApexController() {}
     public PageReference forgotPassword12() {
       boolean success = Site.forgotPassword(username);
       PageReference pr = Page.ForgotPasswordConformVfff;
       pr.setRedirect(true);

           if (success)
            {        
             return pr;
             }
                return null;
    }


}






Result:












































Comments











Post a Comment



















Popular posts from this blog









Configur  Docusign For Salesforce




















Image







   DocuSign For Salesforce   The basic steps are :  Step 1:Sign in or create a Docusign account ( Refer  sfdcsireesha.blogspot.in --Docusign Integration With Salesforce).  Step 2:Connect salesforce to Docusign( Refer  sfdcsireesha.blogspot.in --Docusign Integration With Salesforce). .  Steps To Configure Docusign For Salesforce:  Step 1:  After installing the DocuSign for Salesforce managed package, select the  DocuSign Admin  tab in Salesforce to bring up the DocuSign Log In view       Step 2: Log in to your DocuSign Account:  Use an existing DocuSign admin account.                                                            Or   Step 2: Sign up for a Free DocuSign Trial:  This creates a new account with a complementary 30-day free trial.    The free trial account is automatically directed to the DocuSign...








Read more










How To Make DataTable Column Resizable 




















Image







 First, we will use the dummy table shared by the  Lightning Design System .   We need to store the original width of the selected column to calculate the new width for which we have defined the oldWidth attribute to store the value. We also need the distance of the selected column width from the left of the screen to identify the start point from where user start to drag the column. We have used mouseStart attribute for the same.   We have used two mouse events to identify when user start to drag and when user is dragging the column for adjusting the width. onmousedown  will be fired when user click on the column divider element and ondrag  will be fired when user is dragging th .   Component :   <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >      <aura:attribute name="mouseStart" type="string" />      <aura:attrib...








Read more










Lightning:recordForm - Lightning Data Service




















Image







 Lightning:recordForm  is a very powerful component for editing, viewing and adding a record in lightning and combines both lightning:recordEditForm and lightning:recordViewForm.   Here is an example lightning component for lightning:recordForm.   Lightning Component:-   <aura:component implements="flexipage:availableForRecordHome,force:hasSObjectName,force:hasRecordId" access="global" >      <aura:attribute name="fieldsList" type="String[]" default="['Id', 'Name', 'BillingAddress', 'Phone' , 'Type']"/>      <div class="THIS">                 <lightning:recordForm                                recordId="{!v.recordId}"                                objectApiName="{!v.sObjectName}"                      ...








Read more