From b02136d01370d5adfa5ea1580f2d0e6de748cd36 Mon Sep 17 00:00:00 2001
From: Vlad Piersec <vlad.piersec@8x8.com>
Date: Mon, 26 Oct 2020 13:53:44 +0200
Subject: [PATCH] feat(prejoin): Add name from jwt to prejoin screen

---
 react/features/base/jwt/functions.js       | 14 ++++++++++++
 react/features/base/settings/middleware.js | 26 ++++++++++++++++++++++
 react/features/prejoin/actionTypes.js      |  5 +++++
 react/features/prejoin/actions.js          | 14 +++++++++++-
 4 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/react/features/base/jwt/functions.js b/react/features/base/jwt/functions.js
index 45af42688..8d8ffc447 100644
--- a/react/features/base/jwt/functions.js
+++ b/react/features/base/jwt/functions.js
@@ -1,5 +1,7 @@
 /* @flow */
 
+import jwtDecode from 'jwt-decode';
+
 import { parseURLParams } from '../util';
 
 /**
@@ -14,3 +16,15 @@ import { parseURLParams } from '../util';
 export function parseJWTFromURLParams(url: URL = window.location) {
     return parseURLParams(url, true, 'search').jwt;
 }
+
+/**
+ * Returns the user name after decoding the jwt.
+ *
+ * @param {Object} state - The app state.
+ * @returns {string}
+ */
+export function getJwtName(state: Object) {
+    const jwtData = jwtDecode(state['features/base/jwt'].jwt);
+
+    return jwtData?.context?.user?.name || '';
+}
diff --git a/react/features/base/settings/middleware.js b/react/features/base/settings/middleware.js
index 6d40e78d2..90bcd6593 100644
--- a/react/features/base/settings/middleware.js
+++ b/react/features/base/settings/middleware.js
@@ -1,9 +1,11 @@
 // @flow
 import _ from 'lodash';
 
+import { PREJOIN_INITIALIZED } from '../../prejoin/actionTypes';
 import { APP_WILL_MOUNT } from '../app';
 import { setAudioOnly } from '../audio-only';
 import { SET_LOCATION_URL } from '../connection/actionTypes'; // minimize imports to avoid circular imports
+import { getJwtName } from '../jwt/functions';
 import { getLocalParticipant, participantUpdated } from '../participants';
 import { MiddlewareRegistry } from '../redux';
 import { parseURLParams } from '../util';
@@ -27,6 +29,10 @@ MiddlewareRegistry.register(store => next => action => {
     case APP_WILL_MOUNT:
         _initializeCallIntegration(store);
         break;
+    case PREJOIN_INITIALIZED: {
+        _maybeUpdateDisplayName(store);
+        break;
+    }
     case SETTINGS_UPDATED:
         _maybeHandleCallIntegrationChange(action);
         _maybeSetAudioOnly(store, action);
@@ -115,6 +121,26 @@ function _maybeSetAudioOnly(
     }
 }
 
+/**
+ * Updates the display name to the one in JWT if there is one.
+ *
+ * @param {Store} store - The redux store.
+ * @private
+ * @returns {void}
+ */
+function _maybeUpdateDisplayName({ dispatch, getState }) {
+    const state = getState();
+    const hasJwt = Boolean(state['features/base/jwt'].jwt);
+
+    if (hasJwt) {
+        const displayName = getJwtName(state);
+
+        dispatch(updateSettings({
+            displayName
+        }));
+    }
+}
+
 /**
  * Updates the local participant according to settings changes.
  *
diff --git a/react/features/prejoin/actionTypes.js b/react/features/prejoin/actionTypes.js
index 1e9f0cd2d..5d66041ad 100644
--- a/react/features/prejoin/actionTypes.js
+++ b/react/features/prejoin/actionTypes.js
@@ -4,6 +4,11 @@
  */
 export const PREJOIN_START_CONFERENCE = 'PREJOIN_START_CONFERENCE';
 
+/**
+ * Action type to signal that prejoin page was initialized.
+ */
+export const PREJOIN_INITIALIZED = 'PREJOIN_INITIALIZED';
+
 /**
  * Action type to set the status of the device.
  */
diff --git a/react/features/prejoin/actions.js b/react/features/prejoin/actions.js
index d80beb781..1d9a2945f 100644
--- a/react/features/prejoin/actions.js
+++ b/react/features/prejoin/actions.js
@@ -18,6 +18,7 @@ import { executeDialOutRequest, executeDialOutStatusRequest, getDialInfoPageURL
 import { showErrorNotification } from '../notifications';
 
 import {
+    PREJOIN_INITIALIZED,
     PREJOIN_START_CONFERENCE,
     SET_DEVICE_STATUS,
     SET_DIALOUT_COUNTRY,
@@ -195,7 +196,7 @@ export function dialOut(onSuccess: Function, onFail: Function) {
 export function initPrejoin(tracks: Object[], errors: Object) {
     return async function(dispatch: Function) {
         dispatch(setPrejoinDeviceErrors(errors));
-
+        dispatch(prejoinInitialized());
 
         tracks.forEach(track => dispatch(trackAdded(track)));
     };
@@ -269,6 +270,17 @@ export function openDialInPage() {
     };
 }
 
+/**
+ * Action used to signal that the prejoin page has been initialized.
+ *
+ * @returns {Object}
+ */
+function prejoinInitialized() {
+    return {
+        type: PREJOIN_INITIALIZED
+    };
+}
+
 /**
  * Creates a new audio track based on a device id and replaces the current one.
  *