Profile and static pages

Gemfile

@@ -95,3 +95,5 @@ group :development do
   # Highlight the fine-grained location where an error occurred [https://github.com/ruby/error_highlight]
   # gem "error_highlight", ">= 0.6.0", platforms: [:ruby]
 end
+
+gem "invisible_captcha", "~> 2.3"

Gemfile.lock

@@ -208,6 +208,8 @@ GEM
     inline_svg (1.10.0)
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
+    invisible_captcha (2.3.0)
+      rails (>= 5.2)
     io-console (0.7.2)
     irb (1.14.1)
       rdoc (>= 4.0.0)
@@ -495,6 +497,7 @@ DEPENDENCIES
   image_processing (~> 1.2)
   importmap-rails
   inline_svg
+  invisible_captcha (~> 2.3)
   jbuilder
   json-jwt
   jwt

app/assets/stylesheets/application.tailwind.css

@@ -31,6 +31,11 @@
     @apply text-midnight-200;
   }
 
+  .button-primary {
+    @apply bg-midnight-980;
+    @apply text-midnight-200;
+  }
+
   .button-success {
     @apply bg-midnight-600;
     @apply text-midnight-800;
@@ -59,7 +64,7 @@
 @import 'actiontext.css';
 
 
-input[type="email"], input[type="password"], input[type="text"], select {
+input[type="email"], input[type="password"], input[type="text"], select, textarea {
   @apply border-gray-200 rounded-md bg-midnight-200;
 }
 

app/components/field_errors_component.html.erb

@@ -2,7 +2,7 @@
   <ul class="text-sm text-red-600 mt-2">
     <% @messages.each do |message| %>
       <li class="flex mb-1 last:mb-0">
-        <%= inline_svg_tag("hero/20/minus-small.svg", class: "-ml-1") %>
+        <%= heroicon 'minus', options: {class: 'w-4 h-4 mr-2'} %>
         <%= message %>
       </li>
     <% end %>

app/components/identity/authorized_application_component.html.erb

@@ -15,11 +15,11 @@
     <% if @application.uri.present? %>
       <%= link_to @application.uri, class: 'flex flex-shrink-0 items-center gap-1 pt-px', target: '_blank', rel: 'noopener noreferrer' do %>
         <%= t('.visit_website') %>
-        <%= inline_svg 'hero/20/external-link.svg', class: '!h-4 !w-4' %>
+        <%= heroicon 'arrow-top-right-on-square', options: {class: '!w-4 !h-4'} %>
       <% end %>
     <% end %>
     <%= button_to oauth_authorized_application_path(@application), class: button_classes('text-sm text-red-600 hover:text-red-700 active:text-red-700'), form_class: 'ml-auto flex-shrink-0', method: :delete do %>
-      <%= inline_svg 'font-awesome/16/trash.svg', class: 'mr-1.5' %>
+      <%= heroicon 'trash', options: {class: 'w-5 h-5 mr-2'} %>
       <%= t('.revoke_application') %>
     <% end %>
   </div>
@@ -40,7 +40,7 @@
             last:mb-0
           "
         >
-          <%= inline_svg 'hero/20/check.svg', class: '-ml-1 flex-shrink-0' %>
+          <%= heroicon 'check', options: {class: 'w-5 h-5 flex-shrink-0' } %>
           <%= t scope, scope: [:doorkeeper, :scopes] %>
         </li>
       <% end %>

app/components/identity/empty_state_component.html.erb

@@ -1,9 +1,9 @@
-<div class="bg-gray-50 px-10 py-8 text-base border rounded-md">
-  <h3 class="font-semibold text-xl mb-2">
+<div class="bg-midnight-300 px-10 py-8 text-base border rounded-md">
+  <h3 class="text-midnight-800 mb-2">
     <%= @title %>
   </h3>
 
-  <div class="text-gray-500 space-y-2">
+  <div class="text-midnight-450 text-sm space-y-2">
     <%= content %>
   </div>
 

app/components/identity/newsletter_status_row_component.html.erb

@@ -1,7 +1,7 @@
 <%= render(Identity::ProfileRowComponent.new(title: t('.title'))) do |row| %>
   <% if @subscribed %>
     <div class="flex items-center gap-1 text-emerald-600">
-      <%= inline_svg_tag 'hero/20/circle-check.svg', class: '-ml-0.5' %>
+      <%= heroicon 'check-circle', options: {class: 'w-5 h-5 mr-2'} %>
       <%= t('.subscribed') %>
     </div>
 

app/components/identity/profile_email_component.html.erb

@@ -18,7 +18,7 @@
       </span>
     <% else %>
       <span class="text-sm inline-flex items-center text-red-600 font-medium ml-4">
-        <%= inline_svg_tag("hero/20/exclamation.svg", class: "mr-1") %>
+        <%= heroicon 'exclamation-triangle', options: {class: 'w-5 h-5 mr-2'} %>
         <%= t('.not_confirmed') %>
       </span>
     <% end %>

app/components/identity/row_component.html.erb

@@ -1,4 +1,4 @@
-<div class="flex flex-col my-4 text-base">
+<div class="flex flex-col my-2 text-base">
   <div class="w-44 text-midnight-400 text-sm ">
     <% if title_contents? %>
       <%= title_contents %>

app/components/identity/token/scope_component.html.erb

@@ -1,15 +1,15 @@
 <% if @enabled %>
-  <div class="flex items-start gap-2 text-emerald-600 mb-2" <%= testid %>>
-    <%= inline_svg 'hero/20/check.svg', class: 'mt-0.5' %>
+  <div class="flex items-start gap-2 text-midnight-980 mb-2" <%= testid %>>
+    <%= heroicon 'check', options: { class: 'w-5 h-5' } %>
     <%= @name %>
   </div>
 <% else %>
   <div
-    class="flex items-start gap-2 text-gray-700/25 mb-2"
+    class="flex items-start gap-2 text-sm text-midnight-400 mb-2"
     aria-hidden="true"
     <%= testid %>
   >
-    <%= inline_svg 'hero/20/lock-closed.svg', class: 'mt-px' %>
+    <%= heroicon 'lock-closed', options: { class: 'w-4 h-4' }  %>
     <%= @name %>
   </div>
 <% end %>

app/components/identity/token_component.html.erb

@@ -1,5 +1,5 @@
-<%= turbo_frame_tag(@token, class: 'block border-b pb-12 mb-6 last:border-b-0 last:pb-0 last:mb-0') do %>
-  <h3 class="text-xl font-semibold mb-8"><%= @token.name %></h3>
+<%= turbo_frame_tag(@token, class: 'block bg-midnight-300 border p-5 mb-6 rounded-md last:mb-0') do %>
+  <h3 class="text-xl text-midnight-800 mb-2"><%= @token.name %></h3>
 
   <div data-controller="clipboard">
     <%= render(Identity::RowComponent.new(title: t('.token'))) do |row| %>
@@ -46,11 +46,11 @@
           <%= t('.make_sure_to_copy') %>
         </p>
         <button
-          class="<%= button_classes('text-sm mt-3') %>"
+          class="<%= button_classes('text-sm my-2 flex') %>"
           data-action="clipboard#copy"
           data-clipboard-target="button"
         >
-          <%= inline_svg 'hero/20/duplicate.svg', class: 'mr-1' %>
+          <%= heroicon 'clipboard', options: {class: 'w-5 h-5 mr-2'} %>
           <%= t('.copy') %>
         </button>
         <span
@@ -66,7 +66,7 @@
           "
           data-clipboard-target="notice"
         >
-          <%= inline_svg 'hero/20/circle-check.svg' %>
+          <%= heroicon 'check', options: {class: 'w-5 h-5 mr-2'} %>
           <%= t('.copied') %>
         </span>
       <% else %>
@@ -146,8 +146,8 @@
   <% end %>
 
   <%= render(Identity::RowComponent.new(title: 'Revoke')) do |row| %>
-    <%= button_to identity_token_path(@token), class: button_classes('text-sm text-red-600 hover:text-red-700 active:text-red-700'), method: :delete do %>
-      <%= inline_svg 'font-awesome/16/trash.svg', class: 'mr-1.5' %>
+    <%= button_to identity_token_path(@token), class: button_classes('text-sm flex text-red-600 hover:text-red-700 active:text-red-700'), method: :delete do %>
+      <%= heroicon 'trash', options: {class: 'w-5 h-5 mr-2'} %>
       <%= t('.revoke_token') %>
     <% end %>
 

app/components/map/component.html.erb

@@ -0,0 +1,2 @@
+<div class="h-[300px] w-1/2 rounded-md" data-controller="map" data-map-target="map" data-map-url-value=<%=asset_path('header/qi-logo.png')%>>
+</div>

app/components/map/component.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module Map
+  class Component < ApplicationComponent
+  end
+end

app/components/sidebar_item/profile_component.html.erb

@@ -0,0 +1,9 @@
+<div class="flex">
+  <%= link_to @path, class: "flex p-2 pl-6 w-full transition #{css_classes}" do %>
+    <span class="mr-5"><%= heroicon @icon, options: { class: 'w-6 h-6' } %></span>
+    <span><%= @title %></span>
+  <% end %>
+  <div class="w-1/4 p-2 text-midnight-800">
+    <%=heroicon 'chevron-down', options: { class: 'w-5 h-5' } %>
+  </div>
+</div>

app/components/toast_component.html.erb

@@ -21,9 +21,9 @@
   "
 >
   <% if @type == :alert %>
-    <%= inline_svg_tag("hero/20/exclamation.svg", class: "flex-shrink-0 text-amber-400 mr-2 mt-0.5") %>
+    <%= heroicon 'exclamation-triangle', options: {class: 'w-6 h-6 mr-2'}  %>
   <% else %>
-    <%= inline_svg_tag("hero/20/circle-check.svg", class: "flex-shrink-0 text-emerald-400 mr-2 mt-0.5") %>
+    <%= heroicon 'exclamation-circle', options: {class: 'w-6 h-6 mr-2'} %>
   <% end %>
   <div>
     <% if @title %>
@@ -56,7 +56,7 @@
         active:text-gray-300
       "
     >
-      <%= inline_svg_tag("hero/20/x-mark.svg") %>
+      <%= heroicon 'x-circle', options: {class: 'w-8 h-8 mr-2'} %>
     </button>
   </div>
 </div>

app/controllers/application_controller.rb

@@ -34,15 +34,6 @@ def set_locale
 
   private
 
-  def require_no_user
-    if current_user
-      store_location
-      flash[:notice] = "You must be logged out to access this page"
-      redirect_to root_path
-      throw(:abort)
-    end
-  end
-
   def require_user
     return if current_user
 

app/controllers/inspect/staff_applications_controller.rb

@@ -16,7 +16,7 @@ def update
         flash[:alert] = result.failure.errors.full_messages.to_sentence
       end
 
-      redirect_to root_path
+      redirect_to user_settings_path
     end
   end
 end

app/controllers/static_pages_controller.rb

@@ -0,0 +1,62 @@
+class StaticPagesController < ApplicationController
+  before_action :require_feedback_email, only: [:send_message]
+
+  # invisible_captcha(
+  #   only: [:send_message],
+  #   honeypot: :country,
+  #   on_spam: :send_feedback_spam
+  # )
+
+  def empty
+
+  end
+
+  def contact
+    @message = ContactUsMessage.new(
+      name: current_user&.name,
+      email: current_user&.email,
+      message: ""
+    )
+  end
+
+  def privacy
+  end
+
+  def terms
+  end
+
+  def send_message
+    @message = ContactUsMessage.from_params(feedback_params)
+
+    if @message.valid?
+      ContactUsMailer.contact_email(
+        @message,
+        locale: I18n.locale,
+        user_agent: request.env['HTTP_USER_AGENT']
+      ).deliver
+
+      flash[:notice] = t('contact.contact.success_flash')
+      redirect_to contact_url
+    else
+      flash[:alert] = @message.errors.join(', ')
+      redirect_to contact_url
+    end
+  end
+
+  private
+
+  def require_feedback_email
+    redirect_to(contact_url) unless Settings.mailer.from
+  end
+
+  def feedback_params
+    params.require(:contact_us_message).permit(:name, :email, :message)
+  end
+
+  def send_feedback_spam
+    @message = ContactUsMessage.from_params(feedback_params)
+    @message.valid?
+
+    render :contact, status: :unprocessable_entity
+  end
+end

app/javascript/controllers/autosubmit_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+// Connects to data-controller="autosubmit"
+export default class extends Controller {
+  static targets = ['field'];
+
+  connect() {
+    if (this.fieldTargets.length === 0) {
+      return;
+    }
+
+    if (this.fieldTargets.every((field) => field.value !== '')) {
+      this.element.submit();
+    }
+  }
+}

app/javascript/controllers/clipboard_controller.js

@@ -0,0 +1,50 @@
+import { useTransition } from "stimulus-use";
+import { Controller } from "@hotwired/stimulus";
+
+// https://github.com/stimulus-components/stimulus-clipboard/blob/master/src/index.ts
+// MIT Licensed
+export default class extends Controller {
+  static targets = ["button", "notice", "source"];
+
+  static values = {
+    successDuration: { type: Number, default: 5000 },
+  };
+
+  connect() {
+    if (this.hasNoticeTarget) {
+      useTransition(this, {
+        element: this.noticeTarget,
+        enterActive: "transition ease-out duration-100",
+        enterFrom: "transform opacity-0",
+        enterTo: "transform opacity-100",
+        leaveActive: "transition ease-in duration-150",
+        leaveFrom: "transform opacity-100",
+        leaveTo: "transform opacity-0",
+        transitioned: false,
+      });
+    }
+  }
+
+  copy(event) {
+    event.preventDefault();
+
+    const text = this.sourceTarget.innerText || this.sourceTarget.value;
+    navigator.clipboard.writeText(text).then(() => this.copied());
+  }
+
+  copied() {
+    if (!this.hasNoticeTarget) return;
+
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+
+    this.buttonTarget.disabled = true;
+    this.enter();
+
+    this.timeout = setTimeout(() => {
+      this.buttonTarget.disabled = false;
+      this.leave();
+    }, this.successDurationValue);
+  }
+}