You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
3.6 KiB
91 lines
3.6 KiB
7 months ago
|
<?xml version='1.0' encoding='UTF-8' ?>
|
||
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
||
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
||
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
||
|
|
xmlns:p="http://primefaces.org/ui">
|
||
|
|
|
||
|
|
<h:head>
|
||
|
|
<title>Facelet</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
background-color: #7f00b2;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
.form-container {
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 40px;
|
||
|
|
border-radius: 5px;
|
||
|
|
box-shadow: 0 20px 20px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
.form-container h1 {
|
||
|
|
margin-top: 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.form-container form {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.form-container .form-group {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
.form-container .form-group label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.form-container .form-group input[type="text"],
|
||
|
|
.form-container .form-group input[type="password"] {
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
.form-container .btn-login {
|
||
|
|
background-color: #007bff;
|
||
|
|
color: #fff;
|
||
|
|
border: none;
|
||
|
|
padding: 10px 20px;
|
||
|
|
font-size: 16px;
|
||
|
|
border-radius: 3px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.form-container .btn-login:hover {
|
||
|
|
background-color: #0056b3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.campo-invalido {
|
||
|
|
border-color: red !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</h:head>
|
||
|
|
<h:body>
|
||
|
|
<div class="form-container">
|
||
|
|
<h1>Iniciar sesión</h1>
|
||
|
|
<h:form>
|
||
|
|
<p:growl id="growl" showDetail="true" />
|
||
|
|
<p:growl id="growl-sticky" for="sticky-key" showDetail="true" sticky="true" />
|
||
|
|
<div class="form-group">
|
||
|
|
<p:outputLabel value="Usuario:" for="username" />
|
||
|
|
<p:inputText id="username" value="#{loginDem.username}" title="Username" required="true" validatorMessage="El campo usuario es requerido. " requiredMessage="El campo usuario es requerido.">
|
||
|
|
<f:validateRegex pattern="^[a-zA-Z]{1,25}$" for="Username"/>
|
||
|
|
</p:inputText>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" ajax="true">
|
||
|
|
<p:outputLabel value="Contraseña:" for="password" />
|
||
|
|
<p:inputText id="password" value="#{loginDem.password}" title="Password" required="true" validatorMessage="El campo contraseña solo acepta numeros. " requiredMessage="El campo contraseña es requerido.">
|
||
|
|
<f:validateRegex pattern="^[0-9]{1,25}$" for="Password"/>
|
||
|
|
</p:inputText>
|
||
|
|
</div>
|
||
|
|
<p:commandButton value="INGRESAR" action="#{loginDem.buscarPorLogin()}" update="growl" styleClass="btn-login" ajax="false"/>
|
||
|
|
</h:form>
|
||
|
|
</div>
|
||
|
|
</h:body>
|
||
|
|
</html>
|