added failed login for register form

web/modules/custom/materio_user/materio_user.module

@@ -35,6 +35,7 @@ function materio_user_form_user_login_form_alter(&$form, FormStateInterface $for
   );
 
   $form['message'] = array(
+    '#weight' => -10,
     '#markup' => '
       <span class="login-message" v-if="loginMessage">
         {{ loginMessage }}
@@ -45,8 +46,6 @@ function materio_user_form_user_login_form_alter(&$form, FormStateInterface $for
 }
 
 function materio_user_form_user_modal_form_alter(&$form, FormStateInterface $form_state, $form_id) {
-  // Drupal::logger('materio_user')->notice(print_r($form['mail'], true));
-  // ksm($form);
   $form['account']['mail']['#attributes'] = array(
     "v-model" => "mail",
     "@keyup.enter" => "register",
@@ -69,6 +68,14 @@ function materio_user_form_user_modal_form_alter(&$form, FormStateInterface $for
     // ":class" => "can_register"
   );
 
+  $form['account']['message'] = array(
+    '#weight' => -10,
+    '#markup' => '
+      <span class="register-message" v-if="registerMessage">
+        {{ registerMessage }}
+      </span>
+    '
+  );
 }
 
 function _materio_user_process_password_confirm($element){

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

@@ -2382,12 +2382,13 @@ article.card {
         display: block;
         max-width: 16em;
         font-size: 0.693em; }
-      #pricing-modal-login-register #login-register > section form span.login-message {
+      #pricing-modal-login-register #login-register > section form span.login-message,
+      #pricing-modal-login-register #login-register > section form span.register-message {
         color: red;
         font-size: 0.693em;
         line-height: 1.2;
         display: block;
-        padding: 0 0 0.8em 0; }
+        padding: 0.8em 0 0 0; }
 
 #main-content form.commerce-checkout-flow {
   max-width: 641px; }

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

@@ -1672,12 +1672,13 @@ article.card{
           font-size: 0.693em;
         }
 
-        span.login-message{
+        span.login-message,
+        span.register-message{
           color: red;
           font-size: 0.693em;
           line-height: 1.2;
           display: block;
-          padding: 0 0 0.8em 0;
+          padding: 0.8em 0 0 0;
         }
       }
     }

web/themes/custom/materiotheme/vuejs/components/Content/Product.vue

@@ -28,7 +28,7 @@
     <Modal
       v-if="showLoginModal"
       @close="closeModal"
-      :styles="{width:'500px', height:'300px'}"
+      :styles="{width:'500px', height:'350px'}"
     >
       <section id="pricing-modal-login-register">
         <h2>{{ $t("materio.Please login or create a new account to order your access") }}</h2>

web/themes/custom/materiotheme/vuejs/components/Form/RegisterForm.vue

@@ -16,6 +16,9 @@ export default {
     ps: ""
   }),
   computed: {
+    ...mapState({
+      registerMessage: state => state.User.registerMessage,
+    }),
     psswd_class: function(){
       return this.ps.toLowerCase()
     },

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

@@ -19,6 +19,7 @@ export default {
     csrf_token: null,
     logout_token: null,
     loginMessage: '',
+    registerMessage: '',
     isloggedin: false,
     isAdmin: false,
     isAdherent: false,
@@ -51,6 +52,10 @@ export default {
       console.log('setLoginMessage', message);
       state.loginMessage = message
     },
+    setRegisterMessage (state, message) {
+      console.log('setRegisterMessage', message);
+      state.registerMessage = message
+    },
     setUid (state, uid) {
       state.uid = uid
       state.isloggedin = true
@@ -133,13 +138,28 @@ export default {
         REST.get('/session/token').then(({ token }) => {
           commit('SetCsrftoken', token)
           REST.post('/user/register?_format=json', credentials, {
-            'X-CSRF-Token': state.csrftoken
+            'X-CSRF-Token': state.csrftoken,
+            validateStatus: function (status) {
+                return status >= 200 && status < 500;
+            }
           })
-            .then(({ data }) => {
-              console.log('user REST registered', data)
+            .then((response) => {
+              console.log('user REST registered', response)
+              if(response.status === 200){
                 dispatch('userLogin', credentials).then(() => {
                   resolve()
                 })
+              }else{
+                let message = ''
+                switch (response.status) {
+                  case 422:
+                    message = "email is already registered"
+                    break;
+                  default:
+                    message = response.data.message
+                }
+                commit('setRegisterMessage', message)
+              }
             })
             .catch(error => {
               console.warn('Issue with register', error)