OIDC support

.docker/docker-entrypoint.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env sh
 set -eu
 
-envsubst '${API_URL} ${APP_TITLE} ${LANGUAGE} ${NAVIGATOR_LANGUAGE} ${BASENAME} ${EXTENSIONS}' < /etc/nginx/config.js.template > /var/www/config.js
+envsubst '${API_URL} ${APP_TITLE} ${LANGUAGE} ${NAVIGATOR_LANGUAGE} ${BASENAME} ${EXTENSIONS} ${AUTHENTICATION} ${AUTH_SERVER_URL} ${AUTH_CLIENT_ID}' < /etc/nginx/config.js.template > /var/www/config.js
 
 cp /etc/nginx/index.html.template /var/www/index.html
 sed  -i "s|%RECORD_MANAGER_BASENAME%|${BASENAME}|g" /var/www/index.html

doc/development.md

@@ -6,4 +6,13 @@ This file contains info for contributors to the Record Manager UI codebase.
 
 To configure the application use [Setup Guide](./setup.md).
 To run application in development mode use `npm run dev`. 
-By default, the application is accessible from http://localhost:3000.
+By default, the application is accessible from http://localhost:3000.
+
+## Add Configuration Parameters
+
+When runtime configuration parameters are added to the application, they also need to be added to Docker processing so
+that environment variables can be used to set the variables. The following needs to be done:
+
+1. Add the parameters to `.docker/config.js.template`
+2. Add the parameters to environment substitution in `.docker/docker-entrypoint.sh`
+3. Add the parameters to `.env.example`

js/components/user/UserRow.js

@@ -4,6 +4,7 @@ import withI18n from "../../i18n/withI18n";
 import {Button} from "react-bootstrap";
 import {LoaderSmall} from "../Loader";
 import PropTypes from "prop-types";
