From 389ef94cd508f1a6a10bd5eed95249964c90a73a Mon Sep 17 00:00:00 2001 From: Saad Jutt Date: Sat, 28 Aug 2021 10:01:20 +0500 Subject: [PATCH] feat(login): redirect mechanism - in page link to open popup --- src/auth/AuthManager.ts | 14 ++- src/auth/openWebPage.ts | 17 +++- src/utils/loginPrompt/index.ts | 166 ++++++++++++++++++++++++++++++++ src/utils/loginPrompt/style.css | 101 +++++++++++++++++++ 4 files changed, 291 insertions(+), 7 deletions(-) create mode 100644 src/utils/loginPrompt/index.ts create mode 100644 src/utils/loginPrompt/style.css diff --git a/src/auth/AuthManager.ts b/src/auth/AuthManager.ts index 0915650..c97f5ea 100644 --- a/src/auth/AuthManager.ts +++ b/src/auth/AuthManager.ts @@ -23,14 +23,18 @@ export class AuthManager { : '/SASLogon/logout.do?' } + /** + * Opens Pop up window to SAS Login screen. + * And checks if user has finished login process. + */ public async redirectedLogIn() { - const loginPopup = openWebPage(this.loginPreventRedirectUrl, 'SASLogon', { - width: 500, - height: 600 - }) + const loginPopup = await openWebPage( + this.loginPreventRedirectUrl, + 'SASLogon', + { width: 500, height: 600 } + ) if (!loginPopup) { - alert('Unable to open popup for login. Please try with other browser.') return { isLoggedIn: false } } diff --git a/src/auth/openWebPage.ts b/src/auth/openWebPage.ts index 75a3e10..79f3a4f 100644 --- a/src/auth/openWebPage.ts +++ b/src/auth/openWebPage.ts @@ -1,13 +1,15 @@ +import { openLoginPrompt } from '../utils/loginPrompt' + interface windowFeatures { width: number height: number } -export function openWebPage( +export async function openWebPage( url: string, windowName: string = '', { width, height }: windowFeatures -): Window | null { +): Promise { const left = screen.width / 2 - width / 2 const top = screen.height / 2 - height / 2 @@ -17,5 +19,16 @@ export function openWebPage( `toolbar=0,location=0,menubar=0,width=${width},height=${height},left=${left},top=${top}` ) + if (!loginPopup) { + const doLogin = await openLoginPrompt() + return doLogin + ? window.open( + url, + windowName, + `toolbar=0,location=0,menubar=0,width=${width},height=${height},left=${left},top=${top}` + ) + : null + } + return loginPopup } diff --git a/src/utils/loginPrompt/index.ts b/src/utils/loginPrompt/index.ts new file mode 100644 index 0000000..4924e9d --- /dev/null +++ b/src/utils/loginPrompt/index.ts @@ -0,0 +1,166 @@ +export const openLoginPrompt = (): Promise => { + return new Promise(async (resolve) => { + // const cssContent = await readFile(path.join(__dirname, 'style.css')) + const style = document.createElement('style') + style.id = 'stylesBySASjsAdapter' + style.innerText = cssContent + + const loginPromptBG = document.createElement('div') + loginPromptBG.id = 'loginPromptBG' + loginPromptBG.classList.add('popUpBG') + + const loginPrompt = document.createElement('div') + loginPrompt.id = 'loginPrompt' + loginPrompt.classList.add('popUp') + + const title = document.createElement('h1') + title.innerText = 'Session Expired!' + loginPrompt.appendChild(title) + + const descHolder = document.createElement('div') + const desc = document.createElement('span') + desc.innerText = 'You need to relogin, click OK to login.' + descHolder.appendChild(desc) + loginPrompt.appendChild(descHolder) + + const buttonCancel = document.createElement('button') + buttonCancel.classList.add('cancel') + buttonCancel.innerText = 'Cancel' + buttonCancel.onclick = () => { + closeLoginPrompt() + resolve(false) + } + loginPrompt.appendChild(buttonCancel) + + const buttonOk = document.createElement('button') + buttonOk.classList.add('confirm') + buttonOk.innerText = 'Ok' + buttonOk.onclick = () => { + closeLoginPrompt() + resolve(true) + } + loginPrompt.appendChild(buttonOk) + + document.body.style.overflow = 'hidden' + + document.body.appendChild(style) + document.body.appendChild(loginPromptBG) + document.body.appendChild(loginPrompt) + }) +} +const closeLoginPrompt = () => { + let elem = document.querySelector('#stylesBySASjsAdapter') + elem?.parentNode?.removeChild(elem) + + elem = document.querySelector('#loginPrompt') + elem?.parentNode?.removeChild(elem) + + elem = document.querySelector('#loginPromptBG') + elem?.parentNode?.removeChild(elem) + + document.body.style.overflow = 'auto' +} + +const cssContent = ` +.popUp { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + display: block; + position: fixed; + top: 40%; + left: 50%; + padding: 0; + font-size: 14px; + font-family: 'PT Sans', sans-serif; + color: #fff; + border-style: none; + z-index: 999; + overflow: hidden; + background: rgba(0, 0, 0, 0.2); + margin: 0; + width: 100%; + max-width: 300px; + height: auto; + max-height: 300px; + transform: translate(-50%, -50%); +} +.popUp > h1 { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + padding: 5px; + min-height: 40px; + font-size: 1.2em; + font-weight: bold; + text-align: center; + color: #fff; + background-color: transparent; + border-style: none; + border-width: 5px; + border-color: black; +} +.popUp > div { + width: 100%; + height: calc(100% -108px); + margin: 0; + display: block; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + padding: 5%; + text-align: center; + border-width: 1px; + border-color: #ccc; + border-style: none none solid none; + overflow: auto; +} +.popUp > div > span { + display: table-cell; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + margin: 0; + padding: 0; + width: 300px; + height: 108px; + vertical-align: middle; + border-style: none; +} +.popUp .cancel { + float: left; +} +.popUp .confirm { + float: right; +} +.popUp > button { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + margin: 0; + padding: 10px; + width: 50%; + border: 1px none #ccc; + color: #fff; + font-family: inherit; + cursor: pointer; + height: 50px; + background: rgba(1, 1, 1, 0.2); +} +.popUp > button:hover { + background: rgba(0, 0, 0, 0.2); +} +.popUpBG { + display: block; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + opacity: 0.95; + z-index: 50; + background-image: radial-gradient(#0378cd, #012036); +} +` diff --git a/src/utils/loginPrompt/style.css b/src/utils/loginPrompt/style.css new file mode 100644 index 0000000..ab6df54 --- /dev/null +++ b/src/utils/loginPrompt/style.css @@ -0,0 +1,101 @@ +.popUp { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + display: block; + position: fixed; + top: 40%; + left: 50%; + padding: 0; + font-size: 14px; + font-family: 'PT Sans', sans-serif; + color: #fff; + border-style: none; + z-index: 999; + overflow: hidden; + background: rgba(0, 0, 0, 0.2); + margin: 0; + width: 100%; + max-width: 300px; + height: auto; + max-height: 300px; + transform: translate(-50%, -50%); +} +.popUp > h1 { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + padding: 5px; + min-height: 40px; + font-size: 1.2em; + font-weight: bold; + text-align: center; + color: #fff; + background-color: transparent; + border-style: none; + border-width: 5px; + border-color: black; +} +.popUp > div { + width: 100%; + height: calc(100% -108px); + margin: 0; + display: block; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + padding: 5%; + text-align: center; + border-width: 1px; + border-color: #ccc; + border-style: none none solid none; + overflow: auto; +} +.popUp > div > span { + display: table-cell; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + margin: 0; + padding: 0; + width: 300px; + height: 108px; + vertical-align: middle; + border-style: none; +} +.popUp .cancel { + float: left; +} +.popUp .confirm { + float: right; +} +.popUp > button { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + margin: 0; + padding: 10px; + width: 50%; + border: 1px none #ccc; + color: #fff; + font-family: inherit; + cursor: pointer; + height: 50px; + background: rgba(1, 1, 1, 0.2); +} +.popUp > button:hover { + background: rgba(0, 0, 0, 0.2); +} +.popUpBG { + display: block; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + opacity: 0.95; + z-index: 50; + background-image: radial-gradient(#0378cd, #012036); +}