Refactor admin settings view into partials (#13950)

* Reactor admin settings view into partials

* Fix Stimulus problem

* Add SMTP partial

app/controllers/admin/settings_controller.rb

@@ -3,6 +3,10 @@ module Admin
   # /admin/customization/config. The actual updates get handled by the settings
   # controllers in the Admin::Settings namespace.
   class SettingsController < Admin::ApplicationController
+    # NOTE: The "show" action uses a lot of partials, this makes it easier to
+    # reference them.
+    prepend_view_path("app/views/admin/settings")
+
     layout "admin"
 
     def show

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

@@ -0,0 +1,32 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "API Tokens",
+                 state: "collapse",
+                 target: "apiBodyContainer",
+                 expanded: false
+               } %>
+    <div id="apiBodyContainer" class="card-body collapse hide" aria-labelledby="apiBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :health_check_token %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:health_check_token][:description] %>
+          <%= f.text_field :health_check_token,
+                           class: "crayons-textfield",
+                           value: Settings::General.health_check_token,
+                           placeholder: Constants::Settings::General::DETAILS[:health_check_token][:placeholder] %>
+        </div>
+        <div class="crayons-field">
+          <%= admin_config_label :video_encoder_key %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:video_encoder_key][:description] %>
+          <%= f.text_field :video_encoder_key,
+                           class: "crayons-textfield",
+                           value: Settings::General.video_encoder_key,
+                           placeholder: Constants::Settings::General::DETAILS[:video_encoder_key][:placeholder] %>
+        </div>
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,216 @@
+<%= form_for(Settings::Authentication.new, url: admin_settings_authentications_path, html: { data: { action: "submit->config#configUpdatePrecheck", "config-target": "authSectionForm", testid: "authSectionForm" } }) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Authentication",
+                 state: "collapse",
+                 target: "authenticationBodyContainer",
+                 expanded: false
+               } %>
+    <div id="authenticationBodyContainer" class="card-body collapse hide" aria-labelledby="authenticationBodyContainer">
+      <section class="mb-6">
+        <h3 class="crayons-subtitle-3 mb-3">
+          General settings
+        </h3>
+        <div
+            class="crayons-field crayons-field--checkbox <%= invite_only_mode_or_no_enabled_auth_options ? "crayons-tooltip" : "" %>"
+            data-tooltip="Unchecking this will enable Email Registration">
+            <%= f.check_box :invite_only_mode,
+                            checked: invite_only_mode_or_no_enabled_auth_options,
+                            data: { action: "config#adjustAuthenticationOptions", "config-target": "inviteOnlyMode" },
+                            class: "crayons-checkbox" %>
+            <div class="mt-0">
+              <%= admin_config_label :invite_only_mode, "Invite-only mode", model: Settings::Authentication %>
+              <%= admin_config_description Constants::Settings::Authentication::DETAILS[:invite_only_mode][:description] %>
+            </div>
+        </div>
+      </section>
+      <section>
+        <header class="mb-2">
+          <h3 class="crayons-subtitle-3">
+            Registration options
+          </h3>
+          <p class="crayons-field__description">
+          How can people create an account on your community?
+          </p>
+        </header>
+
+        <section class="config-authentication__item mb-0">
+          <figure class="config-authentication__item--icon">
+            <%= inline_svg_tag("email.svg", class: "crayons-icon", aria: true, title: "Email icon") %>
+          </figure>
+          <div class="config-authentication__item--container">
+            <div
+                class="config-authentication__item--row flex items-center justify-between <%= tooltip_class_on_auth_provider_enablebtn %>"
+                data-tooltip="<%= tooltip_text_email_or_auth_provider_btns %>">
+
+                <div class="config-authentication__item--label">
+                  <p class="crayons-field__label <%= Settings::Authentication.allow_email_password_registration ? "pb-0" : "" %>">
+                  Email address
+                  </p>
+                  <div
+                      class="enabled-indicator <%= Settings::Authentication.allow_email_password_registration ? "visible" : "" %>"
+                      data-config-target="enabledIndicator">
+                      <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon admin-config-checkmark", title: "Email enabled") %>
+                      <small class="crayons-field__description ml-1">Enabled</small>
+                  </div>
+                </div>
+
+                <button
+                    class="crayons-btn crayons-btn--secondary"
+                    id="email-auth-enable-edit-btn"
+                    data-button-text="<%= Settings::Authentication.allow_email_password_registration ? "edit" : "enable" %>"
+                    data-config-target="emailAuthSettingsBtn"
+                    data-action="click->config#enableOrEditEmailAuthSettings"
+                    <%= disabled_attr_on_auth_provider_enable_btn %>>
+                    <%= Settings::Authentication.allow_email_password_registration ? "Edit" : "Enable" %>
+                </button>
+
+            </div>
+            <div id="email-auth-settings-section" class="config-authentication__item--body hidden">
+              <fieldset class="config-authentication-form">
+                <div class="crayons-field--checkbox hidden">
+                  <%= f.check_box :allow_email_password_registration,
+                                  checked: Settings::Authentication.allow_email_password_registration,
+                                  id: "email-registration-checkbox",
+                                  class: "crayons-checkbox" %>
+                </div>
+                <div class="crayons-field">
+                  <%= admin_config_label :allowed_registration_email_domains, "Allowed email domains", model: Settings::Authentication %>
+                  <%= admin_config_description Constants::Settings::Authentication::DETAILS[:allowed_registration_email_domains][:description] %>
+                  <%= f.text_field :allowed_registration_email_domains,
+                                   class: "crayons-textfield",
+                                   value: Settings::Authentication.allowed_registration_email_domains.join(","),
+                                   placeholder: Constants::Settings::Authentication::DETAILS[:allowed_registration_email_domains][:placeholder] %>
+                </div>
+                <div class="crayons-field--checkbox">
+                  <%= f.check_box :display_email_domain_allow_list_publicly,
+                                  checked: Settings::Authentication.display_email_domain_allow_list_publicly,
+                                  id: "email-display-emails-publicly-checkbox",
+                                  class: "crayons-checkbox mt-2" %>
+                  <div>
+                    <%= admin_config_label :display_email_domain_allow_list_publicly, model: Settings::Authentication %>
+                    <%= admin_config_description Constants::Settings::Authentication::DETAILS[:display_email_domain_allow_list_publicly][:description] %>
+                  </div>
+                </div>
+                <div class="crayons-field--checkbox">
+                  <%= f.check_box :require_captcha_for_email_password_registration,
+                                  checked: Settings::Authentication.require_captcha_for_email_password_registration,
+                                  data: {
+                                    action: "config#toggleGoogleRecaptchaFields",
+                                    "config-target": "requireCaptchaForEmailPasswordRegistration"
+                                  },
+                                  class: "crayons-checkbox mt-2" %>
+                  <div>
+                    <%= admin_config_label :require_captcha_for_email_password_registration, "Enable Google reCAPTCHA for email password registration", model: Settings::Authentication %>
+                    <%= admin_config_description Constants::Settings::Authentication::DETAILS[:require_captcha_for_email_password_registration][:description] %>
+                  </div>
+                </div>
+                <div id="recaptchaContainer" class="ml-7 <%= Settings::Authentication.require_captcha_for_email_password_registration ? "grid gap-4" : "hidden" %>" aria-labelledby="recaptchaContainer">
+                  <div class="crayons-field">
+                    <%= admin_config_label :recaptcha_site_key, "Google reCAPTCHA site key", model: Settings::Authentication %>
+                    <%= admin_config_description Constants::Settings::Authentication::DETAILS[:recaptcha_site_key][:description] %>
+                    <%= f.text_field :recaptcha_site_key,
+                                     class: "crayons-textfield",
+                                     value: Settings::Authentication.recaptcha_site_key,
+                                     placeholder: Constants::Settings::Authentication::DETAILS[:recaptcha_site_key][:placeholder] %>
+                  </div>
+                  <div class="crayons-field">
+                    <%= admin_config_label :recaptcha_secret_key, "Google reCAPTCHA secret key", model: Settings::Authentication %>
+                    <%= admin_config_description Constants::Settings::Authentication::DETAILS[:recaptcha_secret_key][:description] %>
+                    <%= f.text_field :recaptcha_secret_key,
+                                     class: "crayons-textfield",
+                                     value: Settings::Authentication.recaptcha_secret_key,
+                                     placeholder: Constants::Settings::Authentication::DETAILS[:recaptcha_secret_key][:placeholder] %>
+                  </div>
+                </div>
+                <div class="crayons-btn-actions">
+                  <% if Settings::Authentication.allow_email_password_registration %>
+                    <button
+                        class="crayons-btn crayons-btn--danger"
+                        data-action="click->config#activateEmailAuthModal">
+                        Disable
+                    </button>
+                    <button
+                        class="crayons-btn crayons-btn--secondary"
+                        data-action="click->config#hideEmailAuthSettings">
+                        Close
+                    </button>
+                  <% else %>
+                    <button
+                        class="crayons-btn crayons-btn--secondary"
+                        data-action="click->config#disableEmailAuth">
+                        Undo
+                    </button>
+                  <% end %>
+                </div>
+              </fieldset>
+            </div>
+          </div>
+        </section>
+        <hr class="my-0" />
+
+        <section class="mb-6">
+          <div class="form-group mb-0">
+            <%= f.text_field :auth_providers_to_enable,
+                             id: "auth_providers_to_enable",
+                             class: "form-control hidden",
+                             value: Settings::Authentication.providers.join(","),
+                             readonly: true %>
+          </div>
+          <% authentication_available_providers.each do |provider| %>
+            <% next if provider.provider_name == :apple && !Flipper.enabled?(:apple_auth) %>
+            <section class="config-authentication__item mb-0">
+              <figure class="config-authentication__item--icon">
+                <%= inline_svg_tag("#{provider.provider_name}.svg", class: "crayons-icon", aria: true, title: "#{provider.official_name} logo") %>
+              </figure>
+              <div class="config-authentication__item--container">
+                <div
+                    class="flex items-center justify-between <%= tooltip_class_on_auth_provider_enablebtn %>"
+                    data-tooltip="<%= tooltip_text_email_or_auth_provider_btns %>">
+                    <div class="config-authentication__item--label">
+                      <p class="crayons-field__label <%= authentication_provider_enabled?(provider) ? "pb-0" : "" %>">
+                      <%= provider.official_name %>
+                      </p>
+                      <div
+                          id="<%= provider.provider_name %>-enabled-indicator"
+                          class="enabled-indicator <%= authentication_provider_enabled?(provider) ? "visible" : "" %>">
+                          <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon admin-config-checkmark", title: "#{provider.official_name} enabled") %>
+                          <small class="crayons-field__description ml-1">Enabled</small>
+                      </div>
+                    </div>
+                    <button
+                        class="crayons-btn crayons-btn--secondary"
+                        id="<%= provider.provider_name %>-auth-btn"
+                        data-button-text="<%= authentication_provider_enabled?(provider) ? "edit" : "enable" %>"
+                        data-action="click->config#enableOrEditAuthProvider"
+                        data-provider-name="<%= provider.provider_name %>"
+                        data-provider-official-name="<%= provider.official_name %>"
+                        data-enable-auth="<%= authentication_provider_enabled?(provider) ? "true" : "false" %>"
+                        <%= disabled_attr_on_auth_provider_enable_btn %>>
+                        <%= authentication_provider_enabled?(provider) ? "Edit" : "Enable" %>
+                    </button>
+                </div>
+                <div id="<%= provider.provider_name %>-auth-settings" class="config-authentication__item--body hidden">
+                  <% auth_partial = provider.provider_name == :apple ? "apple_auth_provider_settings" : "auth_provider_settings" %>
+                  <%= render partial: "forms/authentication/#{auth_partial}",
+                             locals: {
+                               f: f,
+                               provider: provider
+                             } %>
+                </div>
+              </div>
+            </section>
+            <hr class="my-0" />
+          <% end %>
+        </section>
+      </section>
+      <div class="crayons-notice crayons-notice--info mb-4" aria-live="polite">
+        Changing authentication keys will not take effect until this Forem instance is restarted.
+      </div>
+
+      <%= render "form_submission", f: f %>
+    </div>
+  </div>
+<% end %>
+<div data-config-target="configModalAnchor"></div>

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

