46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
export const AUTH_SHELL_BACKDROP_ID = 'hypertwist-auth-shell-backdrop'
|
|
|
|
function applyAuthShellBackdropStyles(backdrop: HTMLElement) {
|
|
backdrop.id = AUTH_SHELL_BACKDROP_ID
|
|
backdrop.setAttribute('data-testid', 'supertokens-auth-backdrop')
|
|
backdrop.setAttribute('aria-hidden', 'true')
|
|
backdrop.style.position = 'fixed'
|
|
backdrop.style.inset = '0'
|
|
backdrop.style.zIndex = '0'
|
|
backdrop.style.pointerEvents = 'none'
|
|
backdrop.style.background =
|
|
'radial-gradient(circle at top, rgba(84,203,255,0.12), transparent 32%), radial-gradient(circle at 82% 14%, rgba(247,178,103,0.12), transparent 24%), linear-gradient(180deg, rgba(9,12,24,0.26), rgba(7,10,19,0.38))'
|
|
}
|
|
|
|
export function isAuthShellRoute(pathname: string) {
|
|
return pathname === '/login'
|
|
|| pathname.startsWith('/login/')
|
|
|| pathname === '/register'
|
|
|| pathname.startsWith('/register/')
|
|
|| pathname.startsWith('/auth/')
|
|
}
|
|
|
|
export function ensureAuthShellBackdrop(doc: Document = document) {
|
|
const existingBackdrop = doc.getElementById(AUTH_SHELL_BACKDROP_ID)
|
|
if (existingBackdrop instanceof HTMLElement) {
|
|
applyAuthShellBackdropStyles(existingBackdrop)
|
|
return existingBackdrop
|
|
}
|
|
|
|
const backdrop = doc.createElement('div')
|
|
applyAuthShellBackdropStyles(backdrop)
|
|
doc.body.appendChild(backdrop)
|
|
return backdrop
|
|
}
|
|
|
|
export function syncAuthShellBackdrop(pathname: string, doc: Document = document) {
|
|
const shouldRender = isAuthShellRoute(pathname)
|
|
const existingBackdrop = doc.getElementById(AUTH_SHELL_BACKDROP_ID)
|
|
|
|
if (!shouldRender) {
|
|
existingBackdrop?.remove()
|
|
return
|
|
}
|
|
|
|
ensureAuthShellBackdrop(doc)
|
|
}
|