How to show captcha error message using the Silverstripe honeypot module? - silverstripe

I am trying to implement the honeypot spam module here:
https://github.com/studiobonito/silverstripe-spamprotection-honeypot
It is showing up fine in the source code because it is a hidden field using this:
$Fields.dataFieldByName(Captcha).Field
However when there is a value added to the field it throws a validation error (which is correct). My problem is I can't get the message to appear on the front end. I am trying to use:
<span class="form-error">$Fields.dataFieldByName(Captcha).Message</span>
But no luck..
If I render the form like this
$ConactForm
The error messages shows when there is a value added. How do I show the error message using my way though?
--
<% with ContactForm %>
<div class="col-md-6 col-xs-12 contact-form">
<% loop $Fields %>
<p class="message form-error">$Message $fieldName $messageType</p>
<% end_loop %>
<form $FormAttributes class="clearfix">
<div class="col-xs-12 form-group">
$Fields.dataFieldByName(Name).Field
<span class="form-error">$Fields.dataFieldByName(Name).Message</span>
</div>
<div class="col-xs-12 form-group">
$Fields.dataFieldByName(Email).Field
<span class="form-error">$Fields.dataFieldByName(Email).Message</span>
</div>
$Fields.dataFieldByName(Captcha).Field
<span class="form-error">$Fields.dataFieldByName(Captcha).Message</span>
<div class="col-md-12 col-xs-12">
<button class="form-control btn btn-send" name="submit" type="submit">Send</button>
</div>
</form>
</div>
<% end_with %>

Related

Why do my Bootstrap cards not line up vertically like the examples on their website?

I am creating a web based chat application and I have some images stored in an Amazon S3 bucket. I loop through my servers which are stored in a MongoDB database and fetch all the servers which have been created. The servers each have their own unique image that is displayed in a server list, and they are inconsistent in height and width.
When I try to display them using Bootstrap's card-deck class I was under the impression they should all be displayed the same height and width but this isn't the case for me.
Here is the loop I run to fetch and display the servers:
<% _.forEach(chunks, function(val){ %>
<div class="row">
<div class="col-12 col-lg-3 col-md-4 col-sm-6">
<div class="card-deck">
<% _.forEach(val, function(val2) { %>
<div class="card h-100">
<form action="/home" method="post" id="fav" class="text-center m-0">
<a href="/servers/<%= val2.name.replace(/ /g, "-") %>">
<img src="www.amazondatabase.com/<%= val2.image %>" class="card-img-top img-fluid" alt="">
</a>
<div class="card-body">
<h5 class="card-title"><%= val2.name %> (<%= val2.members.length %>)</h5>
<input type="hidden" name="serverId" id="id" value="<%= val2._id %>">
<input type="hidden" name="serverName" id="server_name"
value="<%= val2.name %>">
<button class="btn btn-outline-info btn-block mt-2">Join Server</button>
</div>
</form>
</div>
<% }) %>
</div>
</div>
</div>
<% }) %>
When I run this code I get this output:
As you can see the cards aren't the same height and the footer's don't line up. How would I achieve similar results to the example on their website found here?: https://getbootstrap.com/docs/4.4/components/card/#card-decks
I have already tried using Bootstrap's card-group class, as well as giving the cards a h-100 class to make the height of the cards 100% but I still have variable height cards. I've also tried adding a class to the images to make them responsive but that doesn't work either.

Simple form and bootstrap incompatible css

