DEV Community: Petr Hlavicka

Gem Credentials Management with Gemstash

Petr Hlavicka — Tue, 14 Nov 2023 07:01:04 +0000

How can we efficiently manage gem credentials across the team?

When your project grows, you may reach out to commercial gems (like Sidekiq Pro) for help or want to extract some business logic into private gems.

Bundler has a way to set the credentials for commercial/private gems, but everyone has to set it. Each developer in the team, your build/deploy processes, and some of your jobs in the CI. It will get even worse when you have gems from multiple private sources.

That may be fine until you are forced to change (rotate) the credentials for one of the used enterprise gems (e.g., when they are leaked). Or, the worst-case, when your current credentials stop working (e.g., you forget to renew the license and end up with new credentials 😅).

How to solve it?

So, as the title states, we can solve it with a private instance of the Gemstash server.

What is Gemstash?

Gemstash is both a cache for remote servers such as https://rubygems.org, and a private gem source.

With Gemstash (since version 2.5.0, where this PR was merged), we can easily set credentials to private sources similarly to how we can set them using Bundler.

That will solve two problems:

We will have only one place to set the credentials for all the gems from private sources.
We will have all the gems cached, so we won’t need to fetch them from the remote source every time. That can be handy when the remote source is slow, unavailable, or the credentials stop working.

Example

To set the credentials, we have to set an ENV variable. The naming is the same as for Bundler but with the GEMSTASH_ prefix (example below for Sidekiq gems):

GEMSTASH_GEMS__CONTRIBSYS__COM=user:pass

For testing, we can run the Gemstash server like this:

GEMSTASH_GEMS__CONTRIBSYS__COM=user:pass gemstash start --no-daemonize --config-file config.yml.erb

That will allow us to use it in our Gemfile, where http://localhost:9292 is the URL to our local Gemstash server:

source "http://localhost:9292/"

ruby "3.2.2"

source "http://localhost:9292/upstream/gems.contribsys.com" do
  gem "sidekiq-pro", "~> 5.5.7"
end

Notice the changes:

On line 1, we replaced the rubygems.org source with our local Gemstash server. All gems will be served (and cached) by our Gemstash, which will use rubygems.org to fetch them by default.
On line 5, we prefixed the gems.contribsys.com with http://localhost:9292/upstream/, which will use our stored credentials and fetch the gems from this source. See docs.

It won't require credentials when running bundle install:

➜ bundle install           
Fetching gem metadata from http://localhost:9292/upstream/gems.contribsys.com..
Fetching gem metadata from http://localhost:9292/............
Using bundler 2.4.10
Using connection_pool 2.4.1
Using rack 2.2.7
Using redis 4.8.1
Using sidekiq 6.5.9
Fetching sidekiq-pro 5.5.8
Installing sidekiq-pro 5.5.8
Bundle complete! 1 Gemfile dependency, 6 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

Securing the Gemstash server

By default, access to the Gemstash server is not protected, even for the private gems.

You (or your DevOps team) are responsible for doing it!

Or anyone with your Gemstash server URL can fetch the private or commercial gems you are paying for.

The easiest way is to set the Basic Auth for the server with one or many users. If you can automate it, you can create credentials for each developer and remove them when they leave the project.

The main benefit is that the credentials for enterprise gems won't be shared anymore, so they can not leaked that easily. If you need to rotate the credentials, you will update them in only one place: on the Gemstash server.

Are you using Dokku?

If yes, I prepared an easy way to run Gemshash on Dokku: github.com/CiTroNaK/gemstash-on-dokku.

Fun with Rails Enums and PORO

Petr Hlavicka — Tue, 05 Oct 2021 19:00:39 +0000

I really like enums. They can be really powerful if they are used wisely. Let’s see what we can do with them in a multilingual Rails app with a little help from PORO (Plain Old Ruby Object).

In this article, I will quickly explain the basics and introduce a few tasks that can occur when you are using enums in the Rails app. For each, I will try to show the usual way (which I know about) and a more fun way (at least for me) with PORO.

Basics

I believe enums don’t need to be heavily introduced. Below is a short description from the documentation:

Declare an enum attribute where the values map to integers in the database, but can be queried by name.

And that’s it. You can also set the default value, get scopes with optional prefix or suffix, a few nice methods and default validation. A small example that will be used in the article:

enum theme_color: {
  classic: 0,
  dark: 1,
  brown: 2
}, _suffix: true

The _suffix, _prefix and _default will be changed in not yet released (in time of writing the article) Rails 7 to a version without the _ prefix (according to the edge docs).

You will get:

Setting.classic_theme_color # scope with the suffix
Setting.theme_colors # enum hash

setting.classic_theme_color! # update
setting.classic_theme_color? # check
setting.theme_color # string instead of the integer from the database

As was already noted, Rails will store values as integers in the database, so you can easily change keys (that are mainly used in Rails) in the enum. That can be handy if you don’t exactly know the right name for them.

When should you use them?

I was tempted to write “it depends”, but my rule is simple: use enums, if you have an array of options for a single attribute, that is not editable by any user and the codebase depends on its content.

Especially the part "depends on its content" is my favourite. Imagine you have enum format with available export formats (pdf, html and so on).

You can then easily create a class structure that is based on the values and you will know that adding a new format will require changing the enum and adding a new export class.

Example:

class Document
  enum format: {
    pdf: 0,
    html: 1
  }, _prefix: true

  def export
    "Exports::#{format.classify}Export".constantize.new(self).export
  end
end

Task 1: Translations

The first and the most common one: how to translate enums?

With helper

The easiest way is to use I18n with scope:

I18n.t(setting.theme_color, scope: "activerecord.enums.setting")

Let’s make it more versatile and use a helper method.

# app/helpers/application_helper.rb

module ApplicationHelper
  def enum_t(value, key:, count: 1)
    I18n.t(value, scope: ["activerecord.enums", key], count: count)
  end
end

And the final usage:

<p><%= enum_t(setting.theme_color, key: "setting.theme_color") %></p>

If we would have only this task, I would stick with this solution. There would be no need to make it a little bit more complex only for translations. But I know we will have much more to do :)

With object

Let’s start the fun with PORO and create our enum object.

# app/enums/setting/theme_color.rb

class Setting::ThemeColor
  def self.t(value, count: 1)
    I18n.t(value, scope: "activerecord.enums.setting.theme_color", count: count)
  end
end

I chose a custom folder enums inside of the app folder, instead of having them inside eg. app/models. It is much cleaner for me to have them in their own specific folder.

And the usage:

<p><%= Setting::ThemeColor.t(setting.theme_color) %></p>

It is very similar, but we are now directly using a simple class that makes it more readable. Another benefit is that we can use it everywhere and not only in views and it is also easily testable.

This example is not the same as above, as it is limited to the enum only and it is not versatile as the helper method. We will get there in the next task.

Task 2: List values in a form

The usual way

You can use this below, but it would be without translations and nicer output for users.

options_for_select(Setting.theme_colors)

We could prepare options data in each controller or add it as a method inside the model, but to make it more versatile, let’s use a helper method again.

I am one of those who do not like fat controllers and models. It is also the reason, why I am using PORO for enums and not models or view helpers.

# app/helpers/application_helper.rb

def enum_options(source, tkey:)
  source.map do |key, _value|
    [enum_t(key, key: tkey), key]
  end
end

This can be used like this:

<%= form.select :theme_color, options_for_select(enum_options(Setting.theme_colors, tkey: "setting.theme_color"), setting.theme_color), {prompt: t("shared.views.select")}, required: true %>

With object

For only one enum, we could leave it. When you will have them more (and you probably will), you can refactor it (make it more versatile) and create a base class for our enums with shared code.

# app/enums/base_enum.rb

class BaseEnum
  class << self
    def t(value, count: 1)
      I18n.t(value, scope: ["activerecord.enums", translation_key], count: count)
    end

    def translation_key
      to_s.split("::").map(&:underscore).join(".")
    end
  end
end

Our enum class will be a little bit empty after it:

# app/enums/setting/theme_color.rb

class Setting::ThemeColor < BaseEnum; end

Now, we can update the base class with the code we will need to help us display our values in the form.

# app/enums/base_enum.rb

class BaseEnum
  attr_reader :id, :title

  def initialize(id:, title:)
    @id = id
    @title = title
  end

  class << self
    def all
      source.map do |key, _value|
        new(id: key, title: t(key))
      end
    end

    def source
      raise NotImplementedError
    end

    # the rest…
  end
end

You can find the final version of all used classes at the end of the article.

And finally, we can add something to the Setting::ThemeColor class:

# app/enums/setting/theme_color.rb

class Setting::ThemeColor < BaseEnum
  def self.source
    Setting.theme_colors
  end
end

The usage:

<%= form.collection_select :theme_color, Setting::ThemeColor.all, :id, :title, {include_blank: t("shared.views.select"), allow_blank: false}, {autofocus: false, required: true} %>

It now looks like we basically only have more code for removing one thing key: "setting.theme_color" for translations and we have a different form method. But all changes will help us with upcoming tasks.

You probably noticed that I did not use the value (integer) from our enum. It is because Rails returns the string instead of the integer in the model attribute. Thanks to that we can display the saved value in the form easily.

Task 3: Descriptions

One day, you will get a feature request: add description text to theme color options.

The usual way

The solution is easy, we can just add a new helper method that will use a different key for translations. We will add a title key to the previous translations and add a new description key to keep the structure nice.

def enum_t(value, key:, count: 1)
  I18n.t(value, scope: ["activerecord.enums", key, "title"], count: count)
end

def enum_description_t(value, key:, count: 1)
  I18n.t(value, scope: ["activerecord.enums", key, "description"], count: count)
end

