Move all user-facing web copy into localization files

app/controllers/discourse_controller.rb

@@ -6,7 +6,7 @@ class DiscourseController < ApplicationController
   def sso
     if !current_user
       session[:discourse_url] = request.url
-      redirect_to new_ui_session_path(goto: request.path), notice: 'Please Log In before using SSO'
+      redirect_to new_ui_session_path(goto: request.path), notice: I18n.t(:login_before_sso_notice)
       return
     end
     secret = DISCOURSE_SSO_SECRET

app/controllers/ui/sessions_controller.rb

@@ -6,7 +6,7 @@ class SessionsController < ApplicationController
     require 'net/https'
 
     def new
-      @title = "Welcome!"
+      @title = I18n.t(:new_session_title)
       redirect_to ui_users_url if current_user
     end
 
@@ -29,11 +29,11 @@ def create
         if params[:goto].include? 'discourse'
           redirect_to session[:discourse_url]
         else
-          flash[:success] = "You have been successfully logged in!"
+          flash[:success] = I18n.t(:new_session_success)
           redirect_to (session[:user_return_to] || ui_users_path)
         end
       else
-        flash.now.alert = "Email or password is invalid"
+        flash.now.alert = I18n.t(:new_session_failure)
         render "new"
       end
     end
@@ -46,19 +46,19 @@ def reset_password_email
         authorize user, :request_password_reset?
         user.send_password_reset
       end
-      flash[:notice] = 'Please check your email to reset the password.'
+      flash[:notice] = I18n.t(:password_reset_notice)
     end
 
     def password_reset_landing
-      @title = "Change password"
+      @title = I18n.t(:password_reset_landing_title)
       @token = params[:token]
     end
 
     def change_password
       @token = params.require(:token)
 
       if params.require(:password) != params.require(:password_confirmation)
-        flash[:alert] ="Your password doesn't match the confirmation"
+        flash[:alert] = I18n.t(:password_reset_failure)
         render "password_reset_landing"
         return
       end
@@ -67,17 +67,17 @@ def change_password
       if @user
         authorize @user, :update_password?
         @user.update({ password: params.require(:password), password_reset_token: nil })
-        flash[:success] = "Changed password for: #{@user.username}"
+        flash[:success] = I18n.t(:password_reset_success, username: @user.username)
         redirect_to new_ui_session_path
       else
-        flash[:alert] = 'Your reset code might be too old or have been used before.'
+        flash[:alert] = I18n.t(:password_reset_invalid)
         render "password_reset_landing"
       end
     end
 
     def destroy
       session[:user_id] = nil
-      redirect_to login_url, notice: "Logged out!"
+      redirect_to login_url, notice: I18n.t(:destroy_session_success)
     end
   end
 end

app/controllers/ui/users_controller.rb

@@ -2,7 +2,7 @@ module Ui
   class UsersController < ApplicationController
     include SharedControllerMethods
     def index
-      @title = "User information"
+      @title = I18n.t(:users_index_title)
     end
   end
 end

app/views/layouts/_footer.html.erb

@@ -2,30 +2,30 @@
   <div class="container px-0">
     <div class="row d-flex flex-lg-row flex-column justify-content-lg-between mb-0 mb-lg-5 px-4 px-lg-0">
       <div class="w-100 w-lg-auto mb-5 mb-lg-0 mx-0 g-0">
-        <img style="height: 80px; pointer-events: auto;" src="<%= image_url("smartcitizen_logo2.svg") %>" alt="Smart Citizen">
+        <img style="height: 80px; pointer-events: auto;" src="<%= image_url("smartcitizen_logo2.svg") %>" alt="<%= t :footer_logo_alt %>">
       </div>
       <div class="w-100 w-lg-auto mb-3 mb-lg-0 mx-0 g-0">
         <div class="outlined-box p-3 row align-items-center width-lg-fit-content mx-1 mx-lg-0">
-          <div class="col-auto">Follow us</div>
+          <div class="col-auto"><%= t :footer_social_links %></div>
           <a class="col-auto" href="https://twitter.com/smartcitizenkit">
