✨feat: add nice dynamic validation (#29)

components/AuthPopup/AuthPopup.hbs

@@ -1,37 +1,41 @@
 <div class='overlay'>
-    <form novalidate method='POST' class='popup' id='auth-form'>
+    <form novalidate method='POST' class='auth-modal' id='auth-form'>
         <div class='close-cross'>
             <a>
                 <img src='/svg/cross.svg' width='30' />
             </a>
         </div>
-        <img class='auth-img' src='/name.png' />
+        <img class='auth-logo' src='/name.png' />
 
         <div class='auth-message'>{{authMessage}}</div>
         <div class='popup__failure-message none'>Неправильный логин или пароль!</div>
-        <div class='popup__div'>
+        <div class='auth-modal__fields-container'>
             {{#each inputs}}
-                <div class='popup__inputAndValidationMessage'>
+                <div class='auth-modal__field-container'>
                     <input
+                        class='auth-modal__input'
                         name='{{@key}}'
                         placeholder='{{this.placeholder}}'
                         type='{{this.type}}'
                         minlength='{{this.minLen}}'
                         maxlength='{{this.maxLen}}'
                         required='{{this.required}}'
+                        data-validation-type='{{this.validationType}}'
                     />
 
-                    <a class='none popup__exclamation'>
-                        <img src='/svg/exclamation.svg' width='20' alt='!' />
-                    </a>
-                    <div class='popup__validationMessage none'></div>
+                    <p
+                        class='js-error-text auth-modal__error'
+                        aria-live='polite'
+                    >
+                        <!-- error text here -->
+                    </p>
                 </div>
             {{/each}}
 
         </div>
-        <button class='popup__button'>{{buttonText}}</button>
-        <div class='have-account'><p>{{bottomText}}</p><a
-                class='bold popup__a'
-            >{{bottomAText}}</a></div>
+        <button class='auth-modal__sign-in-button'>{{buttonText}}</button>
+        <div class='have-account'><p>{{bottomText}}</p>
+            <a class='bold auth-modal__a'>{{bottomAText}}</a>
+        </div>
     </form>
 </div>

components/AuthPopup/AuthPopup.scss

@@ -1,4 +1,4 @@
-.popup {
+.auth-modal {
     position: fixed;
     width: 400px;
     min-height: 520px;
@@ -12,34 +12,75 @@
     justify-content: space-around;
     gap: 10px;
     padding: 30px 10px 0;
-}
 
-.popup input {
-    height: 50%;
-    min-height: 40px;
-    padding-left: 8%;
-    font-size: 16px;
-    margin-left: 10%;
-    width: 80%;
-    max-width: 280px;
-    border: 1px solid black;
-    border-radius: 5px;
-}
+    &__field-container {
+        width: 80%;
+        margin: 0 auto;
+    }
 
-.popup input::placeholder {
-    color: #635b5b;
-    font-size: 16px;
-}
+    &__input {
+        display: block;
+        height: 40px;
+        padding-left: 8%;
+        font-size: 16px;
+        width: 100%;
+        box-sizing: border-box;
+        border: 1px solid black;
+        border-radius: 5px;
+
+        &::placeholder {
+            color: #635b5b;
+            font-size: 16px;
+        }
+
+        &-error {
+            border: 1px solid #ff8630;
+            background-color: rgb(255 134 48 / 0.1);
+        }
+
+        &-active {
+            border-color: #db7f3d;
+        }
+    }
 
-.popup__div {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+    &__error {
+        color: #ff8630;
+        font-size: 14px;
+        display: none;
+
+        &-active {
+            display: block;
+        }
+    }
+
+    &__fields-container {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    &__sign-in-button {
+        background-color: #ffa552;
+        color: #ffffff;
+        cursor: pointer;
+        margin: 0 20% 5%;
+        border: none;
+        border-radius: 10px;
+        height: 40px;
+        min-height: 40px;
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    &__a {
+        cursor: pointer;
+        font-weight: 600;
+    }
 }
 
-.auth-img {
-    padding-left: 20%;
-    padding-right: 20%;
+.auth-logo {
+    width: 250px;
+    margin: 0 auto;
 }
 
 .auth-message {
@@ -51,19 +92,6 @@
     text-align: center;
 }
 
-.popup__button {
-    background-color: #ffa552;
-    color: #ffffff;
-    cursor: pointer;
-    margin: 0 20% 5%;
-    border: none;
-    border-radius: 10px;
-    height: 40px;
-    min-height: 40px;
-    font-size: 20px;
-    font-weight: bold;
-}
-
 .have-account {
     padding-bottom: 5%;
     display: flex;
@@ -101,61 +129,6 @@
     z-index: 2;
 }
 
-.bold {
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.popup__input__error {
-    border-width: 2px !important;
-    border-color: #e10505 !important;
-}
-
-.popup__inputAndValidationMessage {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding-right: 5%;
-}
-
-.popup__exclamation {
-    padding-left: 10px;
-    cursor: pointer;
-}
-
-.popup__validationMessage {
-    position: absolute;
-    background-color: #ffffff;
-    border: 1px solid #e10505;
-    border-radius: 10px;
-    margin: 0;
-    left: 450px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    /*white-space: nowrap;*/
-
-    min-width: 300px;
-    max-width: fit-content;
-
-    min-height: 40px;
-    max-height: fit-content;
-
-    padding: 2px 10px;
-    font-size: 20px;
-    font-style: italic;
-}
-
-.none {
-    display: none;
-}
-
-.popup__failure-message {
-    color: #e10505;
-    text-align: center;
-}
-
 @media screen and (max-width: 900px) {
     .popup {
         position: fixed;