Dialog - Login Demo
This example demonstrates how to create a login dialog. Correct combination is (admin-admin)
Documentation
<script type="text/javascript">
function handleLoginRequest(xhr, status, args) {
if(args.validationFailed || !args.loggedIn) {
PF('dlg').jq.effect("shake", {times:5}, 100);
}
else {
PF('dlg').hide();
$('#loginLink').fadeOut();
}
}
</script>
<h:form>
<h:outputLink value="javascript:void(0)" onclick="PF('dlg').show();" title="login">
<p:graphicImage name="/demo/images/login.png" />
</h:outputLink>
<p:growl id="growl" sticky="true" showDetail="true" life="3000" />
<p:dialog header="Login" widgetVar="dlg" resizable="false">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText id="username" value="#{userLoginView.username}" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<p:password id="password" value="#{userLoginView.password}" required="true" label="password" />
<f:facet name="footer">
<p:commandButton value="Login" update="growl" action="#{userLoginView.login}"
oncomplete="handleLoginRequest(xhr, status, args)" />
</f:facet>
</h:panelGrid>
</p:dialog>
</h:form>
@Named
@RequestScoped
public class UserLoginView {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public void login() {
FacesMessage message = null;
boolean loggedIn = false;
if(username != null && username.equals("admin") && password != null && password.equals("admin")) {
loggedIn = true;
message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Welcome", username);
} else {
loggedIn = false;
message = new FacesMessage(FacesMessage.SEVERITY_WARN, "Loggin Error", "Invalid credentials");
}
FacesContext.getCurrentInstance().addMessage(null, message);
PrimeFaces.current().ajax().addCallbackParam("loggedIn", loggedIn);
}
}
