Login.xhtml

Last updated 6 years ago

Was this helpful?

Login.xhtml

Para hacer que el login se invoque al iniciar la aplicación debemos editar el archivo web.xml

cambiar

<!--    <welcome-file-list>
        <welcome-file>dashboard.xhtml</welcome-file>
    </welcome-file-list>-->

por

<welcome-file-list>
        <welcome-file>login.xhtml</welcome-file>
</welcome-file-list>

Agregar en la sección

&lt;f:facet name="first"&gt;

   <f:view locale="#{idiomas.locale}"></f:view>
   <f:loadBundle basename="com.avbravo.spard.properties.messages" var="msg" />
   <f:loadBundle basename="com.avbravoutils.properties.application" var="app" />

y en el titulo agregar

<title>#{msg['application.title']}</title>

Quedaría de la siguiente manera

En el body que esta prepeterminado

Debajo de <h:body styleClass="login-body">

Agregar 
  <h:form id="form" >

Para los mensajes agregar
 <p:messages id="growl" closable="true"  />

Cambiar

     <p:inputText placeholder="Username" />

Por

<p:inputText value="#{loginController.username}" class="login-input" id="username" placeholder="#{app['login.email']}"/>

Cambiar

 <p:password placeholder="Password" feedback="false"/>

Por

  <p:password  feedback="false" value="#{loginController.password}" class="login-input" id="password" placeholder="#{app['login.password']}"/>

Poner en comentarios

 <div class="ui-g-12 chkbox-container">
                    <p:selectBooleanCheckbox id="remember-me" />
                    <p:outputLabel for="remember-me" value="Remember Me"/>
                </div>

Agregar boton

 <div class="ui-g-12 button-container">
       <p:commandButton value="#{app['button.login']}"  
         oncomplete="setTimeout(function() { $('[id$=growl]').hide(2000); }, 2000);"
         icon="fa fa-user"   action="#{loginController.doLogin()}" update=":form:growl :form" />   
</div>

Agregar un confirmDialog

  <p:confirmDialog widgetVar="sessionDialog" closable="false" global="true" showEffect="fade" hideEffect="fade" 
                                             message="#{app['session.procederacerrar']}">
              <p:commandButton value="#{app['button.close']}" oncomplete="PF('sessionDialog').hide();" 
                               update=":form" styleClass="ui-confirmdialog-yes"
                                action="#{loginController.invalidateCurrentSession()}" />

             </p:confirmDialog>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <f:view locale="#{idiomas.locale}"></f:view>
            <f:loadBundle basename="com.avbravo.spard.properties.messages" var="msg" />
            <f:loadBundle basename="com.avbravoutils.properties.application" var="app" />
        </f:facet>
        <title>#{msg['application.title']}</title>
    </h:head>

    <h:body styleClass="login-body">
        <h:form id="form" >
          <p:messages id="growl" closable="true"  />
            <div class="login-panel ui-fluid">
                <div class="ui-g">
                    <div class="ui-g-12 logo-container">
                        <p:graphicImage name="images/login/login-logo.png" library="poseidon-layout" />
                    </div>
                    <div class="ui-g-12">
                        <p:inputText value="#{loginController.username}" class="login-input" id="username" placeholder="#{app['login.email']}"/>
                    </div>
                    <div class="ui-g-12">
                        <p:password  feedback="false" value="#{loginController.password}" class="login-input" id="password" placeholder="#{app['login.password']}"/>
                    </div>
                    <!--                <div class="ui-g-12 chkbox-container">
                                        <p:selectBooleanCheckbox id="remember-me" />
                                        <p:outputLabel for="remember-me" value="Remember Me"/>
                                    </div>-->
                    <!--                <div class="ui-g-12 button-container">
                                        <p:button outcome="/dashboard" value="Sign In" icon="fa fa-user" styleClass="turquoise-btn"/>
                                        <p:button outcome="/dashboard" value="Forgot Password" icon="fa fa-key" styleClass="blue-btn" />
                                    </div>-->
                    <div class="ui-g-12 button-container">
                        <p:commandButton value="#{app['button.login']}"  
                                         oncomplete="setTimeout(function() { $('[id$=growl]').hide(2000); }, 2000);"
                                         icon="fa fa-user"   action="#{loginController.doLogin()}" update=":form:growl :form" />   

                    </div>
                </div>
            </div>
            <p:confirmDialog widgetVar="sessionDialog" closable="false" global="true" showEffect="fade" hideEffect="fade" 
                             message="#{app['session.procederacerrar']}">
                <p:commandButton value="#{app['button.close']}" oncomplete="PF('sessionDialog').hide();" 
                                 update=":form" styleClass="ui-confirmdialog-yes"
                                 action="#{loginController.invalidateCurrentSession()}" />

            </p:confirmDialog>

        </h:form>
        <h:outputStylesheet name="css/layout-#{guestPreferences.theme}.css" library="poseidon-layout" />
    </h:body>

</html>