Ruby On Rails Sign Up Login In Form - ruby-on-rails

I got an error that param is missing or the value is empty: signUp
Here is my sign_up_controller.rb file:
class SignUpController < ApplicationController
def index
end
def create
signUp = signUp.new(signUp_params)
if signUp.save
session[:SignUp_id]= signUp.id
redirect_to '/'
else
flash[:register_errors] = user.errors.full_messages
redirect_to '/'
end
end
private
def signUp_params
params.require(:signUp).permit(:email, :username, :password)
end
end
And this is a sign up form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="sign_up.css">
</head>
<body>
<form action="/sign_up" method = "POST" style="padding: 100px">
<div class="container">
<h1>Sign Up</h1>
<input type="hidden" name="authenticity_token" value="<%=form_authenticity_token%>">
<label for="email"><b><p style="text-align:center">Email</p></b></label>
<input type="email" placeholder="Enter Email" name="email" required>
<label for="username"><b><p style="text-align:center">Username</p></b></label>
<input type="name" placeholder="Enter Username" name="username" required>
<label for="password"><b><p style="text-align:center">Password</p></b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<div class="clearfix">
<button type="submit" id="signupbutton" class="signupbtn">Submit</button>
</div>
<p style = "text-align: center; color: white" href="login"><%= link_to 'Already have an account? Log in', login_url %></p>
</div>
</form>
<!--
JS example. You don't need JS for this task's week for now.
-->
<%# <%= javascript_pack_tag 'home_example' %>
</body>
</html>
I'm totally new with Ruby On Rails. I'm working on a signup/login page. Can someone help me to figure out what's wrong with my code, please?

The way your form is currently built, the params are not going to be nested under :signUp. The fields will instead be at the top level of the params hash. You can do a puts params at the beginning of your create action to verify this.
Updating your signUp_params method should resolve this:
def signUp_params
params.permit(:email, :username, :password)
end
If you really want the nested params, check out https://guides.rubyonrails.org/form_helpers.html#understanding-parameter-naming-conventions.

Related

Email formatting on a Bootstrap 5 form

This is my 1st Bootstrap effort, so please bear with me. If this has already been addressed somewhere else, I haven't found it, and a polite pointer would be appreciated.
I am trying to create a Bootstrap 5 form that will run on a Raspberry Pi with no connection to the Internet. I have downloaded the Bootstrap-5.2.0-dist kit to my system and the CSS controls appear to be generally working as described.
I need to do some client side validation to ensure the form is filled out correctly when the Submit button is pressed, or preferably when another input control on the form is selected. As a starting point, I trying to figure out how to make the email address checking work and I seem to be missing something basic.
What do I have to add so that the email field will be evaluated as a properly formatted email address?
Here is my code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create</title>
<link
href="/home/ko2f/eHaW/bootstrap-5.2.0-dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="/home/ko2f/eHaW/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-3 bg-primary text-white text-center">
<h4>Emergency Message Service</h4>
<h1>Create Message</h1>
</div>
<form>
<div class="form-group mb-3 mt-3">
<label for="text" class="control-label">From:</label>
<input type="text" class="form-control" id="from"
placeholder="Enter your name" name="from" required />
</div>
<div class="form-group mb-3 mt-3">
<label for="email" class="control-label">To:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter email address" name="email" required />
</div>
<div class="form-group mb-3 mt-3">
<label for="msg" class="control-label">Message:</label>
<input type="msg" class="form-control" rows="10" id="msg"
placeholder="Enter the message you want to send here..." name="msg" required />
</div>
</form>
<div class="mx-auto" style="width:350px">
<button type="button" class="btn btn-outline-success">Submit</button>
<button type="button" class="btn btn-outline-danger">Cancel</button>
</div>
</body>
</html>
Thank you for considering my question...
Bob Segrest
Thank you stdunbar!
The 2nd pointer you provided to the Mozilla docs and pointing out that I needed to look at HTML rather than Bootstrap itself, was very helpful.
Bob

Razor Code not registering on only one cshtml file

