Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade bootstrap 5 3 3 #859

Merged
merged 7 commits into from
Dec 5, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ temp
.DS_Store
.hintrc
.eslintrc.js
eslint.config.js
eslint.config.mjs
connectApp-translation
node_modules/
local-dev/
Expand Down
54 changes: 32 additions & 22 deletions app.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getParameters, validateToken, userLoggedIn, getMyData, hasUserData, getMyCollections, showAnimation, hideAnimation, storeResponse, isBrowserCompatible, inactivityTime, urls, appState, processAuthWithFirebaseAdmin, successResponse, logDDRumError, translateHTML, translateText, languageAcronyms, toggleNavbarMobileView } from "./js/shared.js";
import { userNavBar, homeNavBar, languageSelector, signOutNavBarTemplate } from "./js/components/navbar.js";
import { homePage, joinNowBtn, whereAmIInDashboard, renderHomeAboutPage, renderHomeExpectationsPage, renderHomePrivacyPage } from "./js/pages/homePage.js";
import { addEventPinAutoUpperCase, addEventRequestPINForm, addEventRetrieveNotifications, toggleCurrentPage, toggleCurrentPageNoUser, addEventToggleSubmit, addEventLanguageSelection } from "./js/event.js";
import { addEventPinAutoUpperCase, addEventRequestPINForm, addEventRetrieveNotifications, toggleCurrentPage, toggleCurrentPageNoUser, addEventToggleSubmit, addEventLanguageSelection, environmentWarningModal } from "./js/event.js";
import { requestPINTemplate, duplicateAccountReminderRender } from "./js/pages/healthCareProvider.js";
import { myToDoList } from "./js/pages/myToDoList.js";
import {renderNotificationsPage} from "./js/pages/notifications.js"
Expand Down Expand Up @@ -98,7 +98,6 @@ window.onload = async () => {
return;
}
!firebase.apps.length ? firebase.initializeApp(localDevFirebaseConfig) : firebase.app();
window.DD_RUM && window.DD_RUM.init({ ...datadogConfig, env: 'dev' });
} else {
script.src = `https://maps.googleapis.com/maps/api/js?key=${devFirebaseConfig.apiKey}&libraries=places&callback=Function.prototype`
!firebase.apps.length ? firebase.initializeApp(devFirebaseConfig) : firebase.app();
Expand All @@ -111,24 +110,29 @@ window.onload = async () => {
auth = firebase.auth();

auth.onAuthStateChanged(async (user) => {
let idToken = '';
if (user) {
idToken = await user.getIdToken();
if (!user.isAnonymous) {
localforage.clear();
inactivityTime();
const firstSignInTime = new Date(user.metadata.creationTime).toISOString();
appState.setState({ participantData: { firstSignInTime } });
}
}
let idToken = '';
if (user) {
idToken = await user.getIdToken();
if (!user.isAnonymous) {
localforage.clear();
const firstSignInTime = new Date(user.metadata.creationTime).toISOString();
appState.setState({ participantData: { firstSignInTime } }); // TODO: potential issue with firstSignInTimestamp
}
}

appState.setState({ idToken });
appState.setState({ idToken });

await router();

if (user && !user.isAnonymous) {
inactivityTime();
}
});

const footer = document.getElementById('footer');
footer.innerHTML = footerTemplate();

router();
if (footer) {
JoeArmani marked this conversation as resolved.
Show resolved Hide resolved
footer.innerHTML = footerTemplate();
}
}

const handleVerifyEmail = (auth, actionCode) => {
Expand Down Expand Up @@ -194,8 +198,8 @@ const handleResetPassword = (auth, actionCode) => {
});
}