But we have now 3 helper methods in total. Maybe it would be good to move them into a single file to have them in at least one place without any other unrelated methods.

For me, this is not a good solution (obviously) because:

you need to know that there are these methods (not the hardest one, but it is still better not to need to know it)
for each new “attribute” (like the description), you will have a new method (or you would create a general where you would state the attribute in params), in each case, you will need to look to translation file to know, what attributes are available for the enum

With object

First, we need to change the translation key in BaseEnum:

def t(value, count: 1)
  I18n.t(value, scope: ["activerecord.enums", translation_key, "title"], count: count)
end

We will need to add a new method that will return us the object for needed enum. We can add it as a class method on BaseEnum:

# app/enums/base_enum.rb
def find(key)
  new(id: key, title: t(key))
end

We could make the description attribute available for all and add it into the BaseEnum class, but we don’t need it right now…

# app/enums/setting/theme_color.rb

def description
  I18n.t(id, scope: ["activerecord.enums", self.class.translation_key, "description"])
end

And the usage:

Setting::ThemeColor.find(setting.theme_color).description

We can finally fully benefit from the PORO way and have it clean and readable.

Task 4: Custom methods

Imagine, you would like to have the color in hex (eg. dark = #000000). With a usual way, we would create just another helper method or add a method to the model… but with enum object we can just add a new method to the class and have it all in one place.

# app/enums/setting/theme_color.rb

def hex
  case id
  when "classic"
    "#FF0000"
  when "dark"
    "#000000"
  when "brown"
    "#D2691E"
  end
end

We are now able to use it everywhere, not only in views.

Setting::ThemeColor.find("dark").hex

This was just an example. But the main point is, you now have a place where you can add these kinds of methods when you will need them.

Task 5: Limit displaying values

Another interesting task: allowing to display brown option only for admins (for some weird reason). Again, with the usual way, we would have another helper or model method.

Luckily we have our enum class, where we can change the source method to our needs.

# app/enums/setting/theme_color.rb

def self.source
  if Current.user.admin?
    Setting.theme_colors
  else
    Setting.theme_colors.except("brown")
  end
end

In this example, I am using CurrentAttributes for storing the current user.

Summary

With enum objects, you can make your enums more fun and it opens you a lot of possibilities.

your code will be cleaner (slimmer models or helpers)
enums will have their own place where you can extend them to your needs
you will be able to use them everywhere
all added logic will be easily testable

I hope you found this article interesting. If you find any inconsistencies or you know a better way, I would be glad if you let me know on Twitter.

Final version of classes

`BaseEnum` class

# app/enums/base_enum.rb

class BaseEnum
  attr_reader :id, :title

  def initialize(id:, title:)
    @id = id
    @title = title
  end

  class << self
    def all
      source.map do |key, _value|
        new(id: key, title: t(key))
      end
    end

    def find(key)
      new(id: key, title: t(key))
    end

    def source
      raise NotImplementedError
    end

    def t(value, count: 1)
      I18n.t(value, scope: ["activerecord.enums", translation_key, "title"], count: count)
    end

    def translation_key
      to_s.split("::").map(&:underscore).join(".")
    end
  end
end

`Setting::ThemeColor` class

# app/enums/setting/theme_color.rb

class Setting::ThemeColor < BaseEnum
  def description
    I18n.t(id, scope: ["activerecord.enums", self.class.translation_key, "description"])
  end

  def hex
    case id
    when "classic"
      "#FF0000"
    when "dark"
      "#000000"
    when "brown"
      "#D2691E"
    end
  end

  def self.source
    if Current.user.admin?
      Setting.theme_colors
    else
      Setting.theme_colors.except("brown")
    end
  end
end

Multi-Factor Authentication for Rails with WebAuthn and Devise

Petr Hlavicka — Tue, 05 Oct 2021 18:56:13 +0000

There are several ways to add multi-factor authentication (MFA) for safer user authentication. Let’s look at how to add a modern MFA approach to a Rails application with WebAuthn.

What is multi-factor authentication?

Multi-factor authentication is an authentication method that adds more pieces of evidence (factors) to an authentication mechanism and makes it more secure:

Knowledge: something only the user knows, for example:
- Password (you know, the most common way)
- PIN (e.g., for credit card)
Possession: something specific that the user must have, for example:
- SIM card for SMS based one-time passwords (OTPs)
- Mobile phone with an application for OTP generation
- Hardware security keys (tokens)
Inherence: something only the user is, for example:
- Retina or iris scan
- Fingerprint scan (e.g., Apple Touch ID)
- Facial recognition (e.g., Apple Face ID)
- Hand geometry

The most common MFA methods utilize OTPs via SMS (which are not as secure as they seem to be) or an authenticator application, such as the Google Authenticator app, or a modern password manager (such as Bitwarden or 1Password).

With WebAuthn, you can allow (or enforce) the use of more factors for authentication than the password or an OTP. Users who do not utilize a password manager could use their favorite password, even if it has been leaked (see haveibeenpwned.com), because adding another factor with WebAuthn should prevent any unauthorized access to their account (but I do not recommend it, of course).

As many of today's devices have built-in authenticators (such as Touch/Face ID on Apple devices, other alternatives on Android devices, and Windows Hello on devices with MS Windows), it is easier than ever for people to use them as another factor for authentication with WebAuthn.

What is WebAuthn?

WebAuthn (Web Authentication) is a specification written by the W3C, FIDO, and others, including Google, Microsoft, Yubico, Apple, and PayPal. WebAuthn’s API allows the use of an authenticator, a security hardware key (from, for example, Yubico, or GoTrust), Windows Hello, or even Apple Touch/Face ID, to authenticate a user within a browser and can act as MFA.

WebAuthn API is well supported in all major browsers and platforms.

Support for FIDO2: WebAuthn and CTAP. Image source fidoalliance.org.

In this article, I will demonstrate how to implement WebAuthn with Devise, a popular authentication library for Rails. All the mentioned options (security keys, Windows Hello, and Apple Touch/Face ID) will be available to use within the application.

For more information about WebAuthn, you can look at webauthn.io.

How does WebAuthn work?

There are a lot of sources you can look at to see how it works (e.g., here and here). I will try to simplify it to the bare basics for the purpose of our implementation. The good news is that WebAuthn is based on public-key cryptography.

The following parts are involved during WebAuthn:

Authenticator: a security key, Touch ID, Windows Hello, etc.
Client: the user and his or her web browser.
Relying Party: the Rails app in our case.

In these processes:

Registration: this process creates a new set of public-key credentials by the authenticator, which will be used for authentication. The public part is sent back to the relying party for the authentication process.
Authentication: the relying party sends a challenge to the authenticator, which signs it with the registered public-key credentials and sends it back. The relying party can verify it using the stored public part of the authenticator’s credentials (from registration).

During both processes, the user needs to verify that he or she has access to the authenticator by, for example, touching the security key or Touch ID or using Windows Hello.

Base information about the Rails app

I created a GitHub repository with all of the code used in this article. The application uses Rails 6.1 with Turbo and Stimulus. When I use Turbo, I will also inform you of an option that can be used when Turbo is not available in your application.

For some styling and icons, I used Tailwind CSS 2 and Font Awesome 5 in a free version.

The main difference in this application compared to Rails defaults is the use of Vite instead of Webpacker. Vite is just a modern alternative to Webpack. If you are already using Webpacker, you only need to change the path for the Stimulus controllers (probably app/javascript/controllers instead of app/frontend/controllers/, which is used with Vite).

This article starts at the point where all of the above is prepared, and the Devise gem is already installed and configured (see the main branch, where you can see all the related commits to this setup).

Authenticator registration

Before we can use WebAuthn for 2FA or passwordless login, we will need to register some authenticators in our app.

Installing WebAuthn

Luckily, there is a WebAuthn gem for Ruby (thanks!) that will do all the hard work for us. Just run bundle add webauthn.

Next, we will copy the configuration into config/initializers/webauthn.rb from the gem and change config.origin and config.rp_name. I also uncomment config.credential_options_timeout. Below, you can see it without comments, but I suggest leaving them in place.

WebAuthn.configure do |config|
  config.origin = ENV.fetch("APP_URL", "http://localhost:3000")
  config.rp_name = "WebAuthn with Devise"
  config.credential_options_timeout = 120_000
end

Storing credentials in the application

For WebAuthn, we will need to store webauthn_id for each user and credentials for each of his or her authenticators.

We will start with credentials:

rails g model webauthn_credential user:references external_id:string:uniq public_key:string nickname:string sign_count:integer

I recommend adding null: false and one more index to the migration for the uniqueness of the nickname per user:

class CreateWebauthnCredentials < ActiveRecord::Migration[6.1]
  def change
    create_table :webauthn_credentials, id: :uuid do |t|
      t.references :user, null: false, foreign_key: true, type: :uuid
      t.string :external_id, null: false
      t.string :public_key, null: false
      t.string :nickname, null: false
      t.integer :sign_count, null: false, default: 0

      t.timestamps
    end
    add_index :webauthn_credentials, :external_id, unique: true
    add_index :webauthn_credentials, %i[nickname user_id], unique: true
  end
end

Don’t forget to add corresponding validations to the model.

# app/models/webauthn_credential.rb

class WebauthnCredential < ApplicationRecord
  belongs_to :user

  validates :external_id, presence: true, uniqueness: true
  validates :public_key, presence: true
  validates :nickname, presence: true, uniqueness: {scope: :user_id}
  validates :sign_count, presence: true, numericality: {only_integer: true, greater_than_or_equal_to: 0}
end

The last part of this is adding webauthn_id to users.

rails g migration add_webauthn_id_to_users webauthn_id:string:uniq

With the update of app/models/user.rb with the validation and association.

has_many :webauthn_credentials, dependent: :destroy

validates :webauthn_id, uniqueness: true

After rails db:migrate, we can continue with a controller for managing authenticators.

Controller

We will need to display a form and a list of added authenticators (index action), as well as be able to remove each of them (destroy action) and create a new one (create action).

As for the index action, it will be very simple. Just get existing credentials for the current user and display them in the index view.

# app/controllers/webauthn/credentials_controller.rb

def index
  credentials = current_user.webauthn_credentials.order(created_at: :desc)

  render :index, locals: {
    credentials: credentials
  }
end

Below is a Rails view where we render the form and a list of already added credentials.

<!-- app/views/webauthn/credentials/index.html.erb -->

<% content_for(:title, 'WebAuthn') %>

<div id="new_webauthn_credential" class="w-full">
  <%= render partial: "form", locals: {credential: WebauthnCredential.new} %>
</div>

<div class="flow-root mt-6">
  <ul id="webauthn_credentials" class="divide-y divide-gray-200">
    <%= render partial: "credential", collection: credentials %>
  </ul>
</div>

<ul class="block mt-6">
  <li><%= link_to "Back to dashboard", root_path, class: 'text-sm font-medium text-gray-600 hover:text-gray-500' %></li>
</ul>

The credential partial will display only the nickname and destroy button.

<!-- app/views/webauthn/credentials/_credential.html.erb -->

<li id="<%= dom_id(credential) %>" class="py-4">
  <div class="flex items-center space-x-4">
    <div class="flex-1 min-w-0">
      <p class="text-sm font-medium text-gray-900 truncate">
        <%= credential.nickname %>
      </p>
    </div>
    <div>
      <%= button_to webauthn_credential_path(credential), method: :delete, class: "inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-red-700 bg-white hover:text-red-500" do %>
        <i class="fas fa-trash"></i>
      <% end %>
    </div>
  </div>
</li>

Here, you can see the dom_id needed for the destroy action below (for the turbo_stream.remove).

# app/controllers/webauthn/credentials_controller.rb

def destroy
  credential = current_user.webauthn_credentials.find(params[:id])
  credential.destroy

  render turbo_stream: turbo_stream.remove(credential)
end

If you are not using Turbo in your app, you can use Rails UJS (link_to with method: :delete) and redirect_to webauthn_credentials_url in the controller.

Let’s look at the form. It will contain only a text field for the nickname and a submit button.

<!-- app/views/webauthn/credentials/_form.html.erb -->

<%= form_with(model: credential, method: :post) do |f| %>
  <div class="flex mb-5 flex-row">
    <%= f.text_field :nickname, placeholder: "How it will be called?", class: "form-input block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", required: true %>
    <%= f.button :button, class: "flex-grow-0 ml-1 w-11 px-3 py-2 border border-transparent text-lg leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-indigo active:bg-green-700 transition ease-in-out duration-150" do %>
      <i class="fas fa-plus"></i>
    <% end %>
  </div>
  <%= turbo_frame_tag "webauthn_credential_error" %>
<% end %>

Challenge

As noted in the beginning, the registration also has a challenge, which is needed for the registration to be validated on the backend. We will point the form to the newly created controller, which will provide the challenge.

This controller will create a challenge for the authenticator and save it into the session, so we will be able to use it when the browser sends it back signed.

# app/controllers/webauthn/credentials/challenges_controller.rb

class Webauthn::Credentials::ChallengesController < ApplicationController
  def create
    # Generate WebAuthn ID if the user does not have any yet
    current_user.update(webauthn_id: WebAuthn.generate_user_id) unless current_user.webauthn_id

    # Prepare the needed data for a challenge
    create_options = WebAuthn::Credential.options_for_create(
      user: {
        id: current_user.webauthn_id,
        display_name: current_user.email, # we have only the email
        name: current_user.email # we have only the email
      },
      exclude: current_user.webauthn_credentials.pluck(:external_id)
    )

    # Generate the challenge and save it into the session
    session[:webauthn_credential_register_challenge] = create_options.challenge

    respond_to do |format|
      format.json { render json: create_options }
    end
  end
end

Let’s update the form to use this new controller. When submitted, it will send a JSON request for the challenge.

<!-- app/views/webauthn/credentials/_form.html.erb -->

<%= form_with(model: credential, url: webauthn_credentials_challenge_path(format: :json), method: :post, data: {remote: true, turbo: false} do |f| %>

With all needed from the backend, we need to use the WebAuthn API in the browser to communicate with the authenticator. For that, we can use a new Stimulus controller.

First, we will add the necessary NPM packages. We will use @github/webauthn-json as a nice wrapper for the WebAuthn API and @rails/request.js for easier requests to the backend (with built-in Turbo Stream support).

yarn add @github/webauthn-json @rails/request.js

The controller will have only two methods: create, which will be triggered by a successful response from the application, and error for a failed one.

// app/frontend/controllers/webauthn/register_controller.js

import { Controller } from "stimulus"
import * as WebAuthnJSON from "@github/webauthn-json"
import { FetchRequest } from "@rails/request.js"

export default class extends Controller {
  static targets = ["nickname"]
  static values = { callback: String }

  create(event) {
    const [data, status, xhr] = event.detail;
    const _this = this

    WebAuthnJSON.create({ "publicKey": data }).then(async function(credential) {
      const request = new FetchRequest("post", _this.callbackValue + `?nickname=${_this.nicknameTarget.value}`, { body: JSON.stringify(credential), responseKind: "turbo-stream" })
      await request.perform()
    }).catch(function(error) {
      console.log("something is wrong", error);
    });
  }

  error(event) {
    console.log("something is wrong", event);
  }
}

WebAuthnJSON.create({ "publicKey": data }) does all the hard work with WebAuthn API and returns a signed challenge and new credentials that will be sent to the callback URL for validation. We will pass the webauthn_credentials_url (Webauthn::CredentialsController#create). The request will be handled by FetchRequest as a turbo-stream thanks to the @rails/request.js library.

If you are not using Turbo in your app, you will need to remove the responseKind option and handle the response as JSON (see app/frontend/controllers/webauthn/auth_controller.js below).

Here is the final version of the form with the attached stimulus controller.

<%= form_with(model: credential, url: webauthn_credentials_challenge_path(format: :json), method: :post, data: {remote: true, turbo: false, controller: "webauthn--register", "webauthn--register-callback-value": webauthn_credentials_url, action: "ajax:success->webauthn--register#create ajax:error->webauthn--register#error"}) do |f| %>
  <div class="flex mb-5 flex-row">
    <%= f.text_field :nickname, placeholder: "How it will be called?", class: "form-input block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", required: true, data: {"webauthn--register-target": "nickname"} %>
    <%= f.button :button, class: "flex-grow-0 ml-1 w-11 px-3 py-2 border border-transparent text-lg leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-indigo active:bg-green-700 transition ease-in-out duration-150" do %>
      <i class="fas fa-plus"></i>
    <% end %>
  </div>
  <%= turbo_frame_tag "webauthn_credential_error" %>
<% end %>

Challenge validation

The last thing is the create action in Webauthn::CredentialsController.

# app/controllers/webauthn/credentials_controller.rb

def create
  # Create WebAuthn Credentials from the request params
  webauthn_credential = WebAuthn::Credential.from_create(params[:credential])

  begin
    # Validate the challenge
    webauthn_credential.verify(session[:webauthn_credential_register_challenge])

    # The validation would raise WebAuthn::Error so if we are here, the credentials are valid, and we can save it
    credential = current_user.webauthn_credentials.new(
      external_id: webauthn_credential.id,
      public_key: webauthn_credential.public_key,
      nickname: params[:nickname],
      sign_count: webauthn_credential.sign_count
    )

    if credential.save
      render :create, locals: {credential: credential}, status: :created
    else
      render turbo_stream: turbo_stream.update("webauthn_credential_error", "<p class=\"text-red-500\">Couldn't add your Security Key</p>")
    end
  rescue WebAuthn::Error => e
    render turbo_stream: turbo_stream.update("webauthn_credential_error", "<p class=\"text-red-500\">Verification failed: #{e.message}</p>")
  ensure
    session.delete(:webauthn_credential_register_challenge)
  end
end

If we encounter any errors, we will send back a message with turbo_stream as an example.

When the new credential is successfully created, the create view (in our case in a turbo_stream format) will be rendered with the created credential. It will reset the form and append the newly created credential to the list.

<!-- app/views/webauthn/credentials/create.turbo_stream.erb -->

<%= turbo_stream.update("new_webauthn_credential", partial: "webauthn/credentials/form", locals: {credential: WebauthnCredential.new}) %>
<%= turbo_stream.prepend("webauthn_credentials", partial: "webauthn/credentials/credential", locals: {credential: credential}) %>

If you are not using Turbo in your app, you can use JSON responses and handle them with the Stimulus controller.

This is everything needed for registration. The whole code is available in 1-registration branch (see the comparison with main).

Using WebAuthn as 2FA

Session controller

To display a page where the user can use his or her authenticator, we need to override the default Devise behavior for the Session controller. Luckily, it is easy to do.

First, we will create our own controller that will inherit from Devise.

# app/controllers/users/sessions_controller.rb

class Users::SessionsController < Devise::SessionsController
  def new
    session.delete(:webauthn_authentication)
    super
  end

  def create
    self.resource = warden.authenticate!(auth_options)

    if resource.webauthn_credentials.any?
      # preserve the stored location
      stored_location = stored_location_for(resource)

      # log out the user (this will also clear stored location)
      warden.logout

      # restore the stored location
      store_location_for(resource, stored_location)

      # set session data
      session[:webauthn_authentication] = {user_id: resource.id, remember_me: params[:user][:remember_me] == "1"}

      # redirect to the webauthn page
      redirect_to webauthn_authentications_url, notice: "Use your authenticator to continue."
    else
      # continue without webauthn
      set_flash_message!(:notice, :signed_in)
      sign_in(resource_name, resource)
      yield resource if block_given?
      respond_with resource, location: after_sign_in_path_for(resource)
    end
  end
end

And tell Devise to use it:

# config/routes.rb

devise_for :users, controllers: {sessions: "users/sessions"}

As a result, when the user enters a valid email and password, it will take him or her to a new page (that we will create below) for 2FA with WebAuthn.

Authentication with WebAuthn

The process here is very similar to the one for registration. We will request the challenge and send it back signed. If the verification on the backend passes, we will sign in the user.

Let’s start with a new Stimulus controller that will handle WebAuthn API in a very similar way as registration.

// app/frontend/controllers/webauthn/auth_controller.js

import { Controller } from "stimulus"
import * as WebAuthnJSON from "@github/webauthn-json"
import { FetchRequest } from "@rails/request.js"

export default class extends Controller {
  static values = { callback: String }

  auth(event) {
    const [data, status, xhr] = event.detail;
    const _this = this

    WebAuthnJSON.get({ "publicKey": data }).then(async function(credential) {
      const request = new FetchRequest("post", _this.callbackValue, { body: JSON.stringify(credential) })
      const response = await request.perform()

      if (response.ok) {
        const data = await response.json
        window.Turbo.visit(data.redirect, {action: 'replace'})
      } else {
        console.log("something is wrong", response);
      }
    }).catch(function(error) {
      console.log("something is wrong", error);
    });
  }

  error(event) {
    console.log("something is wrong", event);
  }
}

The main difference is in the response from the server (and the different WebAuthnJSON method). If the response is successful, it will use Turbo to “redirect” the user to a different page in a similar way as it would have been redirected after signing in without 2FA.

If you are not using Turbo in your app, you can use Turbolinks.visit instead of window.Turbo.visit.

UI

We will also need two controllers, as in registration (or one with a custom action). The first controller will have the index action to display our new page for 2FA and the create action, where we will verify and sign in the user.

# app/controllers/webauthn/authentications_controller.rb

class Webauthn::AuthenticationsController < ApplicationController
  skip_before_action :authenticate_user!

  def index
    user = User.find_by(id: session.dig(:webauthn_authentication, "user_id"))

    if user
      render :index, locals: {
        user: user
      }
    else
      redirect_to new_user_session_path, error: "Authentication error"
    end
  end

  def create
    # prepare needed data
    webauthn_credential = WebAuthn::Credential.from_get(params)
    user = User.find(session[:webauthn_authentication]["user_id"])
    credential = user.webauthn_credentials.find_by(external_id: webauthn_credential.id)

    begin
      # verification
      webauthn_credential.verify(
        session[:webauthn_authentication]["challenge"],
        public_key: credential.public_key,
        sign_count: credential.sign_count
      )

      # update the sign count
      credential.update!(sign_count: webauthn_credential.sign_count)

      # signing the user in manually
      sign_in(:user, user)

      # set the remember me - I hope this is working solution :)
      user.remember_me! if session[:webauthn_authentication]["remember_me"]

      # set the redirect URL
      redirect = stored_location_for(user) || root_url

      # you can use flash messages here
      flash[:notice] = "Hey, welcome back!"

      render json: {redirect: redirect}, status: :ok
    rescue WebAuthn::Error => e
      render json: "Verification failed: #{e.message}", status: :unprocessable_entity
    ensure
      session.delete(:webauthn_authentication)
    end
  end
end

The skip_before_action :authenticate_user! is important here, as the user is not yet authenticated.

The index view will contain a form with our new Stimulus controller.

<!-- app/views/webauthn/authentications/index.html.erb -->

<% content_for(:title, 'WebAuthn Authentication') %>

<p class="mb-4 text-center">Hey <%= user.email %>, your account is secured with WebAuthn authenticator.</p>

<%= form_with(url: webauthn_authentications_challenge_url(format: :json), method: :post, data: {remote: true, turbo: false, controller: "webauthn--auth", "webauthn--auth-callback-value": webauthn_authentications_url, action: "ajax:success->webauthn--auth#auth ajax:error->webauthn--auth#error"}) do |f| %>
  <div class="flex mb-5 flex-row">
    <%= f.button :button, class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
      Authenticate!
    <% end %>
  </div>
<% end %>

The last controller is for the challenge.

# app/controllers/webauthn/authentications/challenges_controller.rb

class Webauthn::Authentications::ChallengesController < ApplicationController
  skip_before_action :authenticate_user!

  def create
    user = User.find_by(id: session[:webauthn_authentication]["user_id"])

    if user
      # prepare WebAuthn options
      get_options = WebAuthn::Credential.options_for_get(allow: user.webauthn_credentials.pluck(:external_id))

      # save the challenge
      session[:webauthn_authentication]["challenge"] = get_options.challenge

      respond_to do |format|
        format.json { render json: get_options }
      end
    else
      respond_to do |format|
        format.json { render json: {message: "Authentication failed"}, status: :unprocessable_entity }
      end
    end
  end
end

Summary

When the user enters his or her credentials on the log-in form, it will be redirected (thanks to our new Users::SessionsController) to the new page for 2FA (Webauthn::AuthenticationsController#index). When the 2FA form is submitted, it will send request for a challenge (Webauthn::Authentications::ChallengesController#create), which will be processed by the Stimulus controller. If the user’s authenticator is provided, it will send the signed challenge back to the server for verification (Webauthn::AuthenticationsController#create). If the verification passes, the user will be signed in, and the controller will respond with the redirect URL that the Stimulus controller uses for redirection.

If you use WebAuthn for MFA, you should also generate some recovery key(s) for the user, so he or she will be able to recover access to his or her account when access to the authenticator is lost (e.g., in the event of a lost security key).

The whole code is available in 2-2fa branch (see the comparison with 1-registration).

Using “passwordless” authentication

We have almost everything prepared for passwordless login. We will only change the login form to support it with a small change in one controller.

Login form

Unless you force your users to have WebAuthn enabled, there will be users without it. This means we need to allow users to log in with or without a password.

A simple toggle button will do the work. For passwordless log in, we will hide the password field and change the form to submit it to the Webauthn::Authentications::ChallengesController controller instead of Users::SessionsController.

We will inherit from our previous Stimulus controller for authentication and add the new method to toggle the form.

// app/frontend/controllers/webauthn/login_controller.js

import AuthController from "./auth_controller"

export default class extends AuthController {
  static targets = ["email", "password", "default", "webauthn"]
  static values = {
    callback: String,
    webauthn: String
  }

  connect() {
    this.webauthn = true
    this.defaultActionUrl = this.element.getAttribute("action")
  }

  toggle(event) {
    event.preventDefault()
    this.passwordTarget.classList.toggle("hidden")
    this.defaultTarget.classList.toggle("hidden")
    this.webauthnTarget.classList.toggle("hidden")

    if(this.webauthn) {
      this.element.setAttribute("data-remote", true)
      this.element.setAttribute("data-turbo", false)
      this.element.setAttribute("action", this.webauthnValue)
    } else {
      this.element.setAttribute("data-remote", false)
      this.element.setAttribute("data-turbo", true)
      this.element.setAttribute("action", this.defaultActionUrl)
    }

    this.webauthn = !this.webauthn
  }
}

If you are not using Turbo in your app, you can remove the parts that handle data-turbo.

We will use the same controller as the one used for 2FA. We will need to find the user by email (as it will be sent from the form and not provided by session by Devise) and also prepare session data. Here are the changes.

# app/controllers/webauthn/authentications/challenges_controller.rb#5

user = if params.dig(:user, :email)
  # passwordless
  User.find_by(email: params[:user][:email])
else
  # 2fa
  User.find_by(id: session[:webauthn_authentication]["user_id"])
end

# app/controllers/webauthn/authentications/challenges_controller.rb#17

# prepare session for passwordless
session[:webauthn_authentication] ||= {}
unless session[:webauthn_authentication]["user_id"]
  session[:webauthn_authentication]["user_id"] = user.id
  session[:webauthn_authentication]["remember_me"] = params.dig(:user, :remember_me) == "1"
end

The whole code is available in 3-passwordless branch (see the comparison with 2-2fa).

Preview with security key

Preview with Touch ID

A few notes in the end

When you register a security key, you can use it with any device (if the key has NFC, you can even use it with a mobile phone or tablet) and any browser.
When you register Touch ID (e.g., on MacBook), you can use it only within the browser that you used for registration. Touch ID needs a browser to create a pair. You can, of course, register it within every browser you have on the computer.

Modern Rails flash messages (part 3): Refactoring with Turbo

Petr Hlavicka — Wed, 07 Jul 2021 19:57:48 +0000

I can not believe it has been almost 10 months since I wrote the first part. Several things have happened since then. Like Turbo...

The demo application still works in the same way, but a few changes needed to be made to support Turbo. I also refactored it a little bit to make it easier to use with multiple controllers.

I've updated the code at the repository on GitHub with the support for Turbo.

Installing Turbo

That was really easy, just run bundle add turbo-rails and run bin/rails turbo:install.

Don't forget to replace any mention of turbolinks to turbo (eg. data-turbolinks-track => data-turbo-track).

Usage with UJS and Turbo

The original solution worked with UJS and Turbolinks. Let's make it work in the same way but with Turbo. You can see mentioned changes here.

Thanks to Turbo, we can remove code related to Turbolinks cache (this.isPreview at app/javascript/controllers/notification_controller.js) and replace it with data-turbo-cache="false" at app/components/notification_component.html.erb.

We also need to replace Turbolinks.visit with window.Turbo.visit in app/javascript/controllers/notification_controller.js.

I also started using the dom_id helper to identify HTML parts related to each post.

The last thing I need to mention is adding data: { turbo: false } to each remote: true link to disable Turbo on them. After that, it should work as before with Turbolinks.

BTW you should check out mrujs as a modern replacement for UJS. Konnor Rogers did an amazing job there.

Refactoring and usage with Turbo streams

You can see mentioned changes here.

The main goal here is to refactor the JS response for the undo action at app/views/posts/destroy.js.erb and replace it with Turbo stream.

The first thing that it does is adding a .hidden class to hide the post. That is something that Turbo can't do by default. Luckily, someone clever wrote an article about how to add a custom action to turbo streams. With that, we can refactor it.

From this:

// app/views/posts/destroy.js.erb

// finding and hiding the record
document.getElementById('<%= dom_id(post) %>').classList.toggle('hidden');

// displaying the notification
<% flash.each do |type, data|  %>
document.getElementById('notifications').insertAdjacentHTML("afterBegin", "<%=j render(NotificationComponent.new(type: type, data: data)) %>");
<% end %>

To the same functionality with Turbo stream:

<!-- app/views/undo/destroy.turbo_stream.erb -->

<turbo-stream action="addclass" target="<%= dom_id(record) %>">
  <template>hidden</template>
</turbo-stream>

<% flash.each do |type, data| %>
  <%= turbo_stream.prepend('notifications', render(NotificationComponent.new(type: type, data: data))) %>
<% end %>

Now, we could use that. Let's move the response from posts_controller.rb and place it to app/controllers/concerns/destroy_with_undo_response.rb, so we can easily reuse it. You can see that I also refactored it and added the Turbo stream support.

# app/controllers/concerns/destroy_with_undo_response.rb

module DestroyWithUndoResponse
  extend ActiveSupport::Concern

  private

  def destroy_with_undo_response(record:, job_id:, redirect:)
    respond_to do |format|
      format.html do
        flash[:success] = undo_flash_message(klass: record.class, job_id: job_id)
        redirect_to redirect
      end
      format.turbo_stream do
        if params[:redirect]
          flash[:success] = undo_flash_message(klass: record.class, job_id: job_id)
          redirect_to redirect
        else
          flash.now[:success] = undo_flash_message(klass: record.class, job_id: job_id, inline: true)
          render 'undo/destroy', locals: { record: record }
        end
      end
    end
  end

  def undo_flash_message(klass:, job_id:, inline: nil)
    timeout = defined?(klass::UNDO_TIMEOUT) ? klass::UNDO_TIMEOUT : 10

    {
      title: "#{klass.model_name.human} was removed",
      body: 'You can recover it using the undo action below.',
      timeout: timeout, countdown: true,
      action: {
        url: undo_path(job_id, inline: inline),
        method: 'delete',
        name: 'Undo'
      }
    }
  end
end

We can now include it in the PostsController and update the destroy action:

class PostsController < ApplicationController
  include DestroyWithUndoResponse

  def destroy
    post = Post.active.find(params[:id])
    job_id = post.schedule_destroy
    destroy_with_undo_response(record: post, job_id: job_id, redirect: posts_path)
  end
end

In app/views/posts/show.html.erb and app/views/posts/_form.html.erb we need to add a param redirect: true to each post_path(@post). This param is then used in the turbo stream response to do the right action.

In app/views/posts/index.html.erb we can remove remote: true, data: { turbo: false } as we will leverage Turbo.

And that's all. The application now behaves exactly the same, but with Turbo.

Using Dokku with Let's Encrypt wildcard certificate

Petr Hlavicka — Sun, 21 Mar 2021 17:07:18 +0000

Wildcard certificates are handy and this was the first time when I needed to use them with Dokku. It was a little bit harder than I expected, but luckily, it is doable even with automatic renewal.

Right now (when I wrote this post), there is no wildcard support from dokku-letsencrypt plugin. Luckily, Dokku itself can use certificates from other sources.

Creating wildcard certificate with Certbot

For a wildcard certificate, you need to use a different challenge with Let's Encrypt called DNS-01 where you need to change DNS to prove, you are the owner of the domain.

I used this tutorial from Jamie Scaife to install all needed to set up Certbot to use acme-dns. When you finish, you should have the wildcard certificate created.

Now, we need to tell Dokku to use our new wildcard certificate within our app.

Adding to Dokku

To add a certificate to Dokku for a certain app, we will use dokku certs:add command.

I found out, that it is easier to use a tar file with all related files, so we need to create one.

Create a new file, eg. /root/dokku-certs/app/install where the app should be the name of your application. I will use example.com as an example domain. Open it in your favourite editor and add this content:

rm -rf server.crt
rm -rf server.key
rm -rf certs.tar

cp /etc/letsencrypt/live/example.com/fullchain.pem server.crt
cp /etc/letsencrypt/live/example.com/privkey.pem server.key

tar cvf certs.tar server.key server.crt

dokku certs:add app < certs.tar

The First 3 lines will ensure, we will use only fresh files.

Line 5 and 6 copies needed files from the letsencrypt folder, where certbot creates the certificates for us. You will need to change them with the correct path.

Line 8 creates a tar file that is then imported to Dokku using the last command. You will need to change app to your own Dokku app.

The last step is marking the script as executable:

chmod +x /root/dokku-certs/app/install

Now, you can call the script and verify, that everything works as expected:

/root/dokku-certs/app/install

You should see something like this:

server.key
server.crt
-----> Unsetting DOKKU_PROXY_PORT
-----> Unsetting DOKKU_PROXY_SSL_PORT
-----> Setting config vars
       DOKKU_PROXY_PORT_MAP:  http:80:5000
-----> Setting config vars
       DOKKU_PROXY_PORT_MAP:  http:80:5000 https:443:5000
-----> Configuring *.example.com...(using built-in template)
-----> Creating https nginx.conf
       Enabling HSTS
       Reloading nginx

Renew the certificate

We will use Certbot's --renew-hook within crontab (for automatic renewal).

Open the crontab using crontab -e command and add this line below:

0 0 */10 * * certbot renew --renew-hook "/root/dokku-certs/app/install" > /var/log/letsencrypt/renew-errors.log

This will call the certbot renew command with our script in the renew-hook. When there will be a renewal, it will trigger the hook and call our script, which will copy the new certificate into the Dokku app.

I hope, there is an easier way how to do it, but the script above works well.

If anything goes wrong, you will receive an email about the domain expiration from the Let's Encrypt bot. So you should definitely add a working email when you are creating certificates with Let's Encrypt.

Modern Rails flash messages (part 2): The undo action for deleted items

Petr Hlavicka — Sun, 20 Sep 2020 08:55:31 +0000

In the previous article, I've prepared a way how to add actions to the Rails flash messages. In this article, I will explore one way, how to use them for the undo action for deleted records.

TL;DR: You can find running demo based on this series of articles on modern-rails-flash-messages.herokuapp.com with source code on github.com/CiTroNaK/modern-rails-flash-messages.

How to deal with recovering the deleted records

For my needs (and for this article) I chose to use the soft-delete method.

This solution using a mechanism to mark a record as deleted instead of deleting it. The application is then set up to display only records without the mark (like active only records).

As a short-term solution, it is quite easy and quick. For the long-term, you need to take care of soft-deleted records, which could take a lot of space in your database.

In our case, we will have these documents marked only for a few seconds before the hard deletion. So we are safe.

BTW another option is to store the deleted records outside of the main database. This can bring a lot of complexity especially with IDs and associated records.

The plan

Marking the record as soft-deleted.
Creating a background task that will hard-delete the record from the database in the really near future.
Creating a mechanism that will stop the background job and un-mark the record as soft-deleted.
Displaying the "recovered" record back to the user.
Profit ...

Step 1: Soft-deleting

For every model that will be using for this soft-delete, we will need to add a new attribute. Don't forget to add an index to the column, because it will be used for querying.

class AddDeletedAtToMaps < ActiveRecord::Migration[6.0]
  def change
    add_column :maps, :deleted_at, :datetime
    add_index :maps, :deleted_at
  end
end

That can be generated by:

rails g migration add_deleted_at_to_maps deleted_at:datetime:index

Then we can add scopes to the model using a concern (I suppose it will be used many times and we should stay DRY).

# app/models/concerns/soft_delete.rb

module SoftDelete
  extend ActiveSupport::Concern

  included do
    scope :active, -> { where(deleted_at: nil) }
    scope :deleted, -> { where.not(deleted_at: nil) }
  end
end

Someone could be tempted to use default_scope instead of active scope, please don't. It will make your life much easier if you stay out of using the default_scope. It breaks the premise of the least surprises.

I will include the concern in my model.

# app/models/map.rb

class Map < ApplicationRecord
  include SoftDelete

  # rest of the code
end

Now, the last thing you need to do is set the active scope everywhere were you using that model. Eg.

Map.active.find(params[:id])
current_user.maps.active

Step 2: Background job for actual delete

I will use Sidekiq for background jobs.

As to making it as DRY as possible, we need to pass class and id of the model as parameters to our worker. You could be tempted to pass the object as for ActiveJob, but Sidekiq does not support it. See best practices for Sidekiq.

The job itself is pretty simple.

# app/workers/delete_worker.rb

class DeleteWorker
  include Sidekiq::Worker
  sidekiq_options retry: false

  def perform(record_class, record_id)
    record_class.constantize.deleted.find(record_id).destroy
  end
end

As you can see, I am using the second scope which I created in the concern. If the worker did not find the record, it will throw an error, so your error tracking solution could let you know about it, but it will not try it again (sidekiq_options retry: false). To be clear, there should not be any error, unless you will have a different solution when you can delete the record permanently without this and the user will use it in meantime (like in 10+ seconds).

Now, we can use it in our concern (app/models/concerns/soft_delete.rb) with a new methods schedule_destroy and recover.

def schedule_destroy
  timeout = defined?(UNDO_TIMEOUT) ? UNDO_TIMEOUT : 8
  update(deleted_at: Time.zone.now.utc)
  DeleteWorker.perform_in(timeout.seconds + 5.seconds, self.class.name, id)
end

def recover
  update(deleted_at: nil)
end

The schedule_destroy method basically updates the record with deleted_at and schedules the job for hard deleting. I've added support for setting the timeout per model using UNDO_TIMEOUT constant. We will use the timeout for notification and I've added a few seconds more to be sure it will not finish before the notification goes away.

Calling eg. map.schedule_destroy will now schedule a job and return his job id, that we will need later.

Step 3: Stopping the deletion

Let's start with an action, which will remove the scheduled job. We could have one per model, like (maps#undo), but that would lead to a lot of duplications. Instead, we will create one controller to handle it.

# app/controllers/undo_controller.rb

class UndoController < ApplicationController
  def destroy
    job = Sidekiq::ScheduledSet.new.find_job(params[:id])
    done = recover_record(job)

    if done
      respond_to do |format|
        format.json { render json: { message: 'Done!' }, status: status }
      end
    else
     head :unprocessable_entity
    end
  end

  private

  def recover_record(job)
    return false unless job

    job.delete
    record = job.item['args'][0].constantize.find(job.item['args'][1])
    record.recover

    true
  end
end

The destroy action will find the scheduled job by his ID, remove it, and recover the record (will set deleted_at to nil).

To be honest, I am not sure, if the destroy action is the right action for it. I am using it because I am able to easily pass an ID to it and I am basically removing a scheduled job. With create it would be harder because I will need to send the body with the request. I will gladly discuss a better solution in the comments.

Also, don't forget to add it to the routes.rb:

resources :undo, only: [:destroy]

Now, we can finally use it in any controller where we want to the user to use the new undo action. I will use maps_controller.rb as the example.

def destroy
  map = current_user.maps.active.find(params[:id])
  job_id = map.schedule_destroy

  flash[:success] = flash_message_with_undo(job_id: job_id, map: map)
  respond_to do |format|
    format.html { redirect_to maps_url }
  end
end

private

def flash_message_with_undo(job_id:, map:)
  {
    title: "Map #{map.title} was removed",
    body: 'You can recover it using the undo action below.',
    timeout: Map::UNDO_TIMEOUT, countdown: true,
    action: {
      url: undo_path(job_id),
      method: 'delete',
      name: 'Undo'
    }
  }
end

We will need to update our stimulus controller for notification to support our new response with better handling of an error:

// app/javascript/controllers/notification_controller.js

run(e) {
  e.preventDefault();
  this.stop();
  let _this = this;
  this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-grey-700">Processing...</span>';

  // Call the action
  fetch(this.data.get("action-url"), {
    method: this.data.get("action-method").toUpperCase(),
    dataType: 'script',
    credentials: "include",
    headers: {
      "X-CSRF-Token": this.csrfToken
    },
  })
    .then(response => {
      // Handle our unprocessable entity status
      if (!response.ok) {
        throw Error(response.statusText);
      }
      return response;
    })
    .then(response => response.json())
    .then(data => {
      // Set new content
      _this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-green-700">' + data.message + '</span>';

      // Close
      setTimeout(() => {
        _this.close();
      }, 1000);
    })
    .catch(error => {
      console.log(error);
      _this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-red-700">Error!</span>';
      setTimeout(() => {
        _this.close();
      }, 1000);
    });
}

And that's it. A user can now recover the record using our notification with the undo action. Just one small thing... it will not show him the record. Right now, the user will need to manually reload the page and that's not a proper way how to do it.

Step 4: Displaying the result to the user

The easiest solution would be, of course, just reload the page using javascript. But... we have at least two very different scenarios to cover.

When a user deletes a record from its detail

Typically from #show action. We will need redirect user to somewhere else (typically to the #index). With this scenario, we can reload the page for the user.

We can do it easily with Turbolinks.

.then(data => {
  // Set new content
  _this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-green-700">' + data.message + '</span>';

  // Close
  setTimeout(() => {
      // Reload the page using Turbolinks
      Turbolinks.visit(window.location.toString(), {action: 'replace'})
    }
  }, 1000);
})

When a user deletes a record from the list

Typically from #index action. When this happens, we should do two actions:

hiding the record in the list when the user clicks on the delete button
displaying it back using the undo action

First of all, we will add the option to the undo controller (final version):

# app/controllers/undo_controller.rb

class UndoController < ApplicationController
  def destroy
    job = Sidekiq::ScheduledSet.new.find_job(params[:id])
    done = recover_record(job)

    if done
      response = prepare_response(job)
      respond_to do |format|
        format.json { render json: response, status: :ok }
      end
    else
      head :unprocessable_entity
    end
  end

  private

  def recover_record(job)
    return false unless job

    job.delete
    record = job.item['args'][0].constantize.find(job.item['args'][1])
    record.recover

    true
  end

  def prepare_response(job)
    inline = params[:inline].presence ? true : false
    {
      message: inline ? 'Done!' : 'Done! Reloading the page...',
      inline: inline,
      record_id: (job.item['args'][1] if job),
      record_class: (job.item['args'][0] if job)
    }
  end
end

I've expanded the response to support our needs. A different message for reloading, the attribute (inline) that we need to hide / show the record and information that we need to know for it (record_id and record_class).

Now the record controller (in my case the maps controller):

def destroy
  map = current_user.maps.active.find(params[:id])
  job_id = map.schedule_destroy

  respond_to do |format|
    format.html do 
      flash[:success] = flash_message_with_undo(job_id: job_id, map: map)
      redirect_to maps_url
    end
    format.js do
      flash.now[:success] = flash_message_with_undo(job_id: job_id, map: map, inline: true)
      render :destroy, locals: { map: map }
    end
  end
end

private

def flash_message_with_undo(job_id:, map:, inline: nil)
  {
    title: "Map #{map.title} was removed",
    body: 'You can recover it using the undo action below.',
    timeout: Map::UNDO_TIMEOUT, countdown: true,
    action: {
      url: undo_path(job_id, inline: inline),
      method: 'delete',
      name: 'Undo'
    }
  }
end

I've added a new response format (js) and the inline attribute for the undo controller.

The new destroy.js.erb view:

// finding and hiding the record
document.querySelector('[data-key$="<%= map.id %>"]').classList.toggle('hidden');

// displaying the notification
<% flash.each do |type, data|  %>
document.getElementById('notifications').insertAdjacentHTML("afterBegin", "<%=j render(NotificationComponent.new(type: type, data: data)) %>");
<% end %>

In my example, I am adding the data-key attribute to the HTML of the record with its ID. You can also add the class name to it. In my case, I am using UUIDs instead of numerical IDs and this data-key is related to Stimulus Reflex.

And the last part, the final run method for stimulus controller:

// app/javascript/controllers/notification_controller.js

run(e) {
  e.preventDefault();
  this.stop();
  let _this = this;
  this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-grey-700">Processing...</span>';

  // Call the action
  fetch(this.data.get("action-url"), {
    method: this.data.get("action-method").toUpperCase(),
    dataType: 'script',
    credentials: "include",
    headers: {
      "X-CSRF-Token": this.csrfToken
    },
  })
    .then(response => {
      if (!response.ok) {
        throw Error(response.statusText);
      }
      return response;
    })
    .then(response => response.json())
    .then(data => {
      // Set new content
      _this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-green-700">' + data.message + '</span>';

      // Remove hidden class and display the record
      if (data.inline) {
        document.querySelector('[data-key$="' + data.record_id + '"]').classList.toggle('hidden');
      }

      // Close
      setTimeout(() => {
        if (data.inline) {
          // Just close the notification
          _this.close();
        } else {
          // Reload the page using Turbolinks
          Turbolinks.visit(window.location.toString(), {action: 'replace'})
        }
      }, 1000);
    })
    .catch(error => {
      console.log(error);
      _this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-red-700">Error!</span>';
      setTimeout(() => {
        _this.close();
      }, 1000);
    });
}

I am using the same way to show the record back and just close the notification instead of reloading the page. You can also use transitions instead of just hide / show the record.

With this, you can remove many records without reloading the page and still be able to undo them.

A few notes at the end

When you add another action, you will need to deal that maybe you will not need to reload or show the record. For it, just add another attribute to the response that will help you with it. Like action_type or similar.

Using a typical "trash" solution would work a little bit differently. There would be only one background job that would run once per day and would delete old records (like after 30 days and so). So, the only thing you will need to do in the undo controller is to null the deleted_at for the record.

If you have some feedback on my solution, don't hesitate to use comments here.

I can imagine a lot of ways how to use the action in the notification. For example, I am thinking about a rollback for the content (like rollback to the previous version of the record). If you would be interested in any particular action, let me know in the comments. I can consider to prepare it if I find it interesting :)

Thanks for reading it to the end :)

Modern Rails flash messages (part 1): ViewComponent, Stimulus & Tailwind CSS

Petr Hlavicka — Tue, 01 Sep 2020 05:15:16 +0000

I always thought that flash messages in Rails could be better. Don't get me wrong, I really like how they work and how easy is to use them.

As a side project, I started to build a simple application for tabletop RPG players and found out, that I really need to have actions in them. Like typical "Undo" action when you delete something and skip the repetitive "Are you sure?" annoying question.

I confirmed my needs to myself when I saw, how Tailwind UI has some very nice notifications prepared.

I wanted them in my app!

TL;DR: scroll down for the complete code ;-) and here is a preview of the final version with different options (click here if you see only white image below):

