Using Bootstrap Modal for ZfcUser in ZF2? - php

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.
You should use ZfcUser API Calls to validate login instead of post data on /user/login page.
You need to override the ZfcUser login.html to change form action button from submit to simple button/link binded with ajax request.
Call ZfcUserLoginWidget into Bootstrap Model's body
Form/ajax action set to your custom auth page
Where ZfcUser API Calls validate & return json response with success/failure.
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">×</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">× </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',