Only enable user invitations page when SMTP is enabled (#15219)

* first pass of styling of the page

* feat: scroll to the position in the config controller in stimulus

* feat: add the tooltip and a cursor thats not allowed

* feat: add a disabled property for all that needs smtp to be enabled

* feat: update the form styling

* feat: update the form

* specs: update the label name

* fix: syntax error

* chore: update the newline

* spec: test the invitation flow

* fix test

* feat: update the form as per suggestions

* spec: update the tests to match the new workflow

* oops committed debugging code

* chore: add a before to set the smtp_enabled method

* feat: update the boldness and fontsize of the link

* feat: remove size

app/javascript/admin/controllers/config_controller.js

@@ -28,6 +28,13 @@ export default class ConfigController extends Controller {
     'requireCaptchaForEmailPasswordRegistration',
   ];
 
+  connect() {
+    const element = document.querySelector(
+      `${window.location.hash} .card-body`,
+    );
+    element.classList.add('show');
+  }
+
   // GENERAL FUNCTIONS START
 
   // This is a bit of hack because we have to deal with Bootstrap used inline, jQuery and Stimulus  :-/

app/views/admin/invitations/new.html.erb

@@ -1,13 +1,44 @@
-<div class="row">
-  <div class="col-12">
-    <%= form_for(User.new, url: admin_invitations_path) do |f| %>
-      <div class="field">
-        <%= f.label "Email:" %>
-        <%= f.text_field :email, required: true, class: "form-control", placeholder: "Email of invitee" %>
-        <%= f.label "Name:" %>
-        <%= f.text_field :name, required: true, class: "form-control", placeholder: "Name of invitee" %>
+<% smtp_enabled = ForemInstance.smtp_enabled? %>
+
+<% unless smtp_enabled %>
+  <div class="crayons-card">
+    <div class="crayons-card__body p-4">
+      <h1 class="fw-heavy fs-3xl">Setup SMTP to invite users</h1>
+      <div class="my-4">
+        SMTP settings are required so that your Forem can send emails.
+        If you wish to send invites, email digests and activity notifications you will need to
+        specify which email host will relay those messages for you. You can
+        <a href="https://admin.forem.com/docs/advanced-customization/config/smtp-settings" target="_blank">read more about SMTP Settings in our admin guide</a>.
       </div>
-        <%= f.submit class: "btn btn-primary" %>
-    <% end %>
+      <div class="my-4">
+        Please note that you will need to reload this page after configuring your SMTP Settings.
+      </div>
+      <div class="fw-bold">
+        <%= link_to "Configure your SMTP Settings here.", admin_config_path(anchor: "smtp-section"), target: "_blank", rel: :noopener %>
+      </div>
+    </div>
   </div>
-</div>
+<% end %>
+
+<% if smtp_enabled %>
+  <h1 class="fw-heavy fs-3xl">Invite Users</h1>
+  <%= form_for(User.new, url: admin_invitations_path) do |f| %>
+    <div class="crayons-field mt-6">
+      <%= f.label :email, class: "crayons-field__label" %>
+      <%= f.text_field :email,
+                       class: "crayons-textfield",
+                       placeholder: "Email of invitee",
+                       required: true %>
+    </div>
+    <div class="crayons-field mt-6">
+      <%= f.label :name, class: "crayons-field__label" %>
+      <%= f.text_field :name,
+                       class: "crayons-textfield",
+                       placeholder: "Name of invitee",
+                       required: true %>
+    </div>
+    <div class="mt-6">
+      <%= f.submit "Invite User", class: "crayons-btn" %>
+    </div>
+  <% end %>
+<% end %>

app/views/admin/settings/forms/_smtp.html.erb

@@ -1,7 +1,7 @@
 <%= form_for(Settings::SMTP.new,
              url: admin_settings_smtp_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
+  <div class="card mt-3" id="smtp-section">
     <%= render partial: "admin/shared/card_header",
                locals: { header: "SMTP Settings", state: "collapse", target: "smtpSettingsBodyContainer", expanded: false } %>
     <div id="smtpSettingsBodyContainer" class="card-body collapse hide" aria-labelledby="smtpSettingsBodyContainer">

spec/requests/admin/invitations_spec.rb

@@ -6,6 +6,7 @@ RSpec.describe "/admin/invitations", type: :request do
 
   before do
     sign_in(admin)
+    allow(ForemInstance).to receive(:smtp_enabled?).and_return(true)
   end
 
   describe "GET /admin/invitations" do
@@ -19,7 +20,8 @@ RSpec.describe "/admin/invitations", type: :request do
   describe "GET /admin/invitations/new" do
     it "renders to appropriate page" do
       get new_admin_invitation_path
-      expect(response.body).to include("Email:")
+      expect(response.body).to include("Email")
+      expect(response.body).to include("Name")
     end
   end
 

spec/system/admin/admin_invites_user_spec.rb

@@ -0,0 +1,61 @@
+require "rails_helper"
+
+RSpec.describe "Admin invites user", type: :system do
+  let(:admin) { create(:user, :super_admin) }
+
+  before do
+    sign_in admin
+  end
+
+  context "when SMTP is not configured" do
+    before do
+      allow(ForemInstance).to receive(:smtp_enabled?).and_return(false)
+      visit new_admin_invitation_path
+    end
+
+    it "shows a header" do
+      header = "Setup SMTP to invite users"
+      expect(page).to have_content(header)
+    end
+
+    it "shows a banner" do
+      message = "SMTP settings are required so that your Forem can send emails. If you wish to send invites, "\
+                "email digests and activity notifications you will need to specify which email host will relay those "\
+                "messages for you."
+      expect(page).to have_content(message)
+    end
+
+    it "contains a link to the documentation" do
+      expect(page).to have_link("read more about SMTP Settings in our admin guide", href: "https://admin.forem.com/docs/advanced-customization/config/smtp-settings")
+    end
+
+    it "contains a link to configure SMTP settings" do
+      expect(page).to have_link("Configure your SMTP Settings", href: admin_config_path(anchor: "smtp-section"))
+    end
+
+    it "does not contain any for fields" do
+      expect(page).not_to have_field "Email"
+      expect(page).not_to have_field "Name"
+    end
+
+    it "does not contain any submit buttons" do
+      expect(page).not_to have_button "Invite User"
+    end
+  end
+
+  context "when SMTP is configured" do
+    before do
+      allow(ForemInstance).to receive(:smtp_enabled?).and_return(true)
+      visit new_admin_invitation_path
+    end
+
+    it "shows the input fields" do
+      expect(page).to have_field "Email"
+      expect(page).to have_field "Name"
+    end
+
+    it "shows the submit button" do
+      expect(page).to have_button "Invite User"
+    end
+  end
+end