user settings i18n (forem#15098)

Co-authored-by: Nick Taylor <[email protected]>

app/controllers/users_controller.rb

@@ -267,7 +267,7 @@ def handle_settings_tab
       handle_integrations_tab
       handle_response_templates_tab
     else
-      not_found unless @tab.in?(Settings.tab_list.map { |t| t.downcase.tr(" ", "-") })
+      not_found unless @tab.in?(Constants::Settings::TAB_LIST.map { |t| t.downcase.tr(" ", "-") })
     end
   end
 

app/lib/constants/settings.rb

@@ -0,0 +1,13 @@
+module Constants
+  module Settings
+    TAB_LIST = %w[
+      Profile
+      Customization
+      Notifications
+      Account
+      Billing
+      Organization
+      Extensions
+    ].freeze
+  end
+end

app/views/users/_account.html.erb

@@ -6,38 +6,38 @@
 
 <div class="crayons-card crayons-card--content-rows">
   <header>
-    <h2 class="mb-2"><%= community_name %> API Keys</h2>
-    <p>You can generate personal API keys to use for authentication with the <%= community_name %> API.  The API is still in its beta stage. The <a href="https://developers.forem.com/api">documentation</a> contains further information.</a></p>
+    <h2 class="mb-2"><%= t("views.settings.account.api.heading", community: community_name) %></h2>
+    <p><%= t("views.settings.account.api.desc_html", community: community_name, doc: link_to(t("views.settings.account.api.doc"), "https://developers.forem.com/api")) %></p>
   </header>
 
   <div>
-    <h3 class="mb-2">Generate a new Key</h3>
+    <h3 class="mb-2"><%= t("views.settings.account.api.gen.heading") %></h3>
     <%= form_tag users_api_secrets_path, method: :post do %>
       <%= fields_for :api_secret do |api_secret| %>
         <div class="crayons-field mb-6">
-          <%= api_secret.label(:description, "Description", class: "crayons-field__label") %>
-          <p class="crayons-field__description">What's this API key for?</p>
-          <%= api_secret.text_field(:description, placeholder: "My Project Name", required: true, class: "crayons-textfield") %>
+          <%= api_secret.label(:description, t("views.settings.account.api.gen.label"), class: "crayons-field__label") %>
+          <p class="crayons-field__description"><% t("views.settings.account.api.gen.text") %></p>
+          <%= api_secret.text_field(:description, placeholder: t("views.settings.account.api.gen.placeholder"), required: true, class: "crayons-textfield") %>
         </div>
       <% end %>
-      <button class="crayons-btn crayon-btn--secondary" type="submit">Generate API Key</button>
+      <button class="crayons-btn crayon-btn--secondary" type="submit"><%= t("views.settings.account.api.gen.submit") %></button>
     <% end %>
   </div>
 
   <% unless @user.api_secrets.empty? %>
     <div>
-      <h3>Active API keys (never share these!)</h3>
+      <h3><%= t("views.settings.account.api.active.heading") %></h3>
 
       <% @user.api_secrets.order(created_at: :desc).each do |api_secret| %>
         <details class="p-4 mt-2 crayons-card crayons-card--secondary">
           <summary class="title fw-medium"><%= api_secret.description %></summary>
           <div class="flex pt-2">
             <div class="flex-1 pl-4">
               <p class="ff-monospace"><%= api_secret.secret %></p>
-              <p class="fs-s">Created: <time datetime="<%= api_secret.created_at.rfc3339 %>"><%= api_secret.created_at.to_s %></time></p>
+              <p class="fs-s"><%= t("views.settings.account.api.active.created", time: tag.time(api_secret.created_at.to_s, datetime: api_secret.created_at.rfc3339)) %></p>
             </div>
             <%= form_tag users_api_secret_path(api_secret.id), class: "api__secret__revoke", method: :delete do %>
-              <%= button_tag "Revoke", class: "crayons-btn crayons-btn--danger" %>
+              <%= button_tag t("views.settings.account.api.revoke"), class: "crayons-btn crayons-btn--danger" %>
             <% end %>
           </div>
         </details>
@@ -48,84 +48,79 @@
 
 <div class="crayons-card crayons-card--content-rows">
   <h2 class="crayons-subtitle-1">
-    Export content
+    <%= t("views.settings.account.export.heading") %>
   </h2>
 
   <% if @user.export_requested? %>
     <div class="crayons-notice crayons-notice--warning" aria-live="polite">
-      <p>You have recently requested an export of your content. Please check your email.</p>
+      <p><%= t("views.settings.account.export.requested") %></p>
     </div>
   <% else %>
-    <p class="-mt-2">You can request an export of all your content. Currently we only support the export of your posts and comments. They will be emailed to your inbox.</p>
+    <p class="-mt-2"><%= t("views.settings.account.export.desc") %></p>
 
     <%= form_for(@user, html: { id: nil }) do |f| %>
       <div class="crayons-field crayons-field--checkbox mb-6">
         <%= f.check_box :export_requested, class: "crayons-checkbox" %>
-        <%= f.label :export_requested, "Request an export of your content", class: "crayons-field__label" %>
+        <%= f.label :export_requested, t("views.settings.account.export.label"), class: "crayons-field__label" %>
       </div>
       <%= f.hidden_field :tab, value: @tab, id: nil %>
-      <div><button type="submit" class="crayons-btn">Submit Data Request</button></div>
+      <div><button type="submit" class="crayons-btn"><%= t("views.settings.account.export.submit") %></button></div>
     <% end %>
   <% end %>
 </div>
 
 <div class="crayons-card crayons-card--content-rows">
   <h2 class="crayons-subtitle-1 color-accent-danger">
-    Danger Zone
+    <%= t("views.settings.danger") %>
   </h2>
 
   <% if @user.identities.enabled.size > 1 %>
     <div class="grid gap-2">
-      <h3>Remove OAuth Associations</h3>
-      <p>You can remove one of your authentication methods. We'll still need one to authenticate you.</p>
-      <p>Removing an OAuth association will:</p>
+      <h3><%= t("views.settings.account.remove.heading") %></h3>
+      <p><%= t("views.settings.account.remove.desc1") %></p>
+      <p><%= t("views.settings.account.remove.desc2") %></p>
       <ul class="list-disc pl-6">
-        <li>remove your ability to sign in with that account</li>
-        <li>remove the associated URL from your profile</li>
+        <li><%= t("views.settings.account.remove.desc2a") %></li>
+        <li><%= t("views.settings.account.remove.desc2b") %></li>
       </ul>
       <p>
-        Note that this does not revoke our OAuth app access;
-        you will have to do so in your settings for the specific provider:
-
+        <%= t("views.settings.account.remove.desc3") %>
         <%= render partial: "users/account_providers_settings" %>
       </p>
     </div>
 
     <% authentication_enabled_providers_for_user.each do |provider| %>
-      <% onsubmit = "return confirm('Are you absolutely sure you want to remove your #{provider.official_name} account?');" %>
+      <% onsubmit = "return confirm('#{t('views.settings.account.remove.confirm', provider: provider.official_name)}');" %>
       <%= form_tag users_remove_identity_path, method: :delete, onsubmit: onsubmit do %>
         <%= hidden_field_tag :provider, provider.provider_name %>
 
         <button class="crayons-btn crayons-btn--danger crayons-btn--icon-left" type="submit">
           <%= inline_svg_tag("#{provider.provider_name}.svg", aria: true, class: "crayons-icon", title: provider.official_name) %>
-          Remove <%= provider.official_name %>
+          <%= t("views.settings.account.remove.submit", provider: provider.official_name) %>
         </button>
       <% end %>
     <% end %>
   <% end %>
 
   <div class="grid gap-2">
-    <h3>Delete account</h3>
+    <h3><%= t("views.settings.account.delete.heading") %></h3>
 
     <% if current_user.email? %>
       <%= form_tag user_request_destroy_path, method: :post, autocomplete: "off", id: "delete__account", class: "grid gap-2" do %>
-        <p>Deleting your account will:</p>
+        <p><%= t("views.settings.account.delete.desc1") %></p>
         <ul class="list-disc pl-6">
-          <li>Delete your profile, along with your authentication associations.
-
-            This does not include applications permissions. You will have to remove them yourself:
-
+          <li><%= t("views.settings.account.delete.desc1a") %>
             <%= render partial: "users/account_providers_settings" %>
           </li>
 
           <%# TODO: expand the delete messaging later %>
-          <li>Delete any and all content you have, such as articles, comments, or your reading list.</li>
-          <li>Allow your username to become available to anyone.</li>
+          <li><%= t("views.settings.account.delete.desc1b") %></li>
+          <li><%= t("views.settings.account.delete.desc1c") %></li>
         </ul>
-        <div><button class="crayons-btn crayons-btn--danger" id="delete__account__btn" type="submit">Delete Account</button></div>
+        <div><button class="crayons-btn crayons-btn--danger" id="delete__account__btn" type="submit"><%= t("views.settings.account.delete.submit") %></button></div>
       <% end %>
     <% else %>
-      <p>Please, <%= link_to "provide an email", "/settings/profile" %> to fully delete your account.</p>
+      <p><%= t("views.settings.account.delete.desc2_html", provide: link_to(t("views.settings.account.delete.provide"), "/settings/profile")) %></p>
     <% end %>
   </div>
 

app/views/users/_account_providers_emails.html.erb

@@ -1,15 +1,15 @@
 <div class="crayons-card crayons-card--content-rows" id="emails">
-  <h2>Account emails</h2>
+  <h2><%= t("views.settings.account.emails") %></h2>
   <ul class="list-none">
     <li class="mb-2">
-      <strong class="color-base-60">Primary email</strong>
+      <strong class="color-base-60"><%= t("views.settings.account.primary") %></strong>
       <span class="pl-2"><%= @user.email %></span>
     </li>
 
     <% @user.identities_enabled.each do |identity| %>
       <% provider = authentication_provider(identity.provider) %>
       <li class="mb-2">
-        <strong class="color-base-60"><%= provider.official_name %> email</strong>
+        <strong class="color-base-60"><%= t("views.settings.account.provider_email", provider: provider.official_name) %></strong>
         <span class="pl-2"><%= identity.email %></span>
       </li>
     <% end %>

app/views/users/_account_providers_settings.html.erb

@@ -1,5 +1,5 @@
 <ul>
   <% authentication_enabled_providers_for_user.each do |provider| %>
-    <li><a href="<%= provider.settings_url %>"><%= provider.official_name %> profile settings</a></li>
+    <li><a href="<%= provider.settings_url %>"><%= t("views.settings.account.provider_profile", provider: provider.official_name) %></a></li>
   <% end %>
 </ul>

app/views/users/_account_set_password.html.erb

@@ -1,29 +1,25 @@
 <div class="crayons-card crayons-card--content-rows">
   <header>
     <h2 class="crayons-subtitle-1">
-      Set new password
+      <%= t("views.settings.password.heading") %>
     </h2>
     <p class="color-base-70">
-    If your account was created using social account authentication, you may prefer to add an email
-    log in. If you signed up with a social media account, <a href="<%= new_user_password_path %>">
-      please reset the password</a> for your primary email address (<%= current_user.email %>) in
-    order to enable this. Please note that email login is in addition to social login rather than
-    a replacement for it, so your authenticated social account will continue to be linked to your
-    account.
+      <%= t("views.settings.password.desc_html", path: new_user_password_path, email: current_user.email) %>
+    </p>
   </header>
   <%= form_with(url: user_update_password_path, data: { testid: "update-password-form" }) do |f| %>
     <div class="crayons-field mb-4">
-      <%= f.label :current_password, class: "crayons-field__label" %>
+      <%= f.label :current_password, t("views.settings.password.current"), class: "crayons-field__label" %>
       <%= f.password_field :current_password, class: "crayons-textfield", autocomplete: "off", required: true %>
     </div>
     <div class="crayons-field mb-4">
-      <%= f.label :password, class: "crayons-field__label" %>
+      <%= f.label :password, t("views.settings.password.new"), class: "crayons-field__label" %>
       <%= f.password_field :password, class: "crayons-textfield", autocomplete: "off", required: true %>
     </div>
     <div class="crayons-field mb-4">
-      <%= f.label :password_confirmation, "Confirm new password", class: "crayons-field__label" %>
+      <%= f.label :password_confirmation, t("views.settings.password.confirm"), class: "crayons-field__label" %>
       <%= f.password_field :password_confirmation, autocomplete: "off", class: "crayons-textfield", required: true %>
     </div>
-    <button class="crayons-btn crayon-btn--secondary" type="submit">Set New Password</button>
+    <button class="crayons-btn crayon-btn--secondary" type="submit"><%= t("views.settings.password.submit") %></button>
   <% end %>
 </div>

app/views/users/_additional_authentication.html.erb

@@ -11,7 +11,7 @@
         <%= form_with url: provider.sign_in_path(state: "profile"), class: "flex w-100", local: true do |f| %>
           <%= f.button type: :submit, class: "crayons-btn crayons-btn--icon-left crayons-btn--brand-#{provider.provider_name} m-1" do %>
             <%= inline_svg_tag("#{provider.provider_name}.svg", aria: true, class: "crayons-icon", title: provider.provider_name) %>
-            Connect <%= provider.official_name %> Account
+            <%= t("views.settings.account.connect", provider: provider.official_name) %>
           <% end %>
         <% end %>
       <% end %>

app/views/users/_billing.html.erb

@@ -1,6 +1,6 @@
 <div class="crayons-card crayons-card--content-rows">
   <h2 class="crayons-subtitle-1">
-    Billing
+    <%= t("views.settings.billing.heading") %>
   </h2>
 
   <% if current_user.stripe_id_code.blank? %>
@@ -13,33 +13,33 @@
         <% end %>
       </article>
 
-      <button id="add-credit-card-button" class="crayons-btn credit-card-button" type="button">Add Credit Card</button>
+      <button id="add-credit-card-button" class="crayons-btn credit-card-button" type="button"><%= t("views.settings.billing.add") %></button>
     <% end %>
   <% else %>
-    <div class="billing-history-header">Your Credit Cards</div>
+    <div class="billing-history-header"><%= t("views.settings.billing.cards") %></div>
     <% @customer.sources.each do |source| %>
       <div class="billing-item">
-        <p><%= source.brand %> ending in <%= source.last4 %></p>
-        <p class="billing-item-detail">Expires <%= source.exp_month %> / <%= source.exp_year %></p>
+        <p><%= t("views.settings.billing.number", brand: source.brand, last: source.last4) %></p>
+        <p class="billing-item-detail"><%= t("views.settings.billing.exp", month: source.exp_month, year: source.exp_year) %></p>
         <% if source.id == @customer.default_source %>
-          <p class="billing-item-detail billing-item-green">primary</p>
+          <p class="billing-item-detail billing-item-green"><%= t("views.settings.billing.primary") %></p>
           <%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
-            <button class="crayons-btn crayons-btn--danger">Remove card</button>
+            <button class="crayons-btn crayons-btn--danger"><%= t("views.settings.billing.remove") %></button>
           <% end %>
         <% else %>
           <%= form_tag "/stripe_active_cards/#{source.id}", method: :patch do %>
-            <button class="crayons-btn crayons-btn--secondary">Make primary</button>
+            <button class="crayons-btn crayons-btn--secondary"><%= t("views.settings.billing.make") %></button>
           <% end %>
           <%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
-            <button class="crayons-btn crayons-btn--danger">Remove card</button>
+            <button class="crayons-btn crayons-btn--danger"><%= t("views.settings.billing.remove") %></button>
           <% end %>
         <% end %>
       </div>
     <% end %>
     <%= form_tag "/stripe_active_cards", id: "credit-card-form", method: :post do %>
       <br />
       <div class="stripe-button-wrapper">
-        <button id="add-credit-card-button" class="crayons-btn credit-card-button">+ Add Another Credit Card</button>
+        <button id="add-credit-card-button" class="crayons-btn credit-card-button"><%= t("views.settings.billing.another") %></button>
       </div>
     <% end %>
   <% end %>
@@ -61,10 +61,10 @@
       document.getElementById('add-credit-card-button').addEventListener('click', function (e) {
         // Open Checkout with further options:
         handler.open({
-          description: 'Add Credit Card',
+          description: '<%= t("views.settings.billing.add") %>',
           amount: 0,
           email: "<%= current_user.email %>",
-          panelLabel: "Add Card",
+          panelLabel: "<%= t("views.settings.billing.label") %>",
           allowRememberMe: false,
           zipCode: true,
         });