Authentication/Static

Overview

Overview

Prerequisites

In the version 3 of Rails UI, direct integration with Devise was dropped in favor of a more flexible approach that is based on code snippets you copy and paste into your app.

These snippets should give you a head start on a lot of authentication edge cases. Using Devise? Check out the Devise version.

Here are the pages you'll find in the static authentication system:

Main Layout

Consider extracting this to a reusable partial. For the example snippets below, it's assumed you have a directory called users in app/views/users. You will need to either create this directory and file or use whatever you're already leveraging for authentication.

<!-- Hound theme: app/views/devise/_auth_layout.html.erb -->
<div class="sm:h-[calc(100vh_-_52px)] pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('railsui/fusion.png') %>')" >
  <div class="sm:flex-1 flex flex-col justify-center sm:w-[428px] w-full">
    <div>
      <div class="flex justify-center">
        <%= link_to root_path do %>
          <%= icon "logo", custom_path: "/railsui/logo.svg", class: "w-10 h-auto" %>
        <% end %>
      </div>

      <div class="mt-6">
        <%= yield :masthead %>
      </div>

      <div class="bg-white shadow-xs rounded-lg p-8 border border-slate-300/60">
        <%= yield %>
      </div>

      <div class="mt-4">
        <%= yield :links %>
      </div>
    </div>
  </div>
</div>
/ app/views/users/_auth_layout.html.erb
.sm:h-[calc(100vh_-_52px)].pt-10.sm:pt-0.flex.flex-col.items-center.justify-center.bg-cover.bg-center.px-4{style: "background-image: url('#{asset_url('railsui/fusion.png')}')"}
  .sm:flex-1.flex.flex-col.justify-center.w-full{class: "sm:w-[428px]"}
    %div
      .flex.justify-center
        = link_to root_path do
          = icon "logo", custom_path: "/railsui/logo.svg", class: "w-10 h-auto"
      .mt-6
        = yield :masthead
      .bg-white.shadow-xs.rounded-lg.p-8.border{class: "border-slate-300/60"}
        = yield
      .mt-4
        = yield :links

Then in dedicated Devise views you can render the main meat and potatoes. Remember to include content_for blocks as necessary.

<%= render "users/auth_layout" do %>
  <!-- Add or yield form content here -->
<% end %>

<%= content_for :masthead do %>
  <!-- Add any masthead content here -->
<% end %>

<%= content_for :links do %>
  <!-- Add any links to other authentication pages here -->
<% end %>
= render "users/auth_layout" do
  / Add or yield form content here

%= content_for :masthead do
  / Add any masthead content here

%= content_for :links do
  / Add any links to other authentication pages here

OmniAuth

The Hound theme has support for themed and branded Omniauth provider icons. Icons for those providers are rendered from app/assets/images/railsui/omniauth.

OmniAuth will need to be installed and configured to work with the Hound theme.

Here's an example of the UI with various providers:

_error_messages partial

By default Rails UI copies over a pre-styled error partial made to work out of the box and save you time during development.

This file is called _error_messages.html.erb. Unlike what ships with Devise, this partial lives in the root view directory within app/views/rui/shared and is used throughout the app.

The Hound theme leverages this partial for all form error rendering to keep the error/validation handling experience consistent.

Fleet Management

Forget your password?

Reset it in an instant

Devise: Unlocks

Sign up

On this page