Various small fixes to translations, login flow, docs, ...

UI/ImageUploadFlow.ts

@@ -10,6 +10,7 @@ import {VerticalCombine} from "./Base/VerticalCombine";
 import {State} from "../State";
 import {UIEventSource} from "../Logic/UIEventSource";
 import {Imgur} from "../Logic/Web/Imgur";
+import {SubtleButton} from "./Base/SubtleButton";
 
 export class ImageUploadFlow extends UIElement {
     private _licensePicker: UIElement;
@@ -18,7 +19,8 @@ export class ImageUploadFlow extends UIElement {
     private _didFail: UIEventSource<boolean> = new UIEventSource<boolean>(false);
     private _allDone: UIEventSource<boolean> = new UIEventSource<boolean>(false);
     private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) };
-
+    private _connectButton : UIElement;
+    
     constructor(
         preferedLicense: UIEventSource<string>,
         uploadOptions: ((license: string) =>
@@ -42,10 +44,13 @@ export class ImageUploadFlow extends UIElement {
                 {value: "CC-BY 4.0", shown: Translations.t.image.ccb}
             ],
             preferedLicense
-        );
+        ); const t = Translations.t.image;
+       
         this._licensePicker = licensePicker;
         this._selectedLicence = licensePicker.GetValue();
-
+        this._connectButton = new Combine([ t.pleaseLogin])
+            .onClick(() => State.state.osmConnection.AttemptLogin())
+            .SetClass("login-button-friendly");    
 
     }
 
@@ -58,7 +63,7 @@ export class ImageUploadFlow extends UIElement {
         }
 
         if (!State.state.osmConnection.userDetails.data.loggedIn) {
-            return t.pleaseLogin.Render();
+            return this._connectButton.Render();
         }
 
         let currentState: UIElement[] = [];
@@ -115,12 +120,6 @@ export class ImageUploadFlow extends UIElement {
         super.InnerUpdate(htmlElement);
         const user = State.state.osmConnection.userDetails.data;
 
-        htmlElement.onclick = function () {
-            if (!user.loggedIn) {
-                State.state.osmConnection.AttemptLogin();
-            }
-        }
-
         this._licensePicker.Update()
         const form = document.getElementById('fileselector-form-' + this.id) as HTMLFormElement
         const selector = document.getElementById('fileselector-' + this.id)

UI/WelcomeMessage.ts

@@ -46,7 +46,7 @@ export class WelcomeMessage extends UIElement {
 
         return "<span>" +
             this.description.Render() +
-            "<br/>" +
+            "<br/></br>" +
             loginStatus +
             this.tail.Render() +
             "<br/>" +

UI/i18n/Translations.ts

@@ -619,9 +619,9 @@ export default class Translations {
                 fr: 'Mettre votre {count} photos en ligne'
             }),
             pleaseLogin: new T({
-                en: 'Please login to add a picure or to answer questions',
-                nl: 'Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden',
-                fr: 'Merci de vous connecter pour mettre une photo en ligne ou répondre aux questions'
+                en: 'Please login to add a picure',
+                nl: 'Gelieve je aan te melden om een foto toe te voegen',
+                fr: 'Connectez vous pour mettre une photo en ligne'
             }),
             willBePublished: new T({
                 en: 'Your picture will be published: ',
@@ -664,12 +664,6 @@ export default class Translations {
         },
         general: {
             loginWithOpenStreetMap: new T({en: "Login with OpenStreetMap", nl: "Aanmelden met OpenStreetMap", fr:'Se connecter avec OpenStreeMap'}),
-            getStarted: new T({
-                en: "<span class='activate-osm-authentication'>Login with OpenStreetMap</span> or <a href='https://www.openstreetmap.org/user/new' target='_blank'>make a free account to get started</a>",
-                nl: "<span class='activate-osm-authentication'>Meld je aan met je OpenStreetMap-account</span> of <a href='https://www.openstreetmap.org/user/new' target='_blank'>maak snel en gratis een account om te beginnen</a>",
-                fr: "<span class='activate-osm-authentication'>Se connecter avec OpenStreetMap</span> ou <a href='https://www.openstreetmap.org/user/new' target='_blank'>créer un compte gratuitement pour commencer</a>",
-            
-            }),
             welcomeBack: new T({
                 en: "You are logged in, welcome back!",
                 nl: "Je bent aangemeld. Welkom terug!",
@@ -677,7 +671,8 @@ export default class Translations {
             }),
             loginToStart: new T({
                 en: "Login to answer this question",
-                nl: "Meld je aan om deze vraag te beantwoorden"
+                nl: "Meld je aan om deze vraag te beantwoorden",
+                fr: "Connectez vous pour répondre à cette question"
             }),
             search: {
                 search: new Translation({
@@ -926,7 +921,17 @@ export default class Translations {
                 en: "Open inbox",
                 nl: "Ga naar de berichten",
                 fr: "Ouvrir les messages"
-            })
+            }),
+            getStartedLogin: new T({
+                en: "Login with OpenStreetMap to get started",
+                nl: "Login met OpenStreetMap om te beginnen",
+                fr: "Connectez vous avec OpenStreetMap pour commencer"
+            }),
+            getStartedNewAccount: new T({
+                en: " or <a href='https://www.openstreetmap.org/user/new' target='_blank'>create a new account</a>",
+                nl: " of <a href='https://www.openstreetmap.org/user/new' target='_blank'>maak een nieuwe account aan</a> ",
+                fr: " ou <a href='https://www.openstreetmap.org/user/new' target='_blank'>registrez vous</a>"
+            }),
         },
         favourite: {
             title: new T({en: "Personal theme"}),