l10n of login info messages

TODO

@@ -16,9 +16,15 @@
 
 
 ## Global UI
+    * Filter does not work on github.io
     * What happens when JS is off?
         => https://www.allantatter.com/react-js-and-progressive-enhancement/
 
 
 ## Miscellaneous
     * Webpack chunks?
+
+
+* Stocker pagination dans le store
+* error / info: null
+* refondre reducers

app/components/Login.jsx

@@ -58,9 +58,16 @@ class LoginFormCSSIntl extends Component {
 
     render () {
         const {formatMessage} = this.props.intl;
+        var infoMessage = "";
+        if (typeof this.props.info === "object") {
+            infoMessage = (
+                <FormattedMessage {...loginMessages[this.props.info.id]} values={ this.props.info.values} />
+            );
+        } else {
+            infoMessage = this.props.info;
+        }
         return (
             <div>
-                { /* TODO: info/error translation */ }
                 {
                     this.props.error ?
                         <div className="row">
@@ -76,7 +83,7 @@ class LoginFormCSSIntl extends Component {
                     this.props.info ?
                         <div className="row">
                             <div className="alert alert-info" id="loginFormInfo">
-                                <p>{ this.props.info }</p>
+                                <p>{ infoMessage }</p>
                             </div>
                         </div>
                         : null
@@ -129,7 +136,7 @@ LoginFormCSSIntl.propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isAuthenticating: PropTypes.bool,
     error: PropTypes.string,
-    info: PropTypes.string,
+    info: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     intl: intlShape.isRequired,
 };
 
@@ -163,7 +170,7 @@ Login.propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isAuthenticating: PropTypes.bool,
     error: PropTypes.string,
-    info: PropTypes.string
+    info: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 };
 
 export default CSSModules(Login, css);

app/locales/en-US/index.js

@@ -7,11 +7,14 @@ module.exports = {
     "app.common.song": "{itemCount, plural, one {Song} other {Songs}}",  // Song
     "app.filter.filter": "Filter…",  // Filtering input placeholder
     "app.filter.whatAreWeListeningToToday": "What are we listening to today?",  // Description for the filter bar
+    "app.login.byebye": "See you soon!",  // Info message on successful logout
+    "app.login.connecting": "Connecting…",  // Info message while trying to connect
     "app.login.endpointInputAriaLabel": "URL of your Ampache instance (e.g. http://ampache.example.com)",  // ARIA label for the endpoint input
     "app.login.greeting": "Welcome back on Ampache, let's go!",  // Greeting to welcome the user to the app
     "app.login.password": "Password",  // Password input placeholder
     "app.login.rememberMe": "Remember me",  // Remember me checkbox label
     "app.login.signIn": "Sign in",  // Sign in
+    "app.login.success": "Successfully logged in as { username }!",  // Info message on successful login.
     "app.login.username": "Username",  // Username input placeholder
     "app.pagination.current": "current",  // Current (page)
     "app.pagination.goToPage": "<span class=\"sr-only\">Go to page </span>{pageNumber}",  // Link content to go to page N. span is here for screen-readers

app/locales/fr-FR/index.js

@@ -7,11 +7,14 @@ module.exports = {
     "app.common.song": "{itemCount, plural, one {Piste} other {Pistes}}",  // Song
     "app.filter.filter": "Filtrer…",  // Filtering input placeholder
     "app.filter.whatAreWeListeningToToday": "Que voulez-vous écouter aujourd'hui\u00a0?",  // Description for the filter bar
+    "app.login.byebye": "À bientôt\u00a0!",  // Info message on successful logout
+    "app.login.connecting": "Connexion…",  // Info message while trying to connect
     "app.login.endpointInputAriaLabel": "URL de votre Ampache (e.g. http://ampache.example.com)",  // ARIA label for the endpoint input
     "app.login.greeting": "Bon retour sur Ampache, c'est parti\u00a0!",  // Greeting to welcome the user to the app
     "app.login.password": "Mot de passe",  // Password input placeholder
     "app.login.rememberMe": "Se souvenir",  // Remember me checkbox label
     "app.login.signIn": "Connexion",  // Sign in
+    "app.login.success": "Connecté en tant que { username }\u00a0!",  // Info message on successful login.
     "app.login.username": "Utilisateur",  // Username input placeholder
     "app.pagination.current": "actuelle",  // Current (page)
     "app.pagination.goToPage": "<span class=\"sr-only\">Aller à la page </span>{pageNumber}",  // Link content to go to page N. span is here for screen-readers

app/locales/messagesDescriptors/Login.js

@@ -28,6 +28,23 @@ const messages = [
         id: "app.login.greeting",
         description: "Greeting to welcome the user to the app",
         defaultMessage: "Welcome back on Ampache, let's go!"
+    },
+
+    // From the auth reducer
+    {
+        id: "app.login.connecting",
+        defaultMessage: "Connecting…",
+        description: "Info message while trying to connect"
+    },
+    {
+        id: "app.login.success",
+        defaultMessage: "Successfully logged in as { username }!",
+        description: "Info message on successful login."
+    },
+    {
+        id: "app.login.byebye",
+        defaultMessage: "See you soon!",
+        description: "Info message on successful logout"
     }
 ];
 

app/reducers/auth.js

@@ -27,7 +27,10 @@ export default createReducer(initialState, {
     [LOGIN_USER_REQUEST]: (state) => {
         return Object.assign({}, state, {
             isAuthenticating: true,
-            info: "Connecting…",
+            info: {
+                id: "app.login.connecting",
+                values: {}
+            },
             error: "",
             timerID: null
         });
@@ -40,7 +43,10 @@ export default createReducer(initialState, {
             username: payload.username,
             endpoint: payload.endpoint,
             rememberMe: payload.rememberMe,
-            info: "Successfully logged in as " + payload.username + "!",
+            info: {
+                id: "app.login.success",
+                values: { username: payload.username}
+            },
             error: "",
             timerID: payload.timerID
         });
@@ -66,7 +72,10 @@ export default createReducer(initialState, {
             username: "",
             endpoint: "",
             rememberMe: false,
-            info: "See you soon!",
+            info: {
+                id: "app.login.byebye",
+                values: {}
+            },
             error: "",
             timerID: 0
         });

index.all.js

@@ -22,7 +22,7 @@ export const rootElement = document.getElementById("root");
 // i18n
 export const onWindowIntl = () => {
     addLocaleData([...en, ...fr]);
-    const locale = getBrowserLocale();
+    const locale = getBrowserLocale();  // TODO: Get navigator.languages as array and match
     var strings = rawMessages[locale] ? rawMessages[locale] : rawMessages["en-US"];
     strings = Object.assign(rawMessages["en-US"], strings);