-            <img height="36" src="<%= image_url("tw.svg") %>" alt="Twitter" />
+            <img height="36" src="<%= image_url("tw.svg") %>" alt="<%= t :footer_twitter_alt %>" />
           </a>
           <a class="col-auto" href="https://www.facebook.com/smartcitizenBCN/">
-            <img height="36" src="<%= image_url("fb.svg") %>" alt="Facebook" />
+            <img height="36" src="<%= image_url("fb.svg") %>" alt="<%= t :footer_facebook_alt %>" />
           </a>
           <a class="col-auto" href="https://www.instagram.com/smartcitizenkit/">
-            <img height="36" src="<%= image_url("in.svg") %>" alt="Instagram" />
+            <img height="36" src="<%= image_url("in.svg") %>" alt="<%= t :footer_instagram_alt %>" />
           </a>
         </div>
       </div>
       <div class="w-100 w-lg-auto mb-5 mb-lg-0 mx-0 g-0">
         <div class="outlined-box p-3 row align-items-center width-lg-fit-content mx-1 mx-lg-0">
-          <div class="col-auto">A project by</div>
+          <div class="col-auto"><%= t :footer_attribution %></div>
           <div class="col-auto">
-            <img height="36" src="<%= image_url("logo_fablab_bcn_small.png") %>" alt="Fablab BCN" />
+            <img height="36" src="<%= image_url("logo_fablab_bcn_small.png") %>" alt="<%= t :footer_fablab_alt %>" />
           </div>
           <div class="col-auto">
-            <img height="16" src="<%= image_url("iaac.png") %>" alt="IAAC">
+            <img height="16" src="<%= image_url("iaac.png") %>" alt="<%= t :footer_iaac_alt %>">
           </div>
         </div>
       </div>
@@ -35,13 +35,13 @@
             <img height="48" src="<%= image_url("eu_flag.png") %>" alt="" />
           </div>
           <div class="col-auto d-flex justify-content-space-around flex-direction-column">
-            <p class="mb-0"><small>Smart Citizen has received funding from the<br />European Community’s H2020 Programme<br />under Grant Agreement No. 689954.</small></p>
+            <p class="mb-0"><small><%= t :footer_funding_html %></small></p>
           </div>
         </div>
       </div>
     </div>
     <div class="row text-lg-center px-3 px-lg-0 mx-0 g-0">
-      <p><small>Except where otherwise noted, content on this site by Smart Citizen® is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>. Check the <a rel="policy" href="https://smartcitizen.me/policy">Terms of use and Privacy Policy</a>.</small></p>
+      <p><small><%= t :footer_licence_html %></small></p>
     </div>
   </div>
 </footer>

app/views/layouts/_nav.html.erb

@@ -1,24 +1,24 @@
 <nav class="navbar navbar-dark navbar-expand-md bg-black m-2 sticky-top rounded-4">
   <div class="container px-4 px-md-0">
     <a class="navbar-brand" href="https://www.smartcitizen.me">
-      <img src="<%= image_url("smartcitizen_logo.svg") %>" alt="SmartCitizen" width="36" height ="36" />
+      <img src="<%= image_url("smartcitizen_logo.svg") %>" alt="<%= t :logo_alt %>" width="36" height ="36" />
     </a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenuToggle" aria-controls="navbarMenuToggle" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenuToggle" aria-controls="navbarMenuToggle" aria-expanded="false" aria-label="<%= t :hamburger_label %>">
       <i class="fas fa-bars"></i>
     </button>
     <div class="collapse navbar-collapse ms-auto" id="navbarMenuToggle">
       <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
         <li class="nav-item">
-          <a class="nav-link w-100 w-md-auto text-center" href="https://smartcitizen.me/kits/">Home</a>
+          <a class="nav-link w-100 w-md-auto text-center" href="<%= t :home_link_url %>"><%= t :home_link_text %></a>
         </li>
         <li class="nav-item">
