From b60aa685b21af308b972ef6fc60fcc6d9e630b57 Mon Sep 17 00:00:00 2001 From: rohanharikr Date: Fri, 22 Nov 2024 14:21:20 +0000 Subject: [PATCH] review fixes (#6) --- main.js | 144 ++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 89 insertions(+), 55 deletions(-) diff --git a/main.js b/main.js index 1139531..675624f 100644 --- a/main.js +++ b/main.js @@ -29,7 +29,7 @@ const closeModalBtn = document.querySelector('#close-modal-btn'); // bindings window.addEventListener('load', onLoad); -loginBtn.addEventListener('click', login); +loginBtn.addEventListener('click', loginEvent); logoutBtn.addEventListener('click', logout); inviteBtn.addEventListener('click', invite); closeModalBtn.addEventListener('click', closeModal); @@ -39,22 +39,31 @@ async function onLoad() { const hash = window.location.hash.substring(1); const params = new URLSearchParams(search || hash); - const idpFlow = params.has('iss'); - const code = params.has('code'); - const error = params.has('error'); - const profile = JSON.parse(sessionStorage.getItem('profile')); - - if (idpFlow) return login(null, params); - if (code) processCode(params); - else if (error) processError(params, profile); - else if (profile) showProfile(profile); - else showLoginPage(); + if (params.has('iss')) // 3P initiated login + return login(params); + + if (params.has('code')) // successful login from Hellō + processCode(params); + else { + const profile = JSON.parse(sessionStorage.getItem('profile')); + if (params.has('error')) // we got back an error from Hellō + processError(params, profile); + else if (profile) // we are logged in + showProfile(profile); + else + showLoginPage(); + } clearFragment(); removeLoader(); } -async function login(_, params) { +function loginEvent(event, params) { + // we don't use the event + return login(params); +} + +async function login(params) { loginBtn.classList.add('hello-btn-loader'); loginBtn.disabled = true; @@ -70,33 +79,46 @@ async function login(_, params) { sessionStorage.setItem('nonce', nonce); sessionStorage.setItem('code_verifier', code_verifier); - await sendPlausibleEvent({ u: '/start/login', n: 'action' }); + await sendPlausibleEvent({ path: '/start/login', n: 'action' }); window.location.href = url; } function logout() { - sendPlausibleEvent({ u: '/logout', n: 'action' }); + sendPlausibleEvent({ path: '/logout', n: 'action' }); sessionStorage.clear(); showLoginPage(); } async function processCode(params) { try { + const code_verifier = sessionStorage.getItem('code_verifier'); + const nonce = sessionStorage.getItem('nonce'); + const code = params.get('code'); + if (!code_verifier) + throw new Error('Missing code_verifier'); + if (!nonce) + throw new Error('Missing nonce'); + if (!code) + throw new Error('Missing code'); + const token = await fetchToken({ client_id: CONFIG.client_id, redirect_uri: CONFIG.redirect_uri, - code_verifier: sessionStorage.getItem('code_verifier'), - nonce: sessionStorage.getItem('nonce'), - code: params.get('code') + code_verifier, + nonce, + code, }); + if (!token) + throw new Error('Did not get response from token endpoint'); const { payload: profile } = parseToken(token); + if (!profile) + throw new Error('Did not get profile from token'); - // clean code_verifier, nonce - sessionStorage.clear(); + sessionStorage.clear(); // clean code_verifier, nonce sessionStorage.setItem('profile', JSON.stringify(profile)); - sendPlausibleEvent({ u: '/profile' }); + sendPlausibleEvent({ path: '/profile' }); showProfile(profile); } catch (err) { console.error(err) @@ -109,16 +131,20 @@ async function processCode(params) { } function processError(params, profile) { - const error = params.get('error'); + const error = params && params.get('error'); modalContainer.style.display = 'flex'; errorContainer.style.display = 'block'; - if (error === 'access_denied') errorField.innerText = 'User cancelled request.'; - else errorField.innerText = 'Something went wrong.'; + if (error === 'access_denied') + errorField.innerText = 'User cancelled request.'; + else + errorField.innerText = 'Something went wrong.'; - if (profile) showProfile(profile); - else showLoginPage(); + if (profile) + showProfile(profile); + else + showLoginPage(); } function closeModal() { @@ -139,11 +165,11 @@ function removeLoader() { } function showLoginPage() { - let u = '/'; + let path = '/'; if (window.location.search) { - u += window.location.search; + path += window.location.search; } - sendPlausibleEvent({ u }); + sendPlausibleEvent({ path }); loginPage.style.visibility = 'visible'; loginPage.style.position = 'relative'; profilePage.style.display = 'none'; @@ -151,37 +177,34 @@ function showLoginPage() { document.body.style.backgroundImage = 'url(/assets/bg.jpg)'; } -async function sendPlausibleEvent(body) { - if ( - localStorage.getItem('plausible_ignore') == 'true' - || window.location.origin !== 'https://www.b2bsaasdemo.com' - ) { - console.info('Ignoring Event: localStorage flag'); - return; - } - const _body = { +const plausibleIgnore = localStorage.getItem('plausible_ignore') == 'true' + || window.location.origin !== 'https://www.greenfielddemo.com'; + +async function sendPlausibleEvent(pEvent) { + if (plausibleIgnore) + return console.info('Ignoring Event: localStorage flag'); + + const { path, n = 'pageview' } = pEvent; + + const u = new URL(path, 'https://www.greenfielddemo.com') + const body = { u, n, w: window.innerWidth, - d: 'b2bsaasdemo.com', - ...body, - n: body.n || 'pageview', - r: body.r || document.referrer || null, - u: new URL(body.u, 'https://www.b2bsaasdemo.com'), + d: 'greenfielddemo.com', + r: document.referrer || null, }; try { await fetch('/api/event', { method: 'POST', - body: JSON.stringify(_body), + body: JSON.stringify(body), }); - console.info(`Event sent: ${_body.u} (${_body.n})`); + console.info(`Event sent: ${body.u} (${body.n})`); } catch (err) { console.error(err); } } function showProfile(profile) { - const { - name, picture, email, org - } = profile; + const { name, picture, email, org } = profile; fullNameField.innerText = name; emailField.innerText = email; pictureField.src = picture; @@ -199,14 +222,25 @@ async function invite() { inviteBtn.classList.add('hello-btn-loader'); inviteBtn.disabled = true; - const { sub } = JSON.parse(sessionStorage.getItem('profile')); - const { url } = createInviteRequest({ - inviter: sub, - client_id: CONFIG.client_id, - initiate_login_uri: window.location.origin, - return_uri: window.location.origin - }) - window.location.href = url; + try { + const { sub } = JSON.parse(sessionStorage.getItem('profile')); + if (!sub) + throw new Error('Missing sub') + + const { url } = createInviteRequest({ + inviter: sub, + client_id: CONFIG.client_id, + initiate_login_uri: window.location.origin, + return_uri: window.location.origin + }) + window.location.href = url; + } catch(err) { + console.error(err) + inviteBtn.classList.remove('hello-btn-loader'); + inviteBtn.disabled = false; + sessionStorage.clear(); + processError(); + } } /*