Adicionado: Mensagens na tela de login

mateus · Mar 1, 2013 · 1dcad5d · 1dcad5d
1 parent ccf25c2
commit 1dcad5d
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 36 deletions.
diff --git a/build/web/login.xhtml b/build/web/login.xhtml
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
-      xmlns:ui="http://java.sun.com/jsf/facelets">
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:c="http://java.sun.com/jsp/jstl/core">
     <h:head>
         <h:outputStylesheet name="style.css" library="css" />
 
@@ -33,7 +34,13 @@
                 $(".password").blur(function() {
                     $(".pass-icon").css("left","0px");
                 });
-            });
+
+                $(".alert-user").focus(function(){
+                    $("div").animate({
+                      width:'toggle'
+                    });
+                  });
+             });
         </script>
     </h:head>
     <h:body>
@@ -45,20 +52,19 @@
                     <h2>SAEC - Login</h2>
                 </div>
                 <div class="content">
-                    <h:inputText id="j_username" class="input username" value="#{Usuario.usuario.usuario}" required="true" requiredMessage="Digite um usuário" maxlength="20" />
-                    <div style="margin-top: 8px;">
-                        <h:message for="j_username" class="alert" style="margin-left: 60px;" />
-                    </div>
-                    <h:inputSecret id="j_password" class="input password" value="#{Usuario.usuario.senha}" required="true" requiredMessage="Digite uma senha" maxlength="20" />
-                    <div style="margin-top: 8px;">
-                        <h:message for="j_password" class="alert" style="margin-left: 60px;" />
-                    </div>
+                    <h:inputText id="j_username" class="input username" value="#{Usuario.usuario.usuario}" required="true" requiredMessage="Forneça um usuário" maxlength="20" />
+                    <h:inputSecret id="j_password" class="input password" value="#{Usuario.usuario.senha}" required="true" requiredMessage="Forneça uma Senha" maxlength="20" />
                 </div>
                 <div class="footer">
                     <h:commandButton action="#{Usuario.verificaLogin()}" value="Entrar" class="button" />
                     <h:commandButton action="#{Usuario.cadastrar()}" value="Cadastrar" class="register" />
                 </div>
             </h:form>
+            <div style="margin-top: 10px; text-align: center;">
+                <h:messages for="login-form" class="alert" style="list-style: none;" />
+                <h:message for="j_username" class="alert" />
+                <h:message for="j_password" class="alert" />
+             </div>
         </div>
         <ui:include src="footer.xhtml" />
     </h:body>

diff --git a/build/web/resources/css/style.css b/build/web/resources/css/style.css
@@ -15,14 +15,12 @@ body {
 }
 
 .alert {
-  padding: 3px 5px 5px 3px;
+  padding: 4px 6px 4px 6px;
+  margin: 0px 2px 0px 2px;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  background-color: #fcf8e3;
-  border: 1px solid #fbeed5;
-  color: #3a87ad;
+  color: #444;
   font-size: 14px;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
+  background-color: #C1CEFF;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
@@ -159,7 +157,7 @@ footer a:active { text-decoration : underline; color: #fff}
 }
 
 .pass-icon {
-	top:192px;
+	top:193px;
 	background: rgba(65,72,72,0.75) url(../resources/img/pass-icon.png) no-repeat center;
 }
 

diff --git a/src/java/com/control/UsuarioBean.java b/src/java/com/control/UsuarioBean.java
@@ -44,6 +44,9 @@ public void cadastrar(){
         UsuarioDAO usuarioDAO = new UsuarioDAO();
         usuarioDAO.cadastrar(usuario);
         usuario = new Usuario();
+        FacesContext contexto = FacesContext.getCurrentInstance();
+        FacesMessage msg = new FacesMessage("Usuário cadastrado com sucesso");
+        contexto.addMessage("login-form", msg);
     }
 
     public String verificaLogin(){
@@ -68,8 +71,8 @@ else if(usuarioDAO.verificaLogin(usuario)){
             return "Login_OK";
         }
         else{
-            FacesMessage msg = new FacesMessage("Login incorreto");
-            contexto.addMessage("form_login", msg);
+            FacesMessage msg = new FacesMessage("Usuário ou Senha incorretos");
+            contexto.addMessage("login-form", msg);
             return null;
         }
     }

diff --git a/web/login.xhtml b/web/login.xhtml
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
-      xmlns:ui="http://java.sun.com/jsf/facelets">
+      xmlns:ui="http://java.sun.com/jsf/facelets"
+      xmlns:c="http://java.sun.com/jsp/jstl/core">
     <h:head>
         <h:outputStylesheet name="style.css" library="css" />
 
@@ -33,7 +34,13 @@
                 $(".password").blur(function() {
                     $(".pass-icon").css("left","0px");
                 });
-            });
+
+                $(".alert-user").focus(function(){
+                    $("div").animate({
+                      width:'toggle'
+                    });
+                  });
+             });
         </script>
     </h:head>
     <h:body>
@@ -45,20 +52,19 @@
                     <h2>SAEC - Login</h2>
                 </div>
                 <div class="content">
-                    <h:inputText id="j_username" class="input username" value="#{Usuario.usuario.usuario}" required="true" requiredMessage="Digite um usuário" maxlength="20" />
-                    <div style="margin-top: 8px;">
-                        <h:message for="j_username" class="alert" style="margin-left: 60px;" />
-                    </div>
-                    <h:inputSecret id="j_password" class="input password" value="#{Usuario.usuario.senha}" required="true" requiredMessage="Digite uma senha" maxlength="20" />
-                    <div style="margin-top: 8px;">
-                        <h:message for="j_password" class="alert" style="margin-left: 60px;" />
-                    </div>
+                    <h:inputText id="j_username" class="input username" value="#{Usuario.usuario.usuario}" required="true" requiredMessage="Forneça um usuário" maxlength="20" />
+                    <h:inputSecret id="j_password" class="input password" value="#{Usuario.usuario.senha}" required="true" requiredMessage="Forneça uma Senha" maxlength="20" />
                 </div>
                 <div class="footer">
                     <h:commandButton action="#{Usuario.verificaLogin()}" value="Entrar" class="button" />
                     <h:commandButton action="#{Usuario.cadastrar()}" value="Cadastrar" class="register" />
                 </div>
             </h:form>
+            <div style="margin-top: 10px; text-align: center;">
+                <h:messages for="login-form" class="alert" style="list-style: none;" />
+                <h:message for="j_username" class="alert" />
+                <h:message for="j_password" class="alert" />
+             </div>
         </div>
         <ui:include src="footer.xhtml" />
     </h:body>

diff --git a/web/resources/css/style.css b/web/resources/css/style.css
@@ -15,14 +15,12 @@ body {
 }
 
 .alert {
-  padding: 3px 5px 5px 3px;
+  padding: 4px 6px 4px 6px;
+  margin: 0px 2px 0px 2px;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  background-color: #fcf8e3;
-  border: 1px solid #fbeed5;
-  color: #3a87ad;
+  color: #444;
   font-size: 14px;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
+  background-color: #C1CEFF;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
@@ -159,7 +157,7 @@ footer a:active { text-decoration : underline; color: #fff}
 }
 
 .pass-icon {
-	top:192px;
+	top:193px;
 	background: rgba(65,72,72,0.75) url(../resources/img/pass-icon.png) no-repeat center;
 }