Using Bootstrap Modal for ZfcUser in ZF2?

Question

as i am a complete newbie to Zend Framework this might be a total beginner question:

I did some tutorials and now i have a Zend-Framework skeleton-application with ZfcUser (and ZfcBase) up and running. Everything works fine so far, but what i want to accomplish is that the Login and Registration opens up in a Bootstrap-Modal-Dialog.

So now i see that in ./vendor/ZfcUser/config/module.config.php you can define the routes, but i have no idea what to do, when i want the whole dialogs being "served" with the index of my main-application (i guess i will need this to let the login dialog open up from the main menu from anywhere in the application).

So can someone help me with getting this to work? I really have no idea how to start at all and any help is highly appreciated :)

best regards

Answer 1

If you want to use Bootstrap Model for ZfcUser login, You need to change approach of login a bit.

1. You should use ZfcUser API Calls to validate login instead of post data on /user/login page.
2. You need to override the ZfcUser login.html to change form action button from submit to simple button/link binded with ajax request.
3. Call ZfcUserLoginWidget into Bootstrap Model's body
4. Form/ajax action set to your custom auth page
5. Where ZfcUser API Calls validate & return json response with success/failure.
6. ZfcUser validation no more work automatically, You need to apply through jQuery, Javascript from Json Response.

So First copy vendor/ZfcUser/view/user/login.html to module/[YourModule]/view/zfc-user/user/login.phtml

Now replace submit button with normal button like that :

<input type="button" value="Sign in" onClick="javascript:verifyLogin(this.form);" />
--
-- 
<script type="text/javascript">
    function verifyLogin(frm)
    {
        var data = $(frm).serialize();
        $.ajax({
              type: "POST",
              url: "<?php echo $this->url('authurl') ?>",
              data: data,
              success: function(resp){
                  alert(resp.status);
              },
              error: function(resp){
              },
              dataType: 'json'
        });
    }    
</script>

You should add a route for authurl for YourController/authAction

Add your html for Bootstrap model on parent template view :

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Login Box
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <?php echo $this->zfcUserLoginWidget(); ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Now YourController/authAction code should work like that :

$request = $this->getRequest();

$data = $request->getPost();

$this->getRequest()->getPost()->set('identity', $data['identity']);
$this->getRequest()->getPost()->set('credential', $data['credential']);


$this->zfcUserAuthentication()->getAuthAdapter()->resetAdapters();
$this->zfcUserAuthentication()->getAuthService()->clearIdentity();

$adapter = $this->zfcUserAuthentication()->getAuthAdapter();

$adapter->prepareForAuthentication($this->getRequest());

$auth = $this->zfcUserAuthentication()->getAuthService()->authenticate($adapter);

if (!$auth->isValid()) {
    //$this->flashMessenger()->setNamespace('zfcuser-login-form')->addMessage($this->failedLoginMessage);
    $adapter->resetAdapters();

    $response_data = array(
        'status' => 'Failure'
    ) ;
}
else
{
    $response_data = array(
        'status' => 'OK'
    ) ;
}

$response = $this->getResponse();
$response->setStatusCode(200);
$response->setContent(json_encode($response_data));
return $response;

Answer 2

The Login Widget viewhelper is probably what you are looking for. Within your desired .phtml template just add the viewhelper to render the login form.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;   </button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
     <?php //Add the Widget to the Modal Body here!?>
     <?php echo $this->zfcUserLoginWidget(); ?>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

If you want to alter the template of the widget you'll need to edit/add the zfcuser.global.php in your ../config/autoload/ folder and change/uncomment this the following to your desired login-widget template.

'user_login_widget_view_template' => 'your_module/whatever/login.phtml',