Update after the second part: You can find running demo based on this series of articles on modern-rails-flash-messages.herokuapp.com with source code on github.com/CiTroNaK/modern-rails-flash-messages.

Prerequisites

Ruby on Rails
ViewComponent
Stimulus
Tailwind CSS for front-end part (is optional, because you can use your own CSS/HTML)
FontAwesome for icons (optional)

Creating a component

Please, follow the installation section from ViewComponent Docs (if you already don't have it).

Luckily we are not limited by passing only the string to the flash object. We will use the possibility to pass the Hash (you can also pass Array, see docs).

As we will use key and value from flash object, I will add it as arguments for a new view component.

bin/rails generate component Notification type data

Which will output something like:

      create  app/components/notification_component.rb
      invoke  erb
      create    app/components/notification_component.html.erb

One file for logic and second for HTML output. Let's start with the logic for the component.

Ruby part

After generation, it will look like this:

# app/components/notification_component.rb

class NotificationComponent < ViewComponent::Base
  def initialize(type:, data:)
    @type = type
    @data = data
  end
end

We will pass the Hash as our data, but for backward compatibility, we need to be sure, it will works for places, that aren't under our control. There will use a String, instead of Hash.

We can easily ensure, that we will work with Hash every time:

private 

def prepare_data(data)
  case data
  when Hash
    data
  else
    { title: data }
  end
end

and the corresponding change in the initialize method

@data = prepare_data(data)

HTML part

I've used prepared notification from Tailwind UI, but you can use whatever you want. This notification will work with Tailwind CSS only, so you don't need to have Tailwind UI (but if you find it useful, you should).

<!-- app/components/notification_component.html.erb -->

<div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto">
  <div class="rounded-lg shadow-xs overflow-hidden">
    <div class="p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0">
          <div class="h-6 w-6 text-gray-400">
            <i class="far fa-info-square"></i>
          </div>
        </div>
        <div class="ml-3 w-0 flex-1 pt-0.5">
          <p class="text-sm leading-5 font-medium text-gray-900">
            Discussion moved
          </p>
          <p class="mt-1 text-sm leading-5 text-gray-500">
            Lorem ipsum dolor sit amet consectetur adipisicing elit oluptatum tenetur.
          </p>
          <div class="mt-2">
            <button class="text-sm leading-5 font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
              Undo
            </button>
            <button class="ml-6 text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:underline transition ease-in-out duration-150">
              Dismiss
            </button>
          </div>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
            <i class="h-5 w-5 far fa-times"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

As we can see, we have these parts: title ("Discussion moved"), body ("Lorem ipsum dolor sit amet consectetur adipisicing elit oluptatum tenetur.") and one action ("Undo").

Let's add them to the HTML (if you have a different, just place instance variables to the correct places in your HTML):

<div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto">
  <div class="rounded-lg shadow-xs overflow-hidden">
    <div class="p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0">
          <div class="h-6 w-6 text-gray-400">
            <i class="far fa-info-square"></i>
          </div>
        </div>
        <div class="ml-3 w-0 flex-1 pt-0.5">
          <p class="text-sm leading-5 font-medium text-gray-900">
            <%= @data[:title] %>
          </p>
          <% if @data[:body].present? %>
            <p class="mt-1 text-sm leading-5 text-gray-500">
              <%= @data[:body] %>
            </p>
          <% end %>
          <% if @data[:action].present? %>
            <div class="mt-2">
              <button class="text-sm leading-5 font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
                <%= @data.dig(:action, :name) %>
              </button>
              <button class="ml-6 text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:underline transition ease-in-out duration-150">
                <%= t('.dismiss') %>
              </button>
            </div>
          <% end %>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
            <i class="h-5 w-5 far fa-times"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

We are already in the state when we can display them to see, how are we doing.

In app/views/layouts/application.html.erb or in partial, you can display them using:

<div class="fixed inset-0 px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end">
  <div class="flex flex-col items-end justify-center">
    <% flash.each do |type, data| %>
      <%= render NotificationComponent.new(type: type, data: data) %>
    <% end %>
  </div>
</div>

Then, add some flash message in the controller like this:

flash[:notice] = { 
  title: 'Discussion moved', 
  body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit oluptatum tenetur.'
}

or as before:

flash[:notice] = 'Discussion moved'

Now, we should be able to see flash messages, but all with the same icon (we will fix it in a minute) and without the ability to close (or auto-hide) it and without some nice effects (we will do it with Stimulus).

Changing the icons (and their color for nicer UI), we need to update the notification_component.rb and add two new methods below private part. You may notice, that I have one more flash type added.

def icon_class
  case @type
  when 'success'
    'fa-check-square'
  when 'error'
    'fa-exclamation-square'
  when 'alert'
    'fa-exclamation-square'
  else
    'fa-info-square'
  end
end

def icon_color_class
  case @type
  when 'success'
    'text-green-400'
  when 'error'
    'text-red-800'
  when 'alert'
    'text-red-400'
  else
    'text-gray-400'
  end
end

and add new instance variables to initializer

@icon_class = icon_class
@icon_color_class = icon_color_class

which we will use in HTML

<div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto">
  <div class="rounded-lg shadow-xs overflow-hidden">
    <div class="p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0">
          <div class="h-6 w-6 <%= @icon_color_class %>">
            <i class="far <%= @icon_class %>"></i>
          </div>
        </div>
        ...
      </div>
    </div>
  </div>
</div>

This will change the color and icon per flash type.

Adding functionality and effects using Stimulus

Please, follow the installation section from Stimulus Docs (if you already don't have it).

Let's create our notification controller.

// app/javascript/controllers/notification_controller.js

import {Controller} from "stimulus"

export default class extends Controller {
}

And connect it to the HTML using data-controller attribute on our root div.

<div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto" data-controller="notification">
...
</div>

Closing and auto-hiding

For using transitions, we will need to hide the notification first and then trigger the transition. For that, I will add hidden class to our root div.

<div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto hidden" data-controller="notification">
...
</div>

And in a connect method in our Stimulus controller, I will remove it and add classes for nice transition. The connect method will be triggered anytime when the controller is connected to the DOM (see Lifecycle Callbacks). I will also use a neat trick for Turbolinks to prevent rendering it when you going back.

connect() {
  if (!this.isPreview) {
    // Display with transition
    setTimeout(() => {
      this.element.classList.remove('hidden');
      this.element.classList.add('transform', 'ease-out', 'duration-300', 'transition', 'translate-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2');

      // Trigger transition
      setTimeout(() => {
        this.element.classList.add('translate-y-0', 'opacity-100', 'sm:translate-x-0');
      }, 100);

    }, 500);

    // Auto-hide
    setTimeout(() => {
      this.close();
    }, 5500);
  }
}

close() {
  // Remove with transition
  this.element.classList.remove('transform', 'ease-out', 'duration-300', 'translate-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2', 'translate-y-0', 'sm:translate-x-0');
  this.element.classList.add('ease-in', 'duration-100')

  // Trigger transition
  setTimeout(() => {
    this.element.classList.add('opacity-0');
  }, 100);

  // Remove element after transition
  setTimeout(() => {
    this.element.remove();
  }, 300);
}

get isPreview() {
  return document.documentElement.hasAttribute('data-turbolinks-preview')
}

Now, we need to connect the close method to our HTML, we can do it easily with data-action="notification#close" attribute on button elements.

This is all for nice entering and (auto) leaving with a functional close button.

Countdown

For countdown, we will add an option to our notification to control the timeout. We also need to count on backward compatibility with adding default value.

# app/components/notification_component.rb

def initialize(type:, data:)
  @type = type
  @data = prepare_data(data)
  @icon_class = icon_class
  @icon_color_class = icon_color_class

  @data[:timeout] ||= 3
end

And add into the HTML as data-notification-timeout="<%= @data[:timeout] %>" to our root div, so we will be able to use it in the Stimulus controller.

We also add the HTML for the countdown line at the bottom of the HTML with special data-target attribute, that we use in the Stimulus controller. We will show it only when we will need it. There could be actions, where the countdown could be intrusive. Eg. "Open", "View", etc.

<div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto hidden" data-controller="notification" data-notification-timeout="<%= @data[:timeout] %>">
  <div class="rounded-lg shadow-xs overflow-hidden">
    ...
    <% if @data[:countdown] %>
      <div class="bg-indigo-600 rounded-lg h-1 w-0" data-target="notification.countdown"></div>
    <% end %>
  </div>
</div>

Now, we need to update the controller.

import {Controller} from "stimulus"

export default class extends Controller {
  static targets = ["countdown"]

  connect() {
    const timeoutSeconds = parseInt(this.data.get("timeout"));

    if (!this.isPreview) {
      setTimeout(() => {
        this.element.classList.remove('hidden');
        this.element.classList.add('transform', 'ease-out', 'duration-300', 'transition', 'translate-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2');

        // Trigger transition
        setTimeout(() => {
          this.element.classList.add('translate-y-0', 'opacity-100', 'sm:translate-x-0');
        }, 100);

        // Trigger countdown
        if (this.hasCountdownTarget) {
          this.countdownTarget.style.animation = 'notification-countdown linear ' + timeoutSeconds + 's';
        }

      }, 500);

      setTimeout(() => {
        this.close();
      }, timeoutSeconds * 1000 + 500);
    }
  }

  ...
}

The notification-countdown animation is simple:

@keyframes notification-countdown {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

Now, the last part...

The action button

For making a request from Javascript, we need to know only two things: url and method. When the method of the action will be GET, we should not make the request and let the user open the page. For example, when he will create a new article, we can show Open action with a link to the page with the article.

The final HTML:

<!-- app/components/notification_component.html.erb -->

<div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto mt-4 hidden" data-notification-action-url="<%= @data.dig(:action, :url) %>" data-notification-action-method="<%= @data.dig(:action, :method) %>" data-notification-timeout="<%= @data[:timeout] %>" data-controller="notification">
  <div class="rounded-lg shadow-xs overflow-hidden">
    <div class="p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0">
          <div class="h-6 w-6 <%= @icon_color_class %>">
            <i class="far <%= @icon_class %>"></i>
          </div>
        </div>
        <div class="ml-3 w-0 flex-1 pt-0.5">
          <p class="text-sm leading-5 font-medium text-gray-900">
            <%= @data[:title] %>
          </p>
          <% if @data[:body].present? %>
            <p class="mt-1 text-sm leading-5 text-gray-500">
              <%= @data[:body] %>
            </p>
          <% end %>
          <% if @data[:action].present? %>
            <div class="mt-2" data-target="notification.buttons">
              <a <% if @data.dig(:action, :method) == 'get' %> href="<%= @data.dig(:action, :url) %>" <% else %> href="#" data-action="notification#run" <% end %> class="text-sm leading-5 font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
                <%= @data.dig(:action, :name) %>
              </a>
              <button data-action="notification#close" class="ml-6 text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:underline transition ease-in-out duration-150">
                <%= t('.dismiss') %>
              </button>
            </div>
          <% end %>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150" data-action="notification#close">
            <i class="h-5 w-5 far fa-times"></i>
          </button>
        </div>
      </div>
    </div>
    <% if @data[:countdown] %>
      <div class="bg-indigo-600 rounded-lg h-1 w-0" data-target="notification.countdown"></div>
    <% end %>
  </div>
</div>

You can see a new data-target="notification.buttons" and new data-notification attributes.

Final NotificationComponent:

# app/components/notification_component.rb

# frozen_string_literal: true

# @param type [String] Classic notification type `error`, `alert` and `info` + custom `success`
# @param data [String, Hash] `String` for backward compatibility,
#   `Hash` for the new functionality `{title: '', body: '', timeout: 5, countdown: false, action: { url: '', method: '', name: ''}}`.
#   The `title` attribute for `Hash` is mandatory.
class NotificationComponent < ViewComponent::Base
  def initialize(type:, data:)
    @type = type
    @data = prepare_data(data)
    @icon_class = icon_class
    @icon_color_class = icon_color_class

    @data[:timeout] ||= 3
  end

  private

  def icon_class
    case @type
    when 'success'
      'fa-check-square'
    when 'error'
      'fa-exclamation-square'
    when 'alert'
      'fa-exclamation-square'
    else
      'fa-info-square'
    end
  end

  def icon_color_class
    case @type
    when 'success'
      'text-green-400'
    when 'error'
      'text-red-800'
    when 'alert'
      'text-red-400'
    else
      'text-gray-400'
    end
  end

  def prepare_data(data)
    case data
    when Hash
      data
    else
      { title: data }
    end
  end
end

The main part of calling the action is in the run method. I've also saved the timeout that closes the notification, so I will be able to stop it and make sure, that it will display returning content (look for this.timeoutId and stop method).

For making a valid request, we need to have CSRF token from the HTML header. For that, you can see csrfToken method below.

The final Stimulus controller:

// app/javascript/controllers/notification_controller.js

import {Controller} from "stimulus"

export default class extends Controller {
  static targets = ["buttons", "countdown"]

  connect() {
    const timeoutSeconds = parseInt(this.data.get("timeout"));

    if (!this.isPreview) {
      setTimeout(() => {
        this.element.classList.remove('hidden');
        this.element.classList.add('transform', 'ease-out', 'duration-300', 'transition', 'translate-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2');

        // Trigger transition
        setTimeout(() => {
          this.element.classList.add('translate-y-0', 'opacity-100', 'sm:translate-x-0');
        }, 100);

        // Trigger countdown
        if (this.hasCountdownTarget) {
          this.countdownTarget.style.animation = 'notification-countdown linear ' + timeoutSeconds + 's';
        }

      }, 500);
      this.timeoutId = setTimeout(() => {
        this.close();
      }, timeoutSeconds * 1000 + 500);
    }
  }

  run(e) {
    e.preventDefault();
    this.stop();
    let _this = this;
    this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-grey-700">Processing...</span>';

    // Call the action
    fetch(this.data.get("action-url"), {
      method: this.data.get("action-method").toUpperCase(),
      dataType: 'script',
      credentials: "include",
      headers: {
        "X-CSRF-Token": this.csrfToken
      },
    })
      .then(function (response) {
        let content;

        // Example of the response, content should be provided from the controller
        if (response.status === 200) {
          content = '<span class="text-sm leading-5 font-medium text-green-700">Done!</span>'
        } else {
          content = '<span class="text-sm leading-5 font-medium text-red-700">Error!</span>'
        }

        // Set new content
        _this.buttonsTarget.innerHTML = content;

        // Close
        setTimeout(() => {
          _this.close();
        }, 1000);
      });
  }

  stop() {
    clearTimeout(this.timeoutId)
    this.timeoutId = null
  }

  close() {
    // Remove with transition
    this.element.classList.remove('transform', 'ease-out', 'duration-300', 'translate-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2', 'translate-y-0', 'sm:translate-x-0');
    this.element.classList.add('ease-in', 'duration-100')

    // Trigger transition
    setTimeout(() => {
      this.element.classList.add('opacity-0');
    }, 100);

    // Remove element after transition
    setTimeout(() => {
      this.element.remove();
    }, 300);
  }

  get isPreview() {
    return document.documentElement.hasAttribute('data-turbolinks-preview')
  }

  get csrfToken() {
    const element = document.head.querySelector('meta[name="csrf-token"]')
    return element.getAttribute("content")
  }
}

Example usage

The demo at the beginning was created by these examples:

NotificationComponent.new(type: 'notice', data: { timeout: 8, title: 'Entry was deleted', body: 'You can still recover the deleted item using Undo below.', countdown: true, action: { url: 'http://localhost:3000/undo', method: 'patch', name: 'Undo' } })
NotificationComponent.new(type: 'error', data: { timeout: 8, title: 'Access denied', body: "You don't have sufficient rights to the action." })
NotificationComponent.new(type: 'success', data: 'Successfully logged in')
NotificationComponent.new(type: 'alert', data: 'You need to log in to access the page')

The data key is basically the content, you will pass to flash object.

One last thing: how to trigger them from a js response from a controller?

Easily. Add the ID, like #notifications, here:

<div class="fixed inset-0 px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end">
  <div id="notifications" class="flex flex-col items-end justify-center">
    <% flash.each do |type, data| %>
      <%= render NotificationComponent.new(type: type, data: data) %>
    <% end %>
  </div>
</div>

And in the controller, prepare your notification, eg:

# controller

@notification = NotificationComponent.new(type: 'success', data: { title: t('.success.title'), content: t('.success.content') })

respond_to do |format|
  format.js
end

And in the corresponding view, just render it:

// view, eg. create.js.erb

document.getElementById('notifications').insertAdjacentHTML("afterBegin", "<%=j render @notification %>");

If you need to render a classic flash object, change it to this:

# controller

flash.now[:success] = { title: t('.success.title'), content: t('.success.content') }

// view, eg. create.js.erb

<% flash.each do |type, data|  %>
  document.getElementById('notifications').insertAdjacentHTML("afterBegin", "<%=j render(NotificationComponent.new(type: type, data: data)) %>");
<% end %>

In the next article, I will show the backend part for the Undo function.

BTW

If you like the Tailwind CSS, you should definitely look at Tailwind UI. They have a lot of cool stuff there.

If you find an error or a better way of doing something, please let me know in the comments. Thanks!

DEV Community: Petr Hlavicka

Gem Credentials Management with Gemstash

How can we efficiently manage gem credentials across the team?

How to solve it?

Example

Securing the Gemstash server

Are you using Dokku?

Fun with Rails Enums and PORO

Basics

When should you use them?

Task 1: Translations

With helper

With object

Task 2: List values in a form

The usual way

With object

Task 3: Descriptions

The usual way

With object

Task 4: Custom methods

Task 5: Limit displaying values

Summary

Final version of classes

BaseEnum class

Setting::ThemeColor class

Multi-Factor Authentication for Rails with WebAuthn and Devise

What is multi-factor authentication?

What is WebAuthn?

How does WebAuthn work?

Base information about the Rails app

Authenticator registration

Installing WebAuthn

Storing credentials in the application

Controller

Challenge

Challenge validation

Using WebAuthn as 2FA

Session controller

Authentication with WebAuthn

UI

Summary

Using “passwordless” authentication

Login form

Preview with security key

Preview with Touch ID

A few notes in the end

Modern Rails flash messages (part 3): Refactoring with Turbo

Installing Turbo

Usage with UJS and Turbo

Refactoring and usage with Turbo streams

Using Dokku with Let's Encrypt wildcard certificate

Creating wildcard certificate with Certbot

Adding to Dokku

Renew the certificate

Modern Rails flash messages (part 2): The undo action for deleted items

How to deal with recovering the deleted records

The plan

Step 1: Soft-deleting

Step 2: Background job for actual delete

Step 3: Stopping the deletion

Step 4: Displaying the result to the user

When a user deletes a record from its detail

When a user deletes a record from the list

A few notes at the end

Modern Rails flash messages (part 1): ViewComponent, Stimulus & Tailwind CSS

Prerequisites

Creating a component

Ruby part

HTML part

Adding functionality and effects using Stimulus

Closing and auto-hiding

Countdown

The action button

Example usage

One last thing: how to trigger them from a js response from a controller?

Next

BTW

`BaseEnum` class

`Setting::ThemeColor` class