I am trying to copy this simple design into edit mode.
Here is the code displaying the image above :
<div class="user-description-container col-md-6 col-md-offset-3">
<div class="col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle" %>
</div>
<div class="user-description-box col-md-7">
<div class="user-name"><%= #user.full_name %></div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
</div>
<div class="user-description">
<%= #user.description %>
</div>
</div>
<div class="col-md-2 edit-profile">
<% if current_user == #user %>
<%= link_to(edit_user_path(#user),:class =>"edit-button") do %>
<i class="glyphicon glyphicon-pencil"></i>
<% end %>
<% end %>
</div>
</div>
I copied the main design of the page to the edit mode.
Unfortunately, here is what I get :
I am using the simple form gem with rails and I can't get bootstrap working properly. Here is my code on the edit mode :
<div class="container">
<div class="row">
<div class="user-description-container col-md-6 col-md-offset-3">
<%= form_for #user do |form| %>
<div class="user-upload-preview col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle object-fit-covered" %>
<div class="form-input">
<label class="btn btn-sm btn-primary image-browse-button" >
Choisir une photo
<span style="display:none;">
<%= form.file_field :image %>
</span>
</label>
</div>
</div>
<div class="user-description-box col-md-7">
<div class="user-name">
<%= #user.full_name %>
</div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
<div class="form-input inline-flex">
<%= form.text_field :description, placeholder: "Description", class: "form-control" %>
</div>
<div class="form-input save-edit">
<%= form.submit "Sauvegarder", class: "form-control profile-submit-button" %>
</div>
<% end %>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
Any answer would be much appreciated.
So in terms of the way you are using bootstrap you are supposed to input all the items that you want in a row which you did but it all the col-md- should add up to a total of 12 for it to be a complete row you have col-md-7 which you should add with an col-xs to make it full also in terms on how to make it like this I think this should suffice
here is some layout that looks like what you are trying to do
<div class="container">
<div class="row">
<div class="col-md-4">
IMAGE
</div>
<div class="col-md-8">
<div class="header">
<h1 class="page-header text-center">MY NAME</h1>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
It looks like you are inputting user information stay away from #user tags and information like .file and other such things use tags and set them with an ID and then be sure use javascript to manipulate them

Customize image upload field in simple form & carrierwave

I've been struggling with customization of the simple form field for image upload (Carrierwave) in my Rails app.
Current design:
Desired result
What I did was to inspect HTML created by simple form helpers:
<%= f.input :photo %>
<%= f.input :photo_cache, as: :hidden %>
add styling, remove unnecessary fields and icons, which resulted in:
<label class="btn file-upload-btn">
<div class="form-group file required event_photo upload-field">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
Add a photo
<div class="form-control uneditable-input input-name" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<div class="input-group-btn" style="display: none;">
<input class="file required file-upload" type="file" name="event[photo]" id="event_photo">
</div>
</div>
</div>
<span style="display:none;">
<%= f.input :photo_cache, as: :hidden %>
</span>
</label>
Button works properly - I can select the picture, name tag shows to chosen img name. However when I try to submit the form it gives an error that image can't be blank.
What am I missing here?
I suggest to use Image upload widget included in Jasny gem : http://www.jasny.net/bootstrap/javascript/
And customize the input, like with user photo :
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="file" name="user[photo]" id="user_photo">
</span>
Remove
</div>
</div>
You'll be free to customize the css to have this like me :
It's working on my project.

Customize text_area Ruby on rails to Materialize css

Im trying to customise the "<%= f.text_area :content %>" in rails 5.0.
To a text_area that materialize has like this one
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea"></textarea>
<label for="icon_prefix2">First Name</label>
</div>
</div>
</form>
</div>
The problem is that I tried to figure it out on how to insert the default text_area that I have in to this one, erasing the ugly box the I have to type a text. (I'm a bit fancy)
This is my form:
<%= form_for(#micropost, html: { multipart: true }) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.text_area :content %> >>>>>>#This is the one I want to change
<%= f.submit "Post", class: "waves-effect waves-light btn green accent-3 z-depth-4" %>
<span class="picture">
<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
</span>
<% end %>
This is what I tried:
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea"><%= f.text_area :content %></textarea>
<label for="icon_prefix2">First Name</label>
</div>
</div>
</form>
</div>
But i'm unlucky to make it work, and I tried many other ways that I haven't figure out how to customise this feature to my app.
I spend to much time figuring out on how to erase that box and put a single fancy line style materialize way.
I will appreciate too much you help!
What's the problem you have?, you just need to add the corresponding class:
<%= f.text_area :content id: 'icon_prefix2', class: 'materialize-textarea' %>

displaying information in different places on each iteration

I am iterating through a database and displaying the results of each in two columns on the same row. Currently, the image is always displayed in the first column of every row. I would like to alternate this so on every other the image is on the right and the description on the left.
<% #guide.in_groups_of(2, false).each do |guide_row| %>
<% for guide in guide_row %>
<div class='row guide-row'>
<div class="col-md-6">
<%= link_to image_tag(guide.image(:large)), guide.image(:xlarge), :class => 'guide-image' %>
</div>
<div class="col-md-6 guide-list ">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href=" #info_<%= guide.id %>">
<h2 class='guide'><%= guide.title %></h2>
</a>
<h4 class='guide'>From <%= guide.date_starting.strftime("%a %b #{guide.date_starting.day.ordinalize}") %> to <%= guide.date_ending.strftime("%a %b #{guide.date_starting.day.ordinalize}") %></h4>
<div class='col-md-12'>
</div>
<div class="accordion" id="categories">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle btn glyphicon" data-toggle="collapse" data-parent="#accordion" href=" #info_<%= guide.id %>">
<i class='glyphicon glyphicon-info-sign info-icon'></i>
</a>
<% unless guide.extra_info.nil? %>
<%= link_to ' ', guide.extra_info, :class => 'glyphicon glyphicon-globe info-icon' %>
<% end %>
<div id="info_<%= guide.id %>" class="accordion-body collapse">
<div class="acccordion-inner">
<% if guide.description.empty? %>
<h4>No description available</h4>
<% else %>
<p class='guide-description'><%= guide.description %></p>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
I am not sure how you are iterating through your rows, it's not really clear from the above.
But I would suggest you create 2 partials (small erb files), one for the even row and one for the odd row. Then based on your iterator, you would render either the even partial or the odd partial, each partial have the image and text swapped from each other.
Basically something like this: (not tested, but should give you the idea.
<%= #even_row? ? render 'shared/even_row' : render 'shared/odd_row' %>
to figure out which pair is even vs odd you can do something like this:
<% #guide.in_groups_of(2, false).each_with_index do |guide_row, index| %>
<%= index.even? ? render 'shared/even_row' : render 'shared/odd_row' %>
then you can use index.even?to determine which partial to render.
Hope that helps

Resources