Customizing Devise method - ruby-on-rails

I am using Devise in my web application and was wondering how to use a different button than the default one to submit information. I am attempting to embed it in a twitter boot strap modal, and use a button in the footer of the modal to submit the info, rather than the standard signup button. Here's what I have for code right now:
<div class="modal-body">
<h4>...</h4>
<p>...</p></b>
<p>...</p>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div>
<%= f.label :email %>
<%= f.email_field :email %>
</div>
<div>
<%= f.label :password %>
<%= f.password_field :password %>
</div>
<div>
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %>
</div>
<div>
<%= f.submit "Sign up" %>
</div>
<% end %>
</div>
<div class="modal-footer">
Close
Sign up
</div>
</div>
In essence, I am trying to make the button in this line
Sign up
do what the button in this line does:
<div><%= f.submit "Sign up" %></div>
Anybody out there have any experience with this?

you can just extend the form... say to cover the modal body and the footer too, and replace the link
do something like
<%= form_for ..... %>
<div class="modal-body">
your form fields should go here somewhere
.....
</div>
<div class="modal-footer">
Close
<%= f.submit "Sign up" %>
</div>
<% end %>
Because this seems a little too obvious, I'm not really sure I understood your question very well. If that's the case, let me know

A button is different than a link and think that you will have the issues. I have done very similar things recently and instead of using submit.
<input class="btn btn-success" type="submit"value="Submit" >
This is what I use in my rails applications inbetween the form tags. It's not as pretty as using rails, but it works.

Related

Rails: Form is not being loaded when trying to update

I am just trying to set up a basic application with Ruby on Rails. I have the basic CRUD functions for different entities and with one of them, the form that is supposed to load when the user wants to edit a row does not appear. It knows which ID it needs to edit, it just doesn't load the form.
Link to take you to edit page;
<%= link_to 'Edit Review'. edit_review_path(review) %>
Controller function;
def edit
#review=Review.find(params[:id])
end
HTML Form;
<div class="container">
<h2>Edit Review Details</h2>
<% form_for #review do |f| %>
<div class="form-group">
<%= f.label :"Profile" %><br />
<%= f.select :ProfileId, Profile.all.collect {|x| [x.Name,x.id]}, {:include_blank => 'Select Profile'}, class:'form-control'%> <br /><br />
</div>
<div class="form-group">
<%= f.label :"Product" %><br />
<%= f.select :ProductId, Product.all.collect {|x| [x.pName,x.id]}, {:include_blank => 'Select Product'}, class:'form-control'%>
</div>
<div class="form-group">
<%= f.label :"Review Author" %>
<%= f.text_field :Author %>
</div>
<div class="form-group">
<%= f.label :"Product Rating" %>
<%= f.number_field :ProductRating %>
</div>
<div class="form-group">
<%= f.label :"Review Text"%>
<%= f.text_field :ReviewText %>
</div>
<div class="form-group">
<%= f.label :"Date of Review" %>
<%= f.date_field :DateofReview %>
</div>
<div class="form-group">
<%= f.submit %>
</div>
<% end %>
</div>
I have 2 models that have a working update feature and they are the exact same code as this however for this, when I click the button. The page loads but nothing appears other than the text.
Can someone explain why this is happening? I thought it may be the dropdown boxes but I removed them and still no form loaded up.

From where comes extra html for Spree login page?

This is _login.html.erb partial from Spree github page:
<%= form_for Spree::User.new, as: :spree_user, url: spree.create_new_session_path do |f| %>
<fieldset id="password-credentials">
<div class="form-group">
<%= f.email_field :email, class: 'form-control', tabindex: 1, placeholder: Spree.t(:email) %>
</div>
<div class="form-group">
<%= f.password_field :password, class: 'form-control', tabindex: 2, placeholder: Spree.t(:password) %>
</div>
<div class="checkbox">
<label>
<%= f.check_box :remember_me %>
<%= f.label :remember_me, Spree.t(:remember_me) %>
</label>
</div>
<div class="form-group">
<%= f.submit Spree.t(:login), class: 'btn btn-lg btn-success btn-block', tabindex: 3 %>
</div>
</fieldset>
<% end %>
but in reality when go to that page that form is built-in in panel with heading "Login as Existing customer".
from where it comes?
That comes from a different template, located here: https://github.com/spree/spree_auth_devise/blob/master/app/views/spree/user_sessions/new.html.erb.
If you search Spree's code for the sentence 'Login as Existing Customer', you'll see it's present in their locales with the key login_as_existing.
A little more digging, and I found the key on line five of the template linked above (as well as a couple of other locations). You can replace this in the same way you have the login form, or adjust the locale if you'd prefer different terminology. And a final third option, you can use Spree's deface overrides.
Tricky to track down these views sometimes, though search the main repo and any of the included extensions and you should be able to track anything down :)

Trouble with Devise validation styling