+import IfInternalAuth from "../misc/oidc/IfInternalAuth";
 
 let UserRow = (props) => {
     const user = props.user;
@@ -17,13 +18,15 @@ let UserRow = (props) => {
         <td className='report-row'>{user.username}</td>
         <td className='report-row'>{user.institution ? user.institution.name : ''}</td>
         <td className='report-row'>{user.emailAddress}</td>
-        <td className='report-row actions'>
-            <Button variant='primary' size='sm' title={props.i18n('users.open-tooltip')}
-                    onClick={() => props.onEdit(props.user)}>{props.i18n('open')}</Button>
-            <Button variant='warning' size='sm' title={props.i18n('users.delete-tooltip')}
-                    onClick={() => props.onDelete(props.user)}>{props.i18n('delete')}
-                {props.deletionLoading && <LoaderSmall/>}</Button>
-        </td>
+        <IfInternalAuth>
+            <td className='report-row actions'>
+                <Button variant='primary' size='sm' title={props.i18n('users.open-tooltip')}
+                        onClick={() => props.onEdit(props.user)}>{props.i18n('open')}</Button>
+                <Button variant='warning' size='sm' title={props.i18n('users.delete-tooltip')}
+                        onClick={() => props.onDelete(props.user)}>{props.i18n('delete')}
+                    {props.deletionLoading && <LoaderSmall/>}</Button>
+            </td>
+        </IfInternalAuth>
     </tr>;
 };
 

js/components/user/UserTable.js

@@ -8,6 +8,7 @@ import withI18n from "../../i18n/withI18n";
 import UserRow from "./UserRow";
 import {ACTION_STATUS} from "../../constants/DefaultConstants";
 import PropTypes from "prop-types";
+import IfInternalAuth from "../misc/oidc/IfInternalAuth";
 
 class UserTable extends React.Component {
     static propTypes = {
@@ -68,7 +69,9 @@ class UserTable extends React.Component {
             <th className='w-20 content-center'>{this.i18n('login.username')}</th>
             <th className='w-20 content-center'>{this.i18n('institution.name')}</th>
             <th className='w-20 content-center'>{this.i18n('users.email')}</th>
-            <th className='w-20 content-center'>{this.i18n('actions')}</th>
+            <IfInternalAuth>
+                <th className='w-20 content-center'>{this.i18n('actions')}</th>
+            </IfInternalAuth>
         </tr>
         </thead>;
     }

js/components/user/Users.js

@@ -9,6 +9,7 @@ import {ACTION_STATUS, ALERT_TYPES} from "../../constants/DefaultConstants";
 import AlertMessage from "../AlertMessage";
 import {LoaderCard, LoaderSmall} from "../Loader";
 import PropTypes from "prop-types";
+import IfInternalAuth from "../misc/oidc/IfInternalAuth";
 
 class Users extends React.Component {
     static propTypes = {
@@ -38,15 +39,17 @@ class Users extends React.Component {
             </Card.Header>
             <Card.Body>
                 <UserTable users={usersLoaded.users} {...this.props}/>
-                <div>
-                    <Button variant='primary' size='sm'
-                            onClick={this.props.handlers.onCreate}>{this.i18n('users.create-user')}</Button>
-                </div>
+                <IfInternalAuth>
+                    <div>
+                        <Button variant='primary' size='sm'
+                                onClick={this.props.handlers.onCreate}>{this.i18n('users.create-user')}</Button>
+                    </div>
+                </IfInternalAuth>
                 {showAlert && userDeleted.status === ACTION_STATUS.ERROR &&
-                <AlertMessage type={ALERT_TYPES.DANGER}
-                              message={this.props.formatMessage('user.delete-error', {error: this.i18n(this.props.userDeleted.error.message)})}/>}
+                    <AlertMessage type={ALERT_TYPES.DANGER}
+                                  message={this.props.formatMessage('user.delete-error', {error: this.i18n(this.props.userDeleted.error.message)})}/>}
                 {showAlert && userDeleted.status === ACTION_STATUS.SUCCESS &&
-                <AlertMessage type={ALERT_TYPES.SUCCESS} message={this.i18n('user.delete-success')}/>}
+                    <AlertMessage type={ALERT_TYPES.SUCCESS} message={this.i18n('user.delete-success')}/>}
             </Card.Body>
         </Card>;
     }

js/utils/OidcUtils.js

@@ -48,7 +48,12 @@ export const getOidcConfig = () => {
 
 function resolveUrl() {
   const loc = window.location;
-  return loc.protocol + "//" + loc.host + loc.pathname;
+  let url = loc.protocol + "//" + loc.host;
+  const basename = getEnv("BASENAME");
+  if (basename !== "/" && basename !== "./") {
+    url += basename;
+  }
+  return url;
 }
 
 export const userProfileLink = () => {

js/utils/Utils.js

@@ -1,9 +1,9 @@
 'use strict';
 import Bowser from 'bowser';
 import * as Constants from "../constants/DefaultConstants";
+import {ROLE} from "../constants/DefaultConstants";
 import * as Vocabulary from "../constants/Vocabulary";
 import * as supportedDevices from "../constants/SupportedDevices";
-import {ROLE} from "../constants/DefaultConstants";
 
 /**
  * Common propositions that should not be capitalized
@@ -274,13 +274,11 @@ export function deviceIsSupported() {
 
 // format to DD-MM-YYYY HH:mm:ss:SSS
 export function formatDateWithMilliseconds(timestamp) {
-    const date = new Date(timestamp / 1000);
-    const dateStr =
-        ("00" + date.getDate()).slice(-2) + "-" +
+    const date = new Date(timestamp);
+    return ("00" + date.getDate()).slice(-2) + "-" +
         ("00" + (date.getMonth() + 1)).slice(-2) + "-" +
         date.getFullYear() + " " +
         ("00" + date.getHours()).slice(-2) + ":" +
         ("00" + date.getMinutes()).slice(-2) + ":" +
         ("00" + date.getSeconds()).slice(-2) + ("00" + date.getMilliseconds()).slice(-2);
-    return dateStr;
 }