bullet_train 1.2.10 → 1.2.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c6a06a235e23a68bf1e4855fb344aadba158538aa2ab823118fbebc252059649
-  data.tar.gz: 2ec8399302ea2e4539e9593b8cabc741e5ad2eb1508a2f29e7591ec614d05098
+  metadata.gz: 807a5e0fe30a22bafa54c16b49271477fbe82c8180116b3448162851c4181482
+  data.tar.gz: f4dcb5d397fec1110576b95d0ca7c67bc975d244522f4708127b0bdeed78cc9b
 SHA512:
-  metadata.gz: 23e1d1200c9139fd37e892cd6bd025a26a22960a9076567ca16b14e6ff24445dbaf2cfe16258078f670beda1d86a7300ed089f4b1fadc72e2d08ee0636747e5e
-  data.tar.gz: b9ee30bfe129d2e9d7492599ead1fe82d0768853f4e39ba03621c12ec2990bd0e4c24359c1d31d171e22908be376628e6411c01c6e4b1376f5eb486d1c941da9
+  metadata.gz: a090d8380e20ea5852b2783e151b555452cf00320f05f6998dfa09e41c7c5cfcc3d76da0b7b888358074856ff5c2183ff23f4804e224e56d5cb849bdb8b6c578
+  data.tar.gz: bf8045613b7f1314ff5e34a3cf7be5fa6d54c5e536c5815d24770c7cde6f44f24f73ac659db76d6cd475fe6fd38559d91bfa22ffe720989a02eb3643354dba6d

data/app/controllers/account/two_factors_controller.rb

@@ -1,18 +1,34 @@
 class Account::TwoFactorsController < Account::ApplicationController
   before_action :authenticate_user!
 
+  def verify
+    @user = current_user
+
+    otp_code = params["user"]["otp_attempt"]
+    @verified = current_user.validate_and_consume_otp!(otp_code)
+
+    if @verified
+      current_user.update(otp_required_for_login: true)
+    else
+      current_user.update(
+        otp_required_for_login: false,
+        otp_secret: nil
+      )
+    end
+  end
+
   def create
     @backup_codes = current_user.generate_otp_backup_codes!
     @user = current_user
 
-    current_user.update(
-      otp_secret: User.generate_otp_secret,
-      otp_required_for_login: true
-    )
+    current_user.update(otp_secret: User.generate_otp_secret)
   end
 
   def destroy
     @user = current_user
-    current_user.update(otp_required_for_login: false)
+    current_user.update(
+      otp_required_for_login: false,
+      otp_secret: nil
+    )
   end
 end

data/app/helpers/account/forms_helper.rb

@@ -40,7 +40,9 @@ module Account::FormsHelper
   def options_for(form, method)
     # e.g. "scaffolding/completely_concrete/tangible_things.fields.text_area_value.options"
     path = [model_key(form), (current_fields_namespace || :fields), method, :options]
-    t(path.compact.join("."))
+    options = t(path.compact.join("."))
+    return options unless options.is_a?(Hash)
+    options.stringify_keys
   end
 
   def legacy_label_for(form, method)

data/app/javascript/controllers/clipboard_controller.js

@@ -9,7 +9,7 @@ export default class extends Controller {
     document.execCommand('copy')
     this.buttonTarget.innerHTML = '<i id="copied" class="fas fa-check w-4 h-4 block text-green-600"></i>'
     setTimeout(function () {
-      document.getElementById('copied').innerHTML = '<i class="far fa-copy w-4 h-4 block text-gray-600"></i>'
+      document.getElementById('copied').innerHTML = '<i class="far fa-copy w-4 h-4 block text-slate-600"></i>'
     }, 1500)
   }
 }

data/app/javascript/controllers/connection_workflow_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  disableTeamButton(event) {
+    document.body.style.pointerEvents = "none";
+  }
+}