-          <a class="nav-link w-100 w-md-auto text-center" href="https://docs.smartcitizen.me">Documentation</a>
+          <a class="nav-link w-100 w-md-auto text-center" href="<%= t :documentation_link_url%>"><%= t :documentation_link_text %></a>
         </li>
         <li class="nav-item">
-          <a class="nav-link w-100 w-md-auto text-center" href="https://forum.smartcitizen.me">Forum</a>
+          <a class="nav-link w-100 w-md-auto text-center" href="<%= t :forum_link_url %>"><%= t :forum_link_text %></a>
         </li>
         <li class="nav-item">
-          <a class="nav-link btn btn-navbar w-100 w-md-auto ms-md-3 mt-3 mt-md-0 mb-2 mb-md-0" href="https://smartcitizen.me#get-your-kit">Get your kit</a>
+          <a class="nav-link btn btn-navbar w-100 w-md-auto ms-md-3 mt-3 mt-md-0 mb-2 mb-md-0" href="<%= t :kit_link_url %>"><%= t :kit_link_text %></a>
         </li>
       </ul>
     </div>

app/views/layouts/application.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= ["SmartCitizen Platform", @title].compact.join(" – ") %></title>
+    <title><%= [t(:title), @title].compact.join(" – ") %></title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
@@ -11,7 +11,7 @@
   <body>
     <%= render partial: "layouts/flashes" %>
     <%= render partial: "layouts/nav" %>
-    <div class="container mx-2 mx-md-auto w-auto w-md-100 mt-5 g-0">
+    <div class="container mx-2 mx-md-auto w-auto w-md-100 mt-2 md-md-5 g-0">
       <div class="bg-white w-100 px-4 pb-5 pt-4 border border-thick">
         <% if @title %>
           <header>

app/views/ui/sessions/new.html.erb

@@ -3,16 +3,16 @@
         <%= f.password_field :password %>
     <%= f.hidden_field :goto, value: params[:goto] %>
     <div class="mt-4">
-      <%= f.primary "Sign into your account", class: "btn btn-primary w-100 w-md-auto" %>
+      <%= f.primary t(:new_session_submit), class: "btn btn-primary w-100 w-md-auto" %>
     </div>
     <div class="row mt-4">
       <div class="col-md-6">
-        <h4 class="my-3">Don't have an account?</h4>
-        <a class="btn btn-secondary w-100 w-md-auto" href="https://www.smartcitizen.me/signup">Sign up</a>
+        <h4 class="my-3"><%= t :new_account_heading %></h4>
+        <a class="btn btn-secondary w-100 w-md-auto" href="https://www.smartcitizen.me/signup"><%= t :new_account_submit %></a>
       </div>
       <div class="col-md-6">
-        <h4 class="my-3">Forgot your password?</h4>
-        <%= f.submit "Reset password",  name: 'send_password_email', class: "btn btn-secondary w-100 w-md-auto" %>
+        <h4 class="my-3"><%= t :forgot_password_heading %></h4>
+        <%= f.submit t(:forgot_password_submit),  name: 'send_password_email', class: "btn btn-secondary w-100 w-md-auto" %>
       </div>
     </div>
 <% end %>

app/views/ui/users/index.html.erb

@@ -1,9 +1,9 @@
 <% if current_user %>
-  <p>Logged in as <%= current_user.email %>. </p>
-  <p>Your access token:
+  <p><%= t :users_index_logged_in_message, username: current_user.username %></p>
+  <p><%= t :users_index_access_token_label  %>
   <br /><code><%= current_user.access_token.token %></code></p>
-  <p><%= link_to "Log out", logout_path, class: "btn btn-secondary w-100 w-md-auto" %></p>
+  <p><%= link_to t(:users_index_log_out_submit), logout_path, class: "btn btn-secondary w-100 w-md-auto" %></p>
 <% else %>
