Commit 4b8ddb3

@@ -1,19 +1,36 @@
 import { Controller } from 'stimulus'
+import Email from '../models/email'
 
 export default class extends Controller {
+  get email() { return this.targets.find("email") }
+  get password() { return this.targets.find("password") }
+  get submitButton() { return this.targets.find("submit") }
+
   validate() {
-    if (this.password && this.email) {
-      console.log("valid")
+    if (this.isValidEmail() && this.isValidPassword()) {
+      this.enable(this.submitButton);
     } else {
-      console.log("invalid")
+      this.disable(this.submitButton)
     }
   }
 
-  get email() {
-    return this.targets.find("email").value
+  enable(element) {
+    element.removeAttribute('disabled');
+  }
+
+  disable(element) {
+    element.setAttribute('disabled', 'disabled');
+  }
+
+  isPresent(element) {
+    return element.value.length > 0;
+  }
+
+  isValidEmail() {
+    return new Email(this.email.value).valid();
   }
 
-  get password() {
-    return this.targets.find("password").value
+  isValidPassword() {
+    return this.isPresent(this.password);
   }
 }

@@ -0,0 +1,10 @@
+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);
+  }
+}

@@ -4,12 +4,12 @@
       <h1>Login</h1>
       <%= form_for :user, url: session_path, method: :post, data: { controller: 'sessions' } do |form| %>
         <div class="form-group">
-          <%= form.email_field :email, class: 'form-control', placeholder: User.human_attribute_name(:email), autofocus: true, required: :required, data: { target: 'sessions.email', action: "change->sessions#validate" } %>
+          <%= form.email_field :email, class: 'form-control', placeholder: User.human_attribute_name(:email), autofocus: true, required: :required, data: { target: 'sessions.email', action: "keyup->sessions#validate" } %>
         </div>
         <div class="form-group">
-          <%= form.password_field :password, class: 'form-control', placeholder: User.human_attribute_name(:password), required: :required, data: { target: 'sessions.password', action: "change->sessions#validate" } %>
+          <%= form.password_field :password, class: 'form-control', placeholder: User.human_attribute_name(:password), required: :required, data: { target: 'sessions.password', action: "keyup->sessions#validate" } %>
         </div>
-        <%= form.button t('.login'), type: 'submit', class: 'btn btn-primary', data: { disable_with: t('.loading') } %>
+        <%= form.button t('.login'), type: 'submit', class: 'btn btn-primary', data: { disable_with: t('.loading'), target: 'sessions.submit' } %>
         <%= link_to "Register", new_registration_path %>
       <% end %>
 

@@ -10,4 +10,10 @@ describe('SessionsController', () => {
   it("is alive", () => {
     expect(subject).toBeInstanceOf(SessionController);
   });
+
+  describe("validate", () => {
+    xit("disables the submit button when the email is blank", () => {
+      subject.validate();
+    });
+  });
 });