Merge pull request #102 from Tietokilta/feature/93-ui-i18n

Add i18n for public UI

.env.example

@@ -46,11 +46,19 @@ FEATHERS_AUTH_SECRET=
 EDIT_TOKEN_SALT=
 
 
+# Time zone for both frontend and backend.
+APP_TIMEZONE=Europe/Helsinki
+
+
 # Mail settings
 
 # Mail sender
 MAIL_FROM=<[email protected]>
 
+# Default mail language. Mostly useful for the "promoted from queue" emails when they were created before
+# a version supporting language detection.
+MAIL_DEFAULT_LANG=fi
+
 # SMTP server host and credentials, if using direct SMTP.
 SMTP_HOST=''
 SMTP_PORT=587

docs/hacking.md

@@ -6,17 +6,30 @@ This document presents a few ways you might want to use Ilmomasiina outside our
 
 To embed events on your site, there are a few options:
 
-- Import ready-made components from `ilmomasiina-components`.
+### Route components
 
-  In order to allow style customization, styles are not imported by our TS files. You'll need to `@use` either
-  `_all.scss` or individual component styles manually. You can
-  [override variables](https://sass-lang.com/documentation/at-rules/use#reassigning-variables) from `_definitions.scss`
-  before that.
+The simplest option is to import ready-made route components from `ilmomasiina-components`.
 
-  In addition, you'll want to import suitable (or all) parts of Bootstrap 4's SCSS. This works best if you have a
-  Bootstrap 4 based app, or if you import Bootstrap nested inside your own wrapper CSS class.
-- Import the state hooks from `ilmomasiina-components` and write your own React frontend.
-- Go fully custom with API models from `ilmomasiina-models` (see [API](#api)).
+In order to allow style customization, styles are not imported by our TS files. You'll need to `@use` either
+`_all.scss` or individual component styles manually. You can
+[override variables](https://sass-lang.com/documentation/at-rules/use#reassigning-variables) from `_definitions.scss`
+before that.
+
+In addition, you'll want to import suitable (or all) parts of Bootstrap 4's SCSS. This works best if you have a
+Bootstrap 4 based app, or if you import Bootstrap nested inside your own wrapper CSS class.
+
+The exported route components ()`Events`, `SingleEvent`, `EditSignup`) are already wrapped in `<I18nProvider>`,
+which is an `I18nextProvider` with the exported `i18n` object that contains the translations for the routes.
+You must call `init()` on the latter to initialize it. You can call `changeLanguage` on it to set the language.
+
+### State hooks
+
+You can import the state hooks from `ilmomasiina-components` and write your own React frontend. This will free you from
+using Bootstrap at all.
+
+### API models
+
+You can also go fully custom and only import the API models from `ilmomasiina-models` (see [API](#api)).
 
 ## App customization
 

docs/project-structure.md

@@ -83,6 +83,7 @@ Libraries:
 - [Redux](https://redux.js.org/) and [React Redux](https://react-redux.js.org/)
     - Some state is handled locally, if there's no need to share it between components
 - [React Router](https://reactrouter.com/)
+- [i18next](https://www.i18next.com/) for internationalization
 - [Formik](https://formik.org/)
 - [MomentJS](https://momentjs.com/) - will transition to something else in the future
 

packages/ilmomasiina-backend/emails/en/confirmation.pug

@@ -0,0 +1,23 @@
+extends ../layout.pug
+
+block mainContent
+  div.content-block
+    p.bodyText #{event.verificationEmail}
+  div.content-block
+    p.bodyText Event details:
+    ul
+      li #[strong Event:] #{event.title}
+      li #[strong Location:] #{event.location}
+      if date
+        li #[strong Time:] #{date}
+  div.content-block
+    p.bodyText Signup details:
+    ul
+      if name
+        li #[strong Name:] #{name}
+      li #[strong Email:] #{email}
+      li #[strong Quota:] #{quota}
+      each val in answers
+        li #[strong #{val.label}:] #{val.answer}
+  div.content-block
+    p.bodyText If you want to edit or cancel your signup, you can do it by clicking #[a(href=cancelLink) this link].

packages/ilmomasiina-backend/emails/en/newUser.pug

@@ -0,0 +1,9 @@
+extends ../layout.pug
+
+block mainContent
+  div.content-block
+    p.bodyText Ilmomasiina admin credentials have been created for you.
+    ul
+      li #[strong Email:] #{email}
+      li #[strong Password:] #{password}
+  p.bodyText You can log in at #[a(href=siteUrl) #{siteUrl}].

packages/ilmomasiina-backend/emails/en/queueMail.pug

@@ -0,0 +1,14 @@
+extends ../layout.pug
+
+block mainContent
+  div.content-block
+    p.bodyText Your signup to #{event.title} was accepted from the queue.
+  div.content-block
+    p.bodyText Event details:
+    ul
+      li #[strong Event:] #{event.title}
+      li #[strong Location:] #{event.location}
+      if date
+        li #[strong Time:] #{date}
+  div.content-block
+    p.bodyText If you want to edit or cancel your signup, you can do it by clicking #[a(href=cancelLink) this link].

packages/ilmomasiina-backend/emails/en/resetPassword.pug

@@ -0,0 +1,9 @@
+extends ../layout.pug
+
+block mainContent
+  div.content-block
+    p.bodyText Salasanasi Ilmomasiinaan on nollattu.
+    ul
+      li #[strong Sähköposti:] #{email}
+      li #[strong Uusi salasana:] #{password}
+  p.bodyText Voit kirjautua sisään osoitteessa #[a(href=siteUrl) #{siteUrl}].

packages/ilmomasiina-backend/emails/fi/confirmation.pug

@@ -0,0 +1,23 @@
+extends ../layout.pug
+
+block mainContent
+  div.content-block
+    p.bodyText #{event.verificationEmail}
+  div.content-block
+    p.bodyText Tapahtuman tiedot:
+    ul
+      li #[strong Tapahtuma:] #{event.title}
+      li #[strong Sijainti:] #{event.location}
+      if date
+        li #[strong Aika:] #{date}
+  div.content-block
+    p.bodyText Ilmoittautumisesi tiedot:
+    ul
+      if name
+        li #[strong Nimi:] #{name}
+      li #[strong Sähköposti:] #{email}
+      li #[strong Kiintiö:] #{quota}
+      each val in answers
+        li #[strong #{val.label}:] #{val.answer}
+  div.content-block
+    p.bodyText Mikäli haluat muokata tai perua ilmoittautumisesi, voit tehdä sen painamalla tätä #[a(href=cancelLink) linkkiä].

packages/ilmomasiina-backend/emails/fi/newUser.pug

@@ -0,0 +1,9 @@
+extends ../layout.pug
+
+block mainContent
+  div.content-block
+    p.bodyText Sinulle on luotu admin-tunnukset Ilmomasiinaan.
+    ul
+      li #[strong Sähköposti:] #{email}
+      li #[strong Salasana:] #{password}
+  p.bodyText Voit kirjautua sisään osoitteessa #[a(href=siteUrl) #{siteUrl}].

packages/ilmomasiina-backend/emails/fi/queueMail.pug

@@ -0,0 +1,14 @@
+extends ../layout.pug
+
+block mainContent
+  div.content-block
+    p.bodyText Olet päässyt mukaan tapahtumaan #{event.title} varasijalta.
+  div.content-block
+    p.bodyText Tapahtuman tiedot:
+    ul
+      li #[strong Tapahtuma:] #{event.title}
+      li #[strong Sijainti:] #{event.location}
+      if date
+        li #[strong Aika:] #{date}
+  div.content-block
+    p.bodyText Mikäli haluat muokata tai perua ilmoittautumisesi, voit tehdä sen painamalla tätä #[a(href=cancelLink) linkkiä].

packages/ilmomasiina-backend/emails/fi/resetPassword.pug

@@ -0,0 +1,9 @@
+extends ../layout.pug
+
+block mainContent
+  div.content-block
+    p.bodyText Your password for Ilmomasiina has been reset.
+    ul
+      li #[strong Email:] #{email}
+      li #[strong New password:] #{password}
+  p.bodyText You can log in at #[a(href=siteUrl) #{siteUrl}].

packages/ilmomasiina-backend/package.json

@@ -50,6 +50,7 @@
     "fast-jwt": "^1.7.0",
     "fastify": "^4.3.0",
     "http-errors": "^2.0.0",
+    "i18next": "^22.4.11",
     "ics": "^2.35.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.3",

packages/ilmomasiina-backend/src/config.ts

@@ -73,6 +73,11 @@ const config = {
   brandingMailFooterLink: envString('BRANDING_MAIL_FOOTER_LINK'),
   /** Calendar name included in iCalendar exports. */
   icalCalendarName: envString('BRANDING_ICAL_CALENDAR_NAME', 'Ilmomasiina'),
+  /** Default language for emails, if no language is known for the signup. */
+  mailDefaultLang: envString('MAIL_DEFAULT_LANG', 'fi'),
+
+  /** Timezone used for emails. */
+  timezone: envString('APP_TIMEZONE', 'Europe/Helsinki'),
 
   /** Canonical base URL for the app. Includes $PATH_PREFIX, but NOT a final "/".
    *

packages/ilmomasiina-backend/src/i18n.ts

@@ -0,0 +1,17 @@
+import i18n from 'i18next';
+
+import config from './config';
+import * as en from './locales/en.json';
+import * as fi from './locales/fi.json';
+
+i18n.init({
+  lng: config.mailDefaultLang,
+  fallbackLng: config.mailDefaultLang,
+
+  resources: {
+    fi,
+    en,
+  },
+});
+
+export default i18n;

packages/ilmomasiina-backend/src/locales/en.json

@@ -0,0 +1,10 @@
+{
+  "translation": {
+    "dateFormat.general": "DD.MM.YYYY HH:mm",
+    "emails.confirmation.subject": "Edit confirmation: {{event}}",
+    "emails.editConfirmation.subject": "Signup confirmation: {{event}}",
+    "emails.newUser.subject": "User created for Ilmomasiina",
+    "emails.promotedFromQueue.subject": "You got into {{event}} from the queue",
+    "emails.resetPassword.subject": "Your Ilmomasiina password has been reset"
+  }
+}

packages/ilmomasiina-backend/src/locales/fi.json

@@ -0,0 +1,10 @@
+{
+  "translation": {
+    "dateFormat.general": "DD.MM.YYYY HH:mm",
+    "emails.confirmation.subject": "Muokkausvahvistus: {{event}}",
+    "emails.editConfirmation.subject": "Ilmoittautumisvahvistus: {{event}}",
+    "emails.newUser.subject": "Käyttäjätunnukset Ilmomasiinaan",
+    "emails.promotedFromQueue.subject": "Pääsit varasijalta tapahtumaan {{event}}",
+    "emails.resetPassword.subject": "Salasanasi Ilmomasiinaan on nollattu"
+  }
+}