Rails 6 регистрация модальная с разработкой

#ruby-on-rails #devise

#ruby-on-rails #разработка

Вопрос:

Я новичок в rails и пытаюсь установить модальный режим для входа / регистрации пользователя. Я могу заставить модальный режим работать, но я не могу понять, как заставить devise registraion работать в модальном режиме. Я даже пытался создать отдельный файл users/_new.html.erb с моей собственной регистрационной формой, но когда я пытаюсь отправить из модального, я получаю сообщение об ошибке, маршрут не соответствует post/. Я попытался изменить форму devise/ registration/new.html.erb на _new.html.erb, но когда я пытаюсь загрузить страницу, я получаю сообщение об ошибке:

ActionView::Template::Ошибка (неопределенная локальная переменная или метод `resource’ для #<#Class:0x000000000ebf9b50:0x000000000ec0de70> Ты имел в виду? спасение):

Вышеуказанная ошибка возникает, когда я отображаю стандартную форму devise/ registrations/new.html.erb. Я преобразовал его в частичный и переместил в общую папку.

 <h1><%= t('.sign_up') %></h1>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  
  <div class="form-group">
    <%= f.label :email %>
    <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control' %>
  </div>

  <div class="form-group">
    <%= f.label :password %>
    <%= f.password_field :password, autocomplete: 'current-password', class: 'form-control' %>

    <% if @minimum_password_length %>
      <small class="form-text text-muted"><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></small>
    <% end %>
  </div>

  <div class="form-group">
    <%= f.label :password_confirmation %>
    <%= f.password_field :password_confirmation, autocomplete: 'current-password', class: 'form-control' %>
  </div>

  <div class="form-group">
    <%= f.submit t('.sign_up'), class: 'btn btn-primary' %>
  </div>
<% end %>

<%= render 'devise/shared/links' %>

 

Другой способ, который я пробовал, — это разместить всю форму в модальном режиме на странице навигации, но когда я нажимаю отправить, она переходит на localhost.3000, и я получаю сообщение об ошибке, что никакие маршруты не соответствуют сообщению «/».
Эта форма, извините, длинная, у меня есть две формы в модальном:

 <!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" aria-labelledby="login" aria-hidden="true">
  <div class="modal-dialog modal-lg border-0">
    <div class="modal-content border-0">
      <div class="modal-content-head">
        <h5 class="modal-title" id="login">Member Login</h5>  
        <button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12 col-md-5">
            <div class="row border-0">
              <div class="col-12 modal-content-subhead">
                Login
              </div>
            </div>
            <div class="row">
              <div class="col-12 modal-content">
                <%= form_with(model: @user, class: "shadow p-3 mb-3 rounded text-light", local: true)  do |f| %>
                  
                  <div class="form-group row">
                    <div class="col-md-1 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_email.gif") %>
                    </div>
                    <div class="col-md-11 col-sm-12">
                      <%= f.email_field :email, class: "form-control shadow rounded", placeholder: "Email" %>
                    </div>
                  </div>

                  <div class="form-group row">
                    <div class="col-md-1 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_locked.gif") %>
                    </div>
                    <div class="col-md-11 col-sm-12">
                      <%= f.password_field :password, class: "form-control shadow rounded", placeholder: "Enter your password" %>
                    </div>
                  </div>

                  <div class="form-group row justify-content-center">
                    <div class="col-12">
                      <%= f.submit "Log in", class: "btn btn-outline-light btn-lg" %>
                    </div>
                  </div>
                <% end %>
              </div>
            </div>
          </div>

          <div class="col-1 text-center">
            <%= image_tag("layout/login/login_divider.gif") %>
          </div>

          <div class="col-sm-12 col-md-5">
            <div class="row border-0">
              <div class="col-12 modal-content-subhead">
                Join
              </div>
            </div>
            <div class="row">
              <div class="col-12 modal-content">
                <%= form_with(model: @user, class: "shadow p-3 mb-3 rounded text-light", local: true)  do |f| %>
                  
                  <div class="form-group row">
                    <div class="col-md-1 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_name_37_33.gif") %>
                    </div>
                    <div class="col-md-11 col-sm-12">
                      <%= f.text_field :first_name, class: "form-control shadow rounded", placeholder: "First Name" %>
                    </div>
                  </div>

                  <div class="form-group row">
                    <div class="col-md-1 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_name_37_33.gif") %>
                    </div>
                    <div class="col-md-11 col-sm-12">
                      <%= f.text_field :last_name, class: "form-control shadow rounded", placeholder: "Last Name" %>
                    </div>
                  </div>

                  <div class="form-group row">
                    <div class="col-md-1 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_email.gif") %>
                    </div>
                    <div class="col-md-11 col-sm-12">
                      <%= f.email_field :email, class: "form-control shadow rounded", placeholder: "Email" %>
                    </div>
                  </div>

                  <div class="form-group row">
                    <div class="col-md-1 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_locked.gif") %>
                    </div>
                    <div class="col-md-11 col-sm-12">
                      <%= f.password_field :password, class: "form-control shadow rounded", placeholder: "Enter your password" %>
                    </div>
                  </div>

                  <div class="form-group row justify-content-center">
                    <div class="col-12">
                      <%= f.submit "Log in", class: "btn btn-outline-light btn-lg" %>
                    </div>
                  </div>
                <% end %>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-11 text-center">
            <%=link_to( image_tag("layout/facebook_login_200_42.gif"), user_facebook_omniauth_authorize_path) %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
---

Here is my routes.rb
~~~code
Rails.application.routes.draw do
  devise_for :users, controllers: {omniauth_callbacks: 'omniauth'}
  root 'pages#index'
  get 'about', to: 'pages#about'
  resources :users, param: :username
  resources :clubs, param: :club_username
end
 

Я рад создать свой собственный или использовать devise с некоторыми изменениями, но я просто не могу понять, как это сделать.

Любая помощь будет с благодарностью оценена.

Спасибо,

Скотт

Комментарии:

1. Возможно ли совместно использовать строку кода, в которой возникает эта ошибка, или более длинную трассировку стека?

2. Можете ли вы отредактировать вопрос, чтобы включить код для представления, которое создает ошибку, это также помогло бы вам опубликовать всю строку ошибок, которую rails дает вам там. Вы должны просто быть в состоянии сделать что-то подобное <%= render 'path/to/view' %> там, но нам нужно увидеть код и ошибку, чтобы отладить его.

3. Я отредактировал и включил свой код. Спасибо,

Ответ №1:

Я провел еще несколько поисков и смог заставить его работать. Я удалил devise и попробовал его, но не смог заставить его работать, поэтому я переустановил devise и omniauth и нашел объяснение для включения форм devise в мое приложение.

Я установил представления начальной загрузки devise, затем в папке layouts я создал частичное имя _login_html.erb и скопировал форму входа и формы регистрации бок о бок:

 <div class="modal fade" id="login" tabindex="-1" aria-labelledby="login" aria-hidden="true">
  <div class="modal-dialog modal-lg border-0">
    <div class="modal-content border-0">
      <div class="modal-content-head">
        <h5 class="modal-title" id="login">Member Login</h5>  
        <button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12 col-md-4">
            <div class="row border-0">
              <div class="col-12 modal-content-subhead">
                Login
              </div>
            </div>
            <div class="row">
              <div class="col modal-content">
                <%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :remote => true) do |f| %>
                  
                  <div class="form-group row">
                    <div class="col-md-2 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_email.gif") %>
                    </div>
                    <div class="col-md-10 col-sm-12">
                      <%= f.email_field :email, class: "form-control shadow rounded", placeholder: "Email", :autofocus => true, class: "form-control shadow rounded", placeholder: "Email" %>
                    </div>
                  </div>

                  <div class="form-group row">
                    <div class="col-md-2 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_locked.gif") %>
                    </div>
                    <div class="col-md-10 col-sm-12">
                      <%= f.password_field :password, class: "form-control shadow rounded", placeholder: "Password" %>
                    </div>
                  </div>
                  <% if devise_mapping.rememberable? -%>
                    <div>
                      <%= f.check_box :remember_me %> <%= f.label :remember_me, class: "form_small_text" %>
                    </div>
                  <% end -%>
                  <div class="form-group row text-center">
                    <div class="col-12">
                      <%= f.submit "Sign in", :class => 'btn reg-submit-btn' %>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <%- if devise_mapping.recoverable? amp;amp; controller_name != 'passwords' amp;amp; controller_name != 'registrations' %>
                      <%= link_to t(".forgot_your_password"), new_password_path(resource_name), class: "form_small_text" %><br />
                    <% end -%>
                  </div>
                <% end %>
              </div>
            </div>
          </div>

          <div class="col-sm-12 col-md-1 text-center p-0">
            <%= image_tag("layout/login/login_divider.gif") %>
          </div>

          <div class="col-sm-12 col-md-7">
            <div class="row border-0">
              <div class="col-12 modal-content-subhead">
                Sign-Up
              </div>
            </div>
            <div class="row">
              <div class="col modal-content">
                <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), id: "form", :remote => true) do |f| %>
                  <%= devise_error_messages! %>
                  
                  <div class="form-group row">
                    <div class="col-md-2 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_name_37_33.gif") %>
                    </div>
                    <div class="col-md-5 col-sm-12">
                      <%= f.text_field :first_name, class: "form-control shadow rounded", placeholder: "First Name" %>
                    </div>
                    <div class="col-md-5 col-sm-12">
                      <%= f.text_field :last_name, class: "form-control shadow rounded", placeholder: "Last Name" %>
                    </div>
                  </div>

                  <div class="form-group row">
                    <div class="col-md-2 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_email.gif") %>
                    </div>
                    <div class="col-md-10 col-sm-12">
                      <%= f.email_field :email, class: "form-control shadow rounded", placeholder: "Email", :autofocus => true %>
                    </div>
                  </div>

                  <div class="form-group row">
                    <div class="col-md-2 col-sm-12 col-form-label p-2">
                      <div class="reg_tooltip" data-tooltip="
                        The club username will be used to easily share your club page on this website.  
                        For example if your club username is my_club the url for your club page on this 
                        site will be www.themathouse.com/clubs/my_club.
                        ">
                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-diamond" fill="white" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" d="M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.482 1.482 0 0 1 0-2.098L6.95.435zm1.4.7a.495.495 0 0 0-.7 0L1.134 7.65a.495.495 0 0 0 0 .7l6.516 6.516a.495.495 0 0 0 .7 0l6.516-6.516a.495.495 0 0 0 0-.7L8.35 1.134z"/>
                          <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
                        </svg>
                      </div>
                      <%= image_tag("layout/login/icon_reg_name_37_33.gif") %>
                    </div>
                    <div class="form-check col-md-10 col-sm-12">
                      <%= f.text_field :username, class: "form-control shadow rounded", placeholder: "Username", id: "username" %>
                    </div>
                  </div>

                  <div class="form-group row">
                    <div class="col-md-2 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_locked.gif") %>
                    </div>
                    <div class="col-md-10 col-sm-12">
                      <%= f.password_field :password, class: "form-control shadow rounded", placeholder: "Password" %>
                    </div>
                  </div>
                    
                  <div class="form-group row">
                    <div class="col-md-2 col-sm-12 col-form-label p-2">
                      <%= image_tag("layout/login/icon_reg_locked.gif") %>
                    </div>
                    <div class="col-md-10 col-sm-12">
                      <%= f.password_field :password_confirmation, class: "form-control shadow rounded", placeholder: "Confirm Password" %>
                    </div>
                  </div>

                  <div class="form-group row text-center">
                    <div class="col-12">
                      <%= f.submit "Sign up", :class => 'btn reg-submit-btn' %></div></p>
                    </div>
                  </div>
                <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 

Чтобы заставить его работать, я добавил следующий код в helpers_application .

 def resource_name
    :user
  end
    
  def resource
    @resource ||= User.new
  end
    
  def devise_mapping
    @devise_mapping ||= Devise.mappings[:user]
  end
 

Я думаю, что это все.