> For the complete documentation index, see [llms.txt](https://avbravo-2.gitbook.io/implementar-plantillas-primefaces-jsf/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://avbravo-2.gitbook.io/implementar-plantillas-primefaces-jsf/capitulo-iv.-login/configurar-el-login.md).

# Login.xhtml

## Configurar el Login

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>
```

![](/files/-Lc1WlJ_k76bev6kfHBo)

### Editar la pagina **login.xhtml**

![](/files/-Lc1WlJbchq-Fvdp1eH1)

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**

![](/files/-Lc1WlJdvmLLZ7v0BxJ6)

En el body que esta prepeterminado

![](/files/-Lc1WlJfA2r4ONLgcveW)

```
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>
```

### login.xhtml codigo completo

```
<!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>
```

## Al ejecutar el proyecto

Recuerde ejecutar mongodb.

Se muestra la validación de usuarios.![](/files/-Lc1WlJh5IdOeCOQbCwn)

### Cambiar el logo

![](/files/-Lc1WlJjEo5d5gqR14Ql)

Reemplazar /resources/poseidon-layout/images/login/login-logo.png por otra imagen

Por una imagen png de 90x90

![](/files/-Lc1WlJlQ95_XWIC2yJE)

### Cambiar la imagen de fondo

![](/files/-Lc1WlJn5CyT5FoHZOiv)

Reemplazar /resources/poseidon-layout/images/login/login-background.png por otra imagen

Por una imagen png de 2016x2048

![](/files/-Lc1WlJpWKMAhI7021Dr)
