From 969458d83d86003dc0e91af1e8e38406f759239d Mon Sep 17 00:00:00 2001 From: Antonio Etayo Date: Sun, 14 May 2023 14:06:31 -0400 Subject: [PATCH] Bugfix to appease popup blocker --- .../MsTeams/MsTeamsActivityContainer/index.js | 60 ++++++++++++------- .../MsTeamsActivityContainer/style.scss | 14 +++++ src/containers/MsTeams/callback.js | 1 + 3 files changed, 54 insertions(+), 21 deletions(-) diff --git a/src/containers/LMS/MsTeams/MsTeamsActivityContainer/index.js b/src/containers/LMS/MsTeams/MsTeamsActivityContainer/index.js index 75fe4d8b4..79828d595 100644 --- a/src/containers/LMS/MsTeams/MsTeamsActivityContainer/index.js +++ b/src/containers/LMS/MsTeams/MsTeamsActivityContainer/index.js @@ -24,6 +24,7 @@ function MsTeamsActivityContainer({ match, history }) { const [freshToken, setFreshToken] = useState((token && ((new Date() - new Date(tokenTimestamp)) / 1000) / 60 < 15)); const [error, setError] = useState(null); const [activityParams, setActivityParams] = useState(null); + const [showOAuth, setShowOAuth] = useState(false); // Getting the microsoft auth code that will allow us to request a token on the callback and redirect back here @@ -43,27 +44,7 @@ function MsTeamsActivityContainer({ match, history }) { // No permission grant from user or admin. Going into oauth flow if (e.errors === 'invalid_grant') { - const url = new URL(`https://login.microsoftonline.com/${tenantId}/oauth2/authorize`); - const params = new URLSearchParams(); - params.append('client_id', config.teamsClientId); - params.append('response_type', 'code'); - params.append('scope', 'offline_access user.read mail.read'); - params.append('redirect_uri', `https://${window.location.hostname}/msteams/callback`); - params.append('state', window.location.href); - url.search = params.toString(); - authentication.authenticate({ url: url.href }).then((result) => { - console.log('authentication worked maybe', result); - const tokenTimestamp = localStorage.getItem('msteams_token_timestamp'); - const tempToken = localStorage.getItem('msteams_token'); - setToken(tempToken); - setFreshToken((tempToken && ((new Date() - new Date(tokenTimestamp)) / 1000) / 60 < 15)); - }).catch((e) => { - console.log('failed to authenticate', e); - if (e.message === 'CancelledByUser') - setError('Please reload the tab and follow the instructions in the authentication popup to use this application or ask your Teams administrator Grant consent for the Curriki Application on behalf of your organization.'); - else if (e.message === 'FailedToOpenWindow') - setError('If you have a pop-up blocker, please enable pop-ups for https://teams.microsoft.com then reload the tab and follow the instructions in the authentication pop-up. Alternatively, you can ask your Teams administrator Grant consent for the Curriki Application on behalf of your organization.'); - }); + setShowOAuth(true); } else { setError('There was a problem initializing the application. Please contact your Teams administrator. E003'); } @@ -133,6 +114,30 @@ function MsTeamsActivityContainer({ match, history }) { setError('Error fetching submission status'); }); }, [freshToken]); + + const doLogin = () => { + setShowOAuth(false); + const url = new URL(`https://login.microsoftonline.com/${tenantId}/oauth2/authorize`); + const params = new URLSearchParams(); + params.append('client_id', config.teamsClientId); + params.append('response_type', 'code'); + params.append('scope', 'offline_access user.read mail.read'); + params.append('redirect_uri', `https://${window.location.hostname}/msteams/callback`); + params.append('state', window.location.href); + url.search = params.toString(); + authentication.authenticate({ url: url.href }).then((result) => { + const tokenTimestamp = localStorage.getItem('msteams_token_timestamp'); + const tempToken = localStorage.getItem('msteams_token'); + setToken(tempToken); + setFreshToken((tempToken && ((new Date() - new Date(tokenTimestamp)) / 1000) / 60 < 15)); + }).catch((e) => { + console.log('failed to authenticate', e); + if (e.message === 'CancelledByUser') + setError('Please reload the tab and follow the instructions in the authentication popup to use this application or ask your Teams administrator Grant consent for the Curriki Application on behalf of your organization.'); + else if (e.message === 'FailedToOpenWindow') + setError('If you have a pop-up blocker, please enable pop-ups for https://teams.microsoft.com then reload the tab and follow the instructions in the authentication pop-up. Alternatively, you can ask your Teams administrator Grant consent for the Curriki Application on behalf of your organization.'); + }); + }; return ( <> @@ -155,6 +160,19 @@ function MsTeamsActivityContainer({ match, history }) { )} + {showOAuth && ( +
+
+
+ Curriki Studio logo +
+
+

The Curriki Studio application for Microsoft Teams requires you to grant certain permissions. Please click the login button to proceed.

+ +
+
+
+ )} {!error && activityParams && } diff --git a/src/containers/LMS/MsTeams/MsTeamsActivityContainer/style.scss b/src/containers/LMS/MsTeams/MsTeamsActivityContainer/style.scss index 33725ce41..b57508278 100644 --- a/src/containers/LMS/MsTeams/MsTeamsActivityContainer/style.scss +++ b/src/containers/LMS/MsTeams/MsTeamsActivityContainer/style.scss @@ -63,5 +63,19 @@ display: flex; align-items: center; font-size: large; + padding: 2em; + } + + .login-message { + padding: 2em; + p, button { + color: whitesmoke !important; + display: block; + } + + button { + background-color: #084892; + float:right; + } } } \ No newline at end of file diff --git a/src/containers/MsTeams/callback.js b/src/containers/MsTeams/callback.js index f8f10e031..b2d1db176 100644 --- a/src/containers/MsTeams/callback.js +++ b/src/containers/MsTeams/callback.js @@ -33,6 +33,7 @@ const MsTeamsCallBack = () => { setError('Failed to authenticate with Microsoft Teams'); localStorage.removeItem('msteams_token'); localStorage.removeItem('msteams_refresh_token'); + window.close(); }); }, []);