chore(redirectLogin): onLoggedOut callback should be an async

src/auth/openWebPage.ts

@@ -9,7 +9,7 @@ export async function openWebPage(
   url: string,
   windowName: string = '',
   { width, height }: windowFeatures,
-  onLoggedOut?: Function
+  onLoggedOut?: () => Promise<Boolean>
 ): Promise<Window | null> {
   const left = screen.width / 2 - width / 2
   const top = screen.height / 2 - height / 2
@@ -21,12 +21,9 @@ export async function openWebPage(
   )
 
   if (!loginPopup) {
-    if (onLoggedOut) {
-      onLoggedOut()
-      return null
-    }
+    const getUserAction: () => Promise<Boolean> = onLoggedOut ?? openLoginPrompt
 
-    const doLogin = await openLoginPrompt()
+    const doLogin = await getUserAction()
     return doLogin
       ? window.open(
           url,

src/types/LoginOptions.ts

@@ -1,3 +1,3 @@
 export interface LoginOptions {
-  onLoggedOut?: Function
+  onLoggedOut?: () => Promise<boolean>
 }

src/utils/loginPrompt/index.ts

@@ -1,16 +1,21 @@
+enum domIDs {
+  styles = 'sasjsAdapterStyles',
+  overlay = 'sasjsAdapterLoginPromptBG',
+  dialog = 'sasjsAdapterLoginPrompt'
+}
+
 export const openLoginPrompt = (): Promise<boolean> => {
   return new Promise(async (resolve) => {
-    // const cssContent = await readFile(path.join(__dirname, 'style.css'))
     const style = document.createElement('style')
-    style.id = 'stylesBySASjsAdapter'
+    style.id = domIDs.styles
     style.innerText = cssContent
 
     const loginPromptBG = document.createElement('div')
-    loginPromptBG.id = 'loginPromptBG'
+    loginPromptBG.id = domIDs.overlay
     loginPromptBG.classList.add('popUpBG')
 
     const loginPrompt = document.createElement('div')
-    loginPrompt.id = 'loginPrompt'
+    loginPrompt.id = domIDs.dialog
     loginPrompt.classList.add('popUp')
 
     const title = document.createElement('h1')
@@ -49,14 +54,10 @@ export const openLoginPrompt = (): Promise<boolean> => {
   })
 }
 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)
+  Object.keys(domIDs).forEach((id) => {
+    const elem = document.getElementById(id)
+    elem?.parentNode?.removeChild(elem)
+  })
 
   document.body.style.overflow = 'auto'
 }

src/utils/loginPrompt/style.css

@@ -1,101 +0,0 @@
-.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);
-}