email verification: add small message under input

Midburn · Feb 10, 2019 · 163c5e1 · 163c5e1
1 parent 5489bfb
commit 163c5e1
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/app/assets/stylesheets/forms.css.scss b/app/assets/stylesheets/forms.css.scss
@@ -15,6 +15,16 @@
 .email_invalid {
   background-color: lighten($c-red, 30%) !important;
 }
+.nested_email_error{
+  font-size: 12px;
+  color: lighten($c-red, 30%);
+  .hidden {
+    visibility: hidden;
+  }
+  .visible {
+    visibility: visible;
+  }
+}
 
 .menu-heading {
   height: 79px;

diff --git a/app/views/camps/_person_fields.haml b/app/views/camps/_person_fields.haml
@@ -4,12 +4,17 @@
     const email_field = event.target;
     if (email_field.value != '') {
       verify_email(email_field.value, function (valid) {
+        msg = email_field.parentElement.querySelector('.nested_email_error');
         if (!valid) {
           email_field.classList.remove("email_valid");
           email_field.classList.add("email_invalid");
+          msg.classList.remove("hidden");
+          msg.classList.add("visible");
         } else {
           email_field.classList.remove("email_invalid");
           email_field.classList.add("email_valid");
+          msg.classList.add("hidden");
+          msg.classList.remove("visible");
         }
       });
     }
@@ -42,6 +47,8 @@
     = f.label :email
     - if (@can_edit)
       = f.text_field :email, class: 'form-control person_email', onfocusout: 'verify_person_email(event)'
+      .nested_email_error.hidden
+        = t("email_not_in_spark_small")
     - else
       = f.text_field :email, class: 'form-control', readonly: true
     = f.label :phone_number

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -591,6 +591,7 @@ en:
   new_dream_is_disabled: Creating new dreams is disabled at the moment. If you think
     this is a mistake please contact bureau of dreams
   email_not_in_spark: Sorry, but we couldn't find a Midburn profile associated with
+  email_not_in_spark_small: Sorry, but we couldn't find a Midburn profile associated with this email.
   dont_miss_out:
     banner: Don't miss out! Only %{time} left to %{action}
     actions:

diff --git a/config/locales/he.yml b/config/locales/he.yml
@@ -565,6 +565,7 @@ he:
   # Errors
   new_dream_is_disabled: "יצירת חלומות חדשים מנוטרלת כרגע. אם אתה חושב שזאת שגיאה אנא צור קשר עם לשכת החלומות"
   email_not_in_spark: "אופס! לא מצאנו פרופיל מידברן מקושר למייל: "
+  email_not_in_spark_small: "אופס! לא מצאנו פרופיל מידברן מקושר למייל"
 
   time:
     am: am