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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://avbravo-2.gitbook.io/implementar-plantillas-primefaces-jsf/capitulo-iv.-login/configurar-el-login.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
