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

![](https://1998810595-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6NlSdMpuhIAMG0%2F-Lc1WgY0JLeRbCpPFKLC%2F-Lc1WlJ_k76bev6kfHBo%2Flogin.png?generation=1554820574615135\&alt=media)

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

![](https://1998810595-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6NlSdMpuhIAMG0%2F-Lc1WgY0JLeRbCpPFKLC%2F-Lc1WlJbchq-Fvdp1eH1%2Flogx2.png?generation=1554820574655772\&alt=media)

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

![](https://1998810595-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6NlSdMpuhIAMG0%2F-Lc1WgY0JLeRbCpPFKLC%2F-Lc1WlJdvmLLZ7v0BxJ6%2Fhead.png?generation=1554820574650203\&alt=media)

En el body que esta prepeterminado

![](https://1998810595-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6NlSdMpuhIAMG0%2F-Lc1WgY0JLeRbCpPFKLC%2F-Lc1WlJfA2r4ONLgcveW%2Fbody.png?generation=1554820574863824\&alt=media)

```
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.![](https://1998810595-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6NlSdMpuhIAMG0%2F-Lc1WgY0JLeRbCpPFKLC%2F-Lc1WlJh5IdOeCOQbCwn%2Flog.png?generation=1554820569958656\&alt=media)

### Cambiar el logo

![](https://1998810595-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6NlSdMpuhIAMG0%2F-Lc1WgY0JLeRbCpPFKLC%2F-Lc1WlJjEo5d5gqR14Ql%2Flogo1.png?generation=1554820570171135\&alt=media)

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

Por una imagen png de 90x90

![](https://1998810595-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6NlSdMpuhIAMG0%2F-Lc1WgY0JLeRbCpPFKLC%2F-Lc1WlJlQ95_XWIC2yJE%2Fpng.png?generation=1554820574593802\&alt=media)

### Cambiar la imagen de fondo

![](https://1998810595-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6NlSdMpuhIAMG0%2F-Lc1WgY0JLeRbCpPFKLC%2F-Lc1WlJn5CyT5FoHZOiv%2Fbak.png?generation=1554820570579195\&alt=media)

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

Por una imagen png de 2016x2048

![](https://1998810595-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6NlSdMpuhIAMG0%2F-Lc1WgY0JLeRbCpPFKLC%2F-Lc1WlJpWKMAhI7021Dr%2Fss.png?generation=1554820570365975\&alt=media)
