From 3c8dddf33e1c6b750e28bf94b593272f15211fdb Mon Sep 17 00:00:00 2001
From: Stan Silvert <ssilvert@redhat.com>
Date: Tue, 20 Nov 2018 08:02:37 -0500
Subject: [PATCH] KEYCLOAK-8758: Implement i18n/l10n

---
 .../theme/keycloak-preview/account/index.ftl  |  2 +-
 .../account/resources/app/App.tsx             |  7 +--
 .../app/content/account-page/AccountPage.tsx  | 17 +++----
 .../account/resources/app/widgets/Logout.tsx  |  4 +-
 .../account/resources/app/widgets/Msg.tsx     | 46 +++++++++++++++++++
 5 files changed, 63 insertions(+), 13 deletions(-)
 create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Msg.tsx

diff --git a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
index 5c6a1951d3..4d0f093c7a 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
+++ b/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() {
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx
index dc08e92cfb..a461d5398e 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx
+++ b/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/applications" className="btn btn-primary btn-lg btn-sign" type="button">Applications</Link>
-                    <Link to="/app/password" className="btn btn-primary btn-lg btn-sign" type="button">Password</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"><Msg msgKey="applications"/></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}/>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/AccountPage.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/AccountPage.tsx
index 4bebe2eac9..6a75165c1f 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/AccountPage.tsx
+++ b/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, 
-                          name: string, 
+    private makeTextInput(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>
         );
     }
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Logout.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Logout.tsx
index 2051f83922..b041dcb90f 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Logout.tsx
+++ b/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>
         );
     }
 }
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Msg.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Msg.tsx
new file mode 100644
index 0000000000..72e8870b48
--- /dev/null
+++ b/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>
+        );
+    }
+}