From 0e18aa35b8634593086d5ff57955beb0f97f8b0a Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Thu, 9 Dec 2021 13:32:15 +0000 Subject: [PATCH] updated the cookies functionality --- .env.local | 6 +- actions/index.js | 14 ++ components/account/registerform.js | 14 +- components/cookiemanager/index.js | 43 ++++-- components/homepage/login.js | 96 +++++++------- components/myportal.js | 176 +++++++++++++++++-------- components/myportal/topthree.js | 34 +++-- components/timeoutmodal.js | 33 +++++ locales/cy/cookies.json | 2 + locales/cy/myportal.json | 2 +- locales/en/cookies.json | 2 + locales/en/myportal.json | 2 +- package.json | 1 + pages/_document.js | 2 +- pages/account/register.js | 42 ++++-- pages/index.js | 89 ++++++++++--- pages/myportal/case.js | 22 ++-- styles/sass/welshgov/_application.scss | 109 +++++++++++++++ 18 files changed, 507 insertions(+), 182 deletions(-) create mode 100644 components/timeoutmodal.js diff --git a/.env.local b/.env.local index e89f45b1..23e52088 100644 --- a/.env.local +++ b/.env.local @@ -60,5 +60,9 @@ I18N_DOMAIN = "cymru.local" GG_PROVIDER_CONFIG_ENDPOINT = "https://api.ete.access.service.gov.uk/.well-known/openid-configuration" GG_ClIENT_ID = 5vTukeSpN7d6uBV7YLb7A5wOctzzkZ GG_CLIENT_SECRET = z1PGLAKPxIhjMBegTdzX22AayIORc1GsCbMQZ6mieBn7zChjzzxup5lkIByEmsYS -GG_REDIRECT_URI = "https://pp-planningcasework.service.gov.wales" +GG_REDIRECT_URI = "http://localhost:3000" + +NEXT_PUBLIC_GG_ClIENT_ID = 5vTukeSpN7d6uBV7YLb7A5wOctzzkZ +NEXT_PUBLIC_GG_REDIRECT_URI = "http://localhost:3000" + diff --git a/actions/index.js b/actions/index.js index b986db75..5dcf1bcc 100644 --- a/actions/index.js +++ b/actions/index.js @@ -111,6 +111,20 @@ export const hashAPIPath = (queryPath) => { return (hashPath.indexOf("?") > -1 ? "&hash=" : "?hash=") + hashlink; }; +export const hashString = (stringToHash) => { + console.log("string to hash", stringToHash); + let hashedStr = CryptoJS.AES.encrypt(stringToHash, "pedw"); + console.log("hashed String", hashedStr.toString()); + return hashedStr.toString(); +}; + +export const dehashString = (stringToDeHash) => { + console.log("string to dehash", stringToDeHash); + let dehashedStr = CryptoJS.AES.decrypt(decodeURI(stringToDeHash), "pedw"); + console.log("dehshed string:", dehashedStr.toString(CryptoJS.enc.Utf8)); + return dehashedStr.toString(CryptoJS.enc.Utf8); +}; + export const getBasicSearch = (token, searchString) => { //console.log("\n\n", token, searchString); diff --git a/components/account/registerform.js b/components/account/registerform.js index 0b350e15..bb05dffb 100644 --- a/components/account/registerform.js +++ b/components/account/registerform.js @@ -23,6 +23,7 @@ const RenderTextfield = ({ input, type, errorMsg, + disabled, meta: { touched, error }, ...custom }) => { @@ -39,6 +40,7 @@ const RenderTextfield = ({ name={name} id={id} type={type} + disabled={disabled} /> {touched && error && ( { value, setRegisterFormComplete, setAccountCreatedComplete, + loggedInUserEmail, + emailaddress1, } = props; let { t, lang } = useTranslation(); @@ -135,7 +139,8 @@ const RegisterForm = (props) => {

{t( "account:register-new-account-sub-heading-1" - )} + )}{" "} + {loggedInUserEmail}

