Allow email address updates on account settings page

app/views/settings/_account.html.erb

@@ -1,13 +1,44 @@
-<section>
+<%= tag.section data: {
+      controller: "settings--account--email",
+      "settings--account--email-validation-failed-value": @validation_errors.present?
+    } do %>
   <h3>E-Mail</h3>
-  <p class="mb-2">
-    <%= label :email, 'Address', class: 'font-bold' %>
-  </p>
-  <p class="flex gap-1 mb-2 sm:w-3/5">
-    <input type="text" id="email" class="grow"
-           value=<%= current_user.email %> disabled="disabled" />
-  </p>
-</section>
+  <%= form_for(current_user, url: update_email_settings_path, method: "post") do |f| %>
+    <%= hidden_field_tag :section, "account" %>
+    <p class="mb-2">
+      <%= f.label :email, 'Address', class: 'font-bold' %>
+    </p>
+    <p class="mb-2 flex gap-1 sm:w-3/5">
+      <%= f.email_field :email, class: "grow", data: {
+            'settings--account--email-target': 'emailField'
+          }, required: true %>
+      <button type="button" id="edit-email"
+              class="btn-md btn-icon btn-blue shrink-0 hidden initial-visible"
+              data-settings--account--email-target="editEmailButton"
+              data-action="settings--account--email#editEmail"
+              title="Edit email address">
+        <span class="">
+          <%= render partial: "icons/edit-3", locals: {
+                custom_class: "text-white h-4 w-4 inline" } %>
+        </span>
+      </button>
+    </p>
+    <% if @validation_errors.present? && @validation_errors[:email].present? %>
+      <p class="error-msg"><%= @validation_errors[:email].first %></p>
+    <% end %>
+    <div class="initial-hidden">
+      <p class="mt-4 mb-2">
+        <%= f.label :current_password, 'Current password', class: 'font-bold' %>
+      </p>
+      <p class="sm:w-3/5">
+        <%= f.password_field :current_password, class: "w-full", required: true %>
+      </p>
+      <p class="mt-6">
+        <%= f.submit "Update", class: "btn-md btn-blue" %>
+      </p>
+    </div>
+  <% end %>
+<% end %>
 <section>
   <h3>Password</h3>
   <p class="mb-8">Use the following button to request an email with a password reset link:</p>