Start I18n Internationalization setup (#276)

* start internationalization_setup

* add passwords views translations

* add account views translations

* fix translations

* temporary disable i18n used key

app/views/accounts/_account_type.html.erb

@@ -4,6 +4,6 @@
     <span class="flex w-10 h-10 shrink-0 grow-0 items-center justify-center rounded-xl <%= bg_color %> mb-2">
       <%= inline_svg_tag(icon, class: "#{text_color} stroke-current") %>
     </span>
-    <%= type.type_name %>
+    <%= type.model_name.human %>
   <% end %>
 </div>

app/views/accounts/index.html.erb

@@ -1,5 +1,5 @@
 
-<h2 class="text-2xl font-semibold font-display">Cash</h2>
+<h2 class="text-2xl font-semibold font-display"><%= t('.title')%></h2>
 <h3 class="mt-1 mb-4 text-sm text-gray-500"><%#= number_to_currency Current.family.cash_balance %></h3>
 
 <% Current.family.accounts.each do |account| %>
@@ -8,7 +8,7 @@
         <%= account.name %>
       </div>
       <div class="flex items-center text-sm">
-        <%= account.accountable %>
+        <%= account.accountable.model_name.human %>
       </div>
       <p class="text-sm text-right">
         <span class="block mb-1"><%= humanized_money_with_symbol account.balance %></span>

app/views/accounts/new.html.erb

@@ -1,4 +1,4 @@
-<h1 class="text-3xl font-semibold font-display">Add an account</h1>
+<h1 class="text-3xl font-semibold font-display"><%= t('.title')%></h1>
 
 <% if params[:type].blank? || Account.accountable_types.include?("Account::#{params[:type]}") == false %>
   <div class="grid grid-cols-2 gap-4 mt-8 text-sm sm:grid-cols-3 md:grid-cols-4">
@@ -16,7 +16,7 @@
       <%= link_to new_account_path, class: "" do %>
         <%= inline_svg_tag('icon-arrow-left.svg', class: 'text-gray-500 fill-current') %>
       <% end %>
-    <h2 class="text-2xl font-semibold font-display">Enter <%= params[:type] %> account</h2>
+    <h2 class="text-2xl font-semibold font-display"><%= t('.enter_type_account', type: @account.accountable_class.model_name.human.downcase ) %></h2>
   </div>
 
   <%= form_with model: @account, url: accounts_path, scope: :account, html: { class: "space-y-4" } do |f| %>
@@ -24,16 +24,17 @@
 
     <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
       <%# <span class="absolute px-2 py-1 text-xs font-medium text-gray-400 uppercase bg-gray-200 rounded-full opacity-50 right-3">Optional</span> %>
-      <label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Name</label>
-      <%= f.text_field :name, placeholder: "Account name", required: 'required', class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
+      <%= f.label :name, class: 'block text-sm font-medium opacity-50 focus-within:opacity-100'  %>
+      <%= f.text_field :name, placeholder: t('.account_name_placeholder'), required: 'required', class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
     </div>
 
     <%= render "accounts/#{permitted_accountable_partial(@account.accountable_type)}", f: f %>
 
     <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
-      <label for="account_balance" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Balance</label>
+
+      <%= f.label :balance, class: 'block text-sm font-medium opacity-50 focus-within:opacity-100' %>
       <div class="flex">
-        <%= f.number_field :balance, placeholder: "$0.00", in: 0.00..100000000.00, step: :any, required: 'required', class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
+        <%= f.number_field :balance, placeholder: number_to_currency(0), in: 0.00..100000000.00, required: 'required', class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
       </div>
     </div>
 

app/views/layouts/application.html.erb

@@ -49,20 +49,20 @@
             <li>
               <%= link_to root_path, class: 'block hover:bg-gray-100 -ml-2 p-2 text-sm font-semibold text-gray-900 flex items-center rounded' do %>
                 <%= inline_svg_tag('icon-dashboard.svg', class: 'text-black stroke-current mr-2') %>
-                Dashboard
+                <%= t('.dashboard') %>
               <% end %>
             </li>
           </ul>
         </nav>
         <div class="flex flex-col mt-6">
           <div class="flex items-center justify-between">
-            <span class="text-xs">Accounts</span>
-            <%= link_to new_account_path, class: 'block hover:bg-gray-100 p-2 text-sm font-semibold text-gray-900 flex items-center rounded', title: "New account" do %>
+            <span class="text-xs"><%= t('.accounts') %></span>
+            <%= link_to new_account_path, class: 'block hover:bg-gray-100 p-2 text-sm font-semibold text-gray-900 flex items-center rounded', title: t('.new_accoount') do %>
               <%= inline_svg_tag('icon-add.svg', class: 'text-gray-500 fill-current') %>
             <% end %>
           </div>
           <div>
-            <h2 class="text-sm font-semibold font-display">Cash</h2>
+            <h2 class="text-sm font-semibold font-display"><%= t('.cache') %></h2>
 
             <% Current.family.accounts.each do |account| %>
               <div class="flex items-center justify-between py-2">

app/views/layouts/auth.html.erb

@@ -24,17 +24,17 @@
         <%= render "shared/logo" %>
 
         <h2 class="mt-6 text-3xl font-semibold tracking-tight text-center font-display">
-          <%= content_for?(:header_title) ? yield(:header_title).html_safe : "Your account" %>
+          <%= content_for?(:header_title) ? yield(:header_title).html_safe : t('.your_account') %>
         </h2>
 
         <% if controller_name == "sessions" %>
-          <p class="mt-2 text-sm text-center text-gray-600">
-            or <%= link_to "create an account", new_registration_path, class: 'font-medium text-gray-600 hover:text-gray-400 transition' %>
-          </p>
+        <p class="mt-2 text-sm text-center text-gray-600">
+          <%= t('.or') %> <%= link_to t('.sign_up'), new_registration_path, class: 'font-medium text-gray-600 hover:text-gray-400 transition' %>
+        </p>
         <% elsif controller_name == "registrations" %>
-          <p class="mt-2 text-sm text-center text-gray-600">
-            or <%= link_to "sign in to your account", new_session_path, class: 'font-medium text-gray-600 hover:text-gray-400 transition' %>
-          </p>
+        <p class="mt-2 text-sm text-center text-gray-600">
+          <%= t('.or') %> <%= link_to t('.sign_in'), new_session_path, class: 'font-medium text-gray-600 hover:text-gray-400 transition' %>
+        </p>
         <% end %>
 
       </div>
@@ -44,7 +44,7 @@
       </div>
 
       <div class="p-8 mt-2 text-center">
-        <p class="mt-6 text-sm text-black"><a href="/privacy" class="font-medium text-gray-600 hover:text-gray-400 transition">Privacy Policy</a> &bull; <a href="/terms" class="font-medium text-gray-600 hover:text-gray-400 transition">Terms of Service</a></p>
+        <p class="mt-6 text-sm text-black"><%= link_to t('.privacy_policy'), "/privacy", class: "font-medium text-gray-600 hover:text-gray-400 transition" %> &bull; <%= link_to t('.terms_of_service'), "/terms", class: "font-medium text-gray-600 hover:text-gray-400 transition" %></p>
       </div>
 
     </div>

app/views/pages/dashboard.html.erb

@@ -1 +1 @@
-<h1 class="text-3xl font-semibold font-display">Dashboard</h1>
+<h1 class="text-3xl font-semibold font-display"><%= t('.title')%></h1>

app/views/password_mailer/password_reset.html.erb

@@ -1 +1 @@
-<%= link_to "Reset your password", edit_password_reset_url(token: params[:token]) %> 
+<%= link_to t('.cta'), edit_password_reset_url(token: params[:token]) %>

app/views/password_resets/edit.html.erb

@@ -1,5 +1,5 @@
 <%
-  header_title "Reset password"
+  header_title t('.title')
 %>
 
 <%= form_with url: password_reset_path(token: params[:token]), html: {class: 'space-y-6'} do |form| %>
@@ -16,6 +16,6 @@
   </div>
 
   <div>
-    <%= form.submit "Reset Password", class: 'flex justify-center w-full px-4 py-3 text-sm font-medium text-white bg-black rounded-xl hover:bg-black focus:outline-none focus:ring-2 focus:ring-gray-200 shadow' %>
+    <%= form.submit t('.submit'), class: 'flex justify-center w-full px-4 py-3 text-sm font-medium text-white bg-black rounded-xl hover:bg-black focus:outline-none focus:ring-2 focus:ring-gray-200 shadow' %>
   </div>
 <% end %>

app/views/password_resets/new.html.erb

@@ -1,5 +1,5 @@
 <%
-  header_title "Reset password"
+  header_title t('.title')
 %>
 
 <%= form_with url: password_reset_path, html: {class: 'space-y-6'} do |form| %>
@@ -11,6 +11,6 @@
   </div>
 
   <div>
-    <%= form.submit "Reset password", class: 'flex justify-center w-full px-4 py-3 text-sm font-medium text-white bg-black rounded-xl hover:bg-black focus:outline-none focus:ring-2 focus:ring-gray-200 shadow' %>
+    <%= form.submit t('.submit'), class: 'flex justify-center w-full px-4 py-3 text-sm font-medium text-white bg-black rounded-xl hover:bg-black focus:outline-none focus:ring-2 focus:ring-gray-200 shadow' %>
   </div>
 <% end %>

app/views/passwords/edit.html.erb

@@ -1,15 +1,15 @@
-<h1>Update Password</h1>
+<h1><% t('.title')%></h1>
 
 <%= form_with model: Current.user, url: password_path do |form| %>
   <%= auth_messages form %>
 
   <div>
-    <%= form.label :password_challenge, "Current Password" %>
+    <%= form.label :password_challenge, t('.password_challenge') %>
     <%= form.password_field :password_challenge %>
   </div>
 
   <div>
-    <%= form.label :password, "New Password" %>
+    <%= form.label :password, t('.password') %>
     <%= form.password_field :password %>
   </div>
 
@@ -19,7 +19,6 @@
   </div>
 
   <div>
-    <%= form.submit 'Update Password' %>
+    <%= form.submit t('.submit') %>
   </div>
 <% end %>
-

app/views/registrations/new.html.erb

@@ -1,5 +1,5 @@
 <%
-  header_title "Create an account"
+  header_title t('.title')
 %>
 
 <%= form_with model: @user, url: registration_path, html: {class: 'space-y-6'} do |form| %>
@@ -11,23 +11,23 @@
   </div>
 
   <div class="relative border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
-    <%= form.label :password, "Password", class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
+    <%= form.label :password, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
     <%= form.password_field :password, autocomplete: "new-password", required: 'required', class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
   </div>
 
   <div class="relative border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
-    <%= form.label :password_confirmation, "Password confirmation", class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
+    <%= form.label :password_confirmation, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
     <%= form.password_field :password_confirmation, autocomplete: "new-password", required: 'required', class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
   </div>
 
   <% if hosted_app? %>
     <div class="bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100 relative border border-gray-100">
-      <%= form.label :invite_code, "Invite code", class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
+      <%= form.label :invite_code, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
       <%= form.password_field :invite_code, required: 'required', class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
     </div>
   <% end %>
 
   <div>
-    <%= form.submit "Continue", class: 'cursor-pointer flex justify-center w-full px-4 py-3 text-sm font-medium text-white bg-black rounded-xl hover:bg-black focus:outline-none focus:ring-2 focus:ring-gray-200 shadow' %>
+    <%= form.submit class: 'cursor-pointer flex justify-center w-full px-4 py-3 text-sm font-medium text-white bg-black rounded-xl hover:bg-black focus:outline-none focus:ring-2 focus:ring-gray-200 shadow' %>
   </div>
 <% end %>

app/views/sessions/new.html.erb

@@ -1,25 +1,25 @@
 <%
-  header_title "Sign in to your account"
+  header_title t('.title')
 %>
 
 <%= form_with url: session_path, html: {class: 'space-y-6'} do |form| %>
   <%= auth_messages form %>
 
   <div class="relative border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
-    <%= form.label :email, "Email address", class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
-    <%= form.email_field :email, autofocus: false, autocomplete: "email", required: 'required', placeholder: 'you@example.com', class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
+    <%= form.label :email, t('.email'), class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
+    <%= form.email_field :email, autofocus: false, autocomplete: "email", required: 'required', placeholder:  t('.email_placeholder'), class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
   </div>
 
   <div class="relative border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
-    <%= form.label :password, "Password", class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
+    <%= form.label :password, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
     <%= form.password_field :password, required: 'required', class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
   </div>
 
   <div>
-    <%= form.submit "Log in", class: 'cursor-pointer flex justify-center w-full px-4 py-3 text-sm font-medium text-white bg-black rounded-xl hover:bg-black focus:outline-none focus:ring-2 focus:ring-gray-200 shadow' %>
+    <%= form.submit t('.submit'), class: 'cursor-pointer flex justify-center w-full px-4 py-3 text-sm font-medium text-white bg-black rounded-xl hover:bg-black focus:outline-none focus:ring-2 focus:ring-gray-200 shadow' %>
   </div>
 <% end %>
 
 <div class="mt-6 text-center">
-  <p class="text-sm text-gray-600">Forgot your password? <%= link_to "Reset it", new_password_reset_path, class: 'font-medium text-gray-600 hover:text-gray-400 transition' %></p>
+  <p class="text-sm text-gray-600"><%= t('.forgot_password') %> <%= link_to t('.reset_password'), new_password_reset_path, class: 'font-medium text-gray-600 hover:text-gray-400 transition' %></p>
 </div>