{ label={t( "account:register-new-account-email-address-label" )} + disabled /> { ); }; -const mapStateToProps = (state) => { +const mapStateToProps = (state, props) => { return { search: state.search, searchResultsObj: state.searchResultsObj, formData: state.formData, appealType: state.appealType, //form: state.form, + initialValues: { + emailaddress1: props.loggedInUserEmail, + }, }; }; @@ -353,6 +362,7 @@ export default connect( )( reduxForm({ form: "accountRegisterForm", + enableReinitialize: true, destroyOnUnmount: false, })(RegisterForm) ); diff --git a/components/cookiemanager/index.js b/components/cookiemanager/index.js index 226a7b6c..93c01dbb 100644 --- a/components/cookiemanager/index.js +++ b/components/cookiemanager/index.js @@ -20,7 +20,7 @@ const CookieManagementMain = (props) => { Object.assign(values, { "essential": "accepted", "usage": usageState, - "communications": communicationsState, + // "communications": communicationsState, "settings": settingsState, }); @@ -42,14 +42,15 @@ const CookieManagementMain = (props) => { ";expires=Thu, 01 Jan 1970 00:00:01 GMT"; } - usageState == "revoked" && delete_cookie("CookiePolicy", "/"), - delete_cookie("_ga", "/"), + usageState == "revoked" && delete_cookie("_ga", "/"), delete_cookie("_gid", "/"); cookie.set("planning_casework", true, { expires: expDate, path: "/", }); + + setSavedState(true); }; let cookieCheck = parseCookies(); @@ -59,14 +60,16 @@ const CookieManagementMain = (props) => { ? {} : JSON.parse(cookieCheck.CookiePolicy); + const [savedState, setSavedState] = useState(false); + const [usageState, setUsageState] = useState( typeof cookieCheck.CookiePolicy == "undefined" ? null : cookieObj.usage ); - const [communicationsState, setCommunicationsState] = useState( - typeof cookieCheck.CookiePolicy == "undefined" - ? null - : cookieObj.communications - ); + // const [communicationsState, setCommunicationsState] = useState( + // typeof cookieCheck.CookiePolicy == "undefined" + // ? null + // : cookieObj.communications + // ); const [settingsState, setSettingsState] = useState( typeof cookieCheck.CookiePolicy == "undefined" ? null @@ -78,9 +81,9 @@ const CookieManagementMain = (props) => { case "usage": setUsageState(value); break; - case "communications": - setCommunicationsState(value); - break; + // case "communications": + // setCommunicationsState(value); + // break; case "settings": setSettingsState(value); break; @@ -102,6 +105,22 @@ const CookieManagementMain = (props) => { {t("cookies:cookie-title-heading")}
+ + {savedState && ( +
+

+ + {t("cookies:cookie-saved-heading")} + +

+

+ {t("cookies:cookie-saved-paragraph")} +

+
+ )} {typeof cookieCheck.CookiePolicy == "undefined" ? ( <>
@@ -455,7 +474,7 @@ const mapStateToProps = (state) => { return { initialValues: { usage: state.accountDetails.cookieObj.usage, - communications: state.accountDetails.cookieObj.communications, + //communications: state.accountDetails.cookieObj.communications, settings: state.accountDetails.cookieObj.settings, }, }; diff --git a/components/homepage/login.js b/components/homepage/login.js index 87f99050..0e755c34 100644 --- a/components/homepage/login.js +++ b/components/homepage/login.js @@ -164,18 +164,22 @@ let Login = (props) => { const govGatwayLoginRedirect = () => { router.replace( props.govGateway.config.authorization_endpoint + - "?response_type=code&scope=openid&client_id=5vTukeSpN7d6uBV7YLb7A5wOctzzkZ&redirect_uri=https://pp-planningcasework.service.gov.wales&ui_locales=" + + "?response_type=code&scope=openid&client_id=" + + process.env.NEXT_PUBLIC_GG_ClIENT_ID + + "&redirect_uri=" + + process.env.NEXT_PUBLIC_GG_REDIRECT_URI + + "&ui_locales=" + (router.locale == "cy" ? "cy" : "en-GB") ); }; return (
-
-
-

- {t("home:login-card-title")} -

+
+

+ {t("home:login-card-title")} +

{" "} + {/* {validLoginID == false && ( + {/* { let { t } = useTranslation(); const router = useRouter(); const { locale } = router; - return ( -
-
-

- {router.locale -

+ const [showModal, setShowModal] = useState(false); -
- {router.locale{" "} -
- {props.accountDetails.accountDetails.firstname}{" "} - {props.accountDetails.accountDetails.lastname} -
-
- { + showShareState == true + ? setShowShareState(false) + : setShowShareState(true); + }; + + const onIdle = () => { + togglePopup(); + logoutTimer = setTimeout(() => { + handleLogout(); + }, 1000 * 5 * 1); // 5 seconds + }; + + const togglePopup = () => { + showModal == true ? setShowModal(false) : setShowModal(true); + }; + + const handleStayLoggedIn = () => { + if (logoutTimer) { + clearTimeout(this.logoutTimer); + logoutTimer = null; + } + idleTimer.reset(); + togglePopup(); + }; + + const handleLogout = () => { + destroyCookie({}, "pinsUser"), + window.localStorage.clear(), + router.replace("/"); + }; + + return ( + <> +
+ -
-
-
-
- - - - - - -
-
- +
+
+
+ + + + + + +
+
+ +
-
-
+ + {/* { + idleTimer = ref; + }} + element={document} + stopOnIdle={true} + onIdle={onIdle} + timeout={1000 * 600 * 1} // 10 seconds + /> + + */} + ); }; diff --git a/components/myportal/topthree.js b/components/myportal/topthree.js index a77252e8..b1b9e82b 100644 --- a/components/myportal/topthree.js +++ b/components/myportal/topthree.js @@ -89,6 +89,24 @@ const TopThree = (props) => { return Promise.all(detailsArr); }; + const getIncidentId = (topThreeType, objArr) => { + switch (topThreeType) { + case "myCases": + return objArr.incidentid; + break; + case "watchedCases": + return objArr._pinswg_watchedcase_value; + break; + case "myRepresentations": + return objArr.ticketnumber; + break; + case "awaitingSubmission": + break; + default: + // code block + } + }; + let topThreeOnlyArr = showTopThreeArr.slice(0, 3); Object.keys(topThreeOnlyArr).map((key, index) => { topthreeRow.push( @@ -126,18 +144,10 @@ const TopThree = (props) => { ], "currentType": topThreeType, - "incidentid": - topThreeType != "watchedCases" - ? topThreeType != - "myRepresentations" - ? showTopThreeArr[key] - ._pinswg_case_value - : showTopThreeArr[key][ - " _pinswg_watchedcase_value" - ] - : showTopThreeArr[key][ - " _pinswg_watchedcase_value" - ], + "incidentid": getIncidentId( + topThreeType, + showTopThreeArr[key] + ), "appealType": showTopThreeArr[key] diff --git a/components/timeoutmodal.js b/components/timeoutmodal.js new file mode 100644 index 00000000..59b210d6 --- /dev/null +++ b/components/timeoutmodal.js @@ -0,0 +1,33 @@ +import React from "react"; + +const TimeoutModal = ({ showModal, togglePopup, handleStayLoggedIn }) => { + return ( +
+
+
+

+ {" "} + timeout - Your session is about to expire in 5 seconds + due to inactivity. You will be redirected to the login + page. +

+ +
+
+
+
+ ); +}; + +export default TimeoutModal; diff --git a/locales/cy/cookies.json b/locales/cy/cookies.json index 134bc5f0..cc85d4bc 100644 --- a/locales/cy/cookies.json +++ b/locales/cy/cookies.json @@ -3,6 +3,8 @@ "cookie-title-heading": "Cwcis ar cynllunio gwaith achos", "cookie-not-saved-heading": "Nid yw eich dewisiadau cwcis wedi eu cadw eto", "cookie-not-saved-paragraph": "Mae y gwasanaeth gwaith achos cynllunio yn gosod cwcis pan fyddwch yn ymweld â'n gwefan. Gallwch newid y gosodiadau hyn i'ch dewis chi. Mae angen i chi gadw'r dudalen hon gyda'ch dewisiadau newydd.", + "cookie-saved-heading": "Cafodd eich dewisiadau cwcis eu cadw", + "cookie-saved-paragraph": "Mae y gwasanaeth gwaith achos cynllunio yn gosod cwcis pan fyddwch yn ymweld â'n gwefan. Gallwch newid y gosodiadau hyn i'ch dewis chi.", "cookie-intro-paragraph-1": "Ffeiliau sy'n cael eu cadw ar eich ffôn, tabled neu gyfrifiadur pan fyddwch yn ymweld â gwefan yw cwcis.", "cookie-intro-paragraph-2": "Rydym yn defnyddio cwcis i storio gwybodaeth ynghylch sut yr ydych yn defnyddio gwefan y gwasanaeth gwaith achos cynllunio, megis y tudalennau yr ydych yn ymweld â nhw. Nid yw'r cwcis hyn yn cael eu defnyddio i'ch adnabod chi'n bersonol.", "cookie-intro-paragraph-3": "Rydym yn defnyddio 4 cwci gwahanol. Gallwch ddewis pa fath o gwcis rydych yn hapus i ni eu defnyddio.", diff --git a/locales/cy/myportal.json b/locales/cy/myportal.json index 60cbc88f..1d0d8912 100644 --- a/locales/cy/myportal.json +++ b/locales/cy/myportal.json @@ -30,5 +30,5 @@ "norecords-cases": "Nid oes gennych unrhyw achosion", "norecords-representations": "Nid oes gennych unrhyw sylwadau", "norecords-watched-cases": "Nid ydych yn gwylio unrhyw achosion", - "norecords-awaiting-submission": "Nid oes gennych unrhyw gyflwyniadau sy'n aros" + "norecords-awaiting-submissions": "Nid oes gennych unrhyw gyflwyniadau sy'n aros" } \ No newline at end of file diff --git a/locales/en/cookies.json b/locales/en/cookies.json index 13b349c0..2123bdaf 100644 --- a/locales/en/cookies.json +++ b/locales/en/cookies.json @@ -3,6 +3,8 @@ "cookie-title-heading": "Cookies on planning casework", "cookie-not-saved-heading": "Your cookie settings have not yet been saved", "cookie-not-saved-paragraph": "The planning casework service sets cookies when you visit our website. You can choose to change these settings to your own preferences. You need to save this page with your new choices.", + "cookie-saved-heading": "Your cookie settings were saved", + "cookie-saved-paragraph": "The planning casework service sets cookies when you visit our website. You can choose to change these settings to your own preferences.", "cookie-intro-paragraph-1": "Cookies are files saved on your phone, tablet or computer when you visit a website.", "cookie-intro-paragraph-2": "We use cookies to store information about how you use the the planning casework service website, such as the pages you visit. These cookies are not used to identify you personally.", "cookie-intro-paragraph-3": "We use 4 types of cookie. You can choose which cookies you're happy for us to use.", diff --git a/locales/en/myportal.json b/locales/en/myportal.json index a50b8bcd..d621cd73 100644 --- a/locales/en/myportal.json +++ b/locales/en/myportal.json @@ -30,5 +30,5 @@ "norecords-cases": "You have no cases", "norecords-representations": "You have no representations", "norecords-watched-cases": "You are not watching any cases", - "norecords-awaiting-submission": "You have no awaiting submissions" + "norecords-awaiting-submissions": "You have no awaiting submissions" } \ No newline at end of file diff --git a/package.json b/package.json index 7d4f720f..3c216127 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "react-datepicker": "^4.1.1", "react-dom": "17.0.2", "react-dropzone": "^11.3.4", + "react-idle-timer": "^4.6.4", "react-loading-overlay": "^1.0.1", "react-redux": "^7.2.4", "react-xml-parser": "^1.1.8", diff --git a/pages/_document.js b/pages/_document.js index ee61194d..a52ff4f0 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -13,7 +13,7 @@ class MyDocument extends Document { let hasBasicAuth = typeof process.env.BASIC_AUTH_CREDENTIALS != "undefined"; - console.log(hasBasicAuth); + console.log("hasbasicAuth:", hasBasicAuth); if (ctx.req && ctx.res) { hasBasicAuth && diff --git a/pages/account/register.js b/pages/account/register.js index 3981a80b..821be29e 100644 --- a/pages/account/register.js +++ b/pages/account/register.js @@ -17,9 +17,10 @@ import jsonpath from "jsonpath"; import { reduxForm, formValueSelector } from "redux-form"; import RegisterForm from "../../components/account/registerform"; +import { dehashString, hashAPIPath } from "../../actions"; const Home = (props) => { - const { footerLinks, formData } = props; + const { footerLinks, formData, loggedInUserEmail } = props; let { t, lang } = useTranslation(); const router = useRouter(); @@ -97,6 +98,9 @@ const Home = (props) => { setAccountCreatedComplete={ setAccountCreatedComplete } + loggedInUserEmail={ + loggedInUserEmail + } />
{registerFormComplete != true || @@ -151,17 +155,31 @@ const Home = (props) => { ); }; -// export const getServerSideProps = wrapper.getServerSideProps( -// (store) => -// async ({ query, req, res }) => { -// const appealTypeData = await getAppealsTypes(); -// const lpaData = await getLPA(); -// console.log("appeal types", appealTypeData); -// console.log("lpa typeswwwww", lpaData); -// store.dispatch(setAppealType(appealTypeData)); -// store.dispatch(setLPA(lpaData)); -// } -// ); +export const getServerSideProps = wrapper.getServerSideProps( + (store) => + async ({ query, req, res }) => { + // const appealTypeData = await getAppealsTypes(); + // const lpaData = await getLPA(); + // console.log("appeal types", appealTypeData); + // console.log("lpa typeswwwww", lpaData); + // store.dispatch(setAppealType(appealTypeData)); + // store.dispatch(setLPA(lpaData)); + + let hasRegistrationEmail = typeof query.id != "undefined"; + let loginEmailStr = ""; + + if (hasRegistrationEmail == true) { + loginEmailStr = dehashString(query.id); + + console.log(loginEmailStr); + } + return { + props: { + loggedInUserEmail: loginEmailStr, + }, + }; + } +); const mapStateToProps = (state) => { return { diff --git a/pages/index.js b/pages/index.js index e28c3e57..72278fd9 100644 --- a/pages/index.js +++ b/pages/index.js @@ -13,7 +13,9 @@ import { useSelector, shallowEqual, connect } from "react-redux"; import { wrapper } from "../store/store"; import { useRouter } from "next/router"; import useTranslation from "next-translate/useTranslation"; -import { getIncidents } from "../actions"; +import { getIncidents, hashString } from "../actions"; +import CryptoJS from "crypto-js"; +import HmacSHA256 from "crypto-js/hmac-sha256"; import { getProviderConfig, @@ -29,8 +31,18 @@ import { } from "../store/accountDetails/action"; import { parseCookies, setCookie, destroyCookie } from "nookies"; +const WORDKEY = process.env.NEXT_PUBLIC_HASHKEY; + const Home = (props) => { - const { footerLinks, pages, showLogin, loggedInUserId } = props; + const { + footerLinks, + pages, + showLogin, + loggedInUserId, + hasGGCode, + loginEmailStr, + loggedInUserEmail, + } = props; let { t, lang } = useTranslation(); const router = useRouter(); @@ -40,15 +52,28 @@ const Home = (props) => { let expDate = new Date(now); expDate.setDate(now.getDate() + 1); - _.isEmpty(loggedInUserId) == false && - (setCookie(null, "pinsUser", loggedInUserId.value[0].contactid, { - path: "/", - expires: expDate, - }), - router.replace({ - pathname: router.locale == "cy" ? "/fymhorth" : "/myportal", - shallow: true, - })); + console.log("hashed email str", loginEmailStr); + _.isEmpty(loggedInUserId) != false && !hasGGCode + ? console.log("no log in no ggcode") + : _.has(loggedInUserId, "value") + ? _.isEmpty(loggedInUserId.value) + ? router.replace({ + pathname: + router.locale == "cy" + ? "/account/register" + : "/account/register", + query: { + id: encodeURI(loggedInUserEmail), + }, + }) + : (setCookie(null, "pinsUser", loggedInUserId.value[0].contactid, { + path: "/", + expires: expDate, + }), + router.replace({ + pathname: router.locale == "cy" ? "/fymhorth" : "/myportal", + })) + : console.log("no value in user id"); return (
@@ -104,12 +129,21 @@ const Home = (props) => {
- -
+ {hasGGCode ? ( + <> +

Logging in

+

Please wait...

+ + ) : ( + <> + +
+ + )}
@@ -124,19 +158,26 @@ export const getServerSideProps = wrapper.getServerSideProps( var relayToken = await getToken(); relayToken = relayToken.access_token; - console.log(query.code); + console.log("gg code:", query.code); const showLoginCheck = process.env.SHOWLOGIN || false; const hasLoginCode = typeof query.code != "undefined"; let providerConfig = await getProviderConfig(); - console.log(providerConfig.token_endpoint); + console.log( + "endpoint: ", + providerConfig.token_endpoint, + "\n", + "hasloginCode:", + hasLoginCode + ); store.dispatch(getGovGatewayConfig(providerConfig)); let ggUserInfo = {}; let portalUserObj = {}; + let loginEmailStr = ""; if (hasLoginCode == true) { const ggToken = await getGGToken( @@ -150,11 +191,12 @@ export const getServerSideProps = wrapper.getServerSideProps( providerConfig.userinfo_endpoint, ggToken.access_token )), + (loginEmailStr = hashString(ggUserInfo.data.email)), (portalUserObj = await getPortalLogin( ggUserInfo.data.email, relayToken )), - console.log(portalUserObj, ggUserInfo), + console.log("loggin user stuff: ", portalUserObj), store.dispatch(setAccountDetails(portalUserObj))) : console.log( ggToken.status + " " + ggToken.data.error_description @@ -162,7 +204,12 @@ export const getServerSideProps = wrapper.getServerSideProps( } return { - props: { showLogin: showLoginCheck, loggedInUserId: portalUserObj }, + props: { + showLogin: showLoginCheck, + hasGGCode: hasLoginCode, + loggedInUserId: portalUserObj, + loggedInUserEmail: loginEmailStr, + }, }; } ); diff --git a/pages/myportal/case.js b/pages/myportal/case.js index 234ccecb..ab509a6d 100644 --- a/pages/myportal/case.js +++ b/pages/myportal/case.js @@ -85,20 +85,20 @@ const Home = (props) => { ); }; -export const getServerSideProps = wrapper.getServerSideProps( - (store) => async (ctx) => { - const { query, req, res } = ctx; +// export const getServerSideProps = wrapper.getServerSideProps( +// (store) => async (ctx) => { +// const { query, req, res } = ctx; - const showRepresentationsCheck = - process.env.SHOWREPRESENTATIONS || false; +// const showRepresentationsCheck = +// process.env.SHOWREPRESENTATIONS || false; - console.log("Show representation module: ", showRepresentationsCheck); +// console.log("Show representation module: ", showRepresentationsCheck); - return { - props: { showRepresentations: showRepresentationsCheck }, - }; - } -); +// return { +// props: { showRepresentations: showRepresentationsCheck }, +// }; +// } +// ); const mapStateToProps = (state) => { //console.log(state); diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss index adbb7a78..15d74407 100644 --- a/styles/sass/welshgov/_application.scss +++ b/styles/sass/welshgov/_application.scss @@ -1491,6 +1491,11 @@ ul#sharePageLinks.active { .paragraph--type--call-out-message { border-left-color: $blue; background-color: $lightgrey_light; + + &.call-out-type-positive-alert-message { + background: #cdf7d4; + border-left: 10px solid #019e1e; + } } #cookies-js form { @@ -1701,3 +1706,107 @@ ul#sharePageLinks.active { background-color: $white; } } + +// modal timeout + +.modal { + position: fixed; + top: 0; + left: 0; + z-index: 1060; + display: none; + width: 100%; + height: 100%; + overflow: hidden; + outline: 0; +} + +fade { + transition: opacity 0.15s linear; +} + +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +.modal-backdrop { + position: fixed; + top: 0; + left: 0; + z-index: 1040; + width: 100vw; + height: 100vh; + background-color: #000; +} + +.modal-backdrop.fade { + opacity: 0; +} + +.modal-backdrop.show { + opacity: 0.5; +} + +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } +} +.modal.show .modal-dialog { + transform: none; +} +.modal.fade .modal-dialog { + transition: transform 0.3s ease-out; + transform: translate(0, -50px); +} + +.modal-content { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + pointer-events: auto; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.3rem; + outline: 0; +} + +.modal-footer { + display: flex; + flex-wrap: wrap; + flex-shrink: 0; + align-items: center; + justify-content: flex-end; + padding: 0.75rem; + border-top: 1px solid #dee2e6; + border-bottom-right-radius: calc(0.3rem - 1px); + border-bottom-left-radius: calc(0.3rem - 1px); +} + +.modal-body { + position: relative; + flex: 1 1 auto; + padding: 1rem; +} + +.modal-header { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + padding: 1rem 1rem; + border-bottom: 1px solid #dee2e6; + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); +}