wahanegi/vibereport

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="mx-auto mt-85 minW-675">
    <div class="welcome-field mx-auto mb-115">
      <h1 class="color-black">
        Oh, hi there!
      </h1>
      <p class="b2 gray-600 mt-negative-17">Welcome to</p>
    </div>
    <%= render 'layouts/logo', height: 87 %>
    <div class="input-label mt-3 mb-6 mx-auto pt-3">
      <p class="gray-600 b3">Enter your email address and we’ll send you a link
        <br>
        to access your check-in and profile</p>
    </div>
    <div class="b1">
      <%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "Enter email here", id: "email-input", class:"mt-2 w-660 email-input email-input-new"%>
    </div>
    <div class="d-flex align-items-center mt-85 pb-52">
      <%= f.submit 'Next', class: "btn btn-regular c1 fs-5", id: "next-button", disabled: true %>
    </div>
    <div class="hud help pointer d-flex justify-content-end h-0 pb-52 mb-3">
      <%= link_to image_tag("help.svg"), '#', class: 'help-icon',  data: { bs_toggle: 'modal', bs_target: '#helpModal' } %>
    </div>
    <%= render 'layouts/help_modal' %>
  </div>
<% end %>

<script type="text/javascript">
  window.onload = function() {
    $(document).ready(function() {
      // Get the input and button elements
      const input = $("#email-input");
      const button = $('#next-button');
      input.val("")
      // Attach an event listener to the input field
      input.on('input', function() {
        // Check if the email is valid using a regular expression
        if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.val())) {
          button.attr('disabled', false);
        } else {
          button.attr('disabled', true);
        }
      });
    });
  }
</script>