window.onhashchange = () => {
router();
window.onhashchange = async () => {
await router();
}

const router = async () => {
Expand Down Expand Up @@ -229,7 +233,7 @@ const router = async () => {
renderLanguageSelector();

if (route === '#') {
homePage();
await homePage();
} else if (route === '#about') {
renderHomeAboutPage();
} else if (route === '#expectations') {
Expand Down Expand Up @@ -266,7 +270,7 @@ const router = async () => {
if (route === '#') userProfile();
else if (route === '#dashboard') userProfile();
else if (route === '#messages') renderNotificationsPage();
else if (route === '#sign_out') signOut();
else if (route === '#sign_out') await signOut();
else if (route === '#forms') renderAgreements();
else if (route === '#myprofile') renderSettingsPage();
else if (route === '#support') renderSupportPage();
Expand Down Expand Up @@ -402,7 +406,9 @@ const userProfile = () => {
});
}

const signOut = () => {
export const signOut = async () => {
toggleNavbarMobileView();

// Record a logout action and stop the DataDog session. This or 15 mins of inactivity will create a new session when the next action is taken.
if (!isLocalDev && window.DD_RUM) {
window.DD_RUM.addAction('user_logout', {
Expand All @@ -412,7 +418,11 @@ const signOut = () => {
isDataDogUserSessionSet = false;
}

firebase.auth().signOut();
console.log("signing current user out!");
JoeArmani marked this conversation as resolved.
Show resolved Hide resolved
localforage.clear();

await firebase.auth().signOut();

window.location.hash = '#';
document.title = translateText('shared.homeTitle');
}
Expand Down
10 changes: 4 additions & 6 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ a{
#root {
height: 100%;
margin-top:1px;
margin-left:15px;
margin-right:15px;
}

#footer {
Expand Down Expand Up @@ -1485,12 +1483,12 @@ button.connect-secondary {
}

#languageSelector {
margin-bottom: .25rem;
margin-bottom: 0.25rem;
}

@media (max-width: 991.98px) {
.navbar-collapse {
padding-top: .75rem;
padding-top: 0.75rem;
}

.navbar-toggler {
Expand All @@ -1501,8 +1499,8 @@ button.connect-secondary {
.navbar-collapse.show~#languageSelectorContainer,
.navbar-collapse.collapsing~#languageSelectorContainer {
position: absolute;
right: .75rem;
top: .8rem;
right: 0.75rem;
top: 0.8rem;
}
}

Expand Down
89 changes: 35 additions & 54 deletions js/event.js
Original file line number Diff line number Diff line change
Expand Up @@ -765,6 +765,12 @@ export const downtimeWarning = () => {
}

export const environmentWarningModal = () => {
// Ensure the warning modal is only shown once per login cycle (dev)
const devWarningShown = appState.getState()?.isDevWarningShown;
if (devWarningShown === true) return;

appState.setState({ isDevWarningShown: false });
JoeArmani marked this conversation as resolved.
Show resolved Hide resolved

document.getElementById('connectWarningModalHeader').style.display = 'block';
document.getElementById('connectWarningModalHeader').innerHTML = `
<h4 style="text-align:center; color:red">WARNING</h4>
Expand Down Expand Up @@ -797,8 +803,10 @@ export const environmentWarningModal = () => {
</div>
`;

const signInBtn = document.getElementById('signInBtn');
const modalElement = document.getElementById('connectWarningModal');
const modal = new bootstrap.Modal(modalElement);
JoeArmani marked this conversation as resolved.
Show resolved Hide resolved
modalElement.inert = false;
modal.show();

const testingAccessCode = document.getElementById('testingAccessCode');
Expand All @@ -808,13 +816,37 @@ export const environmentWarningModal = () => {
testingAccessCode.addEventListener('keyup', () => {
if(warningCloseBtn) warningCloseBtn.disabled = !(testingAccessCode.value == 'agree')
});

// allow enter key if warningCloseBtn is enabled
testingAccessCode.addEventListener('keydown', (e) => {
if(e.key === 'Enter' && !warningCloseBtn.disabled) {
e.preventDefault();
warningCloseBtn.click();
}
});

setTimeout(() => {
testingAccessCode.focus();
}, 500);

}

warningCloseBtn.addEventListener('click', () => {
modalElement.inert = true;
modal.hide();

if (signInBtn) {
signInBtn.focus();
}

appState.setState({ isDevWarningShown: true });
});

modalElement.addEventListener('hidden.bs.modal', (event) => {
if (event.target === modal && signInBtn) {
signInBtn.focus();
}
});
}

export const removeAllErrors = () => {
Expand Down Expand Up @@ -1097,57 +1129,6 @@ const verifyUserDetails = (formData) => {

}

// TODO: this doesn't appear to be used anywhere
export const addEventPreferredContactType = () => {
const p1 = document.getElementById('textPermissionYes');
const p2 = document.getElementById('textPermissionNo');
const email = document.getElementById('UPEmail');

p1.addEventListener('click', () => {
const div = document.getElementById('preferredEmailPhone');
div.classList = ['form-group row']
div.innerHTML = `
<div class="col">
<label class="col-form-label">
How do you prefer that we reach you?
</label>
<br>
<div class="btn-group btn-group-toggle col-md-4" style="margin-left:0px;">
<label><input type="radio" name="methodOfContact" value="127547625"> Text Message</label>
<label><input type="radio" name="methodOfContact" value="357184057" style="margin-left:10px;"> Email</label>
</div>
</div>
`;
});

p2.addEventListener('click', () => {
const div = document.getElementById('preferredEmailPhone');
div.classList = '';
div.innerHTML = '';
});

email.addEventListener('keyup', () => {
if(p1.classList.contains('active') && email.value){
const div = document.getElementById('preferredEmailPhone');
if(div.innerHTML === ''){
div.classList = ['form-group row']
div.innerHTML = `
<label class="col-md-4 col-form-label">How do you prefer that we reach you?</label>
<div class="btn-group btn-group-toggle col-md-4" data-bs-toggle="buttons">
<label class="btn btn-light up-btns"><input type="radio" name="methodOfContact" value="127547625">Text Message</label>
<label class="btn btn-light up-btns"><input type="radio" name="methodOfContact" value="357184057">Email</label>
</div>
`;
}
}
else {
const div = document.getElementById('preferredEmailPhone');
div.classList = '';
div.innerHTML = '';
}
});
}

export const addEventPinAutoUpperCase = () => {
const pin = document.getElementById('participantPIN')
pin.addEventListener('input', () => {
Expand Down Expand Up @@ -1404,7 +1385,7 @@ export const addEventLanguageSelection = () => {
console.warn('Language Selector Not Found');
return;
}
selector.addEventListener('change', (e) => {
selector.addEventListener('change', async (e) => {
const selectedLanguage = parseInt(e.target.value, 10);
window.localStorage.setItem('preferredLanguage', selectedLanguage);
appState.setState({"language": selectedLanguage});
Expand All @@ -1413,9 +1394,9 @@ export const addEventLanguageSelection = () => {
if (wrapperDiv && wrapperDiv.dataset.uiType === 'signIn' &&
(wrapperDiv.dataset.accountType === 'phone' || wrapperDiv.dataset.accountType === 'email')) {
const account = {type: wrapperDiv.dataset.accountType, value: wrapperDiv.dataset.accountValue};
firebaseSignInRender({account});
await firebaseSignInRender({account});
} else if (wrapperDiv && wrapperDiv.dataset.uiType === 'signUp') {
signUpRender({signUpType: wrapperDiv.dataset.signupType})
await signUpRender({signUpType: wrapperDiv.dataset.signupType})
}
});
}
7 changes: 1 addition & 6 deletions js/pages/footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,7 @@ export const footerTemplate = () => {
<div class="footer-sub-heading pt-3" data-i18n="footer.vulnerability"><a class="footer-links" target="__blank" href="https://www.hhs.gov/vulnerability-disclosure-policy/index.html">HHS Vulnerability Disclosure</a></div>
<div class="footer-sub-heading pt-3" data-i18n="footer.siteMap"><a class="footer-links" target="__blank" href="https://dceg.cancer.gov/about/sitemap">Site Map</a></div>
</div>
${location.host !== urls.stage && location.host !== urls.prod ? `
<!--div class="col-lg-4 pt-3 content-wrapper text-center text-sm-center">
<div class="footer-heading" data-i18n="footer.translate">TRANSLATE</div>
<div class="footer-sub-heading pt-3" id="google_translate_element"></div>
</div-->
`: ``}

</div>
<div class="row w-100 pt-5 align-center" style="margin:0">
<ul class="menu w-100" style="padding:0" data-i18n="footer.menuList">
Expand Down
Loading