Popup confirm window on custom login page

Question

I have a custom login page the makes use of the SiteLoginController. When the user inputs their username and password, I need a popup window to appear that they would need to acknowledge before it logs them in. So far, I've tried using some javascript in the command button, but I haven't had any luck.

VF Page:

     <script>
 function showSimpleDialog(){    
   var sd = new SimpleDialog("Test"+Dialogs.getNextId(), false);    
   sd.setTitle("Test Pop up");   
   sd.createDialog();   
   window.parent.sd = sd;   
   sd.setContentInnerHTML("<p align='center'><img src='/img/msg_icons/warning32.png' style='margin:0 5px;'/></p><p align='center'>This is awesome!</p><p align='center'><br /><button class='btn' onclick='window.parent.sd.hide(); return false;'>cancel</button></p>");    
   sd.show();   
 }  
 showSimpleDialog(); //open the popup  
</script>
        <apex:form styleClass="form-login" id="loginForm" forceSSL="true">  
         <apex:actionFunction name="javascriptLogin" action="{!login}" />
         <apex:pageMessages id="error" />

                    <apex:outputLabel styleClass="label"
                        value="{!$Label.site.username}" for="username" />
                    <apex:inputText styleClass="form-control" id="username"
                        value="{!username}" html-placeholder="username"/>
                    <apex:outputLabel styleClass="label"
                        value="{!$Label.site.password}" for="password" />
                    <apex:inputSecret styleClass="form-control" id="password" html-placeholder="password"
                        value="{!password}" onkeypress="return noenter(event);" />      
                    <p>
                        <apex:commandButton value="Login" styleClass="btn btn-sm btn-primary btn-block forgot-password btn-width btn-shade"
                            action="{!login}" id="submitbutton" onclick="showSimpleDialog()"/>
                    </p>

                      </apex:form>

Any ideas on how to solve for this?

Thanks!

Answer 1

The commandButton by default will execute both the onClick event as well as the apex action. You will need to replace the commandButton with a normal HTML input button, then from within your JavaScript popup you need to call an apexFunction that will call the actual apex method. So your code should look something like this:

<apex:page>
    <apex:form>
        <script>
            function showDialog()
            {
                // show the dialog with with another button to proceed
                // which will have onclick event to call the function below
            }

            function dialogButtonClicked()
            {
                // do something more JS if needed and then call the apex login method
                controllerLogin();
            }
        </script>
        <apex:actionFunction name="controllerLogin" action="{!login}" />

        <!-- your login form here -->
        <input type="button" value="Login" onclick="showDialog();" />
    </apex:form>
</apex:page>