diff --git a/app/components/footer/component.html.slim b/app/components/footer/component.html.slim index d5da6c607..becbdb145 100644 --- a/app/components/footer/component.html.slim +++ b/app/components/footer/component.html.slim @@ -6,7 +6,7 @@ footer class="bg-blue-dark" div class="grid grid-cols-2 md:gap-20" ul class="flex flex-col md:pb-3 md:ml-10" li = link_to 'About Us', about_us_path, class:"text-sm md:text-small" - li = link_to 'Contact Us', contact_path, class:"text-sm md:text-small" + li = link_to 'Contact Us', new_contact_message_path, class:"text-sm md:text-small" li = link_to 'Donate' , donate_path, class:"text-sm md:text-small" ul class="flex flex-col pb-5 md:pb-3 md:mr-10" li = link_to 'Help', faqs_path, class:"text-sm md:text-small" diff --git a/app/components/navbar/component.html.slim b/app/components/navbar/component.html.slim index 7311975ce..65d22c5c9 100644 --- a/app/components/navbar/component.html.slim +++ b/app/components/navbar/component.html.slim @@ -13,7 +13,7 @@ nav id="main-navbar" data-controller="navbar--component" class="#{non_sticky_pat li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'].include?("/search") ? "text-seafoam border-seafoam" : ""}" = link_to 'Search', search_path li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'] == "/nonprofit" ? "text-seafoam border-seafoam" : ""}" - = link_to 'Add a Nonprofit', non_profit_contact_path + = link_to 'Add a Nonprofit', new_nonprofit_request_path li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'] == "/about_us" ? "text-seafoam border-seafoam" : ""}" = link_to 'About Us', about_us_path li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'].include?("/discover") ? "text-seafoam border-seafoam" : ""}" @@ -40,7 +40,7 @@ nav id="main-navbar" data-controller="navbar--component" class="#{non_sticky_pat - if @signed_in li = link_to "My Account", my_account_path li = link_to "Search", search_path - li = link_to "Add a Nonprofit", non_profit_contact_path + li = link_to "Add a Nonprofit", new_nonprofit_request_path li = link_to "About Us", about_us_path li = link_to 'Discover', discover_path li = link_to "Donate", donate_path diff --git a/app/controllers/contact_messages_controller.rb b/app/controllers/contact_messages_controller.rb new file mode 100644 index 000000000..92f7c23db --- /dev/null +++ b/app/controllers/contact_messages_controller.rb @@ -0,0 +1,2 @@ +class ContactMessagesController < NonprofitRequestsController +end diff --git a/app/controllers/messages_controller.rb b/app/controllers/nonprofit_requests_controller.rb similarity index 83% rename from app/controllers/messages_controller.rb rename to app/controllers/nonprofit_requests_controller.rb index b483f04f0..dd6472cc0 100644 --- a/app/controllers/messages_controller.rb +++ b/app/controllers/nonprofit_requests_controller.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class MessagesController < ApplicationController +class NonprofitRequestsController < ApplicationController skip_after_action :verify_authorized skip_before_action :authenticate_user! invisible_captcha only: [:create], honeypot: :street @@ -16,7 +16,6 @@ def create redirect_to root_path else flash.now[:error] = 'Something went wrong' - @form_to_render = message_params[:form_definition] render :new, status: :unprocessable_entity end end @@ -33,7 +32,7 @@ def message_params params.require(:message).permit( :name, :email, :phone, :subject, :organization_name, :organization_website, :organization_ein, :profile_admin_name, - :profile_admin_email, :content, :form_definition + :profile_admin_email, :content ) end end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 4f471dfc0..2b94e4abc 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -9,4 +9,9 @@ def device return "mobile" if agent =~ /Mobile/ return "desktop" end + + # recaptcha gem doesn't work well with Turbo + def turbo_disabled_urls + [new_nonprofit_request_url, new_contact_message_url] + end end diff --git a/app/javascript/controllers/disable_turbo_controller.js b/app/javascript/controllers/disable_turbo_controller.js new file mode 100644 index 000000000..172a84342 --- /dev/null +++ b/app/javascript/controllers/disable_turbo_controller.js @@ -0,0 +1,11 @@ +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + static values = { targetUrls: Array } + + disableTurboForTargetUrls(event) { + if (this.targetUrlsValue.includes(event.detail.url)) { + event.preventDefault(); + } + } +} diff --git a/app/models/message.rb b/app/models/message.rb index af65a0db6..8faf0dbfc 100644 --- a/app/models/message.rb +++ b/app/models/message.rb @@ -20,5 +20,5 @@ class Message < ActiveRecord::Base attr_accessor :form_definition validates :name, presence: true - validates :email, presence: true + validates :email, format: /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i end diff --git a/app/views/contact_messages/new.html.slim b/app/views/contact_messages/new.html.slim new file mode 100644 index 000000000..56b16af5a --- /dev/null +++ b/app/views/contact_messages/new.html.slim @@ -0,0 +1,54 @@ +.main.flex.flex-col.items-center + h2 class="pb-4 text-2xl font-bold text-center pt-6 md:pt-16 md:mt-2 md:pb-9 text-gray-3" + | Get in Touch + + p class="max-w-lg px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3" + | Send us a message and we'll get back to you within 3-5 business days. + + div class="md:hidden -z-1" + div class="absolute top-0 left-0 -z-1" + = inline_svg_tag 'mob-blur-left-contact.svg', class:"w-10/12 xs:w-full" + div class="absolute top-0 right-0 -z-1" + = inline_svg_tag 'mob-blur-right-contact.svg', size:"169*248" + + div class="hidden md:flex" + div class="absolute top-0 left-0 pl-20 lg:pl-32 -z-1 xl:pl-80" + = inline_svg_tag 'desk-blur-left-contact.svg', size:"523*419" + div class="absolute top-0 inset-x-1/2 -z-1" + = inline_svg_tag 'desk-blur-right-contact.svg', size:"258*248" + + = form_with model: @message, url: create_contact_message_path, method: :post, data: { controller: 'contact-form', "turbo": false} do |f| + .c-form class="gap-6 pb-11 md:pb-36" + - if @message.errors.any? + div class="w-full" + p class="text-red-500 italic font-semibold" + | Please review the problems below: + ul + - @message.errors.full_messages.each do |message| + li class="text-red-500 text-sm" + = "- #{message}" + div class="w-full" + = f.label :name, "*Name" + = f.text_field :name, class:"c-input", required: true + div class="w-full" + = f.label :email, "*Email" + = f.email_field :email, class:"c-input", required: true + div class="w-full" + = f.label :phone + = f.telephone_field :phone, class: "c-input" + div class="w-full" + = f.label :subject, "*Subject" + = f.select :subject,\ + [['I want to add a nonprofit to Giving Connection.', '1'],['I want to claim ownership of a nonprofit profile on Giving Connection.', '2'], ['Other', '3']],\ + {include_blank: "Select a subject"}, {class: "c-input pr-7 bg-white", required: true, data: { action: "change->contact-form#subjectSelected",'contact-form-target': 'subject'}} + + div class="w-full" + = f.label :content, "*Message" + = f.text_area :content, class:"c-input h-40", required: true, data: { 'contact-form-target': 'message'} + // Honeypot + = invisible_captcha :street, :message + div class="w-full" + = recaptcha_tags + + div class="mt-3" + = f.submit "Send message", class:"c-button" diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim index 9bfdcd040..a1f19a524 100644 --- a/app/views/home/index.html.slim +++ b/app/views/home/index.html.slim @@ -92,7 +92,7 @@ main div class="relative max-w-md pb-20 mx-auto text-center" h2 class="px-5 pt-20 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark pb-11" | Are you a nonprofit organization interested in joining our listings? - = link_to 'Add or Claim a Nonprofit', non_profit_contact_path, class:'c-button inline-block my-1 text-white bg-blue-dark' + = link_to 'Add or Claim a Nonprofit', new_nonprofit_request_path, class:'c-button inline-block my-1 text-white bg-blue-dark' div class="top-0 left-0 -z-1 hidden sm:block sm:absolute" = inline_svg_tag 'lc-desk-blur-left.svg' div class="top-0 right-0 -z-1 hidden sm:block sm:absolute" diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 13cf0daf6..c981a5da4 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -34,14 +34,19 @@ - + <%= render Navbar::Component.new(signed_in: user_signed_in?) %>
- <% flash.each do |type, message| %> - <%= render Alert::Component.new(type: type, message: message) %> - <% end %> +
+ <%= render "shared/flash_messages" %> +
+ <%= turbo_frame_tag "modal" %> <%= yield %> diff --git a/app/views/messages/new.html.slim b/app/views/messages/new.html.slim deleted file mode 100644 index 7960f6466..000000000 --- a/app/views/messages/new.html.slim +++ /dev/null @@ -1,86 +0,0 @@ -// Recaptcha needs full reload to work properly -= content_for :head do - meta name="turbo-visit-control" content="reload" - -.main.flex.flex-col.items-center - - if current_page?(non_profit_contact_path) || @form_to_render == "add_nonprofit" - h2 class="pb-4 text-2xl font-bold text-center pt-6 md:pt-16 md:mt-2 md:pb-9 text-gray-3" - | Add or Claim a Nonprofit - - p class="max-w-2xl px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3" - | Giving Connection is a platform designed to connect people with nonprofits in their communities. - p class="max-w-2xl px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3" - | In order to create a nonprofit profile that is listed in Giving Connection's search results, a representative from your nonprofit should fill out the following form. - p class="max-w-2xl px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3" - | After we verify the nonprofit organization, we will contact the representative listed below to set up an account. You should expect to hear back from us within 3-5 business days. - - else - h2 class="pb-4 text-2xl font-bold text-center pt-6 md:pt-16 md:mt-2 md:pb-9 text-gray-3" - | Get in Touch - - p class="max-w-lg px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3" - | Send us a message and we’ll get back to you within 3-5 business days. - - div class="md:hidden -z-1" - div class="absolute top-0 left-0 -z-1" - = inline_svg_tag 'mob-blur-left-contact.svg', class:"w-10/12 xs:w-full" - div class="absolute top-0 right-0 -z-1" - = inline_svg_tag 'mob-blur-right-contact.svg', size:"169*248" - - div class="hidden md:flex" - div class="absolute top-0 left-0 pl-20 lg:pl-32 -z-1 xl:pl-80" - = inline_svg_tag 'desk-blur-left-contact.svg', size:"523*419" - div class="absolute top-0 inset-x-1/2 -z-1" - = inline_svg_tag 'desk-blur-right-contact.svg', size:"258*248" - - = form_with model: @message, method: :post, data: { controller: 'contact-form'} do |f| - .c-form class="gap-6 pb-11 md:pb-36" - - if @message.errors.any? - div class="w-full" - p class="text-red-500 italic font-semibold" - | Please review the problems below: - ul - - @message.errors.full_messages.each do |message| - li class="text-red-500 text-sm" - = "- #{message}" - div class="w-full" - = f.label :name, "*Name" - = f.text_field :name, class:"c-input" - div class="w-full" - = f.label :email, "*Email" - = f.email_field :email, class:"c-input" - div class="w-full" - = f.label :phone - = f.telephone_field :phone, class: "c-input" - div class="w-full" - = f.label :subject, "*Subject" - = f.select :subject,\ - [['I want to add a nonprofit to Giving Connection.', '1'],['I want to claim ownership of a nonprofit profile on Giving Connection.', '2'], ['Other', '3']],\ - {}, {class: "c-input pr-7 bg-white", data: { action: "change->contact-form#subjectSelected",'contact-form-target': 'subject'}} - - if current_page?(non_profit_contact_path) || @form_to_render == "add_nonprofit" - = f.text_field :form_definition, value: "add_nonprofit", class:"hidden" - div class="w-full" - = f.label :organization_name, "*Organization Name" - = f.text_field :organization_name, class:"c-input" - div class="w-full" - = f.label :organization_website, "Organization Website" - = f.text_field :organization_website, class:"c-input", placeholder:"Your Website" - div class="w-full" - = f.label :organization_ein, "Organization EIN" - = f.text_field :organization_ein, class:"c-input", placeholder:"Your Organization EIN" - div class="w-full" - = f.label :profile_admin_name, "*Profile Admin Name" - p class="mt-1.5 text-xs leading-normal" - | Your profile admin is the person who will be updating the page information. - = f.text_field :profile_admin_name, class:"c-input", required: true - div class="w-full" - = f.label :profile_admin_email, "*Profile Admin Email" - = f.text_field :profile_admin_email, class:"c-input" - div class="w-full" - = f.label :content, "*Message" - = f.text_area :content, class:"c-input h-40", data: { 'contact-form-target': 'message'} - // Honeypot - = invisible_captcha :street, :message - div class="w-full" - = recaptcha_tags - div class="mt-3" - = f.submit "Send message", class:"c-button" diff --git a/app/views/nonprofit_requests/new.html.slim b/app/views/nonprofit_requests/new.html.slim new file mode 100644 index 000000000..32a8e3cbe --- /dev/null +++ b/app/views/nonprofit_requests/new.html.slim @@ -0,0 +1,76 @@ +.main.flex.flex-col.items-center + h2 class="pb-4 text-2xl font-bold text-center pt-6 md:pt-16 md:mt-2 md:pb-9 text-gray-3" + | Add or Claim a Nonprofit + + p class="max-w-2xl px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3" + | Giving Connection is a platform designed to connect people with nonprofits in their communities. + p class="max-w-2xl px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3" + | In order to create a nonprofit profile that is listed in Giving Connection's search results, a representative from your nonprofit should fill out the following form. + p class="max-w-2xl px-8 mx-auto text-center pb-7 sm:text-lg sm:pb-9 text-gray-3" + | After we verify the nonprofit organization, we will contact the representative listed below to set up an account. You should expect to hear back from us within 3-5 business days. + + div class="md:hidden -z-1" + div class="absolute top-0 left-0 -z-1" + = inline_svg_tag 'mob-blur-left-contact.svg', class:"w-10/12 xs:w-full" + div class="absolute top-0 right-0 -z-1" + = inline_svg_tag 'mob-blur-right-contact.svg', size:"169*248" + + div class="hidden md:flex" + div class="absolute top-0 left-0 pl-20 lg:pl-32 -z-1 xl:pl-80" + = inline_svg_tag 'desk-blur-left-contact.svg', size:"523*419" + div class="absolute top-0 inset-x-1/2 -z-1" + = inline_svg_tag 'desk-blur-right-contact.svg', size:"258*248" + + = form_with model: @message, url: create_nonprofit_request_path, method: :post, data: { controller: 'contact-form', "turbo": false} do |f| + .c-form class="gap-6 pb-11 md:pb-36" + - if @message.errors.any? + div class="w-full" + p class="text-red-500 italic font-semibold" + | Please review the problems below: + ul + - @message.errors.full_messages.each do |message| + li class="text-red-500 text-sm" + = "- #{message}" + div class="w-full" + = f.label :name, "*Name" + = f.text_field :name, class:"c-input", required: true + div class="w-full" + = f.label :email, "*Email" + = f.email_field :email, class:"c-input", required: true + div class="w-full" + = f.label :phone + = f.telephone_field :phone, class: "c-input" + div class="w-full" + = f.label :subject, "*Subject" + = f.select :subject,\ + [['I want to add a nonprofit to Giving Connection.', '1'],['I want to claim ownership of a nonprofit profile on Giving Connection.', '2'], ['Other', '3']],\ + {include_blank: "Select a subject"}, {class: "c-input pr-7 bg-white", required: true, data: { action: "change->contact-form#subjectSelected",'contact-form-target': 'subject'}} + + div class="w-full" + = f.label :organization_name, "*Organization Name" + = f.text_field :organization_name, class:"c-input", required: true + div class="w-full" + = f.label :organization_website, "Organization Website" + = f.text_field :organization_website, class:"c-input", placeholder:"Your Website" + div class="w-full" + = f.label :organization_ein, "Organization EIN" + = f.text_field :organization_ein, class:"c-input", placeholder:"Your Organization EIN" + div class="w-full" + = f.label :profile_admin_name, "*Profile Admin Name" + p class="mt-1.5 text-xs leading-normal" + | Your profile admin is the person who will be updating the page information. + = f.text_field :profile_admin_name, class:"c-input", required: true + div class="w-full" + = f.label :profile_admin_email, "*Profile Admin Email" + = f.text_field :profile_admin_email, class:"c-input", required: true + + div class="w-full" + = f.label :content, "*Message" + = f.text_area :content, class:"c-input h-40", data: { 'contact-form-target': 'message'}, required: true + // Honeypot + = invisible_captcha :street, :message + div class="w-full" + = recaptcha_tags + + div class="mt-3" + = f.submit "Send message", class:"c-button" diff --git a/app/views/shared/_flash_messages.html.erb b/app/views/shared/_flash_messages.html.erb new file mode 100644 index 000000000..15b6ab791 --- /dev/null +++ b/app/views/shared/_flash_messages.html.erb @@ -0,0 +1,3 @@ +<% flash.each do |type, message| %> + <%= render Alert::Component.new(type: type, message: message) %> +<% end %> diff --git a/config/routes.rb b/config/routes.rb index 4a70410ca..4cad826eb 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -35,15 +35,18 @@ get 'signin' => 'devise/sessions#new' end - get 'contact' => 'messages#new' - get '/nonprofit' => 'messages#new', as: :non_profit_contact + get '/contact' => 'contact_messages#new', as: :new_contact_message + post '/contact' => 'contact_messages#create', as: :create_contact_message + + get '/nonprofit' => 'nonprofit_requests#new', as: :new_nonprofit_request + post '/nonprofit' => 'nonprofit_requests#create', as: :create_nonprofit_request + get 'search' => 'searches#show' get 'termsofuse' => 'terms_and_conditions#show', as: :terms_of_use resource :map_popup, only: [:new] resource :search_preview, only: [:show] resources :users, only: [:update] - resources :messages, only: %i[create] resources :reset_password, only: %i[new] resources :locations, only: %i[index new show destroy]