libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

KEYCLOAK-8758: Implement i18n/l10n

Browse source
This commit is contained in:
Stan Silvert 2018-11-20 08:02:37 -05:00
parent 311e848460
commit 3c8dddf33e
5 changed files with 63 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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() {

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

@ -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}/>

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

@ -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>
);
}

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

@ -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>
);
}
}

46
themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Msg.tsx Normal file
View file

@ -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>
);
}
}