I am using the Devise gem for a user login page and user registration pages on a basic Ruby on Rails app. I want to get rid of the ugly default styling for when there is an error. I was able to replace the error box with some bootstrap styling, but I can't find any answers about how to get rid of the ugly red boxes that appear around my inputs and my input labels. Also, the inputs are shrinking when validation occurs. They start at 100% width. Then, if there is an error,they shrink. Here is an image of both problems. The input box should be as wide as the .danger div above:
Here is the code for this page:
<div class="row">
<div class="top col-md-4 col-md-push-4 col-sm-6 col-sm-push-3 col-xs-10 col-xs-push-1">
<div class="logo_container">
<%= image_tag "musilogopurple.png", class: 'logo_big' %>
</div>
<p class="text-center">Forget your password? Enter your email below and we will send you reset instructions.</p>
<br />
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, class: 'form-control' %>
</div>
<div class="actions">
<br />
<%= f.submit "Send", class: 'btn btn-purple'%>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
I would very much appreciate some guidance. Thank you!
Did you scaffold anything? Scaffolds bring in CSS files try deleting those if you're not using it. In addition, it would help if you posted the CSS files it's receiving styling from.

My rendered partial '_form' appears, but is not submitting

Ruby 2.1.5 on Rails 4.2.0:
I have two directories. One directory is a rails-generate scaffold named 'inqueries'. The other directory is named 'welcome', which only houses a landing paged named index.html.erb. The inquery form works & submits fine as long as I'm using the view from the actual 'inquery' scaffold/directory.
I am able to render the inquery _form on my index.html.erb landing page using :
<%= render partial: "inqueries/form", locals: {inquery: #Inquery} %>
However, this JUST renders the form. When I hit the submit button, no errors, flash messages, or inquery is submitted. It is complete non-action, including on my rails terminal.
How can I properly make the form work on my landing page?
Here is my welcome_controller.rb file. This controller handles the landing page where I am trying to render the inquery scaffold's form:
class WelcomeController < ApplicationController
def index
#inquery = Inquery.new
render layout: false
end
end
This is my new rails scaffold-generated method in the inqueries_controller.rb:
def new
#inquery = Inquery.new
respond_with(#inquery)
end
Sorry, Here is the Inquery _form itself:
<%= form_for(#inquery) do |f| %>
<div class="form-group col-lg-4">
<%= f.label t('.name') %><br>
<%= f.text_field :name, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.email') %><br>
<%= f.text_field :email, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.phone') %><br>
<%= f.text_field :phone, class: "form-control" %>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<%= f.label t('.message') %><br>
<%= f.text_area :message, rows: 8, class: "form-control"%>
</div>
<%= f.submit t('.submit'), class: "btn btn-primary" %>
<% end %>
EDIT 2: I saw there were a couple of suggestions with the logic. I have simplified the partial just to see if I could get it to work and it still does not submit properly outside of its directory. I am new to rails, do I need to render a new action in the second directory that I am calling it into?
Your partial has 2 forms. The one which submits to inqueries#create is an empty form with no submit button, the other which has no action contains the text fields and the submit action.
The form_for tag will create the html tags, you dont need to specify them again.
Tip - Switch to haml. You won't ever look back at erb :)
This should work (not tested) -
<%= form_for(#inquery) do |f| %>
<div id="error_explanation">
<% if #inquery.errors.any? %>
<h2>
<%= pluralize(#inquery.errors.count, "error") %> prohibited this inquery from being saved:
</h2>
<ul>
<% #inquery.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
<% end %>
</div>
<br />
<div class="col-lg-12">
<div class="form-group col-lg-4">
<%= f.label t('.name') %><br>
<%= f.text_field :name, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.email') %><br>
<%= f.text_field :email, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.phone') %><br>
<%= f.text_field :phone, class: "form-control" %>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<%= f.label t('.message') %><br>
<%= f.text_area :message, rows: 8, class: "form-control"%>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<%= f.submit t('.submit'), class: "btn btn-primary" %>
</div>
</div>
<% end %>
Figured it out. Foolish error,
My welcome page is a bootstrap theme that I hadn't fully gone over. I had imported some unnecessary javascript files that I think were blocking the form.

One click of the submit button in form_for results in 3 items in my database

I have a form in my rails app that creates an item in my database, but when I submit the form, it creates 3 items per click.
I have 2 other forms that add things to the same database, but they are on different pages, could that be related?
This is my form on the "new debate" page:
<%= form_for(#debate) do |f| %>
<div class="field">
<%= f.label :proposition %><br />
<%= f.text_field :proposition %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I also have another form on the "show debate" page that appears twice:
<%= form_for(#debate.debates.create) do |support_form| %>
<div>
<%= support_form.label :content %><br />
<%= support_form.text_area :content %>
</div>
<%= support_form.hidden_field :is_supporting, :value => is_supporting %>
<div class="actions">
<%= support_form.submit %>
</div>
<% end %>
And when I click on the submit button on any of the 3 forms, I get 3 new debates.
I think your code, might be creating those extra records.
= form_for(#debate.debates.create) do |support_form|
If my assumption is correct .debates is an association, and you are creating that association with that line.
Try using build
= form_for(#debate.debates.build) do |support_form|

Resources