fix(web-header): show users display name instead of username

npm scripts updated

.github/CONTRIBUTING.md

@@ -2,25 +2,22 @@
 
 Contributions are very welcome!  Feel free to raise an issue or start a discussion, for help in getting started.
 
+The app can be deployed using Docker or NodeJS.
 
 ## Configuration
 
-Configuration is made in the `configuration` section of `package.json`:
+Configuration is made using `.env` files (per [README.md](https://github.com/sasjs/server#env-var-configuration) settings), _except_ for one case, when running in NodeJS in production - in which case the path to the SAS executable is made in the `configuration` section of `package.json`.
 
-- Provide path to SAS9 executable.
+The `.env` file should be created in the location(s) below.  Each folder contains a `.env.example` file that may be adjusted and renamed.
+
+* `.env` - the root .env file is used only for Docker deploys.
+* `api/.env` - this is the primary file used in NodeJS deploys
+* `web/.env` - this file is only necessary in NodeJS when running `web` and `api` seperately (on different ports).
 
 
-### Using dockers:
+## Using Docker
 
-There is `.env.example` file present at root of the project. [for Production]
-
-There is `.env.example` file present at `./api` of the project. [for Development]
-
-There is `.env.example` file present at `./web` of the project. [for Development]
-
-Remember to provide enviornment variables.
-
-#### Development
+### Docker Development Mode
 
 Command to run docker for development:
 
@@ -38,7 +35,7 @@ It will build following images if running first time:
 - `mongo-seed-clients` - will be populating client data specified in _./mongo-seed/clients/client.json_
 
 
-#### Production
+### Docker Production Mode
 
 Command to run docker for production:
 
@@ -54,47 +51,45 @@ It will build following images if running first time:
 - `mongo-seed-users` - will be populating user data specified in _./mongo-seed/users/user.json_
 - `mongo-seed-clients` - will be populating client data specified in _./mongo-seed/clients/client.json_
 
-### Using node:
+## Using NodeJS:
 
-#### Development (running api and web seperately):
+Be sure to use v16 or above, and to set your environment variables in the relevant `.env` file(s) - else defaults will be used.
 
-##### API
+### NodeJS Development Mode
 
-Navigate to `./api`
-There is `.env.example` file present at `./api` directory. Remember to provide enviornment variables else default values will be used mentioned in `.env.example` files
-Command to install and run api server.
+SASjs Server is split between an API server (serving REST requests) and a WEB Server (everything else).  These can be run together, or on seperate ports.
+
+### NodeJS Dev - Single Port
+
+Here the environment variables should be configured under `api.env`.  Then:
 
 ```
+cd ./web && npm i && npm build
+cd ../api && npm i && npm start
+```
+
+### NodeJS Dev - Seperate Ports
+
+Set the backend variables in `api/.env` and the frontend variables in `web/.env`. Then:
+
+#### API server
+```
+cd api
 npm install
 npm start
 ```
 
-##### Web
-
-Navigate to `./web`
-There is `.env.example` file present at `./web` directory. Remember to provide enviornment variables else default values will be used mentioned in `.env.example` files
-Command to install and run api server.
+#### Web Server 
 
 ```
+cd web
 npm install
 npm start
 ```
 
-#### Development (running only api server and have web build served):
+#### NodeJS Production Mode
 
-##### API server also serving Web build files
-
-There is `.env.example` file present at `./api` directory. Remember to provide enviornment variables else default values will be used mentioned in `.env.example` files
-Command to install and run api server.
-
-```
-cd ./web && npm i && npm build && cd ../
-cd ./api && npm i && npm start
-```
-
-#### Production
-
-##### API & WEB
+Update the `.env` file in the *api* folder.  Then:
 
 ```
 npm run server
@@ -105,7 +100,7 @@ This will install/build `web` and install `api`, then start prod server.
 
 ## Executables
 
-Command to generate executables
+In order to generate the final executables:
 
 ```
 cd ./web && npm i && npm build && cd ../

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.58](https://github.com/sasjs/server/compare/v0.0.57...v0.0.58) (2022-04-24)
+
+
+### Bug Fixes
+
+* bumping core library to get latest user management macros ([4862071](https://github.com/sasjs/server/commit/486207128da58fc4866bd0919c1bed2bd98097ea))
+* missing dependency ([d09876c](https://github.com/sasjs/server/commit/d09876c05f89166eec20064f7aa7ed5b867be081))
+
 ### [0.0.57](https://github.com/sasjs/server/compare/v0.0.56...v0.0.57) (2022-04-21)
 
 

README.md

@@ -101,11 +101,11 @@ SASV9_OPTIONS= -NOXCMD
 Normally the server process will stop when your terminal dies. To keep it going you can use the following suggested approaches:
 
 1. Linux Background Job
-2. NPM package `pm2
+2. NPM package `pm2`
 
 ### Background Job
 
-Trigger the command using NOHUP, redirecting the output commands, eg `nohup ./api-linux > server.log &`.
+Trigger the command using NOHUP, redirecting the output commands, eg `nohup ./api-linux > server.log 2>&1 &`.
 
 You can now see the job running using the `jobs` command.  To ensure that it will still run when your terminal is closed, execute the `disown` command.  To kill it later, use the `kill -9 <pid>` command.  You can see your sessions using `top -u <userid>`.  Type `c` to see the commands being run against each pid.
 
@@ -145,7 +145,7 @@ Instead of `app_name` you can pass:
 
 ## Server Version
 
-The following credentials can be used for the initial connection to SASjs/server. It is recommended to change these on first use.
+The following credentials can be used for the initial connection to SASjs/server. It is highly recommended to change these on first use.
 
 - CLIENTID: `clientID1`
 - USERNAME: `secretuser`

api/package-lock.json

@@ -8,7 +8,7 @@
       "name": "api",
       "version": "0.0.2",
       "dependencies": {
-        "@sasjs/core": "4.9.0",
+        "@sasjs/core": "^4.19.0",
         "@sasjs/utils": "2.42.1",
         "bcryptjs": "^2.4.3",
         "cookie-parser": "^1.4.6",
@@ -1379,9 +1379,9 @@
       }
     },
     "node_modules/@sasjs/core": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.9.0.tgz",
-      "integrity": "sha512-zc1Ey0ylHt/eRZAfK0mVG3EqNyq//wLxbiguiK0R6FhVqwYFEkprs3IiLGZ5M9ttKs2rHRIjOe/ckklHm+6HNQ=="
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.19.0.tgz",
+      "integrity": "sha512-vG2YHJveQUQqN0YBhapXb8y+Qp4OniHzRedlqKRxyL0Pc+kwXx5co4Vo+dcOI5/MX0p+8oERP2aCR77s4FEUJg=="
     },
     "node_modules/@sasjs/utils": {
       "version": "2.42.1",
@@ -2448,9 +2448,9 @@
       }
     },
     "node_modules/async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dependencies": {
         "lodash": "^4.17.14"
       }
@@ -11127,9 +11127,9 @@
       }
     },
     "@sasjs/core": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.9.0.tgz",
-      "integrity": "sha512-zc1Ey0ylHt/eRZAfK0mVG3EqNyq//wLxbiguiK0R6FhVqwYFEkprs3IiLGZ5M9ttKs2rHRIjOe/ckklHm+6HNQ=="
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.19.0.tgz",
+      "integrity": "sha512-vG2YHJveQUQqN0YBhapXb8y+Qp4OniHzRedlqKRxyL0Pc+kwXx5co4Vo+dcOI5/MX0p+8oERP2aCR77s4FEUJg=="
     },
     "@sasjs/utils": {
       "version": "2.42.1",
@@ -12060,9 +12060,9 @@
       }
     },
     "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "requires": {
         "lodash": "^4.17.14"
       }

api/package.json

@@ -8,6 +8,7 @@
     "prestart": "npm run initial",
     "prebuild": "npm run initial",
     "start": "nodemon ./src/server.ts",
+    "start:prod": "node ./build/src/server.js",
     "build": "rimraf build && tsc",
     "postbuild": "npm run copy:files",
     "swagger": "tsoa spec",
@@ -46,7 +47,7 @@
   },
   "author": "4GL Ltd",
   "dependencies": {
-    "@sasjs/core": "4.9.0",
+    "@sasjs/core": "^4.19.0",
     "@sasjs/utils": "2.42.1",
     "bcryptjs": "^2.4.3",
     "cookie-parser": "^1.4.6",

api/scripts/systemInit.sas

@@ -5,23 +5,12 @@
   _before_ any user-provided content.
 
   A number of useful CORE macros are also compiled below, so that they can be
-  available "out of the box".
+  available by default for Stored Programs.
+
+  Note that the full CORE library is available to sessions in SASjs Studio.
 
   <h4> SAS Macros </h4>
-  @li mcf_stpsrv_header.sas
-  @li mf_getuser.sas
-  @li mf_getvarlist.sas
-  @li mf_mkdir.sas
-  @li mf_nobs.sas
-  @li mf_uid.sas
   @li mfs_httpheader.sas
-  @li mp_dirlist.sas
-  @li mp_ds2ddl.sas
-  @li mp_ds2md.sas
-  @li mp_getdbml.sas
-  @li mp_init.sas
-  @li mp_makedata.sas
-  @li mp_zip.sas
-
+  @li ms_webout.sas
 **/
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "server",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "server",
-      "version": "0.0.57",
+      "version": "0.0.58",
       "devDependencies": {
         "prettier": "^2.3.1",
         "standard-version": "^9.3.2"

package.json

@@ -1,12 +1,12 @@
 {
   "name": "server",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "description": "NodeJS wrapper for calling the SAS binary executable",
   "repository": "https://github.com/sasjs/server",
   "scripts": {
     "server": "npm run server:prepare && npm run server:start",
-    "server:prepare": "cd web && npm ci && npm run build && cd ../api && npm ci && cd ..",
-    "server:start": "cd api && npm run start",
+    "server:prepare": "cd web && npm ci && npm run build && cd ../api && npm ci && npm run build && cd ..",
+    "server:start": "cd api && npm run start:prod",
     "release": "standard-version",
     "lint-api:fix": "npx prettier --write \"api/src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
     "lint-api": "npx prettier --check \"api/src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",

web/package-lock.json

@@ -22,6 +22,7 @@
         "@types/node": "^12.20.28",
         "@types/react": "^17.0.27",
         "axios": "^0.24.0",
+        "jwt-decode": "3.1.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.3.0"
@@ -4191,9 +4192,9 @@
       "dev": true
     },
     "node_modules/async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dev": true,
       "dependencies": {
         "lodash": "^4.17.14"
@@ -8161,6 +8162,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -14381,9 +14387,9 @@
       "dev": true
     },
     "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.14"
@@ -17382,6 +17388,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",

web/package.json

@@ -21,6 +21,7 @@
     "@types/node": "^12.20.28",
     "@types/react": "^17.0.27",
     "axios": "^0.24.0",
+    "jwt-decode": "3.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0"

web/src/components/header.tsx

@@ -114,7 +114,7 @@ const Header = (props: any) => {
           }}
         >
           <UserName
-            userName={appContext.userName}
+            userName={appContext.displayName}
             onClickHandler={handleMenu}
           />
           <Menu

web/src/context/appContext.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react'
 
 import axios from 'axios'
+import jwt_decode from 'jwt-decode'
 
 const NODE_ENV = process.env.NODE_ENV
 const PORT_API = process.env.PORT_API
@@ -73,6 +74,7 @@ const getTokens = () => {
 
 interface AppContextProps {
   userName: string
+  displayName: string
   setUserName: Dispatch<SetStateAction<string>> | null
   tokens?: { accessToken: string; refreshToken: string }
   setTokens: ((accessToken: string, refreshToken: string) => void) | null
@@ -81,6 +83,7 @@ interface AppContextProps {
 
 export const AppContext = createContext<AppContextProps>({
   userName: '',
+  displayName: '',
   tokens: getTokens(),
   setUserName: null,
   setTokens: null,
@@ -90,6 +93,7 @@ export const AppContext = createContext<AppContextProps>({
 const AppContextProvider = (props: { children: ReactNode }) => {
   const { children } = props
   const [userName, setUserName] = useState('')
+  const [displayName, setDisplayName] = useState('')
   const [tokens, setTokens] = useState(getTokens())
 
   useEffect(() => {
@@ -97,11 +101,27 @@ const AppContextProvider = (props: { children: ReactNode }) => {
   }, [])
 
   useEffect(() => {
-    console.log(97)
     if (tokens === undefined) {
-      console.log(99)
       localStorage.removeItem('accessToken')
       localStorage.removeItem('refreshToken')
+      setUserName('')
+      setDisplayName('')
+    } else {
+      const decoded: any = jwt_decode(tokens.accessToken)
+      if (decoded.userId) {
+        axios
+          .get(`/SASjsApi/user/${decoded.userId}`)
+          .then((res: any) => {
+            if (res.data && res.data?.displayName) {
+              setDisplayName(res.data.displayName)
+            } else if (res.data && res.data?.username) {
+              setDisplayName(res.data.username)
+            }
+          })
+          .catch((err) => {
+            console.log(err)
+          })
+      }
     }
   }, [tokens])
 
@@ -109,7 +129,6 @@ const AppContextProvider = (props: { children: ReactNode }) => {
     (accessToken: string, refreshToken: string) => {
       localStorage.setItem('accessToken', accessToken)
       localStorage.setItem('refreshToken', refreshToken)
-      console.log(accessToken)
       setAxiosRequestHeader(accessToken)
       setTokens({ accessToken, refreshToken })
     },
@@ -125,6 +144,7 @@ const AppContextProvider = (props: { children: ReactNode }) => {
     <AppContext.Provider
       value={{
         userName,
+        displayName,
         setUserName,
         tokens,
         setTokens: saveTokens,