Merge pull request #94 from andresmoschini/dbr-213-general-form-messages

DBR-213 - General form messages
FromDoppler · Apr 30, 2019 · da8d643 · da8d643
2 parents 538931b + 2e63711
commit da8d643
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 23 deletions.
diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss
@@ -236,6 +236,10 @@ input[type="tel"] {
   display: none;
 }
 
+.form-message {
+  margin-bottom: $dp-spaces--lv2;
+}
+
 .error {
   .checkmark,
   input,
@@ -246,11 +250,21 @@ input[type="tel"] {
 
   .wrapper-errors {
     display: inline-block;
+    margin: $dp-spaces--lv0;
+    color: $dp-color-red;
+    font-size: $dp-sizing--lvl2;
+    font-family: $dp-font-family-proximanova;
 
-    .error-message {
-      margin: $dp-spaces--lv0;
+    a {
       color: $dp-color-red;
+      text-decoration: underline;
+    }
+
+    p {
+      margin: $dp-spaces--lv0;
       font-size: $dp-sizing--lvl2;
+      line-height: $dp-spaces--lv3;
+      font-family: $dp-font-family-proximanova;
     }
   }
   /* animation to show the errors (optional) */
@@ -337,12 +351,4 @@ input[type="tel"] {
   }
   /* Class to indicate that password is secure */
 }
-/* Classes of messages to verify the password */
-.unexpected-message {
-  font-family: $dp-font-family;
-  margin: $dp-spaces--lv0;
-  color: $dp-color-red;
-  font-size: $dp-sizing--lvl2;
-  padding: $dp-spaces--lv2 $dp-spaces--lv0;
-}
-/* Classes of Unexpected message */
+
diff --git a/assets/templates/forgot-password.html b/assets/templates/forgot-password.html
@@ -75,7 +75,7 @@ <h5>¿NO RECUERDAS TU CONTRASEÑA?</h5>
                 <label for="email">Email:</label>
                 <input type="email" name="email" id="email" placeholder="¡Psst! Es tu Email.">
                 <div class="wrapper-errors">
-                  <p class="error-message">¡Ouch! Este campo está vacío</p>
+                  <p>¡Ouch! Este campo está vacío</p>
                 </div>
               </li>
             </ul>

diff --git a/assets/templates/login.html b/assets/templates/login.html
@@ -67,21 +67,27 @@ <h5>INGRESA A DOPPLER</h5>
         <p class="content-subtitle">Disfruta los beneficios del Email Marketing.</p><!-- Title -->
         <p class="content-subtitle">¿Aún no tienes una cuenta? <a href="#" class="link--title" target="_blank">REGÍSTRATE GRATIS</a></p>
         <form class="login-form">
+          <div class="form-message error">
+            <div class="wrapper-errors">
+              <p>Espera un segundo. Aún no has activado tu cuenta.</p>
+              <p><a href="#">Reenviar el Email de Activación.</a></p>
+            </div>
+          </div>
           <fieldset>
             <ul class="field-group">
               <legend>Usuario y contraseña</legend>
               <li class="field-item error">
                 <label for="email">Nombre de Usuario:</label>
                 <input type="email" name="email" id="email" placeholder="¡Psst! Es tu Email.">
                 <div class="wrapper-errors">
-                  <p class="error-message">¡Ouch! Este campo está vacío</p>
+                  <p>¡Ouch! Este campo está vacío</p>
                 </div>
               </li>
               <li class="field-item">
                 <label for="password">Contraseña: <a toggle="#password-field" class="ms-icon icon-view show-hide"> <span class="content-eye">Mostrar</a></label>
                 <input type="password" name="password" id="password-field" placeholder="Escribe tu clave secreta">
                 <div class="wrapper-errors">
-                  <p class="error-message">¡Ouch! Este campo está vacío</p>
+                  <p>¡Ouch! Este campo está vacío</p>
                 </div>
               </li>
             </ul>

diff --git a/assets/templates/modal.html b/assets/templates/modal.html
@@ -86,16 +86,16 @@ <h2 class="modal-title">Solicita una actualización de tu plan</h2>
                   <option value="">75001-100000</option>
                 </select>
                 <div class="wrapper-errors bounceIn">
-                  <p class="error-message">¡Ouch! Este campo está vacío</p>
+                  <p>¡Ouch! Este campo está vacío</p>
                 </div>
                 <!--error-messages-->
               </li><!-- field-item -->
               <li class="field-item error">
                 <label for="message">Mensaje </label>
                 <textarea id="message" name="message" placeholder="Tu mensage"></textarea>
                 <div class="wrapper-errors bounceIn">
-                  <p class="error-message">¡Ouch! Este campo está vacío</p>
-                  <span class="error-message">¡Ouch! Este campo está vacío</span>
+                  <p>¡Ouch! Este campo está vacío</p>
+                  <span>¡Ouch! Este campo está vacío</span>
                 </div><!-- error-messages -->
               </li><!-- field-item -->
             </ul><!-- field-group -->

diff --git a/assets/templates/signup.html b/assets/templates/signup.html
@@ -66,6 +66,11 @@ <h1 class="logo-doppler-new">Doppler</h1>
         <h5>email, automation & data marketing</h5>
         <p class="content-subtitle">Atrae, Convierte y Fideliza. Envíos ilimitados y gratis hasta 500 Suscriptores. ¿Ya tienes una cuenta? <a href="#" class="link--title" target="_blank">INGRESA</a></p><!-- Title -->
         <form class="signup-form">
+          <div class="form-message error">
+              <div class="wrapper-errors">
+                <span>¡Ouch! Mensaje inesperado</span>
+              </div>
+            </div>
           <fieldset>
             <legend>Datos personales</legend>
             <ul class="field-group">
@@ -75,14 +80,14 @@ <h5>email, automation & data marketing</h5>
                     <label for="name">Nombre:</label>
                     <input type="text" name="name" id="name">
                     <div class="wrapper-errors">
-                      <p class="error-message">¡Ouch! Este campo está vacío</p>
+                      <p>¡Ouch! Este campo está vacío</p>
                     </div>
                   </li>
                   <li class="field-item field-item--50">
                     <label for="lastname">Apellido:</label>
                     <input type="text" name="lastname" id="lastname">
                     <div class="wrapper-errors">
-                      <p class="error-message">¡Ouch! Este campo está vacío</p>
+                      <p>¡Ouch! Este campo está vacío</p>
                     </div>
                   </li>
                 </ul>
@@ -91,7 +96,7 @@ <h5>email, automation & data marketing</h5>
                 <label for="phone">Teléfono:</label>
                 <input type="tel" name="phone" id="phone-input" placeholder="9 11 2345-6789" class="phone-number">
                 <div class="wrapper-errors">
-                  <p class="error-message error-phone-number">¡Ouch! Este campo está vacío</p>
+                  <p class="error-phone-number">¡Ouch! Este campo está vacío</p>
                 </div>
               </li>
             </ul>
@@ -103,7 +108,7 @@ <h5>email, automation & data marketing</h5>
                 <label for="email">Email:</label>
                 <input type="email" name="email" id="email" placeholder="Tu Email será tu nombre de usuario">
                 <div class="wrapper-errors">
-                  <p class="error-message">¡Ouch! Este campo está vacío</p>
+                  <p>¡Ouch! Este campo está vacío</p>
                 </div>
               </li>
               <li class="field-item">
@@ -125,7 +130,7 @@ <h5>email, automation & data marketing</h5>
                 <input type="checkbox" name="acepto_politicas">
                 <span class="checkmark"></span><label for="acepto_politicas"> Acepto la <a href="#">Política de Privacidad</a> de Doppler.</label>
                 <div class="wrapper-errors">
-                  <p class="error-message">¡Ouch! Este campo está vacío</p>
+                  <p>¡Ouch! Este campo está vacío</p>
                 </div>
               </li>
               <li class="field-item field-item__checkbox">
@@ -135,7 +140,6 @@ <h5>email, automation & data marketing</h5>
               </li>
             </ul>
           </fieldset><!-- privacy policy and promotion -->
-          <div class="unexpected-message"><span>¡Ouch! Mensaje inesperado</span></div>
           <button type="button" class="dp-button button--round button-medium primary-green">crea tu cuenta gratis</button>
         </form><!-- form -->
         <div class="content-legal">