I have an assignment that requires us to use a shared Layout, tag helpers, etc. The Razor code works fine on every page except for the confirmaccount page
Here is a page it is working fine on:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#model bit285_assignment1_naps.Models.User;
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/naps.css" />
<title>Login Page</title>
</head>
<body>
<h1>Login</h1>
<fieldset>
<form>
<div>
<label>Username</label>
<input value="ian#home.com" />
<span>* required</span>
</div>
<div>
<label>Password</label>
<input type="password" value="bl-blue-Bansenauer" />
<span>* required</span>
</div>
<div>
<input type="button" value="Login" />
<input type="button" value="Reset" />
</div>
</form>
</fieldset>
</body>
</html>
And here is the problematic page:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#model bit285_assignment1_naps.Models.User;
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/naps.css" />
<title>Account Confirmation</title>
</head>
<body>
<h1>New Account Created</h1>
<fieldset>
<form>
<div>
<label>FirstName</label>
<span>Brian</span>
</div>
<div>
<label>Last Name</label>
<span>Bansenauer</span>
</div>
<div>
<label>Program</label>
<span>Web App Dev</span>
</div>
<div>
<label>Username</label>
<span>ian#home.com</span>
</div>
<div>
<label>Password</label>
<span>bl-blue-Bansenauer</span>
</div>
<div>
<input type="button" onclick="location.href='/login.html';" value="Go to Login" />
<input type="button" value="Reset" />
</div>
</form>
</fieldset>
</body>
</html>
At the very least, on the latter, the VS is not recognizing it and the text is completely white.
The first file is login.cshtml, the second is confirmaccount.cshtml
I have no idea why the confirmaccount one is not working, the code #model/layout works fine for 5 other pages. Also, most of this code is premade by my instructor and not my original work.

How to add validation to contact form?

I am trying to add a contact form for users to fill and it will automatically email to the main account. I am unsure as to how I can add validation to the form so users are not able to click "Send Email" without filling in the fields.
I have currently tried adding Website: <input type="url" name="website" required>
app/views/contact_mailer/contact_email.html.erb:
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<h1>Contact Us Form</h1>
<p>
From: <%= #params['name'] %>
</p>
<p>
Email: <%= #params['email'] %>
</p>
<p>
Message: <%= #params['message'] %>
</p>
</body>
</html>
Contact form:
<h1>Any enquiries:</h1>
<center><form name="htmlform" method="get" action="/pages/send_form">
<table width="700px">
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Your Name:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Your Email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Your Message:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
Currently, the email still sends to the account without any validation such as "You must complete this field"
Create a model for your contact message. Something like:
class ContactEmail
attr_accessor :name, :email, message
end
Then include ActiveModel::Model to get ActiveModel's validation and tell the model which fields to validate, like:
class ContactEmail
include ActiveModel::Model
attr_accessor :name, :email, message
validates :name, :email, message, presence: true
end
Finally, in your controller action, create a new ContactEmail with the form data and call the predicate method valid?. And use flash to add an error message.
new_mail = ContactEmail.new(params['name'], params['email'], params['message'])
if new_mail.valid?
...
else
flash.now[:error] = new_mail.errors.full_messages
end
Could you use the HTML form attributes? There is a required attribute so the user can't leave the field empty.
e.g.,
<input required id="email" class="input" name="email" type="email" value="" size="30" />
you can also use the type = "email" and it will ensure some of the proper formatting.
(https://www.w3schools.com/html/html_form_attributes.asp)
Looking at the code of your form i see several problems:
you have 2 <form> openings
i dont see any file inputs so you don't need the enctype="multipart/form-data"
here's the code revised (i've removed the first form element, i've adjusted the action of the second form, i've added required attributes to the inputs and textarea and i've updated the email input's type to "email" to make sure only valid emails are entered). Adding required should force modern browsers to prevent form submission if the inputs are not filled in properly.
<h1>Any enquiries:</h1>
<center>
<table width="700px">
<form id="contact_form" action="/pages/send_form" method="POST">
<div class="row">
<label for="name">Your Name:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" required /><br />
</div>
<div class="row">
<label for="email">Your Email:</label><br />
<input id="email" class="input" name="email" type="email" value="" size="30" required /><br />
</div>
<div class="row">
<label for="message">Your Message:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30" required></textarea><br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>

How do I make the inputs and labels appear on the same line using w3.css

In w3.css there is no option to prepare a form in such a way so that the inputs and labels are appeared on the same line. I am trying but could not fix the problem. Please help to fix the problem.
<div class="w3-row-padding">
<div class="w3-third">
<label class="w3-label">User Name</label>
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Name">
</div>
</div>
This is the code I actually wanted:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-row-padding">
<div class="w3-quarter">
<p> <label class="w3-label" type="text">User Name</label><p>
</div>
<div class="w3-threequarter">
<p><input class="w3-input w3-border w3-round" type="text"
placeholder="Enter your username"></p>
</div>
<div class="w3-quarter">
<p> <label class="w3-label" type="text">Passwords</label></p>
</div>
<div class="w3-threequarter">
<p><input class="w3-input w3-border w3-round" type="text"
placeholder="Enter your passwords"></p>
</div>
</div>
</body>

How to use params in another action?

