Handling authentication failure in auto login in liferay - liferay

I have a theme where I have a popup to ask for the login credentials .
It has 2 fields ,login id and password followed by a submit button.
<div class="x">
<div class="y">
<aui:input name="login" id="login" class="z"
type="text" placeholder="Email" showRequiredLabel="<%=false%>" label="" value="<%=login%>">
</aui:input>
</div>
</div>
<div class="x">
<div class="y">
<aui:input name="password" id="Password"
class="z" type="password" placeholder="Password"
showRequiredLabel="<%=false%>" label="" value="<%=password%>">
</aui:input>
</div>
</div>
<div class="x">
<div class="y">
<aui:button-row>
<aui:button type="submit" class="btn z"
value="Log in" id=z/>
</aui:button-row>
</div>
</div>
<script>
jQuery(document).ready(function($) {
$('#z').click(function(){
var textBoxEmail= $('#login').val();
var textBoxPassword= $('#Password').val();
var redirecturl="/home";
var url = Liferay.ThemeDisplay.getPortalURL()+"/c/portal/login?login=" + textBoxEmail + "&password=" +textBoxPassword+"&rememberMe=false&redirect=" + redirecturl;
$("#loginDetails").attr('action',url);
document.getElementById('loginDetails').submit();
}
});
</script>
This logins for the positive case , but if the password or the email entered is incorrecet it displays the
"This webpage is not available
ERR_CONTENT_DECODING_FAILED"
I want to show the failure message in the same page from where i am sending the login details or I want it to be redirected to some URL if the authentication fails.
I am using liferay-6.2-ce-ga3 and the theme is designed in the velocity.

You could redirect to /c/portal/login?redirect=currenturl which redirects to the current url. Writing a Hook is another option if you want to customize more.

So before you even start I would question your design from an architectural standpoint. In Liferay, the login functionality is actually its own portlet (called the login portlet). The correct way to modify the login functionality is via a hook. However, to answer your question more directly, I would modify your code as such (most of this is taken from Liferay's login.jsp).
<portlet:actionURL secure="<%= PropsValues.COMPANY_SECURITY_AUTH_REQUIRES_HTTPS || request.isSecure() %>" var="loginURL">
<portlet:param name="struts_action" value="/login/login" />
</portlet:actionURL>
<aui:form action="<%= loginURL %>" autocomplete='<%= PropsValues.COMPANY_SECURITY_LOGIN_FORM_AUTOCOMPLETE ? "on" : "off" %>' cssClass="sign-in-form" method="post" name="fm">
<aui:input name="saveLastPath" type="hidden" value="<%= false %>" />
<aui:input name="redirect" type="hidden" value="<%= redirect %>" />
<aui:input name="doActionAfterLogin" type="hidden" value="<%= portletName.equals(PortletKeys.FAST_LOGIN) ? true : false %>" />
<%
String loginLabel = null;
String authType = portletPreferences.getValue("authType", StringPool.BLANK);
if (authType.equals(CompanyConstants.AUTH_TYPE_EA)) {
loginLabel = "email-address";
} else if (authType.equals(CompanyConstants.AUTH_TYPE_SN)) {
loginLabel = "screen-name";
} else if (authType.equals(CompanyConstants.AUTH_TYPE_ID)) {
loginLabel = "id";
}
%>
<aui:input autoFocus="<%= windowState.equals(LiferayWindowState.EXCLUSIVE) || windowState.equals(WindowState.MAXIMIZED) %>" cssClass="clearable" label="<%= loginLabel %>" name="login" showRequiredLabel="<%= false %>" type="text" value="<%= login %>">
<aui:validator name="required" />
</aui:input>
<aui:input name="password" showRequiredLabel="<%= false %>" type="password" value="<%= password %>">
<aui:validator name="required" />
</aui:input>
<span id="<portlet:namespace />passwordCapsLockSpan" style="display: none;"><liferay-ui:message key="caps-lock-is-on" /></span>
<aui:button-row>
<aui:button type="submit" value="sign-in" />
</aui:button-row>
</aui:form>
<aui:script use="aui-base">
var password = A.one('#<portlet:namespace />password');
if (password) {
password.on('keypress', function(event) {
Liferay.Util.showCapsLock(event, '<portlet:namespace />passwordCapsLockSpan');
});
}
</aui:script>

I agree, go with the Login hook or with authentication pipeline using pre and post login filters. The redirection can be done from filters.

Related

Disabling Font Awesome Icon

I am building a search bar which I want to be disabled unless the user enters something. Appreciate any help to make this work.
This is my handlebars code:
<div class="searchWrapper">
<form action="/founduser" method="POST" class="searchBar">
<input type="hidden" id="groupid" name="groupid" value={{this.groupid}}>
<input type="text" name="searchBar" id="searchBar" placeholder="Enter the user's email ID"
value="{{this.term}}" />
{{!-- <i class="fas fa-search"></i>
<input type="submit" value="" id="submit"> --}}
<button type="submit" class="btn-search" id="user-search-btn"><span class="icon search"
disabled></span></button>
</form>
</div>
and I am running a JS check to alternate
const searchButton = document.getElementById('user-search-btn');
const check = () => {
if (searchButton !== "") {
searchButton.disabled = false
} else {
searchButton.disabled = true
}
}
searchButton.onkeyup = check
Where am I going wrong?
Sorry, I figured where I was going wrong. In my code I was checking if searchButton was empty, however what I should have done was to check the value inside the <input type="text" name="searchBar" id="searchBar" placeholder="Enter the user's email ID" value="{{this.term}}" />.

Liferay 7.1 : Autofields can't retrieve fieldIndexes

I'm starting to use the liferay-auto-fields composant.
So here is my jsp with the aui:script -->
<aui:form action="<%=saveMotiveURL%>" name="fm" method="post" enctype="multipart/form-data" onSubmit="setZones()" >
<aui:fieldset>
<aui:field-wrapper>
<div id="emailAdress-fields">
<label class="control-label"><liferay-ui:message key="motiveConfigEdit.col5"></liferay-ui:message> </label>
<div class="lfr-form-row lfr-form-row-inline">
<div class="row-fields">
<aui:input type="text" name="emailAdress1" fieldParam='emailAdress1' id='emailAdress1' label="" value=""/>
<aui:input type="hidden" name="motiveEmailId1" fieldParam='motiveEmailId1' id='motiveEmailId1' value=""/>
</div>
</div>
</div>
<aui:button type="submit" name="saveButton" value="button.create" label=""/>
</aui:field-wrapper>
</aui:fieldset>
</aui:form>
<aui:script>
AUI().use('liferay-auto-fields',function(A) {
new Liferay.AutoFields(
{
contentBox: '#emailAdress-fields',
fieldIndexes: '<portlet:namespace />rowIndexes'
}
).render();
});
</aui:script>
Then, i want to retrieve the "rowIndexes" in the processaction function, so i do :
String rowIndexes = actionRequest.getParameter("rowIndexes");
And this always gives me EMPTY.
I notice also that the hidden field in the jsp 'rowIndexes' doesn't change or have value when i had an autofield by clicking on the "+" button.
Is anyone has a solution ?
thanks
There are a couple of issues with your code you would like to address,
aui is deprecated and you should avoid when possible
prefer tags like
<liferay-frontend:edit-form>
<liferay-frontend:edit-form-body>
<liferay-frontend:fieldset-group>
<liferay-frontend:fieldset>
The following structure should work on the latest versions of Liferay:
<liferay-frontend:fieldset >
<div id='emailAdress-fields'>
<div class='lfr-form-row lfr-form-row-inline'>
<div class='row-fields'>
</div>
</div>
</div>
</liferay-frontend:fieldset>
Your script seems fine
<aui:script use='aui-base'>
A.use('liferay-auto-fields',function(A) {
new Liferay.AutoFields({
contentBox: '#emailAdress-fields',
fieldIndexes: '<portlet:namespace/>rowIndexes'
}).render();
})
</aui:script>

hide pop up based on message under browser's Response tab

in pop up box, we are displaying login form. once user enter wrong email id or password, we are displaying message : Invalid login/pw , but once they enter correct details and click on login button, than user will be logged in.
but issue is pop up box will remain until we close the pop up manually with help of close button as in below image, but i want to hide the pop up box if login is successfull.
enter image description here
Once we click on login, under Response tab, if there is no message, than i want to hide the pop up, if there is message as success":false,"error":"Invalid login or password." , than i don't want to hide the pop up
enter image description here
I tried below code :
Html
<form>
//code for email and pw
<button onclick = "hideWindow()">Login</button>
</form>
Ajax
function hideWindow()
{
var username=jQuery( "#customusername" ).val();
var password=jQuery( "#custompassword" ).val();
url="";
new Ajax.Request(url, {
method: 'POST',
onFailure: function(response){
},
parameters: {
username: username,
password:password
},
onSuccess: function(response)
{
if(response.responseText=="")
{
//trigger to close popup
document.getElementById('something').style.display = 'none';
document.getElementById('ajaxlogin-mask').style.display = 'none';
}
}
});
}
edit
<div class="ajaxlogin-window" id="something">
<form>
<div class="content">
<ul class="form-list">
<li>
<input type="hidden" id="likeproduct_id" name="product_id" value=""/>
<label for="email" class="required"><em>*</em>Email</label>
<div class="input-box">
<input type="text" name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" id="email" title="<?php echo $this->__('Email Address') ?>" />
</div>
</li>
<li>
<label for="pass" class="required"><em>*</em><?php echo $this->__('Password') ?></label>
<div class="input-box">
<input type="password" name="login[password]" id="pass" title="<?php echo $this->__('Password') ?>" />
</div>
</li>
<?php echo $this->getChildHtml('form.additional.info'); ?>
</ul>
</div>
<div class="buttons-set">
<button onclick = "hideWindow()" type="submit" class="button" title="<?php echo $this->__('Login') ?>" name="send" id="send2" ><span><span><?php echo $this->__('Login') ?></span></span></button>
</div>
</div>
As I can see there is some thing wrong with your ajax function try this out:
onSuccess: function(response)
{
document.getElementById('something').style.display = 'none';
document.getElementById('ajaxlogin-mask').style.display = 'none';
}
function hideWindow()
{
var db_username = 'ankit';
var db_password = 'password';
var username=jQuery( "#customusername" ).val();
var password=jQuery( "#custompassword" ).val();
if(username = db_username && password == db_password) {
jQuery('#something').hide();
}
else{
jQuery('#something').prepend('Wrong Cred ');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ajaxlogin-window" id="something">
<form>
<div class="content">
<ul class="form-list">
<li>
<input type="hidden" id="likeproduct_id" name="product_id" value=""/>
<label for="email" class="required"><em>*</em>Email</label>
<div class="input-box">
<input type="text" name="login[username]" value="" id="email" title="Email Address" />
</div>
</li>
<li>
<label for="pass" class="required"><em>*</em>Password</label>
<div class="input-box">
<input type="password" name="login[password]" id="pass" title="Password" />
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<button onclick = "hideWindow()" type="submit" class="button" title="Login" name="send" id="send2" ><span><span>Login</span></span></button>
</div>
Please check the code instead of ajax call i have just added a if condition.
Hope it might help you
Thanks

Invoke action of core Liferay's portlet (Document Library) using custom portlet's form

I need to call document library portlet's EditFileEntryAction (core liferay) on submitting my custom form.
I have created following actionURL:
<liferay-portlet:actionURL var="editFileEntryURL" portletName="<%=PortletKeys.DOCUMENT_LIBRARY %>" doAsGroupId="${scopeGroupId}" refererPlid="${plid}">
<portlet:param name="struts_action" value="/document_library/edit_file_entry" />
<portlet:param name="uploader" value="classic" />
</liferay-portlet:actionURL>
and I want to submit below form:
<aui:form action="<%= editFileEntryURL %>" cssClass="lfr-dynamic-form" enctype="multipart/form-data" method="post" name="fm">
<aui:input name="<%= Constants.CMD %>" type="hidden" />
<aui:input name="uploadProgressId" type="hidden" value="<%= uploadProgressId %>" />
<aui:input name="repositoryId" type="hidden" value="${themeDisplay.scopeGroupId}" />
<aui:input name="folderId" type="hidden" value="${categoryFolderId}" />
<aui:input name="fileEntryId" type="hidden" value="0" />
<aui:input name="workflowAction" type="hidden" value="<%= WorkflowConstants.ACTION_PUBLISH %>" />
<aui:input name="file" style="width: auto;" type="file">
<aui:validator name="acceptFiles">
'<%= StringUtil.merge(PrefsPropsUtil.getStringArray(PropsKeys.DL_FILE_EXTENSIONS, StringPool.COMMA)) %>'
</aui:validator>
</aui:input>
<aui:input name="title">
<aui:validator errorMessage="you-must-specify-a-file-or-a-title" name="custom">
function(val, fieldNode, ruleValue) {`enter code here`
return ((val != '') || A.one('#<portlet:namespace />file').val() != '');
}
</aui:validator>
</aui:input>
<aui:button type="submit" value="save" name="save" />
</aui:form>
I'd recommend to not have the HTTP-level cross-dependency on Liferay's document library portlet. Rather implement your own upload portlet and use the document library API to store the file yourself.

How to use same the form for POST and PUT requests using ejs?

What I'm trying to do is the following:
routes
router.route('/new')
.get(function (req, res) {
var method = ''
res.render('users/new.ejs', { method: method });
});
router.route('/edit/:user_id')
.get(function (req, res) {
var method = '<input type="hidden" name="_method" value="put" />'
var user = User.findById(req.params.user_id, function (err, user) {
if(!err) {
return user;
}
});
res.render('users/edit.ejs', {
method: method
});
});
_form.ejs
<form accept-charset="UTF-8" action="/api/v1/users" method="post">
<%- method %>
<div class="field">
<label for="firstName">First Name</label><br>
<input id="firstName" name="firstName" type="text" />
</div>
<div class="field">
<label for="age">Age</label><br>
<input id="age" name="age" type="number" />
</div>
<div class="field">
<label for="annualIncome">Annual Income</label><br>
<input id="annualIncome" name="annualIncome" type="number" />
</div>
<div class="field">
<label for="email">Email</label><br>
<input id="email" name="email" type="text" />
</div>
<div class="field">
<label for="riskTolerance">Risk Tolerance</label><br>
<input id="riskTolerance" name="riskTolerance" type="number" />
</div>
<div class="actions">
<input type="submit" value="Submit">
</div>
</form>
So, I want to do it like in Rails where you can use the same form for both creating and editing a model. So, I wanted to say that it is a PUT request when the form is used for editing.
Is this the appropriate way to do it?
Rather than embedding html in your routing code, you could just use a conditional statement in the ejs template
routes
res.render('users/edit.ejs', {
put: true
});
_form.ejs
<form accept-charset="UTF-8" action="/api/v1/users" method="post">
<%if (put) { %>
<input type="hidden" name="_method" value="put" />
<% } %>
<div class="field">
<label for="firstName">First Name</label><br>
<input id="firstName" name="firstName" type="text" />
</div>
...
</form>

Resources