Liferay Login Hook, error pop up - authentication

I need to show the errors in login hook of liferay in popup, but the sentence is only a line of code, so I don't know how implement the popup.
the key line is the next:
<liferay-ui:error exception="<%= NoSuchUserException.class %>" message="This message is editable" />
This error is to showed in a label but I didn't need this.
like this example::
http://www.jose-aguilar.com/blog/wp-content/uploads/2012/07/bootstrap-modal.png

In case you need to show errors in dialog box,I suppose you are using
SessionErrors.add(actionRequest, "error");
to send error from action phase.You can check SeesionErrors for 'error' attribute and display your message in dialog box:
<% if(!SessionErrors.isEmpty(renderRequest))
{
String error=LanguageUtil.get(pageContext, "error");
%>
<aui:script>
YUI().ready(function(A) {
YUI().use('aui-base','liferay-util-window', function(A) {
Liferay.Util.Window.getWindow({
title : 'Error',
dialog: {
bodyContent: '<%=error%>',
destroyOnHide: true,
cache: false,
modal: true,
height: 300,
width: 300
}
})
});
});
</aui:script>
<%} %>

Have look at the Alloy Documentation
http://alloyui.com/examples/tooltip/
As Shivam suggested, you can use a scriplet to get the message.

Related

How can I submit a form on input change with Turbo Streams?

I have a form I want to submit automatically whenever any input field is changed. I am using Turbo Streams, and if I use onchange: "this.form.submit()" it isn't captured by Turbo Streams and Rails uses a standard HTML response. It works fine when clicking the submit button. How can I work around this?
There is a discussion on the hotwire forum, where Mark Godwin figured out why form.submit() isn't working with turbo:
Turbo intercepts form submission events, but weirdly, the JS formElement.submit() method does not trigger the submit event.
And Jacob Daddario figures out that you can use form.requestSubmit() instead:
It turns out that the turbo-stream mechanism listens for form submission events, and for some reason the submit() function does not emit a form submission event. That means that it’ll bring back a normal HTML response. That said, it looks like there’s another method, requestSubmit() which does issue a submit event.
So you can change your code slightly, and use requestSubmit() if a browser supports it, and use submit() if not:
onchange: "this.form.requestSubmit ? this.form.requestSubmit() : this.form.submit()"
Update:
As BenKoshy pointed out, in Turbo 7.1.0, a polyfill was added so you can use form.requestSubmit() without checking for browser support, so you can add this to your input field:
onchange: "this.form.requestSubmit()"
I need to implement this for an app with lots of forms. I wound up using Stimulus. Below is the whole controller:
import { Controller } from "stimulus"
const _ = require("lodash")
export default class extends Controller {
connect() {
let that = this;
that.element.addEventListener('change', _.debounce(that.handleChange, 500))
}
handleChange(event) {
event.preventDefault()
// event.target.name // => "user[answer]"
// event.target.value // => <user input string>
event.target.form.requestSubmit()
}
}
and here it's used in a form with a single text input. NOTE the controller is attached to the form, not to the inputs.
<%= turbo_frame_tag dom_id(form_model) do %>
<%= form_with model: form_model,
format: :turbo_stream,
html: { data: { controller: "buttonless-form" } } do |f| %>
<%= f.hidden_field :question_id, value: question.id %>
<%= f.text_field :answer_value, class: "input shadow wide", placeholder: "Enter your answer here" %>
<% end %>
<div id=<%= "question_#{question.id}_output" %>>
<p> <!-- feedback to the user shows up here via Turbo -->
</div>
<% end %> <!-- end turbo frame -->

sweetalert2 confirm delete when render returning a link in Datatables

