Commit 5785ace

mo <mo@mokhan.ca>
2018-12-15 18:29:06
use input controller on login page.
1 parent aa4ec14
Changed files (3)
app
javascript
views
app/javascript/controllers/input_controller.js
@@ -1,5 +1,5 @@
-import validator from 'validator';
 import ApplicationController from './application_controller';
+import Email from '../models/email';
 import FormValidation from '../models/form_validation';
 import I18n from '../i18n';
 
@@ -23,7 +23,7 @@ export default class extends ApplicationController {
     }
 
     const isEmail = element.getAttribute('type') === 'email';
-    if (isEmail && !validator.isEmail(element.value)) {
+    if (isEmail && new Email(element.value).invalid()) {
       return this.displayError(I18n.translate('js.form.errors.invalid'));
     }
 
app/javascript/models/email.js
@@ -1,10 +1,15 @@
+import validator from 'validator';
+
 export default class Email {
   constructor(value) {
     this.value = value;
   }
 
   valid() {
-    const regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-    return regex.test(this.value);
+    return validator.isEmail(this.value);
+  }
+
+  invalid() {
+    return !this.valid();
   }
 }
app/views/sessions/new.html.erb
@@ -3,22 +3,24 @@
     <div class="column is-half">
       <h1 class="title"><%= t('.title') %></h1>
 
-      <%= form_for :user, url: session_path, method: :post, data: { controller: 'sessions--new' } do |form| %>
+      <%= form_for :user, url: session_path, method: :post do |form| %>
         <div class="field">
           <%= form.label :email %>
           <div class="control">
-            <%= form.email_field :email, class: 'input', autofocus: true, required: :required, data: { target: 'sessions--new.email', action: "keyup->sessions--new#validate" } %>
+            <%= form.email_field :email, class: 'input', autofocus: true, required: :required, data: { controller: 'input', action: "keyup->input#changed" } %>
           </div>
+          <p class="help"></p>
         </div>
         <div class="field">
           <%= form.label :password %>
           <div class="control">
-            <%= form.password_field :password, class: 'input', required: :required, data: { target: 'sessions--new.password', action: "keyup->sessions--new#validate" } %>
+            <%= form.password_field :password, class: 'input', required: :required, data: { controller: 'input', action: "keyup->input#changed" } %>
           </div>
+          <p class="help"></p>
         </div>
         <div class="field is-grouped is-grouped-right">
           <div class="control">
-            <%= form.button t('.login'), type: 'submit', class: 'button is-primary', data: { disable_with: t('loading'), target: 'sessions--new.submit' } %>
+            <%= form.button t('.login'), type: 'submit', class: 'button is-primary', data: { disable_with: t('loading') } %>
           </div>
           <div class="control">
             <%= link_to "Register", new_registration_path, class: 'button is-text' %>