Im trying to do a little Restaurant-Website in Ruby on Rails(v. 3.2.13).
I made 3 tables: Customer(Name,Email), Reservation(customer_id,table_id), Table(seats,area).
My Models look like this.
class Reservation < ActiveRecord::Base
belongs_to :customer
belongs_to :table
end
class Customer < ActiveRecord::Base
has_many :reservations
has_many :tables, :through => :reservations
end
class Table < ActiveRecord::Base
has_many :reservations
has_many :customers, :through => :reservations
end
I made a form for searching a suitable table. If the customer finds his table, he clicks a button to book it. This button leads to the "add a new customer" view. The button looks like this:
<%= button_to "Book table #{table.id}" , customers_path(:table_id => table) %>
In the CustomerController, I edited the create method like the following:
def create
#customer = Customer.new(params[:customer])
table = Table.find(params[:table_id])
respond_to do |format|
if #customer.save
format.html { redirect_to #customer, notice: 'Customer was successfully created.' }
format.json { render json: #customer, status: :created, location: #customer }
#reservation = #customer.reservations.build(table: table).save!
else
format.html { render action: "new" }
format.json { render json: #customer.errors, status: :unprocessable_entity }
end
end
end
Sadly the "Table.find" does not work. When I use "Table.first" a Reservation is added, but when I use table like above I get the message: "Couldn't find Table with id=". I can, however, display the ID on the NewCustomer view.
Why is the ID not available in the create method?
EDIT:
Here is the form of the mainpage to search a table. Furthermore I have to say that i made a new resource mainpage for the table-search.
<%= form_tag mainpages_path, :method => 'get' do %>
<p>
How many persons: <br/><%= number_field_tag(:search) %> <br/>
Date: <%= date_select :date, 'Date', use_short_month: true, order: [:day, :month, :year] %> <br/>
Beginn: <%= time_select :Beginn, 'Beginn' , default:Time.now %> <br/>
End : <%= time_select :Ende, 'Ende' , default: Time.now + 2.hours %> <br/>
<%params[:search]%>
<%= submit_tag "Search" %>
</p>
<% end %>
<% if #tables %>
<h2>Folgende Tische stehen zur Auswahl</h1>
<% #tables.each do |table| %>
<div class="entry" >
<h3>Seats: <%= table.seats %></h3>
<h3>Area: <%= table.area %></h3>
<%= link_to "Book this table #{table.id}" , new_customer_path(:table_id => table) %>
</div>
<% end %>
<% else %>
<p> Pls choose a table</p>
<% end %>
EDIT2:
The link to HTML-Code:
Book this table 1
And here is the HTML-Code of the customer/new-view:
<!DOCTYPE html>
<html>
<head>
<title>Restaurant</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/customers.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/mainpages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/reservations.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/tables.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/customers.js?body=1" type="text/javascript"></script>
<script src="/assets/mainpages.js?body=1" type="text/javascript"></script>
<script src="/assets/reservations.js?body=1" type="text/javascript"></script>
<script src="/assets/tables.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="ej1MgV2fad014SLkCv3dZXl8TknQH4JHZLoe56Xn/Kk=" name="csrf-token" />
</head>
<body>
<h1>New customer</h1>
<form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="ej1MgV2fad014SLkCv3dZXl8TknQH4JHZLoe56Xn/Kk=" /></div>
<div class="field">
<label for="customer_name">Name</label><br />
<input id="customer_name" name="customer[name]" size="30" type="text" />
</div>
<div class="field">
<label for="customer_email">Email</label><br />
<input id="customer_email" name="customer[email]" size="30" type="text" />
</div>
<input id="table_id" name="table_id" type="hidden" />
<div class="actions">
<input name="commit" type="submit" value="Create Customer" />
</div>
</form>
Back
</body>
</html>
change in the controller (just add an# symbol)
#table = Table.find(params[:table_id])
in view
<%= button_to "Book table #{table.id}" , customers_path(:table_id => #table) %>
try this out
<%= button_to "Book table #{table.id}" , customers_path(:table_id => table), method: :post %>
The problem here is the use of button_to...
From the Url Helpers documentation:
Generates a form containing a single button that submits to the URL created by the set of options.
The action attribute of the form needs to look similar to this:
/customers/new?table_id=<table_id>
When you click this button it should route to the Customer new action that renders the new view. You need to pass table_id to the new view and then add it to your Customer form. Something like this:
def new
...
#table_id = params[:table_id]
end
Then, when you submit the Customer form - which will route to the create action, you should have access to params[:table_id]
Based on your last bit of code you posted, you need to have:
<%= link_to "Book this table #{table.id}" , customer_path(:table_id => table), mode: :post %>
Hello after 1 million tries I found the mistake! The solution with the hidden_field_tag was partly correct. All the time I tried <%= hidden_field_tag :table_id %> . But with this code the create action knows the variable :table_id but it has an empty string. Now I added params[:table_id] to the hidden_field and now the value of the variable :table_id is availlable.
Long story made short, variable name AND value have to be in the hidden_field_tag!
<%= hidden_field_tag :table_id, params[:table_id] %>
Thanks to everyone who tried helping me!

Resources