I am using Datatable and doing my Remove by rendering returning a link. I wanted to do my Remove by confirm with SweetAlert2 however, it was not able to work as expected.
How do I use sweetalert, I cannot assign an id for returning render a link
I am not sure where you are getting stuck.
Here is my version:
I am using SweetAlert 2:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10.15.7/dist/sweetalert2.all.min.js"></script>
I have the following render function in my DataTable:
{
render: function (data) {
return '<a id="del" href="/your/example/here/' + data + '">Remove</a>';
}
}
This is a simplified version of your code, just as a demonstration.
I have the following click handler:
$('#del').on('click', function( event ) {
event.preventDefault(); // don't forget to prevent the default event
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
});
});
This generates a table with links.
When I click on any link, I get the following pop-up alert:
I have not handled anything relating to actually using the link to delete a resource. I leave that up to you, as a follow-on task, after you get the alert working.
You did not really explain what the specific problem is that you are facing, except to say "it's not working".
If you have new, additional, problems after this then you can open a new question - but please try to provide sufficient details, including error messages from your browser's console and an easy-to-recreate problem description with related code.

Pass -express-flash-messages- in an EJS file

I've a user controller which has a basic authentication logic. I'm using an ejs view engine . I'm finding trouble accessing these flash messages in my view, i.e. .ejs file. What should be the right approach. I dug through some information and found out that we can pass parameters during a res.redirect. However, I don't want to do that, since it will appear in the URL. Is there a solution to this, something like what pug engine has.
if (!user || !user.authenticate(req.body.password)) {
req.flash('error', 'Invalid email or password!')
res.redirect('/login')
return
}
You could pass your flash messages to your views using res.locals object:
app.get('/login', function(req, res) {
res.render('login', { errorMessage: req.flash('error')[0] });
});
Then in your view:
<% if (errorMessage) { %>
<div class="error">
<p><%= errorMessage %></p> <!-- Invalid email or password! -->
</div>
<% } %>

Facebook FB.ui dialog iOS Web App unclosable

I have FB.ui working well, I can share whatever info I need to share. However the issue is that it's being rolled into a Web App (This "add to home screen") for an ipad. Whenever the dialog opens, it's opened full screen, and once it's shared there is no way to close the opened dialog.
<input type="button" onclick="share_prompt()" value="Share" />
function share_prompt()
{
FB.ui(
{
method: 'feed',
display: "iframe",
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
}
I've changed the "display" property to everything possible, but the docs say that it defaults to a "touch" display in web apps.
Also, to make it even more frustrating, the response doesn't fire when in web app mode. Only in the browser window.
Any ideas?
This is the way I solved this:
if(navigator.standalone){
new_url = 'https://www.facebook.com/dialog/feed?'+
'app_id=XXXXXXXXXXXXX'+
'&display=popup'+
'&caption='+fbName+
'&picture='+fbPicture+
'&description='+fbDescription+
'&link='+fbLink+
'&redirect_uri=http://myurl.com/mycontroller/#post_id';
window.open(new_url,'_self');
} else {
//do the normal way
}
This way you can have a redirect url and you can send the post id back to your app if you need it. Hope this answers your question if you still didn't find a way to solve it.

unable to click submit button using casperjs

I'm filling a form using casperjs and getting stuck at its submission. Below is my code snippet:
this.then(function(){
this.waitUntilVisible('#ajaxSignin', function(){
this.capture("snapss.png");
this.fill('form#ajaxSignin', {
'j_username' : 'testings123testings#gmail.com',
'j_password' : '1234rewq'
}, true);
});
});
this.thenClick('#signin_submit');
this.then(function(){
this.wait(10000, function(){
this.capture('sn8.png');
});
});
In the image 'sn8.png', I'm getting this: "HTTP Status 405 - Request method POST not supported".
So I infer that there is something wrong in clicking the submit button. The script works fine till form filling.(site link: 'http://www.snapdeal.com/product/haier-le22t1000-22-inches-hd/1380076?pos=0;372')
this.waitUntilVisible('#ajaxSignin', function(){
this.capture("snapss.png");
this.fill('form#ajaxSignin', {
'j_username' : 'testings123testings#gmail.com',
'j_password' : '1234rewq'
}, true); // change this to false true will sumbit the
// form right after the input was set
You are submitting the form before you click on the #signin_submit button.