Make a good part of the app localizable and add French translations (#325)

Co-authored-by: Yohan Boniface <yohanboniface@free.fr>

app/client/ui/ApiKey.ts

@@ -1,9 +1,12 @@
+import { makeT } from 'app/client/lib/localization';
 import { basicButton, textButton } from 'app/client/ui2018/buttons';
 import { theme, vars } from 'app/client/ui2018/cssVars';
 import { icon } from 'app/client/ui2018/icons';
 import { confirmModal } from 'app/client/ui2018/modals';
 import { Disposable, dom, IDomArgs, makeTestId, Observable, observable, styled } from 'grainjs';
 
+const t = makeT('ApiKey');
+
 interface IWidgetOptions {
   apiKey: Observable<string>;
   onDelete: () => Promise<void>;
@@ -52,7 +55,7 @@ export class ApiKey extends Disposable {
             },
             dom.attr('type', (use) => use(this._isHidden) ? 'password' : 'text'),
             testId('key'),
-            {title: 'Click to show'},
+            {title: t('ClickToShow')},
             dom.on('click', (_ev, el) => {
               this._isHidden.set(false);
               setTimeout(() => el.select(), 0);
@@ -64,7 +67,7 @@ export class ApiKey extends Disposable {
             this._inputArgs
           ),
           cssTextBtn(
-            cssTextBtnIcon('Remove'), 'Remove',
+            cssTextBtnIcon('Remove'), t('Remove'),
             dom.on('click', () => this._showRemoveKeyModal()),
             testId('delete'),
             dom.boolAttr('disabled', (use) => use(this._loading) || this._anonymous)
@@ -73,10 +76,9 @@ export class ApiKey extends Disposable {
         description(this._getDescription(), testId('description')),
       )),
       dom.maybe((use) => !(use(this._apiKey) || this._anonymous), () => [
-        basicButton('Create', dom.on('click', () => this._onCreate()), testId('create'),
+        basicButton(t('Create'), dom.on('click', () => this._onCreate()), testId('create'),
           dom.boolAttr('disabled', this._loading)),
-        description('By generating an API key, you will be able to make API calls '
-          + 'for your own account.', testId('description')),
+        description(t('ByGenerating'), testId('description')),
       ]),
     );
   }
@@ -101,20 +103,16 @@ export class ApiKey extends Disposable {
   }
 
   private _getDescription(): string {
-    if (!this._anonymous) {
-      return 'This API key can be used to access your account via the API. '
-        + 'Don’t share your API key with anyone.';
-    } else {
-      return 'This API key can be used to access this account anonymously via the API.';
-    }
+    return t(
+      !this._anonymous ? 'OwnAPIKey' : 'AnonymousAPIkey'
+    );
   }
 
   private _showRemoveKeyModal(): void {
     confirmModal(
-      `Remove API Key`, 'Remove',
+      t('RemoveAPIKey'), t('Remove'),
       () => this._onDelete(),
-      `You're about to delete an API key. This will cause all future ` +
-      `requests using this API key to be rejected. Do you still want to delete?`
+      t("AboutToDeleteAPIKey")
     );
   }
 }