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

KEYCLOAK-8603: Reimplement 'back to application' in react

Browse source
This commit is contained in:
Stan Silvert 2018-12-19 16:02:36 -05:00 committed by Bruno Oliveira da Silva
parent 8dfd07662c
commit ccd6d248f4
4 changed files with 77 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -42,8 +42,6 @@
</#if>
</script>
<base href="${baseUrl}/">
<link rel="icon" href="${resourceUrl}/app/assets/img/favicon.ico" type="image/x-icon"/>
<!-- PatternFly -->
@ -142,7 +140,7 @@
<div id="main_react_container"></div>
<div id="welcomeScreen">
<div id="welcomeScreen" style="display:none">
<!-- Top Navigation -->
<nav class="navbar navbar-pf-alt">
@ -199,7 +197,7 @@
<div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
<h2>${msg("personalInfoHtmlTitle")}</h2>
<p class="card-pf-content-intro">${msg("personalInfoIntroMessage")}</p>
<h3 id="personalInfoLink"><a href="${baseUrl}/#/app/account">${msg("personalInfoHtmlTitle")}</a></h3>
<h3 id="personalInfoLink"><a href="#/app/account">${msg("personalInfoHtmlTitle")}</a></h3>
</div>
</div>
</div>
@ -213,10 +211,10 @@
<div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
<h2>${msg("accountSecurityTitle")}</h2>
<p class="card-pf-content-intro">${msg("accountSecurityIntroMessage")}</p>
<h3 id="changePasswordLink"><a href="${baseUrl}/#/app/password">${msg("changePasswordHtmlTitle")}</a></h3>
<h3 id="authenticatorLink"><a href="${baseUrl}/#/app/authenticator">${msg("authenticatorTitle")}</a></h3>
<h3 id="deviceActivityLink"><a href="${baseUrl}/#/app/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
<h3 id="linkedAccountsLink"><a href="${baseUrl}/#/app/linked-accounts">${msg("linkedAccountsHtmlTitle")}</a></h3>
<h3 id="changePasswordLink"><a href="#/app/password">${msg("changePasswordHtmlTitle")}</a></h3>
<h3 id="authenticatorLink"><a href="#/app/authenticator">${msg("authenticatorTitle")}</a></h3>
<h3 id="deviceActivityLink"><a href="#/app/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
<h3 id="linkedAccountsLink" style="display:none"><a href="#/app/linked-accounts">${msg("linkedAccountsHtmlTitle")}</a></h3>
</div>
</div>
</div>
@ -230,12 +228,12 @@
<div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
<h2>${msg("applicationsHtmlTitle")}</h2>
<p class="card-pf-content-intro">${msg("applicationsIntroMessage")}</p>
<h3 id="applicationsLink"><a href="${baseUrl}/#/app/applications">${msg("applicationsHtmlTitle")}</a></h3>
<h3 id="applicationsLink"><a href="#/app/applications">${msg("applicationsHtmlTitle")}</a></h3>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-3" id="myResourcesCard">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-3" style="display:none" id="myResourcesCard">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
<div class="card-pf-body text-center row">
<div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
@ -244,7 +242,7 @@
<div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
<h2>${msg("myResources")}</h2>
<p class="card-pf-content-intro">${msg("resourceIntroMessage")}</p>
<h3 id="myResourcesLink"><a href="${baseUrl}/#/app/my-resources">${msg("myResources")}</a></h3>
<h3 id="myResourcesLink"><a href="#/app/my-resources">${msg("myResources")}</a></h3>
</div>
</div>
</div>
@ -271,16 +269,15 @@
}
};
</script>
<script>
if (!features.isLinkedAccountsEnabled) {
document.getElementById("linkedAccountsLink").style.display='none';
if (features.isLinkedAccountsEnabled) {
document.getElementById("linkedAccountsLink").style.display='block';
};
if (!features.isMyResourcesEnabled) {
document.getElementById("myResourcesCard").style.display='none';
if (features.isMyResourcesEnabled) {
document.getElementById("myResourcesCard").style.display='block';
};
toggleReact();
</script>
</body>

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

@ -23,6 +23,8 @@ import {KeycloakService} from './keycloak-service/keycloak.service';
import {Logout} from './widgets/Logout';
import {Msg} from './widgets/Msg';
import {Referrer} from './page/Referrer';
import {AccountPage} from './content/account-page/AccountPage';
import {ApplicationsPage} from './content/applications-page/ApplicationsPage';
import {PasswordPage} from './content/password-page/PasswordPage';
@ -57,6 +59,7 @@ export class App extends React.Component<AppProps> {
return (
<span>
<Referrer/>
<nav>
<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>

46
themes/src/main/resources/theme/keycloak-preview/account/resources/app/page/Referrer.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';
import {Msg} from '../widgets/Msg';
declare const referrer: string;
declare const referrer_uri: string;
export interface ReferrerProps {
}
/**
* @author Stan Silvert ssilvert@redhat.com (C) 2018 Red Hat Inc.
*/
export class Referrer extends React.Component<ReferrerProps> {
constructor(props: ReferrerProps) {
super(props);
}
render() {
if (typeof referrer === "undefined") return null;
return (
<a className="nav-item-iconic" href={referrer_uri}>
<span className="pficon-arrow"></span>
<Msg msgKey="backTo" params={[referrer]}/>
</a>
);
}
};

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

@ -35,6 +35,7 @@ export class Msg extends React.Component<MsgProps> {
if (this.props.params !== undefined) {
this.props.params.forEach((value: string, index: number) => {
value = this.processParam(value);
message = message.replace('{{param_'+ index + '}}', value);
})
}
@ -43,4 +44,17 @@ export class Msg extends React.Component<MsgProps> {
<span>{message}</span>
);
}
// if the param has Freemarker syntax, try to look up its value
private processParam(param:string): string {
if (!(param.startsWith('${') && param.endsWith('}'))) return param;
// remove Freemarker syntax
const key:string = param.substring(2, param.length - 1);
let value:string = l18n_msg[key];
if (value === undefined) return param;
return value;
}
}