pricing login modal : added password strength description, and lost password link

web/modules/custom/materio_user/materio_user.module

@@ -7,6 +7,8 @@
 
 use \Drupal\Core\Form\FormStateInterface;
 use \Drupal\Core\Block\BlockPluginInterface;
+use \Drupal\Core\Url;
+use \Drupal\Core\Link;
 
 /**
  * implements hook_form_FORM_ID_alter()
@@ -24,6 +26,10 @@ function materio_user_form_user_login_form_alter(&$form, FormStateInterface $for
     "@keyup.enter" => "login"
   );
 
+  $url = Url::fromRoute('user.pass');
+  $form['pass']['#description'] = Link::fromTextAndUrl('Forgot your password?', $url)->toString();
+  // "<a href="{{ path('user.pass') }}">{{ 'Forgot your password?'|t }}</a>";
+
   $form['actions']['submit']['#attributes'] = array(
     "@click.prevent" => "login"
   );
@@ -59,6 +65,7 @@ function materio_user_form_user_modal_form_alter(&$form, FormStateInterface $for
 
 function _materio_user_process_password_confirm($element){
   // ksm($element);
+  $element['pass1']['#description'] = t('Password must contains Lowercase and Uppercase Letters, numbers, and punctuation.');
   $element['pass1']['#attributes'] += array(
     "v-model" => "pass1",
     "placeholder" => $element['pass1']['#title'],

web/themes/custom/materiotheme/assets/dist/main.css

@@ -2251,6 +2251,11 @@ article.card {
       #pricing-modal-login-register #login-register > section form input[type="email"],
       #pricing-modal-login-register #login-register > section form input[type="password"] {
         max-width: 11em; }
+      #pricing-modal-login-register #login-register > section form#user-login-form #edit-pass--description,
+      #pricing-modal-login-register #login-register > section form #edit-pass-pass1--description {
+        display: block;
+        max-width: 16em;
+        font-size: 0.693em; }
 
 #main-content form.commerce-checkout-flow {
   max-width: 641px; }

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -1469,6 +1469,12 @@ article.card{
         input[type="password"]{
           max-width: 11em;
         }
+        &#user-login-form #edit-pass--description,
+        #edit-pass-pass1--description{
+          display: block;
+          max-width: 16em;
+          font-size: 0.693em;
+        }
       }
     }
     section.login{

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -129,7 +129,9 @@ export default {
     },
     userLogin ({ dispatch, state }, credentials) {
       return new Promise((resolve, reject) => {
-        dispatch('getToken', credentials).then(() => {
+        dispatch('getToken', credentials)
+          // TODO: catch failed login
+          .then(() => {
             dispatch('getUser').then(userdata => {
               console.log('User Loggedin')
               if (state.isAdmin) {
@@ -138,6 +140,10 @@ export default {
               resolve()
             })
           })
+          .catch(error => {
+            console.warn('Issue with Dispatch getToken', error)
+            Promise.reject(error)
+          })
       })
     },
     getToken ({ dispatch, commit, state }, credentials) {