@@ -0,0 +1,89 @@
+<%= form_for(Settings::Campaign.new, url: admin_settings_campaigns_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Campaign",
+                 state: "collapse",
+                 target: "campaignBodyContainer",
+                 expanded: false
+               } %>
+    <div id="campaignBodyContainer" class="card-body collapse hide" aria-labelledby="campaignBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :hero_html_variant_name, "Campaign hero HTML variant name" %>
+          <%= admin_config_description Constants::Settings::Campaign::DETAILS[:hero_html_variant_name][:description] %>
+          <%= f.text_field :hero_html_variant_name,
+                           class: "crayons-textfield",
+                           value: Settings::Campaign.hero_html_variant_name,
+                           placeholder: Constants::Settings::Campaign::DETAILS[:hero_html_variant_name][:placeholder] %>
+        </div>
+
+        <div class="crayons-field crayons-field--checkbox">
+          <%= f.check_box :articles_require_approval, checked: Settings::Campaign.articles_require_approval, class: "crayons-checkbox" %>
+          <%= admin_config_label :articles_require_approval %>
+          <%= admin_config_description Constants::Settings::Campaign::DETAILS[:articles_require_approval][:description] %>
+        </div>
+
+        <div class="crayons-field crayons-field--checkbox">
+          <%= f.check_box :sidebar_enabled, checked: Settings::Campaign.sidebar_enabled, class: "crayons-checkbox" %>
+          <%= admin_config_label :sidebar_enabled %>
+          <%= admin_config_description Constants::Settings::Campaign::DETAILS[:sidebar_enabled][:description] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :sidebar_image %>
+          <%= admin_config_description Constants::Settings::Campaign::DETAILS[:sidebar_image][:description] %>
+          <% if Settings::Campaign.sidebar_image.present? %>
+            <div class="row mt-2">
+              <div class="col-12">
+                <img alt="Campaign sidebar image" class="img-fluid" src="<%= Settings::Campaign.sidebar_image %>" />
+              </div>
+            </div>
+          <% end %>
+          <%= f.text_field :sidebar_image,
+                           class: "crayons-textfield",
+                           value: Settings::Campaign.sidebar_image,
+                           placeholder: Constants::Settings::Campaign::DETAILS[:sidebar_image][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :url, "Campaign URL" %>
+          <%= admin_config_description Constants::Settings::Campaign::DETAILS[:url][:description] %>
+          <%= f.text_field :url,
+                           class: "crayons-textfield",
+                           value: Settings::Campaign.url,
+                           placeholder: Constants::Settings::Campaign::DETAILS[:url][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :featured_tags %>
+          <%= admin_config_description Constants::Settings::Campaign::DETAILS[:featured_tags][:description] %>
+          <%= f.text_field :featured_tags,
+                           class: "crayons-textfield",
+                           value: Settings::Campaign.featured_tags.join(","),
+                           placeholder: Constants::Settings::Campaign::DETAILS[:featured_tags][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :call_to_action, "Campaign Call to Action" %>
+          <%= admin_config_description Constants::Settings::Campaign::DETAILS[:call_to_action][:description] %>
+          <%= f.text_field :call_to_action,
+                           class: "crayons-textfield",
+                           value: Settings::Campaign.call_to_action,
+                           placeholder: Constants::Settings::Campaign::DETAILS[:call_to_action][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :articles_expiry_time, "Campaign article expiry time" %>
+          <%= admin_config_description Constants::Settings::Campaign::DETAILS[:articles_expiry_time][:description] %>
+          <%= f.number_field :articles_expiry_time,
+                             class: "crayons-textfield",
+                             value: Settings::Campaign.articles_expiry_time,
+                             placeholder: Constants::Settings::Campaign::DETAILS[:articles_expiry_time][:placeholder] %>
+        </div>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,78 @@
+<%= form_for(Settings::Community.new, url: admin_settings_communities_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Community Content",
+                 state: "collapse",
+                 target: "contentBodyContainer",
+                 expanded: false
+               } %>
+    <div id="contentBodyContainer" class="card-body collapse hide" aria-labelledby="contentBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :community_name, model: Settings::Community %>
+          <%= admin_config_description Constants::Settings::Community::DETAILS[:community_name][:description] %>
+          <%= f.text_field :community_name,
+                           class: "crayons-textfield",
+                           value: Settings::Community.community_name,
+                           placeholder: Constants::Settings::Community::DETAILS[:community_name][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :community_emoji, model: Settings::Community %>
+          <%= admin_config_description Constants::Settings::Community::DETAILS[:community_emoji][:description] %>
+          <%= f.text_field :community_emoji,
+                           class: "crayons-textfield",
+                           value: Settings::Community.community_emoji,
+                           placeholder: Constants::Settings::Community::DETAILS[:community_emoji][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :tagline, model: Settings::Community %>
+          <%= admin_config_description Constants::Settings::Community::DETAILS[:tagline][:description] %>
+          <%= f.text_field :tagline,
+                           class: "crayons-textfield",
+                           value: Settings::Community.tagline,
+                           placeholder: Constants::Settings::Community::DETAILS[:tagline][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :community_description, model: Settings::Community %>
+          <%= admin_config_description Constants::Settings::Community::DETAILS[:community_description][:description] %>
+          <%= f.text_field :community_description,
+                           class: "crayons-textfield",
+                           value: Settings::Community.community_description,
+                           placeholder: Constants::Settings::Community::DETAILS[:community_description][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :member_label, model: Settings::Community %>
+          <%= admin_config_description Constants::Settings::Community::DETAILS[:member_label][:description] %>
+          <%= f.text_field :member_label,
+                           class: "crayons-textfield",
+                           value: Settings::Community.member_label,
+                           placeholder: Constants::Settings::Community::DETAILS[:member_label][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :copyright_start_year, model: Settings::Community %>
+          <%= admin_config_description Constants::Settings::Community::DETAILS[:copyright_start_year][:description] %>
+          <%= f.text_field :copyright_start_year,
+                           class: "crayons-textfield",
+                           value: Settings::Community.copyright_start_year,
+                           placeholder: Constants::Settings::Community::DETAILS[:copyright_start_year][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :staff_user_id, model: Settings::Community %>
+          <%= admin_config_description Constants::Settings::Community::DETAILS[:staff_user_id][:description] %>
+          <%= f.text_field :staff_user_id,
+                           class: "crayons-textfield",
+                           value: Settings::Community.staff_user_id,
+                           placeholder: Constants::Settings::Community::DETAILS[:staff_user_id][:placeholder] %>
+        </div>
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,50 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Credits",
+                 state: "collapse",
+                 target: "creditsBodyContainer",
+                 expanded: false
+               } %>
+
+    <div id="creditsBodyContainer" class="card-body collapse hide" aria-labelledby="creditsBodyContainer">
+      <fieldset class="grid gap-4">
+        <%= f.fields_for :credit_prices_in_cents do |price_field| %>
+          <div class="crayons-field">
+            <%= admin_config_label "Credit price in cents (S)" %>
+            <%= admin_config_description Constants::Settings::General::DETAILS[:credit_prices_in_cents][:small][:description] %>
+            <%= price_field.number_field :small,
+                                         class: "crayons-textfield",
+                                         value: Settings::General.credit_prices_in_cents[:small] %>
+          </div>
+
+          <div class="crayons-field">
+            <%= admin_config_label "Credit price in cents (M)" %>
+            <%= admin_config_description Constants::Settings::General::DETAILS[:credit_prices_in_cents][:medium][:description] %>
+            <%= price_field.number_field :medium,
+                                         class: "crayons-textfield",
+                                         value: Settings::General.credit_prices_in_cents[:medium] %>
+          </div>
+          <div class="crayons-field">
+            <%= admin_config_label "Credit price in cents (L)" %>
+            <%= admin_config_description Constants::Settings::General::DETAILS[:credit_prices_in_cents][:large][:description] %>
+            <%= price_field.number_field :large,
+                                         class: "crayons-textfield",
+                                         value: Settings::General.credit_prices_in_cents[:large] %>
+          </div>
+
+          <div class="crayons-field">
+            <%= admin_config_label "Credit price in cents (XL)" %>
+            <%= admin_config_description Constants::Settings::General::DETAILS[:credit_prices_in_cents][:xlarge][:description] %>
+            <%= price_field.number_field :xlarge,
+                                         class: "crayons-textfield",
+                                         value: Settings::General.credit_prices_in_cents[:xlarge] %>
+          </div>
+        <% end %>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,25 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path, html: { data: { testid: "emailDigestSectionForm" } }) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Email digest frequency",
+                 state: "collapse",
+                 target: "emailDigestBodyContainer",
+                 expanded: false
+               } %>
+    <div id="emailDigestBodyContainer" class="card-body collapse hide" aria-labelledby="emailDigestBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :periodic_email_digest %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:periodic_email_digest][:description] %>
+          <%= f.number_field :periodic_email_digest,
+                             class: "crayons-textfield",
+                             value: Settings::General.periodic_email_digest,
+                             placeholder: Constants::Settings::General::DETAILS[:periodic_email_digest][:placeholder] %>
+        </div>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,22 @@
+<div class="card mt-3">
+  <%= render partial: "admin/shared/card_header",
+             locals: {
+               header: "Emails",
+               state: "collapse",
+               target: "emailBodyContainer",
+               expanded: false
+             } %>
+  <div id="emailBodyContainer" class="card-body collapse hide" aria-labelledby="emailBodyContainer">
+    <fieldset class="grid gap-4">
+      <div class="crayons-field">
+        <label for="forem_instance_email" class="crayons-field__label">
+          Default
+        </label>
+        <div class="crayons-field__description">
+          Default (set via <span class="ff-monospace">default_email</span> environment variable)
+        </div>
+        <input id="forem_instance_email" type="text" value="<%= ForemInstance.email %>" class="form-control" readonly>
+      </div>
+    </fieldset>
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Google Analytics",
+                 state: "collapse",
+                 target: "gaBodyContainer",
+                 expanded: false
+               } %>
+    <div id="gaBodyContainer" class="card-body collapse hide" aria-labelledby="gaBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :ga_tracking_id, "View ID" %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:ga_tracking_id][:description] %>
+          <%= f.text_field :ga_tracking_id,
+                           class: "crayons-textfield",
+                           value: Settings::General.ga_tracking_id %>
+        </div>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,65 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Images",
+                 state: "collapse",
+                 target: "imagesBodyContainer",
+                 expanded: false
+               } %>
+    <div id="imagesBodyContainer" class="card-body collapse hide" aria-labelledby="imagesBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :main_social_image %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:main_social_image][:description] %>
+          <%= f.text_field :main_social_image,
+                           class: "crayons-textfield",
+                           value: Settings::General.main_social_image,
+                           placeholder: Constants::Settings::General::DETAILS[:main_social_image][:placeholder] %>
+          <% if Settings::General.main_social_image.present? %>
+            <img alt="main social image" class="img-fluid" src="<%= Settings::General.main_social_image %>" width="600" height="337" loading="lazy" />
+          <% end %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :favicon_url, "Favicon URL" %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:favicon_url][:description] %>
+          <%= f.text_field :favicon_url,
+                           class: "form-control",
+                           value: Settings::General.favicon_url,
+                           placeholder: Constants::Settings::General::DETAILS[:favicon_url][:placeholder] %>
+          <img alt="favicon" class="preview" src="<%= Images::Optimizer.call(Settings::General.favicon_url, width: 32) %>" width="32" height="32" loading="lazy" />
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :logo_png %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:logo_png][:description] %>
+          <%= f.text_field :logo_png,
+                           class: "crayons-textfield",
+                           value: Settings::General.logo_png,
+                           placeholder: Constants::Settings::General::DETAILS[:logo_png][:placeholder] %>
+          <% if Settings::General.logo_png.present? %>
+            <img src="<%= Images::Optimizer.call(Settings::General.logo_png, width: 128) %>" width="128" height="128" loading="lazy" />
+          <% end %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :logo_svg %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:logo_svg][:description] %>
+          <%= f.text_area :logo_svg,
+                          class: "crayons-textfield",
+                          value: Settings::General.logo_svg,
+                          rows: 6,
+                          placeholder: Constants::Settings::General::DETAILS[:logo_svg][:placeholder] %>
+          <% if Settings::General.logo_svg.present? %>
+            <div class="site-logo">
+              <%= Settings::General.logo_svg.html_safe %>
+            </div>
+          <% end %>
+        </div>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,57 @@
+<%= form_with(url: admin_settings_mandatory_settings_path, local: true, data: { testid: "getStartedSectionForm" }) do |f| %>
+  <fieldset class="grid gap-4">
+
+    <% Settings::Mandatory::MAPPINGS.each do |config_key, settings_model| %>
+      <%# we need to list the config as separate fields if the data structure is a Hash %>
+      <% placeholder_module = Constants.const_get(settings_model.name) %>
+      <% if settings_model.public_send(config_key).is_a?(Hash) %>
+        <%= admin_config_label config_key.to_s %>
+        <div class="form-group">
+          <%= f.fields_for config_key do |a_field| %>
+            <% settings_model.public_send(config_key).each do |key, value| %>
+              <div class="crayons-field">
+                <%= admin_config_label key.to_s %>
+                <%= admin_config_description "#{key} #{config_key.to_s.tr! '_', ' '}" %>
+                <%= a_field.text_field key,
+                                       class: "crayons-textfield",
+                                       value: settings_model.public_send(config_key)[key],
+                                       placeholder: placeholder_module::DETAILS[config_key][:placeholder] %>
+              </div>
+            <% end %>
+          <% end %>
+        </div>
+      <% elsif settings_model.public_send(config_key).is_a?(Array) %>
+        <div class="crayons-field">
+          <%= admin_config_label config_key %>
+          <%= admin_config_description placeholder_module::DETAILS[config_key][:description] %>
+          <%= f.text_field config_key,
+                           class: "crayons-textfield",
+                           value: settings_model.public_send(config_key).join(","),
+                           placeholder: placeholder_module::DETAILS[config_key][:placeholder] %>
+        </div>
+      <% else %>
+        <div class="crayons-field">
+          <%= admin_config_label config_key %>
+          <%= admin_config_description placeholder_module::DETAILS[config_key][:description] %>
+          <%= f.text_field config_key,
+                           class: "form-control",
+                           value: settings_model.public_send(config_key),
+                           placeholder: placeholder_module::DETAILS[config_key][:placeholder] %>
+        </div>
+      <% end %>
+    <% end %>
+
+    <% if current_user.has_role?(:super_admin) %>
+      <div class="crayons-notice p-4 mt-4">
+        <div class="crayons-field">
+          <%= label_tag :confirmation_update, "Confirmation update", class: "crayons-field__label" %>
+          <p class="crayons-field__description">Type the sentence: <strong><%= @confirmation_text %></strong></p>
+          <div class="flex">
+            <%= text_field_tag :confirmation, nil, class: "crayons-textfield flex-1 mr-2", placeholder: "Confirmation text", autocomplete: "off", required: true, pattern: @confirmation_text %>
+            <%= f.submit "Update Settings", class: "crayons-btn align-self-start" %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </fieldset>
+<% end %>

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

@@ -0,0 +1,39 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path, html: { data: { testid: "mascotSectionForm" } }) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Mascot",
+                 state: "collapse",
+                 target: "mascotBodyContainer",
+                 expanded: false
+               } %>
+    <div id="mascotBodyContainer" class="card-body collapse hide" aria-labelledby="mascotBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :mascot_user_id, "Mascot user ID" %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:mascot_user_id][:description] %>
+          <%= f.text_field :mascot_user_id,
+                           class: "crayons-textfield",
+                           value: Settings::General.mascot_user_id,
+                           min: 1,
+                           placeholder: Constants::Settings::General::DETAILS[:mascot_user_id][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :mascot_image_url, "Mascot Image URL" %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:mascot_image_url][:description] %>
+          <%= f.text_field :mascot_image_url,
+                           class: "crayons-textfield",
+                           value: Settings::General.mascot_image_url,
+                           placeholder: Constants::Settings::General::DETAILS[:mascot_image_url][:placeholder] %>
+
+          <div class="col-12">
+            <img alt="Mascot image" class="img-fluid" src="<%= Settings::General.mascot_image_url %>" loading="lazy" />
+          </div>
+
+        </div>
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,31 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Meta Keywords",
+                 state: "collapse",
+                 target: "metaKeywordsBodyContainer",
+                 expanded: false
+               } %>
+    <div id="metaKeywordsBodyContainer" class="card-body collapse hide" aria-labelledby="metaKeywordsBodyContainer">
+      <fieldset class="grid gap-4">
+        <%= f.fields_for :meta_keywords do |meta_keywords_field| %>
+          <% Settings::General.meta_keywords.each do |area, keywords| %>
+            <div class="crayons-field">
+              <%= admin_config_label area.to_s %>
+              <p class="crayons-field__description">
+              <%= area.capitalize %><%= "page" unless area == "default" %> keywords
+              </p>
+              <%= meta_keywords_field.text_field area,
+                                                 class: "crayons-textfield",
+                                                 value: Settings::General.meta_keywords[area],
+                                                 placeholder: Constants::Settings::General::DETAILS[:meta_keywords][:placeholder] %>
+            </div>
+          <% end %>
+        <% end %>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,44 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Monetization",
+                 state: "collapse",
+                 target: "monetizationBodyContainer",
+                 expanded: false
+               } %>
+    <div id="monetizationBodyContainer" class="card-body collapse hide" aria-labelledby="monetizationBodyContainer">
+      <fieldset class="grid gap-4">
+
+        <div class="crayons-field">
+          <%= admin_config_label :stripe_api_key, "Stripe API key" %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:stripe_api_key][:description] %>
+          <%= f.text_field :stripe_api_key,
+                           class: "crayons-textfield",
+                           value: Settings::General.stripe_api_key,
+                           placeholder: Constants::Settings::General::DETAILS[:stripe_api_key][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :stripe_publishable_key %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:stripe_publishable_key][:description] %>
+          <%= f.text_field :stripe_publishable_key,
+                           class: "crayons-textfield",
+                           value: Settings::General.stripe_publishable_key,
+                           placeholder: Constants::Settings::General::DETAILS[:stripe_publishable_key][:placeholder] %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :payment_pointer %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:payment_pointer][:description] %>
+          <%= f.text_field :payment_pointer,
+                           class: "crayons-textfield",
+                           value: Settings::General.payment_pointer,
+                           placeholder: Constants::Settings::General::DETAILS[:payment_pointer][:placeholder] %>
+        </div>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,56 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Newsletter",
+                 state: "collapse",
+                 target: "newsletterBodyContainer",
+                 expanded: false
+               } %>
+    <div id="newsletterBodyContainer" class="card-body collapse hide" aria-labelledby="newsletterBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :mailchimp_api_key, "Mailchimp API Key" %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:mailchimp_api_key][:description] %>
+          <%= f.text_field :mailchimp_api_key,
+                           class: "crayons-textfield",
+                           value: Settings::General.mailchimp_api_key %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :mailchimp_newsletter_id, "Main Newsletter" %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:mailchimp_newsletter_id][:description] %>
+          <%= f.text_field :mailchimp_newsletter_id,
+                           class: "crayons-textfield",
+                           value: Settings::General.mailchimp_newsletter_id %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :mailchimp_sustaining_members_id, "Sustaining Members Newsletter" %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:mailchimp_sustaining_members_id][:description] %>
+          <%= f.text_field :mailchimp_sustaining_members_id,
+                           class: "crayons-textfield",
+                           value: Settings::General.mailchimp_sustaining_members_id %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :mailchimp_tag_moderators_id, "Tag Moderators Newsletter" %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:mailchimp_tag_moderators_id][:description] %>
+          <%= f.text_field :mailchimp_tag_moderators_id,
+                           class: "crayons-textfield",
+                           value: Settings::General.mailchimp_tag_moderators_id %>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :mailchimp_community_moderators_id, "Community Moderators Newsletter" %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:mailchimp_community_moderators_id][:description] %>
+          <%= f.text_field :mailchimp_community_moderators_id,
+                           class: "crayons-textfield",
+                           value: Settings::General.mailchimp_community_moderators_id %>
+        </div>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,49 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Onboarding",
+                 state: "collapse",
+                 target: "onboardingBodyContainer",
+                 expanded: false
+               } %>
+    <div id="onboardingBodyContainer" class="card-body collapse hide" aria-labelledby="onboardingBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :onboarding_background_image %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:onboarding_background_image][:description] %>
+          <%= f.text_field :onboarding_background_image,
+                           class: "crayons-textfield",
+                           value: Settings::General.onboarding_background_image,
+                           placeholder: Constants::Settings::General::DETAILS[:onboarding_background_image][:placeholder] %>
+          <div class="row mt-2">
+            <div class="col-12">
+              <img alt="onboarding background image" class="img-fluid" src="<%= Settings::General.onboarding_background_image %>" loading="lazy" />
+            </div>
+          </div>
+        </div>
+
+        <div class="crayons-field">
+          <%= admin_config_label :suggested_users %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:suggested_users][:description] %>
+          <%= f.text_field :suggested_users,
+                           class: "crayons-textfield",
+                           value: Settings::General.suggested_users.join(","),
+                           placeholder: Constants::Settings::General::DETAILS[:suggested_users][:placeholder] %>
+        </div>
+
+        <div class="crayons-field crayons-field--checkbox">
+          <%= f.check_box :prefer_manual_suggested_users, checked: Settings::General.prefer_manual_suggested_users, class: "crayons-checkbox" %>
+          <div class="mt-0">
+            <%= admin_config_label :prefer_manual_suggested_users %>
+            <p class="crayons-field__description">
+            <%= Constants::Settings::General::DETAILS[:prefer_manual_suggested_users][:description] %>
+            </p>
+          </div>
+        </div>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,87 @@
+<%= form_for(Settings::RateLimit.new, url: admin_settings_rate_limits_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Rate limits and anti-spam",
+                 state: "collapse",
+                 target: "rateLimitsBodyContainer",
+                 expanded: false
+               } %>
+    <div id="rateLimitsBodyContainer" class="card-body collapse hide" aria-labelledby="rateLimitsBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :user_considered_new_days, model: Settings::RateLimit %>
+          <%= admin_config_description Constants::Settings::RateLimit::DETAILS[:user_considered_new_days][:description] %>
+          <%= f.number_field :user_considered_new_days,
+                             class: "crayons-textfield",
+                             value: Settings::RateLimit.user_considered_new_days,
+                             placeholder: Constants::Settings::RateLimit::DETAILS[:user_considered_new_days][:placeholder] %>
+        </div>
+
+        <% configurable_rate_limits.each do |key, field_hash| %>
+          <div class="crayons-field">
+            <%= admin_config_label field_hash[:title], model: Settings::RateLimit %>
+            <p class="crayons-field__description">
+            <%= field_hash[:description] %>
+            </p>
+            <%= f.number_field key,
+                               class: "crayons-textfield",
+                               value: Settings::RateLimit.public_send(key),
+                               min: field_hash[:min],
+                               placeholder: field_hash[:placeholder] %>
+          </div>
+        <% end %>
+
+        <div class="crayons-field">
+          <%= admin_config_label :spam_trigger_terms, model: Settings::RateLimit %>
+          <%= admin_config_description Constants::Settings::RateLimit::DETAILS[:spam_trigger_terms][:description] %>
+          <%= f.text_area :spam_trigger_terms,
+                          class: "crayons-textfield",
+                          value: Settings::RateLimit.spam_trigger_terms.join(","),
+                          placeholder: Constants::Settings::RateLimit::DETAILS[:spam_trigger_terms][:placeholder] %>
+        </div>
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>
+
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Social Media",
+                 state: "collapse",
+                 target: "socialMediaBodyContainer",
+                 expanded: false
+               } %>
+    <div id="socialMediaBodyContainer" class="card-body collapse hide" aria-labelledby="socialMediaBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :twitter_hashtag %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:twitter_hashtag][:description] %>
+          <%= f.text_field :twitter_hashtag,
+                           class: "crayons-textfield",
+                           value: Settings::General.twitter_hashtag.to_s,
+                           placeholder: Constants::Settings::General::DETAILS[:twitter_hashtag][:placeholder] %>
+        </div>
+        <%= f.fields_for :social_media_handles do |social_media_field| %>
+          <% Settings::General.social_media_handles.each do |platform, username| %>
+            <div class="crayons-field">
+              <%= admin_config_label platform %>
+              <p class="crayons-field__description">
+              <%= platform.capitalize %> username
+              </p>
+              <%= social_media_field.text_field platform,
+                                                class: "crayons-textfield",
+                                                value: Settings::General.social_media_handles[platform],
+                                                placeholder: "" %>
+            </div>
+          <% end %>
+        <% end %>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,22 @@
+<%= form_for(Settings::SMTP.new, url: admin_settings_smtp_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= 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">
+      <fieldset class="grid gap-4">
+        <% Settings::SMTP::OPTIONS.each do |config_key| %>
+          <div class="crayons-field">
+            <%= admin_config_label config_key %>
+            <%= admin_config_description Constants::Settings::SMTP::DETAILS[config_key][:description] %>
+            <%= f.text_field config_key,
+                             class: "crayons-textfield",
+                             value: Settings::SMTP.public_send(config_key),
+                             placeholder: Constants::Settings::SMTP::DETAILS[config_key][:placeholder] %>
+
+          </div>
+        <% end %>
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,25 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Sponsors",
+                 state: "collapse",
+                 target: "sponsorsContainer",
+                 expanded: false
+               } %>
+    <div id="sponsorsContainer" class="card-body collapse hide" aria-labelledby="sponsorsContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :sponsor_headline %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:sponsor_headline][:description] %>
+          <%= f.text_field :sponsor_headline,
+                           class: "crayons-textfield",
+                           value: Settings::General.sponsor_headline,
+                           placeholder: Constants::Settings::General::DETAILS[:sponsor_headline][:placeholder] %>
+        </div>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,26 @@
+<%= form_for(Settings::General.new, url: admin_settings_general_settings_path) do |f| %>
+  <div class="card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "Tags",
+                 state: "collapse",
+                 target: "tagsBodyContainer",
+                 expanded: false
+               } %>
+    <div id="tagsBodyContainer" class="card-body collapse hide" aria-labelledby="tagsBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-field">
+          <%= admin_config_label :sidebar_tags %>
+          <%= admin_config_description Constants::Settings::General::DETAILS[:sidebar_tags][:description] %>
+          <%= f.text_field :sidebar_tags,
+                           class: "crayons-textfield",
+                           value: Settings::General.sidebar_tags.join(","),
+                           placeholder: Constants::Settings::General::DETAILS[:sidebar_tags][:placeholder],
+                           pattern: "[a-z0-9,]+" %>
+        </div>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,79 @@
+<%= form_for(Settings::UserExperience.new, url: admin_settings_user_experiences_path) do |f| %>
+  <div class=" card mt-3">
+    <%= render partial: "admin/shared/card_header",
+               locals: {
+                 header: "User Experience and Brand",
+                 state: "collapse",
+                 target: "uxBodyContainer",
+                 expanded: false
+               } %>
+    <div id="uxBodyContainer" class="card-body collapse hide" aria-labelledby="uxBodyContainer">
+      <fieldset class="grid gap-4">
+        <div class="crayons-fieldx">
+          <%= admin_config_label :feed_style, model: Settings::UserExperience %>
+          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:feed_style][:description] %>
+          <%= f.text_field :feed_style,
+                           class: "crayons-textfield",
+                           value: Settings::UserExperience.feed_style,
+                           placeholder: Constants::Settings::UserExperience::DETAILS[:feed_style][:placeholder] %>
+        </div>
+        <div class="crayons-field">
+          <%= admin_config_label :feed_strategy, model: Settings::UserExperience %>
+          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:feed_strategy][:description] %>
+          <%= f.text_field :feed_strategy,
+                           class: "crayons-textfield",
+                           value: Settings::UserExperience.feed_strategy,
+                           placeholder: Constants::Settings::UserExperience::DETAILS[:feed_strategy][:placeholder] %>
+        </div>
+        <div class="crayons-field">
+          <%= admin_config_label :tag_feed_minimum_score, model: Settings::UserExperience %>
+          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:tag_feed_minimum_score][:description] %>
+          <%= f.number_field :tag_feed_minimum_score,
+                             class: "crayons-textfield",
+                             value: Settings::UserExperience.tag_feed_minimum_score,
+                             placeholder: Constants::Settings::UserExperience::DETAILS[:tag_feed_minimum_score][:placeholder] %>
+        </div>
+        <div class="crayons-field">
+          <%= admin_config_label :home_feed_minimum_score, model: Settings::UserExperience %>
+          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:home_feed_minimum_score][:description] %>
+          <%= f.number_field :home_feed_minimum_score,
+                             class: "crayons-textfield",
+                             value: Settings::UserExperience.home_feed_minimum_score,
+                             placeholder: Constants::Settings::UserExperience::DETAILS[:home_feed_minimum_score][:placeholder] %>
+        </div>
+        <div class="crayons-field">
+          <%= admin_config_label :default_font, model: Settings::UserExperience %>
+          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:default_font][:description] %>
+          <%= select_tag "settings_user_experience[default_font]",
+                         options_for_select(
+                           [%w[sans-serif sans_serif], %w[serif serif], %w[open-dyslexic open_dyslexic]],
+                           Settings::UserExperience.default_font,
+                         ),
+                         multiple: false,
+                         class: "selectpicker" %>
+        </div>
+        <div class="crayons-field">
+          <%= admin_config_label :primary_brand_color_hex, model: Settings::UserExperience %>
+          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:primary_brand_color_hex][:description] %>
+          <%= f.color_field :primary_brand_color_hex,
+                            class: "crayons-color-selector",
+                            value: Settings::UserExperience.primary_brand_color_hex,
+                            pattern: "^#+([a-fA-F0-9]{6})$",
+                            placeholder: Constants::Settings::UserExperience::DETAILS[:primary_brand_color_hex][:placeholder] %>
+        </div>
+        <div class="crayons-field crayons-field--checkbox">
+          <%= f.check_box :public, checked: Settings::UserExperience.public, class: "crayons-checkbox" %>
+          <div class="mt-0">
+            <%= admin_config_label :public, model: Settings::UserExperience %>
+            <p class="crayons-field__description">
+            Are most of the site pages (e.g. posts, profiles) public? <strong>Please take precaution when changing this setting.</strong>
+            </p>
+          </div>
+        </div>
+
+        <%= render "form_submission", f: f %>
+      </fieldset>
+    </div>
+  </div>
+<% end %>
+</div>

app/views/comments/_form.html.erb

@@ -42,7 +42,7 @@
                       id: "text-area",
                       required: true,
                       class: "crayons-textfield comment-textarea crayons-textfield--ghost",
-                      'aria-label': "Add a comment to the discussion" %>
+                      "aria-label": "Add a comment to the discussion" %>
       <div class="comment-form__toolbar">
         <div class="editor-image-upload">
           <input type="file" id="image-upload-main" name="file" accept="image/*" style="display:none">