feature/Add form controller to validate form inputs for submit

Author: LewisYoul

app/javascript/controllers/form_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+  static targets = ["field", "submit"];
+
+  connect() {
+    this.initialValues = this.fieldTargets.map(target => target.value)
+  }
+
+  validateInput(event) {
+    const index = this.fieldTargets.indexOf(event.target)
+    const initialValue = this.initialValues[index]
+
+    if (initialValue !== event.target.value) {
+      this.enableSubmit()
+    } else {
+      if (this.changedFields().length > 0) {
+        this.enableSubmit()
+      } else {
+        this.disableSubmit()
+      }
+    }
+  }
+
+  enableSubmit() {
+    this.submitTarget.classList.remove("button--cta-disabled")
+    this.submitTarget.classList.add("button--cta-blue")
+    this.submitTarget.disabled = false
+  }
+
+  disableSubmit() {
+    this.submitTarget.classList.remove("button--cta-blue")
+    this.submitTarget.classList.add("button--cta-disabled")
+    this.submitTarget.disabled = true
+  }
+
+  changedFields() {
+    return this.fieldTargets.filter(target => {
+      const index = this.fieldTargets.indexOf(target)
+      const initialValue = this.initialValues[index]
+      
+      return initialValue !== target.value
+    })
+  }
+}

app/views/devise/registrations/edit.html.erb

@@ -14,22 +14,22 @@
   <div class="tabs-details">
     <div data-target="tabs.panel">
       <div class="margin-top">
-        <%= form_for current_user, url: modify_users_path, html: { style: "width: 100%;", method: :put } do |f| %>
+        <%= form_for current_user, url: modify_users_path, html: { style: "width: 100%;", data: { controller: "form" }, method: :put } do |f| %>
           <div class="edit-profile--wrapper">
             <div class="edit-profile--fields">
               <div class="form-field">
                 <%= f.label :name %>
-                <%= f.text_field :name %>
+                <%= f.text_field :name, data: { target: "form.field", action: "input->form#validateInput" } %>
               </div>
 
               <div class="form-field">
                 <%= f.label :bio %>
-                <%= f.text_area :bio %>
+                <%= f.text_area :bio, data: { target: "form.field", action: "input->form#validateInput" } %>
               </div>
 
               <div class="form-field">
                 <%= f.label :location %>
-                <%= f.text_field :location %>
+                <%= f.text_field :location, data: { target: "form.field", action: "input->form#validateInput" } %>
               </div>
             </div>
 
@@ -39,14 +39,13 @@
                 class="edit-avatar--edit-button"
                 data-action="click->upload#selectNewImage">
                 <img src="/icons/edit.svg" width="16">
-                <%= f.file_field :avatar, class: "hidden", data: { target: "upload.fileInput", action: "change->upload#handleFileSelect" } %>
-                <%# <input data-target="upload.fileInput" data-action="change->upload#handleFileSelect" name="avatar" type="file" style="visibility: hidden" /> %>
+                <%= f.file_field :avatar, class: "hidden", data: { target: "upload.fileInput form.field", action: "change->upload#handleFileSelect change->form#validateInput" } %>
               </div>
             </div>
           </div>
 
           <div class="folders--options-wrapper">
-            <%= f.submit "SAVE", class: 'button--cta-new' %>
+            <%= f.submit "SAVE", class: 'button--cta-disabled', disabled: true, data: { target: "form.submit" } %>
           </div>
         <% end %>
 
@@ -57,18 +56,6 @@
     </div>
 
     <div data-target="tabs.panel" class="hidden">
-      sec
-    </div>
-  </div>
-</div>
-
-<card>
-  <tabs title="Edit Profile">
-    <tab name="Account" selected="true">
-      <edit-profile />
-    </tab>
-
-    <tab name="Security">
       <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
         <%= render "devise/shared/error_messages", resource: resource %>
 
@@ -110,6 +97,6 @@
       <p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>
       <%= link_to "Back", :back %>
       <%= link_to('SIGN OUT', destroy_user_session_path, method: :delete, class: "button--cta-blue") %>
-    </tab>
-  </tabs>
-</card>
+    </div>
+  </div>
+</div>