KEYCLOAK-8758: Implement i18n/l10n

themes/src/main/resources/theme/keycloak-preview/account/index.ftl

@@ -122,7 +122,7 @@
                     if (loadListener) script.addEventListener("load", loadListener);
                     document.head.appendChild(script);
                 };
-            keycloak.init({onLoad: 'login-required'}).success(function(authenticated) {
+            keycloak.init({onLoad: 'check-sso'}).success(function(authenticated) {
                 loadjs("/node_modules/react/umd/react.development.js", function() {
                    loadjs("/node_modules/react-dom/umd/react-dom.development.js", function() {
                         loadjs("/node_modules/systemjs/dist/system.src.js", function() {

themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx

@@ -20,6 +20,7 @@ import {Route, Link} from 'react-router-dom';
 import {KeycloakService} from './keycloak-service/keycloak.service';
 
 import {Logout} from './widgets/Logout';
+import {Msg} from './widgets/Msg';
 import {AccountPage} from './content/account-page/AccountPage';
 import {ApplicationsPage} from './content/applications-page/ApplicationsPage';
 import {PasswordPage} from './content/password-page/PasswordPage';
@@ -50,9 +51,9 @@ export class App extends React.Component<AppProps> {
         return (
             <span>
                 <nav>
-                    <Link to="/app/account" className="btn btn-primary btn-lg btn-sign" type="button">Account</Link>
+                    <Link to="/app/account" className="btn btn-primary btn-lg btn-sign" type="button"><Msg msgKey="account"/></Link>
-                    <Link to="/app/applications" className="btn btn-primary btn-lg btn-sign" type="button">Applications</Link>
+                    <Link to="/app/applications" className="btn btn-primary btn-lg btn-sign" type="button"><Msg msgKey="applications"/></Link>
-                    <Link to="/app/password" className="btn btn-primary btn-lg btn-sign" type="button">Password</Link>
+                    <Link to="/app/password" className="btn btn-primary btn-lg btn-sign" type="button"><Msg msgKey="password"/></Link>
                     {ExtensionPages.Links}
                     <Logout/>
                     <Route path='/app/account' component={AccountPage}/>

themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/AccountPage.tsx

@@ -16,7 +16,9 @@
 
 import * as React from 'react';
 import {AxiosResponse} from 'axios';
+
 import {AccountServiceClient} from '../../account-service/account.service';
+import {Msg} from '../../widgets/Msg';
  
 interface AccountPageProps {
 }
@@ -77,11 +79,10 @@ export class AccountPage extends React.Component<AccountPageProps, AccountPageSt
             });
     }
     
-    private makeTextInput(label: string, 
+    private makeTextInput(name: string, 
-                          name: string, 
                           disabled = false): React.ReactElement<any> {
         return (
-            <label>{label}
+            <label><Msg msgKey={name}/>:
                 <input disabled={disabled} type="text" name={name} value={this.state[name]} onChange={this.handleChange} />
             </label>
         );
@@ -90,17 +91,17 @@ export class AccountPage extends React.Component<AccountPageProps, AccountPageSt
     render() {
         return (
             <form onSubmit={this.handleSubmit}>
-                {this.makeTextInput('User Name:', 'username', true)}
+                {this.makeTextInput('username', true)}
                 <br/>
-                {this.makeTextInput('First Name:', 'firstName')}
+                {this.makeTextInput('firstName')}
                 <br/>
-                {this.makeTextInput('Last Name:', 'lastName')}
+                {this.makeTextInput('lastName')}
                 <br/>
-                {this.makeTextInput('Email:', 'email')}
+                {this.makeTextInput('email')}
                 <br/>
                 <button className="btn btn-primary btn-lg btn-sign" 
                         disabled={!this.state.changed}
-                        value="Submit">Submit</button>
+                        value="Submit"><Msg msgKey="doSave"/></button>
             </form>
         );
     }

themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Logout.tsx

@@ -16,6 +16,8 @@
 
 import * as React from 'react';
 import {Link} from 'react-router-dom';
+
+import {Msg} from './Msg';
 import {KeycloakService} from '../keycloak-service/keycloak.service';
  
 declare const baseUrl;
@@ -35,7 +37,7 @@ export class Logout extends React.Component<LogoutProps> {
     
     render() {
         return (
-            <Link to="/" className="btn btn-primary btn-lg btn-sign" type="button" onClick={this.handleLogout}>Logout</Link>
+            <Link to="/" className="btn btn-primary btn-lg btn-sign" type="button" onClick={this.handleLogout}><Msg msgKey="doSignOut"/></Link>
         );
     }
 }

themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Msg.tsx

@@ -0,0 +1,46 @@
+/* 
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+ 
+declare const l18n_msg: {[key:string]: string};
+
+export interface MsgProps {
+    readonly msgKey:string;
+    readonly params?:Array<string>;
+}
+ 
+export class Msg extends React.Component<MsgProps> {
+
+    constructor(props: MsgProps) {
+        super(props);
+    }
+    
+    render() {
+        let message:string = l18n_msg[this.props.msgKey];
+        if (message === undefined) message = this.props.msgKey;
+        
+        if (this.props.params !== undefined) {
+            this.props.params.forEach((value: string, index: number) => {
+                message = message.replace('{{param_'+ index + '}}', value);
+            })
+        }
+        
+        return (
+            <span>{message}</span>
+        );
+    }
+}