data/app/javascript/controllers/desktop_menu_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [ "menuItemHeader", "menuItemGroup", "menuItemLink" ];
+
+  showSubmenu() {
+    this.menuItemGroupTarget.classList.remove('invisible');
+  }
+
+  // TODO: Stimulus JS should be able to use `keydown.tab` and `keydown.tab+shift` as actions.
+  // https://stimulus.hotwired.dev/reference/actions#keyboardevent-filter
+  hideSubmenu(event) {
+    let hideMenu = false;
+
+    // If we're tabbing forward and go outside of the submenu, we hide the group.
+    // Else if we're tabbing backwards and go outside via the menu item header, we hide the group.
+    if(event.key == 'Tab' && !event.shiftKey) {
+      let lastIndex = this.menuItemLinkTargets.length - 1;
+      hideMenu = event.target == this.menuItemLinkTargets[lastIndex]
+    } else if (event.key == 'Tab' && event.shiftKey) {
+      hideMenu = event.target == this.menuItemHeaderTarget
+    }
+
+    if(hideMenu) { this.menuItemGroupTarget.classList.add('invisible'); }
+  }
+}

data/app/javascript/controllers/index.js

@@ -3,19 +3,23 @@ import { identifierForContextKey } from "@hotwired/stimulus-webpack-helpers"
 import BulkActionFormController from './bulk_action_form_controller'
 import BulkActionsController from './bulk_actions_controller'
 import ClipboardController from './clipboard_controller'
+import DesktopMenuController from './desktop_menu_controller'
 import FormController from './form_controller'
 import MobileMenuController from './mobile_menu_controller'
 import TextToggleController from './text_toggle_controller'
 import SelectAllController from './select_all_controller'
