KEYCLOAK-8108: Page Not Found page

themes/src/main/resources/theme/keycloak-preview/account/messages/messages_en.properties

@@ -1,2 +1,4 @@
 # Put new messages for Account Console Here
 # Feel free to use any existing messages from the base theme
+pageNotFound=Page Not Found
+invalidRoute={0} is not a valid route.

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

@@ -15,9 +15,10 @@
  */
 
 import * as React from 'react';
-import {Route} from 'react-router-dom';
+import {Route, Switch} from 'react-router-dom';
 import {NavItem, NavExpandable} from '@patternfly/react-core';
 import {Msg} from './widgets/Msg';
+import {PageNotFound} from './content/page-not-found/PageNotFound';
 
 export interface ContentItem {
     label: string;
@@ -152,12 +153,15 @@ export function makeRoutes(): React.ReactNode {
 
     const routes: React.ReactElement<Route>[] = pageDefs.map((page: PageDef) => {
         if (isModulePageDef(page)) {
-            return <Route key={page.itemId} path={'/app/' + page.path} component={page.module[page.componentName]}/>;
+            return <Route key={page.itemId} path={'/app/' + page.path} exact component={page.module[page.componentName]}/>;
         } else {
             const pageDef: ComponentPageDef = page as ComponentPageDef;
-            return <Route key={page.itemId} path={'/app/' + page.path} component={pageDef.component}/>;
+            return <Route key={page.itemId} path={'/app/' + page.path} exact component={pageDef.component}/>;
         }
     });
 
-    return (<React.Fragment>{routes}</React.Fragment>);
+    return (<Switch>
+                {routes}
+                <Route component={PageNotFound}/>
+            </Switch>);
 }

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

@@ -39,28 +39,28 @@ export class ContentAlert extends React.Component<ContentAlertProps, ContentAler
     /**
      * @param message A literal text message or localization key.
      */
-    public static success(message: string) {
+    public static success(message: string): void {
         ContentAlert.instance.postAlert(message, 'success');
     }
     
     /**
      * @param message A literal text message or localization key.
      */
-    public static danger(message: string) {
+    public static danger(message: string): void {
         ContentAlert.instance.postAlert(message, 'danger');
     }
     
     /**
      * @param message A literal text message or localization key.
      */
-    public static warning(message: string) {
+    public static warning(message: string): void {
         ContentAlert.instance.postAlert(message, 'warning');
     }
     
     /**
      * @param message A literal text message or localization key.
      */
-    public static info(message: string) {
+    public static info(message: string): void {
         ContentAlert.instance.postAlert(message, 'info');
     }
     

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

@@ -87,7 +87,7 @@ export class AccountPage extends React.Component<AccountPageProps, AccountPageSt
         if (!this.requiredFieldsHaveData()) return;
         const reqData: FormFields = {...this.state.formFields};
         AccountServiceClient.Instance.doPost("/", {data: reqData})
-            .then((response: AxiosResponse<FormFields>) => {
+            .then(() => { // to use response, say ((response: AxiosResponse<FormFields>) => {
                 this.setState({canSubmit: false});
                 ContentAlert.success('accountUpdatedMessage');
             });

themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/page-not-found/PageNotFound.tsx

@@ -0,0 +1,37 @@
+/* 
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+import * as React from 'react';
+
+import {EmptyState, EmptyStateBody, EmptyStateIcon, Title, TitleLevel} from '@patternfly/react-core';
+import { WarningTriangleIcon } from '@patternfly/react-icons';
+import {withRouter, RouteComponentProps} from 'react-router-dom';
+import {Msg} from '../../widgets/Msg';
+ 
+export interface PageNotFoundProps extends RouteComponentProps {}
+ 
+class PgNotFound extends React.Component<PageNotFoundProps> {
+    
+    public constructor(props: PageNotFoundProps) {
+        super(props);
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <EmptyState variant='full'>
+                <EmptyStateIcon icon={WarningTriangleIcon} />
+                <Title headingLevel={TitleLevel.h5} size="lg">
+                    <Msg msgKey='pageNotFound'/>
+                </Title>
+                <EmptyStateBody>
+                    <Msg msgKey='invalidRoute' params={[this.props.location.pathname]} />
+                </EmptyStateBody>
+            </EmptyState>
+        );
+    }
+};
+
+export const PageNotFound = withRouter(PgNotFound);

themes/src/main/resources/theme/keycloak-preview/account/resources/systemjs.config.js

@@ -94,7 +94,7 @@
               './ContextSelector': '@empty', //'./ContextSelector/index.js',
               './DataList': '@empty', //'./DataList/index.js',
               './Dropdown': './Dropdown/index.js',
-              './EmptyState': '@empty', //'./EmptyState/index.js',
+              './EmptyState': './EmptyState/index.js',
               './Expandable': '@empty', //'./Expandable/index.js',
               './Form': './Form/index.js',
               './FormGroup': './FormGroup/index.js',
@@ -118,7 +118,7 @@
               './Text': '@empty', //'./Text/index.js',
               './TextArea': '@empty', //'./TextArea/index.js',
               './TextInput': './TextInput/index.js',
-              './Title': './Title/index.js', //'./Title/index.js',
+              './Title': './Title/index.js',
               './Tooltip': '@empty', //'./Tooltip/index.js',
               './Wizard': '@empty', //'./Wizard/index.js',
               './Bullseye': '@empty', //'./Bullseye/index.js',
@@ -1322,7 +1322,7 @@
              './icons/volume-icon.js': '@empty',
              './icons/zone-icon.js': '@empty',
              './icons/resources-almost-full-icon.js': '@empty',
-             './icons/warning-triangle-icon.js': '@empty',
+             //'./icons/warning-triangle-icon.js': '@empty',
              './icons/private-icon.js': '@empty',
              './icons/blueprint-icon.js': '@empty',
              './icons/tenant-icon.js': '@empty',