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

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

@@ -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="changePasswordLink"><a href="#/app/password">${msg("changePasswordHtmlTitle")}</a></h3>
-                              <h3 id="authenticatorLink"><a href="${baseUrl}/#/app/authenticator">${msg("authenticatorTitle")}</a></h3>
+                              <h3 id="authenticatorLink"><a href="#/app/authenticator">${msg("authenticatorTitle")}</a></h3>
-                              <h3 id="deviceActivityLink"><a href="${baseUrl}/#/app/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
+                              <h3 id="deviceActivityLink"><a href="#/app/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
-                              <h3 id="linkedAccountsLink"><a href="${baseUrl}/#/app/linked-accounts">${msg("linkedAccountsHtmlTitle")}</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) {
+            if (features.isLinkedAccountsEnabled) {
-                document.getElementById("linkedAccountsLink").style.display='none';
+                document.getElementById("linkedAccountsLink").style.display='block';
             };
                 
-            if (!features.isMyResourcesEnabled) {
+            if (features.isMyResourcesEnabled) {
-                document.getElementById("myResourcesCard").style.display='none';
+                document.getElementById("myResourcesCard").style.display='block';
             };
-                
-            toggleReact(); 
         </script>
 
     </body>

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

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

themes/src/main/resources/theme/keycloak-preview/account/resources/app/page/Referrer.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';
+
+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>
+        );
+    }
+};

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

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