Блог

Я работаю над новым проектом Ruby on Rails и хочу использовать красивую форму входа и регистрации вместо скучной simple_form.Как я могу использовать пользовательскую форму входа (html / css / JS) в rails вместо simple_form? Вот мой новый код файла httmlerb.

 <div class="container">
  <div class="row justify-content-center">
    <div class="col-12 col-sm-4">
      <div class="form-login">
        <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
          <div class="form-inputs">
            <%= f.input :email,
                        required: false,
                        autofocus: true,
                        placeholder: "Insert your email address",
                        input_html: { autocomplete: "email" } %>
            <%= f.input :password,
                        required: false,
                        placeholder: "Insert your password",
                        input_html: { autocomplete: "current-password" } %>
            <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
          </div>

          <div class="form-actions">
            <%= f.button :submit, "Log In", class: 'submit-button' %>
          </div>
        <% end %>
        <%= link_to "Forgot your password?", new_user_password_path %>
        <p> --- or --- </p>
        <div class="button-align">
        <%= link_to 'Sign Up', new_user_registration_path, class: 'button' %>
        </div>
      </div>
    </div>
  </div>
</div>
 

Фактическая форма входа и регистрации, которую я хочу использовать.Итак, мой вопрос в том, как я могу подключить путь входа и регистрации в приведенном ниже коде, который я хочу использовать, без простой формы?

   <center>
  <div class="container1" id="container1">
    <div class="form-container1 sign-up-container1">
      <form action="#">
        <h1>Create Account</h1>
        <div class="social-container1">
          <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
          <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
          <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
        </div>
        <span>or use your email for registration</span>
        <input type="text" placeholder="Name" />
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <button>Sign Up</button>
      </form>
    </div>
    <div class="form-container1 sign-in-container1">
      <form action="#">
        <h1>Sign in</h1>
        <div class="social-container1">
          <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
          <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
          <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
        </div>
        <span>or use your account</span>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <%# <a href="#">Forgot your password?</a> %>
        <%= link_to "Forgot your password?", new_user_password_path %>

        <button>Sign In</button>
      </form>
    </div>
    <div class="overlay-container1">
      <div class="overlay">
        <div class="overlay-panel overlay-left">
          <h1>Welcome Back!</h1>
          <p>To keep connected with us please login with your personal info</p>
          <button class="ghost" id="signIn">Sign In</button>
        </div>
        <div class="overlay-panel overlay-right">
          <h1>Hello, Friend!</h1>
          <p>Enter your personal details and start journey with us</p>
          <button class="ghost" id="signUp">Sign Up</button>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <p>
      Created with <i class="fa fa-heart"></i> by
      <a target="_blank" href="https://florin-pop.com">Florin Pop</a>
      - Read how I created this and how you can join the challenge
      <a target="_blank" href="https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/">here</a>.
    </p>
  </footer>
</center>
<script>
  const signUpButton = document.getElementById('signUp');
  const signInButton = document.getElementById('signIn');
  const container1 = document.getElementById('container1');

  signUpButton.addEventListener('click', () => {
    container1.classList.add("right-panel-active");
  });

  signInButton.addEventListener('click', () => {
    container1.classList.remove("right-panel-active");
  });
</script>