+import ConnectionWorkflowController from './connection_workflow_controller'
 
 export const controllerDefinitions = [
   [BulkActionFormController, 'bulk_action_form_controller.js'],
   [BulkActionsController, 'bulk_actions_controller.js'],
   [ClipboardController, 'clipboard_controller.js'],
+  [DesktopMenuController, 'desktop_menu_controller.js'],
   [FormController, 'form_controller.js'],
   [MobileMenuController, 'mobile_menu_controller.js'],
   [TextToggleController, 'text_toggle_controller.js'],
   [SelectAllController, 'select_all_controller.js'],
+  [ConnectionWorkflowController, 'connection_workflow_controller.js'],
 ].map(function(d) {
   const key = d[1]
   const controller = d[0]

data/app/javascript/index.js

@@ -1,2 +1,3 @@
 export * from './controllers'
-import './electron'
+import './electron'
+import './support/turn'

data/app/javascript/support/turn.js

@@ -0,0 +1,183 @@
+// MIT License
+//
+// Copyright (c) 2021 Dom Christie
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+class Turn {
+  constructor (action) {
+    this.action = action
+    this.beforeExitClasses = new Set()
+    this.exitClasses = new Set()
+    this.enterClasses = new Set()
+  }
+
+  exit () {
+    this.animateOut = animationsEnd('[data-turn-exit]')
+    this.addClasses('before-exit')
+    requestAnimationFrame(() => {
+      this.addClasses('exit')
+      this.removeClasses('before-exit')
+    })
+  }
+
+  async beforeEnter (event) {
+    if (this.action === 'restore') return
+
+    event.preventDefault()
+
+    if (this.isPreview) {
+      this.hasPreview = true
+      await this.animateOut
+    } else {
+      await this.animateOut
+      if (this.animateIn) await this.animateIn
+    }
+
+    event.detail.resume()
+  }
+
+  async enter () {
+    this.removeClasses('exit')
+
+    if (this.shouldAnimateEnter) {
+      this.animateIn = animationsEnd('[data-turn-enter]')
+      this.addClasses('enter')
+    }
+  }
+
+  async complete () {
+    await this.animateIn
+    this.removeClasses('enter')
+  }
+
+  abort () {
+    this.removeClasses('before-exit')
+    this.removeClasses('exit')
+    this.removeClasses('enter')
+  }
+
+  get shouldAnimateEnter () {
+    if (this.action === 'restore') return false
+    if (this.isPreview) return true
+    if (this.hasPreview) return false
+    return true
+  }
+
+  get isPreview () {
+    return document.documentElement.hasAttribute('data-turbo-preview')
+  }
+
+  addClasses (type) {
+    document.documentElement.classList.add(`turn-${type}`)
+
+    Array.from(document.querySelectorAll(`[data-turn-${type}]`)).forEach((element) => {
+      element.dataset[`turn${pascalCase(type)}`].split(/\s+/).forEach((klass) => {
+        if (klass) {
+          element.classList.add(klass)
+          this[`${camelCase(type)}Classes`].add(klass)
+        }
+      })
+    })
+  }
+
+  removeClasses (type) {
+    document.documentElement.classList.remove(`turn-${type}`)
+
+    Array.from(document.querySelectorAll(`[data-turn-${type}]`)).forEach((element) => {
+      this[`${camelCase(type)}Classes`].forEach((klass) => element.classList.remove(klass))
+    })
+  }
+}
+
+Turn.start = function () {
+  if (motionSafe()) {
+    for (var event in this.eventListeners) {
+      addEventListener(event, this.eventListeners[event])
+    }
+  }
+}
+
+Turn.stop = function () {
+  for (var event in this.eventListeners) {
+    removeEventListener(event, this.eventListeners[event])
+  }
+  delete this.currentTurn
+}
+
+Turn.eventListeners = {
+  'turbo:visit': function (event) {
+    if (this.currentTurn) this.currentTurn.abort()
+    this.currentTurn = new this(event.detail.action)
+    this.currentTurn.exit()
+  }.bind(Turn),
+  'turbo:before-render': function (event) {
+    this.currentTurn.beforeEnter(event)
+  }.bind(Turn),
+  'turbo:render': function () {
+    this.currentTurn.enter()
+  }.bind(Turn),
+  'turbo:load': function () {
+    if (this.currentTurn) this.currentTurn.complete()
+  }.bind(Turn),
+  'popstate': function () {
+    if (this.currentTurn && this.currentTurn.action !== 'restore') {
+      this.currentTurn.abort()
+    }
+  }.bind(Turn)
+}
+
+function prefersReducedMotion () {
+  const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+  return !mediaQuery || mediaQuery.matches
+}
+
+function motionSafe () {
+  return !prefersReducedMotion()
+}
+
+function animationsEnd (selector) {
+  const elements = [...document.querySelectorAll(selector)]
+
+  return Promise.all(elements.map((element) => {
+    return new Promise((resolve) => {
+      function listener () {
+        element.removeEventListener('animationend', listener)
+        resolve()
+      }
+      element.addEventListener('animationend', listener)
+    })
+  }))
+}
+
+function pascalCase (string) {
+  return string.split(/[^\w]/).map(capitalize).join('')
+}
+
+function camelCase (string) {
+  return string.split(/[^\w]/).map(
+    (w, i) => i === 0 ? w.toLowerCase() : capitalize(w)
+  ).join('')
+}
+
+function capitalize (string) {
+  return string.replace(/^\w/, (c) => c.toUpperCase())
+}
+
+Turn.start()

data/app/models/concerns/users/base.rb

@@ -3,7 +3,7 @@ module Users::Base
 
   included do
     if two_factor_authentication_enabled?
-      devise :two_factor_authenticatable, :two_factor_backupable, otp_secret_encryption_key: ENV["TWO_FACTOR_ENCRYPTION_KEY"]
+      devise :two_factor_authenticatable, :two_factor_backupable
     else
       devise :database_authenticatable
     end

data/app/views/account/invitations/_form.html.erb

@@ -23,10 +23,10 @@
           <% Membership.assignable_roles.each do |role| %>
             <% if current_membership.can_manage_role?(role) %>
               <div class="flex items-top">
-                <%= fields.check_box :role_ids, {multiple: true, class: "h-4 w-4 text-blue focus:ring-blue-dark border-gray-300 rounded mt-0.5"}, role.id, nil %>
+                <%= fields.check_box :role_ids, {multiple: true, class: "h-4 w-4 text-blue focus:ring-blue-dark border-slate-300 rounded mt-0.5"}, role.id, nil %>
                 <label for="invitation_membership_attributes_role_ids_<%= role.id %>" class="ml-2 block select-none">
                   <span><%= t('invitations.form.invite_as', role_key: t("memberships.fields.role_ids.options.#{role.key}.label")) %></span>
-                  <div class="mt-0.5 text-gray-400 font-light leading-normal">
+                  <div class="mt-0.5 text-slate-400 font-light leading-normal">
                     <%= t("memberships.fields.role_ids.options.#{role.key}.description") %>
                   </div>
                 </label>

data/app/views/account/memberships/_form.html.erb

@@ -24,10 +24,10 @@
   <% Membership.assignable_roles.each do |role| %>
     <% if role.manageable_by?(current_membership.roles) %>
       <div class="flex items-top">
-        <%= form.check_box :role_ids, {multiple: true, class: "h-4 w-4 text-blue focus:ring-blue-dark border-gray-300 rounded mt-0.5"}, role.id, nil %>
+        <%= form.check_box :role_ids, {multiple: true, class: "h-4 w-4 text-blue focus:ring-blue-800 border-slate-300 rounded mt-0.5"}, role.id, nil %>
         <label for="membership_role_ids_<%= role.id %>" class="ml-2 block select-none">
           <%= t('.grant_privileges_of', role_key: t(".fields.role_ids.options.#{role.key}.label")) %>
-          <div class="mt-0.5 text-gray-400 font-light leading-normal">
+          <div class="mt-0.5 text-slate-400 font-light leading-normal">
             <%= t(".fields.role_ids.options.#{role.key}.description") %>
           </div>
         </label>

data/app/views/account/memberships/_membership.html.erb

@@ -8,7 +8,7 @@
       <div class="ml-3">
         <span class="group-hover:underline"><%= membership.label_string %></span>
         <% if membership.unclaimed? %>
-          <span class="ml-1.5 px-2 inline-flex text-xs text-green-dark bg-green-light border border-green-dark rounded-md">
+          <span class="ml-1.5 px-2 inline-flex text-xs text-green-800 bg-green-light border border-green-800 rounded-md">
             Invited
           </span>
         <% end %>

data/app/views/account/teams/_breadcrumbs.html.erb

@@ -1,11 +1,18 @@
 <% team ||= @team %>
-<% unless current_user.one_team? %>
+
+<% if (action_name == 'show' && controller_name == 'teams') || current_user.one_team? %>
+  <%= render 'account/shared/breadcrumb', label: t('.dashboard'), url: [:account, team], first: true  %>
+<% end %>
+
+<% unless current_user.one_team?  %>
   <%= render 'account/shared/breadcrumb', label: t('.label'), url: [:account, :teams], first: true %>
   <% if team&.persisted? %>
     <%= render 'account/shared/breadcrumb', label: team.name, url: [:account, team] %>
   <% end %>
 <% end %>
-<%= render 'account/shared/breadcrumbs/actions', only_for: 'teams' %>
-<% if (action_name == 'show' && controller_name == 'teams') || current_user.one_team? %>
-  <%= render 'account/shared/breadcrumb', label: 'Dashboard', url: [:account, team] %>
-<% end %>
+
+<%if action_name == 'edit' %>
+  <%= render 'account/shared/breadcrumb', label: t('.team_settings') %>
+<%else %>
+  <%= render 'account/shared/breadcrumbs/actions', only_for: 'teams' %>
+<% end %>

data/app/views/account/teams/_team.html.erb

@@ -1,23 +1,3 @@
-<li class="bg-white shadow overflow-hidden sm:rounded-md dark:bg-sealBlue-400">
-  <%= link_to [:account, team], class: "group block hover:bg-gray-50 dark:hover:bg-sealBlue-400 dark:text-sealBlue-800" do %>
-    <div class="px-4 py-4 flex items-center sm:pl-8 sm:pr-6">
-      <div class="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
-        <div>
-          <div class="flex text-xl font-semibold text-blue uppercase group-hover:text-blue-dark tracking-widest dark:text-white">
-            <%= team.name %>
-          </div>
-        </div>
-        <div class="mt-4 flex-shrink-0 sm:mt-0">
-          <div class="flex overflow-hidden">
-            <%= render 'account/shared/memberships/photos', memberships: team.memberships.current_and_invited.first(10) %>
-          </div>
-        </div>
-      </div>
-      <div class="ml-5 flex-shrink-0">
-        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-        </svg>
-      </div>
-    </div>
-  <% end %>
-</li>
+<%= render 'account/shared/team', link_url: [:account, team], memberships: team.memberships.current_and_invited.first(10)  do |p| %>
+  <% p.content_for :name, team.name %>
+<% end %>

data/app/views/account/two_factors/verify.js.erb

@@ -0,0 +1 @@
+$("#two-factor").html("<%= j render partial: "devise/registrations/two_factor", locals: {verified: @verified}%>");

data/app/views/devise/registrations/_two_factor.html.erb

@@ -1,9 +1,9 @@
 <%= render 'account/shared/box', divider: @backup_codes do |p| %>
   <% p.content_for :title, t("users.edit.two_factor.header") %>
   <% p.content_for :description, t("users.edit.two_factor.description_#{@user.otp_required_for_login? ? 'enabled' : 'disabled'}") %>
-  <% p.content_for :body do %>
-    <% if current_user.otp_required_for_login? %>
-      <% if @backup_codes %>
+  <% if current_user.otp_secret %>
+    <% if @backup_codes %>
+      <% p.content_for :body do %>
 
         <%= render 'account/shared/alert' do %>
           <%= t('users.edit.two_factor.warning').html_safe %>
@@ -29,14 +29,35 @@
           <% end %>
         </center>
 
+        <%= form_for current_user, url: verify_account_two_factor_path, method: :post, remote:true, html: {class: 'form'} do |form| %>
+          <div class="py-4">
+            <%= render 'shared/fields/text_field', form: form, method: :otp_attempt %>
+          </div>
+          <%= form.submit t('users.edit.two_factor.buttons.verify'), class: 'button' %>
+        <% end %> 
       <% end %>
     <% end %>
   <% end %>
   <% p.content_for :actions do %>
-    <% if current_user.otp_required_for_login? %>
-      <%= link_to t('users.edit.two_factor.buttons.disable'), account_two_factor_path, method: :delete, remote: true, class: "button" %>
-    <% else %>
-      <%= link_to t('users.edit.two_factor.buttons.enable'), account_two_factor_path, method: :post, remote: true, class: "button" %>
-    <% end %>
+    <div class="<%= 'hidden' if @backup_codes %> space-y">
+      <% if local_assigns.has_key? :verified %>
+        <% if verified %>
+          <%= render 'account/shared/alert', color: 'blue' do %>
+            <%= t('users.edit.two_factor.verification_success').html_safe %>
+          <% end %>
+        <% else %>
+          <%= render 'account/shared/alert' do %>
+            <%= t('users.edit.two_factor.verification_fail').html_safe %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if current_user.otp_required_for_login? %>
+        <%= link_to t('users.edit.two_factor.buttons.disable'), account_two_factor_path, method: :delete, remote: true, class: "button" %>
+      <% else %>
+        <%= link_to t('users.edit.two_factor.buttons.enable'), account_two_factor_path, method: :post, remote: true, class: "button" %>
+      <% end %>
+    </div>
   <% end %>
 <% end %>
+

data/app/views/devise/sessions/new.html.erb

@@ -2,7 +2,8 @@
   <% p.content_for :title, t('devise.headers.sign_in') %>
   <% p.content_for :body do %>
     <% within_fields_namespace(:self) do %>
-      <%= form_for resource, as: resource_name, url: two_factor_authentication_enabled? ? users_pre_otp_path : session_path(resource_name), remote: two_factor_authentication_enabled?, html: {class: 'form'}, authenticity_token: true, data: {turbo: !user_return_to_is_oauth} do |form| %>
+      <%# TODO: Turbo is set to `false` for now, but we may want to only bypass Turbo for JavaScript-based requests in the future. %>
+      <%= form_for resource, as: resource_name, url: two_factor_authentication_enabled? ? users_pre_otp_path : session_path(resource_name), remote: two_factor_authentication_enabled?, html: {class: 'form'}, authenticity_token: true, data: {turbo: false} do |form| %>
         <% with_field_settings form: form do %>
           <%= render 'account/shared/notices', form: form %>
           <%= render 'account/shared/forms/errors', form: form %>
@@ -43,8 +44,9 @@
           </div>
 
           <% if devise_mapping.rememberable? %>
+            <% # TODO This needs to be its own component. Can't have this kind of styling here. %>
             <div class="flex items-center">
-              <%= form.check_box :remember_me, class: "h-4 w-4 text-blue focus:ring-blue-dark border-gray-300 rounded" %>
+              <%= form.check_box :remember_me, class: "h-4 w-4 text-blue focus:ring-blue-800 border-slate-300 rounded dark:bg-slate-800 dark:border-slate-900" %>
               <%= form.label :remember_me, class: "ml-2 block" %>
             </div>
           <% end %>

data/app/views/layouts/docs.html.erb

@@ -32,7 +32,7 @@
     <meta property="og:url" content="<%= request.base_url + request.path %>" />
     <meta property="og:description" content="<%= description.truncate(200) %>" />
   </head>
-  <body class="bg-light-gradient text-gray-700 text-sm font-normal dark:bg-dark-gradient dark:text-darkPrimary-300">
+  <body class="bg-light-gradient text-slate-700 text-sm font-normal dark:bg-800-gradient dark:text-slate-300">
     <div class="md:p-5">
       <div class="h-screen md:h-auto overflow-hidden md:rounded-lg flex shadow"
         data-controller="mobile-menu"
@@ -40,7 +40,7 @@
       >
 
         <% menu = capture do %>
-          <div class="flex items-center flex-shrink-0 p-4 bg-blue-darker md:rounded-tl-lg">
+          <div class="flex items-center flex-shrink-0 p-4 bg-blue-700 md:rounded-tl-lg">
             <%= image_tag image_path("logo/logo.png"), class: 'h-5 w-auto mx-auto' %>
 
             <div class="lg:hidden absolute right-0">
@@ -147,7 +147,7 @@
                   <% end %>
                 <% end %>
 
-                <%= render 'account/shared/menu/item', url: 'docs/application-options.md', label: 'Application Options' do |p| %>
+                <%= render 'account/shared/menu/item', url: '/docs/application-options', label: 'Application Options' do |p| %>
                   <% p.content_for :icon do %>
                     <i class="fal fa-gear ti ti-settings"></i>
                   <% end %>
@@ -308,7 +308,7 @@
               data-transition-leave-start="translate-x-0"
               data-transition-leave-end="-translate-x-full"
 
-              class="relative flex-1 flex flex-col max-w-xs w-full pb-4 bg-dark-gradient shadow-xl"
+              class="relative flex-1 flex flex-col max-w-xs w-full pb-4 bg-800-gradient shadow-xl"
             >
               <%= menu %>
             </div>
@@ -316,16 +316,16 @@
           </div>
         </div>
 
-        <div class="hidden lg:flex lg:flex-shrink-0 overflow-y-auto bg-gradient-to-b from-primary-700 to-primary-800 dark:from-darkPrimary-800 dark:to-darkPrimary-800">
+        <div class="hidden lg:flex lg:flex-shrink-0 overflow-y-auto bg-gradient-to-b from-primary-700 to-primary-800 dark:from-slate-800 dark:to-slate-800">
           <div class="w-64">
             <%= menu %>
           </div>
         </div>
 
-        <div class="flex flex-col w-0 flex-1 overflow-y-auto bg-gray-100 dark:bg-darkPrimary-800 lg:border-l dark:border-gray-500">
+        <div class="flex flex-col w-0 flex-1 overflow-y-auto bg-slate-100 dark:bg-slate-800 lg:border-l dark:border-slate-500">
           <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0">
 
-            <button class="lg:hidden h-12 w-12 ml-1 flex-none inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue"
+            <button class="lg:hidden h-12 w-12 ml-1 flex-none inline-flex items-center justify-center rounded-md text-slate-500 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue"
               data-action="mobile-menu#open"
             >
               <span class="sr-only">Open Application Menu</span>

data/app/views/showcase/engine/_stylesheets.html.erb

@@ -0,0 +1 @@
+<%= stylesheet_link_tag "application", "application.light", "showcase", "showcase.highlights" %>

data/config/locales/en/teams.en.yml

@@ -4,6 +4,8 @@ en:
     singular: Team
     breadcrumbs:
       label: *label
+      team_settings: Team Settings
+      dashboard: Dashboard
     navigation:
       label: Team
     buttons: &buttons

data/config/locales/en/users.en.yml

@@ -17,12 +17,15 @@ en:
         header: Two-Factor Authentication
         description_enabled: 2FA is currently enabled for your account.
         description_disabled: You can increase the security of your account by enabling two-factor authentication.
-        warning: "In order to complete set up, you <strong>must</strong> complete the steps below. <strong>The information below will not be shown again.</strong> If you don't complete setting up now, you must disable two-factor authentication to avoid being locked out of your account."
+        verification_fail: Verification failed. You can try enabling again. Please make sure you scan the new QR code with your Authenticator app.
+        verification_success: Success! Thanks for verifying. 2FA is now enabled. 
+        warning: "In order to enable two-factor authentication, you <strong>must</strong> install an Authenticator app and <strong>enter your Verification Code from the app below</strong>. 2FA will not be enabled until you do so. This is to avoid you getting locked out of your account."
         instructions: "Install <a href='https://authy.com/download/' target='_blank'>Authy</a> or <a href='https://support.google.com/accounts/answer/1066447'>Google Authentication</a> on your phone and scan the barcode displayed below."
         recovery_codes: "You can also make a copy of the following recovery codes. Each one can help you get back into your account once should you lose access to the device you're using for two-factor authentication."
         buttons:
           enable: Enable
           disable: Disable
+          verify: Verify
       buttons: *buttons
     notifications:
       updated: User was successfully updated.
@@ -61,6 +64,10 @@ en:
       password_confirmation:
         _: &password_confirmation Password Confirmation
         label: Confirm Password
+      otp_attempt:
+        _: &otp_attempt Your Verification Code
+        label: *otp_attempt
+        heading: *otp_attempt
       locale:
         _: &locale Language
         label: *locale

data/config/routes.rb

@@ -1,4 +1,6 @@
 Rails.application.routes.draw do
+  mount Showcase::Engine, at: "/docs/showcase" if defined?(Showcase::Engine)
+
   scope module: "public" do
     root to: "home#index"
     get "invitation" => "home#invitation", :as => "invitation"
@@ -14,7 +16,9 @@ Rails.application.routes.draw do
       # TODO we need to either implement a dashboard or deprecate this.
       root to: "dashboard#index", as: "dashboard"
 
-      resource :two_factor, only: [:create, :destroy]
+      resource :two_factor, only: [:create, :destroy] do
+        post :verify
+      end
 
       # user-level onboarding tasks.
       namespace :onboarding do