l10n of login info messages

This commit is contained in:
Lucas Verney 2016-07-31 01:05:08 +02:00
parent 1ec6af4833
commit b7ff2bbd85
10 changed files with 67 additions and 22 deletions

6
TODO
View File

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

View File

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

File diff suppressed because one or more lines are too long

24
app/dist/index.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -7,11 +7,14 @@ module.exports = {
"app.common.song": "{itemCount, plural, one {Song} other {Songs}}", // Song "app.common.song": "{itemCount, plural, one {Song} other {Songs}}", // Song
"app.filter.filter": "Filter…", // Filtering input placeholder "app.filter.filter": "Filter…", // Filtering input placeholder
"app.filter.whatAreWeListeningToToday": "What are we listening to today?", // Description for the filter bar "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.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.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.password": "Password", // Password input placeholder
"app.login.rememberMe": "Remember me", // Remember me checkbox label "app.login.rememberMe": "Remember me", // Remember me checkbox label
"app.login.signIn": "Sign in", // Sign in "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.login.username": "Username", // Username input placeholder
"app.pagination.current": "current", // Current (page) "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.pagination.goToPage": "<span class=\"sr-only\">Go to page </span>{pageNumber}", // Link content to go to page N. span is here for screen-readers

View File

@ -7,11 +7,14 @@ module.exports = {
"app.common.song": "{itemCount, plural, one {Piste} other {Pistes}}", // Song "app.common.song": "{itemCount, plural, one {Piste} other {Pistes}}", // Song
"app.filter.filter": "Filtrer…", // Filtering input placeholder "app.filter.filter": "Filtrer…", // Filtering input placeholder
"app.filter.whatAreWeListeningToToday": "Que voulez-vous écouter aujourd'hui\u00a0?", // Description for the filter bar "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.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.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.password": "Mot de passe", // Password input placeholder
"app.login.rememberMe": "Se souvenir", // Remember me checkbox label "app.login.rememberMe": "Se souvenir", // Remember me checkbox label
"app.login.signIn": "Connexion", // Sign in "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.login.username": "Utilisateur", // Username input placeholder
"app.pagination.current": "actuelle", // Current (page) "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.pagination.goToPage": "<span class=\"sr-only\">Aller à la page </span>{pageNumber}", // Link content to go to page N. span is here for screen-readers

View File

@ -28,6 +28,23 @@ const messages = [
id: "app.login.greeting", id: "app.login.greeting",
description: "Greeting to welcome the user to the app", description: "Greeting to welcome the user to the app",
defaultMessage: "Welcome back on Ampache, let's go!" 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"
} }
]; ];

View File

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

View File

@ -22,7 +22,7 @@ export const rootElement = document.getElementById("root");
// i18n // i18n
export const onWindowIntl = () => { export const onWindowIntl = () => {
addLocaleData([...en, ...fr]); 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"]; var strings = rawMessages[locale] ? rawMessages[locale] : rawMessages["en-US"];
strings = Object.assign(rawMessages["en-US"], strings); strings = Object.assign(rawMessages["en-US"], strings);