Welcome back to the third part of “How to create your own Single Page Application Autoresponder with Rails 4 and Angular.js”.
In this tutorial, we are going to implement some features that satisfy the requirements bellow:
– As a logged user, you’re able to generate and embed a sign up form in your website in order to add subscribers to any email list.
– As a visitor user you’re able to fill in a signup form and join an email list.
Sign up forms
Sign up forms are an incredible way to build a list of subscribers for your website. You just need to include this signup form in your website and convert them into subscribers through your sign up process.
So, the next feature to implement are signup forms, for the time being, I’m just going to include two fields: email and name; if we have some extra time later, we can go back to this section and create a super cool dynamic builder form.
Let’s start defining the new route for Signup Forms:
// app/assets/javascripts/autoresponder/states.js
.state("email_list.details.signup_forms", {
url: "/signup_forms",
abstract: true,
controller: 'emailListSignupFormCtrl',
templateUrl: 'autoresponder/components/email_lists/details/signup_forms/main.html',
})
.state("email_list.details.signup_forms.settings", {
url: "",
controller: 'emailListSignupFormCtrl',
templateUrl: 'autoresponder/components/email_lists/details/signup_forms/settings.html',
})
.state("email_list.details.signup_forms.publish", {
url: "/publish",
controller: 'emailListSignupFormCtrl',
templateUrl: 'autoresponder/components/email_lists/details/signup_forms/publish.html',
})
The following code is used for the main template in order to render the different options for the signup form. For now, we have only two options:
# app/assets/javascripts/autoresponder/components/email_lists/details/signup_forms/main.html.haml
.row
.email-list-details.col-md-2.col-md-offset-10
%ul.nav-menu.text-right
%li{'ng-class' => "{ 'active': $state.includes('email_list.details.signup_forms.settings') }"}
%a{:href => "#", 'ui-sref' => 'email_list.details.signup_forms.settings'}
Settings
%li{'ng-class' => "{ 'active': $state.includes('email_list.details.signup_forms.publish') }"}
%a{:href => "", 'ng-click' => 'handlePublish()'}
Publish
.row
%ui-view
As you see in the previous template, we are using a function called handlePublish() which is the responsible to enable/disable the published link option; if the user has not provided the required fields(Thank you page url and already subscribed page) yet, then we need to add it in the parent controller called “emailListCtrl”:
# app/assets/javascripts/autoresponder/components/email_lists/emailListCtrl.js
$scope.availablePublish = function() {
return ($scope.email_list.thank_you_page_url && $scope.email_list.already_subscribed_url);
}
$scope.handlePublish = function() {
if ($scope.availablePublish()) {
// we are visiting a sibling called publish
// because we are in the sibling called '.settings'
$scope.$state.go('^.publish');
} else {
$scope.showNotificationRequiredFields();
}
}
$scope.showNotificationRequiredFields = function() {
Render.showGrowlNotification('warning', 'Before to publish the form you must select the custom urls');
}
In the code above, basically we are validating that the url attributes for email list are present, if the condition is not satisfied we’ll show a message to the user and force him to stay in the settings option.
Email list settings before embedding your form:
In settings, we’ll force the user to enter the urls responsible for redirecting the user after they were added to the list or if they were already subscribed to the email list.
# app/assets/javascripts/autoresponder/components/email_lists/details/signup_forms/settings.html.haml
%form.sign-up-form-settings{:name => "EmailListForm",
"ng-submit" => "updateEmailList()",
:novalidate => ""}
.row
.col-md-4
.form-group
%label{:for => "thank-you-page"} Thank you page url (*)
%input#thank-you-page.form-control{:type => "url",
'required' => 'required',
:placeholder => 'http://',
"ng-model" => 'email_list.thank_you_page_url'}/
.form-group
%label{:for => "already-subscribed"} Already subscribed page (*)
%input#already-subscribed.form-control{:type => "url",
'required' => 'required',
:placeholder => 'http://',
'ng-model' => 'email_list.already_subscribed_url'}/
.row
.col-md-6
%button{ type:'submit',
'ng-disabled' => "EmailListForm.$invalid",
class: 'btn btn-success'}
Save settings
Embedding your form in your website:
We’ll put the html code within a textarea you need to embed in your website, in order to add subscribers to your list.
# app/assets/javascripts/autoresponder/components/email_lists/details/signup_forms/publish.html.haml
.row
.col-md-12
%textarea#output.form-control{ 'replace-textarea-values'=> '',
:rows => '10',
"ng-model" => "previewer"}
#hidden{"ng-hide" => "true"}
As you see, we are using the directive “replace-textarea-values” => replaceTextareaValues and the content would look like:
# app/assets/javascripts/autoresponder/components/email_lists/details/signup_forms/replaceTextAreaDirective.js
AutoresponderApp
.directive(
'replaceTextareaValues',
['$compile', 'templateManager', '$timeout',
function($compile, templateManager, $timeout) {
var selectedTemplate = templateManager.loadTemplate('template_one');;
return {
restrict: 'A',
templateUrl: 'autoresponder/components/email_lists/details/signup_forms/publish.html',
scope: true,
link: function($scope, elem, attrs) {
// element included in the template
var hiddenElem = $('#hidden');;
$scope.previewer = '';
function update() {
if (selectedTemplate) {
$compile(hiddenElem.html(selectedTemplate))($scope);
$timeout( function(){
$scope.previewer = hiddenElem.html();
}, 0);
}
}
$scope.$watch('template', update);
}
};
}])
So, what are we exactly doing in this directive?
Basically we have a template string with some {{values}} inside and we are interpolating those values depending on a dynamic data; then we are generating the html and putting it inside the textarea content in order to allow the user to embed and copy the generated html code in their website. We are also using a template manager factory which is mentioned in the next paragraph.
Template manager
For now, we are using a simple template to show the user the html code they need to embed on their website. For the time being, we are storing that template string in a factory, but in the future we would save it in the database.
// app/assets/javascripts/autoresponder/components/common/templateManager.js
AutoresponderApp.factory('templateManager', function() {
return {
loadTemplate: function (template_name) {
var template;
switch (template_name) {
case "template_one":
//lets add the redirect_to for already subscribed and thank you page elements
template = "<form action='{{subscribe_url}}' id='embeded-subscribe-autoresponder' method='post' name='embeded_subscribe_autoresponder' novalidate='' target='_blank'>\n<label for='subscribe_email'>Email Address</label>\n<input name='subscribe_email' type='email' value=''>\n<label for='subscribe_name'>Full Name</label>\n<input name='subscribe_name_input' type='text' value=''>\n<input type='hidden' name='thank_you_page' value='{{thank_you_page}}'/>\n<input type='hidden' name='already_subscribed_page' value='{{already_subscribed_page}}'/><br>\n<input name='subscribe-submit' type='submit' value='Subscribe'>\n</form>";
break;
case "template_two":
template = "template_two";
break;
default:
template = "";
}
return template;
}
}
});
We are declaring the Utils factory where we are putting shared/common/general functions. In this ocassion, we are declaring a method that retrieves the current url and use it to set the form action url in the generated html, that the users are going to use in order to add multiple subscribers to their email lists.
// app/assets/javascripts/autoresponder/components/common/utils.js
AutoresponderApp.factory('Utils', function() {
return {
// if you need to get if the url includes http or https
httpProtocolUrlFor: function(url_params) {
var domain, port;
domain = window.location.protocol + "//" + window.location.hostname;
port = window.location.port ? ":" + window.location.port : "";
return domain + port + url_params;
},
}
});
If you’re wondering how it looks so far, I’m attaching a screenshot for that purpose:
Email sign up form controller:
We are using the $sce to avoid the error while interpolating a dynamic url action form.
// app/assets/javascripts/autoresponder/components/email_lists/details/signup_forms/emailSignupCtrl.js
AutoresponderApp
.controller('emailListSignupFormCtrl', [
'$scope',
'$sce',
'findCurrentEmailListInParent',
'Utils',
function (
$scope,
$sce,
findCurrentEmailListInParent,
Utils
) {
var currentList = findCurrentEmailListInParent.plain();
var subscribeUrl = "/api/v1/email_lists/subscribe/" + currentList.secure_key;
var fullSubscribeUrl = Utils.httpProtocolUrlFor(subscribeUrl);
$scope.subscribe_url = $sce.trustAsResourceUrl(fullSubscribeUrl);
$scope.thank_you_page = currentList.thank_you_page_url;
$scope.already_subscribed_page = currentList.already_subscribed_url;
}
])
Adding the funcionality to add subscribers through the embedded form:
First, let’s add the subscribers table through a new brand migration:
# for now we just need these three attributes
rails g model Subscriber name email email_list_id:integer
# rake db:migrate
Let’s create the association between EmailList and Subscriber
# app/models/email_list.rb
has_many :subscribers
Additionally, we are going to add some model validation rules.
# app/models/subscriber.rb
class Subscriber < ActiveRecord::Base
belongs_to :email_list
validates_presence_of :email,
:email_list_id
validates_format_of :email, :with => /\A[^@]+@([^@\.]+\.)+[^@\.]+\z/
end
Whether you’re logged in or not, we need to declare an endpoint to accept a request that adds subscribers to your list:
let’s open up the file app/controllers/api/v1/email_lists_controller.rb and include the following content as a reference:
class Api::V1::EmailListsController < Api::BaseController
respond_to :html, :json, :xml
before_action :find_email_list, only: :add_public_subscriber
.
.
.
.
def add_public_subscriber
if @email_list
valid_email_list
else
@errors = 'Invalid email list'
end
end
private
def valid_email_list
email = params['subscribe_email']
name = params['subscribe_name_input']
redirect_subscribed = params['already_subscribed_page']
subscribe_params = {
email_list_id: @email_list.try(:id),
name: name,
email: email
}
if Subscriber.where(email: email).exists?
redirect_to redirect_subscribed
else
handle_subscriber_creation(subscribe_params)
end
end
def handle_subscriber_creation(values)
redirect = params['thank_you_page']
subscriber = Subscriber.create(values)
if subscriber.valid?
redirect_to redirect
else
@errors = 'Email is required'
end
end
def find_email_list
uuid = params['email_uuid']
@email_list = EmailList.find_by(secure_key: uuid)
end
The public view looks as simple as:
# app/views/api/v1/email_lists/add_public_subscriber.html.haml
!!!
%html{:lang => "en"}
%head
%title Email Autoresponder
%body.preload
%main
.error-wrapper
.error-box
.error-img
= image_tag 'icon-warning.png'
.error-copy
%h2#error-heading
%p#error-text
= @errors
%span#pingdom-check
As you notice, I’m using an image; you can use it or remove it. I’m going to include it in app/assets/images/ in the branch for part-3
Finally, it is time for declaring the new route, and the complete config/routes.rb looks something like:
# config/routes.rb
constraints do
namespace :api, path: '/api' do
namespace :v1 do
resources :email_lists do
collection do
post 'subscribe/:email_uuid', to: 'email_lists#add_public_subscriber'
end
end
end
end
end
Don’t forget to restart your server after making those modifications to your routes.
At this point this is what you should see so far:
signup form settings
Publishing signup form
So, if you embed your signup form using jsfiddle for instance and submit the form. It should look like this:
https://jsfiddle.net/heridev/5qtmp7pL/
As we want to support cross domain requests, we’re implemeting CORS to the application:
Let’s open up our Gemfile and include the gem called rack-cors:
# Gemfile
gem 'rack-cors', require: 'rack/cors'
Install dependencies:
bundle install
Let’s set up our config/application.rb file:
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module AngularRailsAutoresponder
class Application < Rails::Application
config.active_record.raise_in_transactional_callbacks = true
config.middleware.insert_before 0, "Rack::Cors", debug: true, logger: (-> { Rails.logger }) do
allow do
origins '*'
resource '*',
headers: :any,
methods: [:post],
max_age: 0
end
end
end
end
Now, we are supporting CORS.
All the changes we made in this tutorial are included in the following pull request:
https://github.com/heridev/MailAssemble/pull/3
That’s enough for the post number three. Wait for the next part in which we are going to learn about: Communication between components using events propagation. We’ll implement the undo action by using PaperTrail for versioning when deleting subscribers and a lot more interesting Angular stuff; so stay tuned and as always, thanks for reading.
H.