-  <p>Not logged in!</p>
-  <a class="btn btn-secondary w-100 w-md-auto" href="<%= new_ui_session_path %>">Go back</a>
+  <p><%= t :users_index_not_logged_in_message %></p>
+  <a class="btn btn-secondary w-100 w-md-auto" href="<%= new_ui_session_path %>"><%= t :users_index_log_in_link %></a>
 <% end %>

config/application.rb

@@ -54,6 +54,7 @@ class Application < Rails::Application
     config.active_record.default_timezone = :utc
 
     config.i18n.default_locale = :en
+    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}')]
 
     config.exceptions_app = self.routes
 

config/locales/controllers/en.yml

@@ -0,0 +1,13 @@
+en:
+    login_before_sso_notice: "Please log in before using SSO"
+    new_session_title: "Welcome!"
+    new_session_success:  "You have been successfully logged in!"
+    new_session_failure: "Email or password is invalid."
+    password_reset_notice: "Please check your email to reset the password."
+    password_reset_landing_title: "Change password"
+    password_reset_failure: "Your password doesn't match the confirmation."
+    password_reset_success: "Changed password for: %{username}."
+    password_reset_invalid: "Your reset code might be too old or have been used before."
+    destroy_session_success: "Logged out!"
+    users_index_title: "User information"
+

config/locales/users/en.yml

@@ -0,0 +1,6 @@
+en:
+  users_index_logged_in_message: "Logged in as %{username}."
+  users_index_access_token_label: "Your access token:"
+  users_index_log_out_submit: "Log out"
+  users_index_not_logged_in_message: "Not logged in!"
+  users_index_log_in_link: "Go back"

config/locales/views/footer/en.yml

@@ -0,0 +1,11 @@
+en:
+  footer_logo_alt: "Smart Citizen"
+  footer_social_links: "Follow us"
+  footer_twitter_alt: "Twitter"
+  footer_facebook_alt: "Facebook"
+  footer_instagram_alt: "Instagram"
+  footer_attribution: "A project by"
+  footer_fablab_alt: "Fablab BCN"
+  footer_iaac_alt: "IAAC"
+  footer_funding_html: "Smart Citizen has received funding from the<br />European Community’s H2020 Programme<br />under Grant Agreement No. 689954."
+  footer_licence_html: 'Except where otherwise noted, content on this site by Smart Citizen® is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.<br /> Check the <a rel="policy" href="https://smartcitizen.me/policy">Terms of use and Privacy Policy</a>.'

config/locales/views/layout/en.yml

@@ -0,0 +1,2 @@
+en:
+  title: "SmartCitizen platform"

config/locales/views/nav/en.yml

@@ -0,0 +1,11 @@
+en:
+  logo_alt: "SmartCitizen"
+  hamburger_label: "Toggle navigation"
+  home_link_url: "https://smartcitizen.me/kits/"
+  home_link_text: "Home"
+  documentation_link_url: "https://docs.smartcitizen.me"
+  documentation_link_text: "Documentation"
+  forum_link_url: "https://forum.smartcitizen.me"
+  forum_link_text: "Forum"
+  kit_link_url: "https://smartcitizen.me#get-your-kit"
+  kit_link_text: "Get your kit"

config/locales/views/sessions/en.yml

@@ -0,0 +1,6 @@
+en:
+  new_session_submit: "Sign into your account"
+  new_account_heading: "Don't have an account?"
+  new_account_submit: "Sign up"
+  forgot_password_heading: "Forgot your password?"
+  forgot_password_submit: "Reset password"

spec/features/session_management_spec.rb

@@ -99,7 +99,7 @@
     signature = OpenSSL::HMAC.hexdigest("sha256", secret, payload)
     visit "/discourse/sso?sso=#{CGI.escape(payload)}&sig=#{signature}"
     expect(page).to have_current_path(new_ui_session_path + "?goto=%2Fdiscourse%2Fsso")
-    expect(page).to have_content("Please Log In before using SSO")
+    expect(page).to have_content("Please log in before using SSO")
     fill_in "Username or email", with: user.email
     fill_in "Password", with: password
     begin