Adding Two-Factor Authentication(2FA) to ActiveAdmin auth in a Ruby on Rails web application

To enhance the security of a web application having a user authentication workflow, we use a security method called 2FA. It is also known as Two Factor Authentication(type of Multi-Factor Authentication). In this blog post, we will see how to implement email-based 2FA in ActiveAdmin auth of a Ruby on Rails application. In the email-based 2FA approach, when logging in with an email and password, an OTP will be sent on a registered email address. Upon entering the OTP, it will successfully authenticate and the session will be started. Also, we will see the following additional functionality and customizations

Active Admin - customize default CSV export

ActiveAdmin is great framework for managing website administration interfaces. It allows us to list records of a table, filter them, sort them and also support exporting them in CSV, XML or JSON. By default, records that are being displayed are exported. For example, say we have a products table where each product is distinguished by their type. We can apply a filter to list all electronics products. Clicking on CSV link below the list will export all electronics products only. But sometimes we need to download specific records coming from a custom query or scope using the default csv link.

Adding Custom Search Bar To ActiveAdmin

Active Admin is a great plugin that helps us to get administration functions with elegant and simple interface up and live quickly without much of a hassle or efforts. One can also make use of various customisations as per their need with very little effort. In this article, I will be explaining how we can add custom search bar in Active Admin. Adding custom search bar is not as easy and straight forward as other Active Admin customisations. I will be making use of jQuery to do this. Here, I will be taking an example of searching resources with tags

How to make Active Admin column Html_safe and replace boolean values with some icons in better way

I was working on ActiveAdmin views and as we are using html editor for some of our text fields so we wanted to make sure when we are showing that html content in the application. It should be readable and without html tags. To do that generally it is mentioned to use a block for the field and use .html_safe method. However I did not like this approach, as we have too many fields where I have to call html_safe method and I was not keen to write block for each fields. I know :) I am lazy in

Integration of WebUI-Popover in Active Admin

Recently we have used WebUI-Popover plugin in Active Admin. It is a lightWeight popover plugin with jquery. It can be use with bootstrap, but bootstrap is not necessary! Browser compatibility for this plugin is ie8+,Chrome,Safari,Firefox,Opera. We need jquery1.7.1+ for this. Steps For adding WebUI-Popover are: Download from Extract zip folder go into src folder copy jquery.webui-popover.css this file and paste in app/assets/stylesheets of your project. Same for jquery.webui-popover.js paste in app/assets/javascripts in your "active_admin.

Integration of Redactor Rails in Active Admin

In our current app, there was a requirement to have a nice editor which will provide the basic functionalities like bold,italic and also image upload. We decided to use redactor-rails gem Github-Documentation-Link(Github Doc) . So i took following steps: In Gemfile i included: gem 'redactor-rails' Then for image uploading and storing i included two more gems as: gem 'carrierwave' gem 'mini_magik' Bundle it. rails generate redactor:install rails generate redactor:config In application.js //= require redactor-rails In active_admin.scss on the top include: *= require redactor-rails In ActiveAdmin model i wrote: f.input :name, input_html: {class: 'redactor'}

ActiveSkin gem

ActiveSkin gem provides an easy way to customize Active Admin CSS depending upon your website's color scheme in just few minutes. Steps: 1/ Add to your Gemfile: gem 'active_skin' 2/ Run: bundle install 3/ Add to active_admin.css.scss: //Add the Website's logo. This is displayed on the top-left corner of the page. $skinLogo: url("logo.png") no-repeat 0 0; //This color is applied to buttons, drop-down lists etc. in the AA UI $skinActiveColor: #05B6C7; //Applied to the main header of Active Admin $skinHeaderBck: #000000; //Applied to the header of AA filters. $panelHeaderBck: #000000; @import "active_skin"; Sample

Download or Export excel records from active admin

activeadmin-axlsx gem [activeadmin-axlsx][1] gem is very useful to download or export excel records from active admin. It provides "XLSX" links to download Active Admin resources. We can use this gem by include this line in gem file: gem 'activeadmin-axlsx' then run: bundle install Now all resources of active admin index page include a 'XLSX' link. There is some example to customize 'activeadmin-axlsx'. Remove unnecessary column: app/admin/orders.rb ActiveAdmin.register Order do config.xlsx_builder.delete_columns :created_at, :updated_at end Change the style of column header: app/admin/orders.rb ActiveAdmin.register Order do

Active Admin - adding custom search(outside the resource model)

In ActiveAdmin, if your resource model is deriving some data from other models, using some kind of relationship(has_one or has_many). In this scenarios where you want to search and filter the resource based on the data in its related table, you can follow below: Suppose you have a model School, and a model Student, now you want to search or filter students based on the school name. We can filter using join(:schools).where(" like") or say an In Query which is inefficient. Either way ActiveAdmin does not provide default filters based on