Rc/4.2.0

.env.schema

@@ -3,3 +3,4 @@ REACT_APP_API=https://...
 REACT_APP_EGO_CLIENT_ID=ego
 # debug namespace, e.g. "app". See https://www.npmjs.com/package/debug
 REACT_APP_DEBUG=app
+REACT_APP_KEYCLOAK_ENABLED=false

package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-ui",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "dependencies": {
     "axios": "^0.21.1",

src/common/RESOURCE_MAP.tsx

@@ -385,6 +385,12 @@ const RESOURCE_MAP: { [key in TResourceType]: IResource } = {
         panelSection: 'meta',
         required: true,
       },
+      {
+        fieldName: 'Error Redirect Uri',
+        key: 'errorRedirectUri',
+        panelSection: 'meta',
+        required: true,
+      },
     ],
     updateItem: updateApplication,
   },

src/common/injectGlobals.ts

@@ -13,6 +13,8 @@ export const USE_DUMMY_DATA = process.env.REACT_APP_DUMMY;
 
 export const PUBLIC_PATH = process.env.REACT_APP_PUBLIC_PATH;
 
+export const KEYCLOAK_ENABLED = process.env.REACT_APP_KEYCLOAK_ENABLED === 'true' || false;
+
 export const STATUSES = ['DISABLED', 'APPROVED', 'PENDING', 'REJECTED'];
 export const DATE_KEYS = ['createdAt', 'lastLogin'];
 export const DATE_FORMAT = 'YYYY-MM-DD hh:mm A';
@@ -22,9 +24,9 @@ const createPubsub = () => {
   let listeners = [];
   const subscribe = callback => (listeners = listeners.concat(callback));
   const unsubscribe = callback =>
-    (listeners = listeners.filter(l => {
-      l !== callback;
-    }));
+  (listeners = listeners.filter(l => {
+    l !== callback;
+  }));
   const publish = payload => {
     listeners.forEach((callback: Function) => {
       callback(payload);

src/components/Login.tsx

@@ -1,4 +1,4 @@
-import { API_ROOT, EGO_CLIENT_ID } from 'common/injectGlobals';
+import { API_ROOT, EGO_CLIENT_ID, KEYCLOAK_ENABLED } from 'common/injectGlobals';
 import { injectState } from 'freactal';
 import { css } from 'glamor';
 import jwtDecode from 'jwt-decode';
@@ -7,7 +7,7 @@ import React, { ComponentType } from 'react';
 import { compose } from 'recompose';
 import ajax from 'services/ajax';
 
-import { BLUE, LIGHT_BLUE, TEAL, WHITE } from 'common/colors';
+import { BLUE, DEFAULT_BLACK, LIGHT_BLUE, TEAL, WHITE } from 'common/colors';
 import { Orcid, Facebook, Google, GitHub, LinkedIn } from './Icons';
 
 const styles = {
@@ -51,6 +51,7 @@ const styles = {
 const enhance = compose(injectState);
 
 enum LoginProvider {
+  Keycloak = 'Keycloak',
   Google = 'Google',
   // Facebook = 'Facebook',
   Github = 'GitHub',
@@ -59,6 +60,7 @@ enum LoginProvider {
 }
 
 enum ProviderLoginPaths {
+  keycloak = 'keycloak',
   google = 'google',
   // facebook = 'facebook',
   github = 'github',
@@ -71,7 +73,7 @@ type IconComponent = ComponentType<{ width: number; height: number }>;
 type ProviderType = {
   name: LoginProvider;
   path: ProviderLoginPaths;
-  Icon: IconComponent;
+  Icon?: IconComponent;
 };
 
 const providers: ProviderType[] = [
@@ -82,6 +84,16 @@ const providers: ProviderType[] = [
   { name: LoginProvider.Linkedin, path: ProviderLoginPaths.linkedin, Icon: LinkedIn },
 ];
 
+const KeycloakLogin = () => {
+  return <a
+    key={LoginProvider.Keycloak}
+    href={`${API_ROOT}/oauth/login/${ProviderLoginPaths.keycloak}?client_id=${EGO_CLIENT_ID}`}
+    className={`${css(styles.loginButton)}`}
+  >
+    <span className={`${css({ paddingLeft: 10 })}`}>Login/Register</span>
+  </a>
+}
+
 class Component extends React.Component<any, any> {
   static propTypes = {
     effects: PropTypes.object,
@@ -129,7 +141,14 @@ class Component extends React.Component<any, any> {
       <div className={`Login ${css(styles.container)}`}>
         <img src={require('assets/brand-image.svg')} alt="" className={`${css(styles.logo)}`} />
         <h1 className={`${css(styles.title)}`}>Admin Portal</h1>
-        <h3 className={`${css(styles.title)}`}>Login with one of the following</h3>
+        {
+          KEYCLOAK_ENABLED && <KeycloakLogin />
+        }
+        {
+          KEYCLOAK_ENABLED
+            ? <h3 className={`${css(styles.title)}`}>Or login with one of the following services</h3>
+            : <h3 className={`${css(styles.title)}`}>Login with one of the following</h3>
+        }
         <ul
           className={`${css({
             display: 'flex',
@@ -139,18 +158,21 @@ class Component extends React.Component<any, any> {
             padding: 0,
           })}`}
         >
-          {providers.map(({ name, path, Icon }) => {
-            return (
-              <a
-                key={name}
-                href={`${API_ROOT}/oauth/login/${path}?client_id=${EGO_CLIENT_ID}`}
-                className={`${css(styles.loginButton)}`}
-              >
-                <Icon width={15} height={15} />
-                <span className={`${css({ paddingLeft: 10 })}`}>{name}</span>
-              </a>
-            );
-          })}
+          {providers
+            .map(({ name, path, Icon }) => {
+              return (
+                <a
+                  key={name}
+                  href={`${API_ROOT}/oauth/login/${path}?client_id=${EGO_CLIENT_ID}`}
+                  className={`${css(styles.loginButton)}`}
+                >
+                  {Icon !== undefined &&
+                    <Icon width={15} height={15} />
+                  }
+                  <span className={`${css({ paddingLeft: 10 })}`}>{name}</span>
+                </a>
+              );
+            })}
         </ul>
       </div>
     );