From a2a5e179b3dc0fac74c999378ecd0856ae8fc5a6 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Mon, 10 Feb 2025 11:16:28 -0500 Subject: [PATCH 01/18] Adding steps onto the sign up --- src/assets/img/okta-sign-up-steps/dots.svg | 3 ++ .../img/okta-sign-up-steps/one-complete.svg | 4 ++ src/assets/img/okta-sign-up-steps/one.svg | 6 +++ .../img/okta-sign-up-steps/three-complete.svg | 4 ++ src/assets/img/okta-sign-up-steps/three.svg | 11 +++++ .../img/okta-sign-up-steps/two-complete.svg | 4 ++ src/assets/img/okta-sign-up-steps/two.svg | 4 ++ src/assets/scss/components/_signUpModal.scss | 26 +++++++++++ .../signUpModal/signUpModal.tpl.html | 46 +++++++++++++++++++ 9 files changed, 108 insertions(+) create mode 100644 src/assets/img/okta-sign-up-steps/dots.svg create mode 100644 src/assets/img/okta-sign-up-steps/one-complete.svg create mode 100644 src/assets/img/okta-sign-up-steps/one.svg create mode 100644 src/assets/img/okta-sign-up-steps/three-complete.svg create mode 100644 src/assets/img/okta-sign-up-steps/three.svg create mode 100644 src/assets/img/okta-sign-up-steps/two-complete.svg create mode 100644 src/assets/img/okta-sign-up-steps/two.svg diff --git a/src/assets/img/okta-sign-up-steps/dots.svg b/src/assets/img/okta-sign-up-steps/dots.svg new file mode 100644 index 000000000..3b114bfed --- /dev/null +++ b/src/assets/img/okta-sign-up-steps/dots.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/okta-sign-up-steps/one-complete.svg b/src/assets/img/okta-sign-up-steps/one-complete.svg new file mode 100644 index 000000000..58029fd2b --- /dev/null +++ b/src/assets/img/okta-sign-up-steps/one-complete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/img/okta-sign-up-steps/one.svg b/src/assets/img/okta-sign-up-steps/one.svg new file mode 100644 index 000000000..2cfc5f47e --- /dev/null +++ b/src/assets/img/okta-sign-up-steps/one.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/img/okta-sign-up-steps/three-complete.svg b/src/assets/img/okta-sign-up-steps/three-complete.svg new file mode 100644 index 000000000..05ca13bac --- /dev/null +++ b/src/assets/img/okta-sign-up-steps/three-complete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/img/okta-sign-up-steps/three.svg b/src/assets/img/okta-sign-up-steps/three.svg new file mode 100644 index 000000000..8f0f1e4fb --- /dev/null +++ b/src/assets/img/okta-sign-up-steps/three.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/img/okta-sign-up-steps/two-complete.svg b/src/assets/img/okta-sign-up-steps/two-complete.svg new file mode 100644 index 000000000..804eef15e --- /dev/null +++ b/src/assets/img/okta-sign-up-steps/two-complete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/img/okta-sign-up-steps/two.svg b/src/assets/img/okta-sign-up-steps/two.svg new file mode 100644 index 000000000..c0f86cdb9 --- /dev/null +++ b/src/assets/img/okta-sign-up-steps/two.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/scss/components/_signUpModal.scss b/src/assets/scss/components/_signUpModal.scss index 646839a97..27f7c940b 100644 --- a/src/assets/scss/components/_signUpModal.scss +++ b/src/assets/scss/components/_signUpModal.scss @@ -1,6 +1,32 @@ sign-up-modal { position: relative; + .signup-steps { + display: flex; + width: 100%; + justify-content: center; + align-items: center; + gap: 16px; + padding: 10px 0; + + .between-steps { + img { + width: 18px; + } + } + + .step { + img { + width: 55px; + opacity: 1; + + &.semi-transparent { + opacity: .5; + } + } + } + } + form { margin-bottom: 40px; } diff --git a/src/common/components/signUpModal/signUpModal.tpl.html b/src/common/components/signUpModal/signUpModal.tpl.html index 2ce5c7fa4..e4dbb15d1 100644 --- a/src/common/components/signUpModal/signUpModal.tpl.html +++ b/src/common/components/signUpModal/signUpModal.tpl.html @@ -15,6 +15,52 @@

Create Your Account

+ +
From a29fe6a3f0ae97a037d561a74af0c19f721812ff Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Mon, 10 Feb 2025 11:19:33 -0500 Subject: [PATCH 02/18] Adding event listeners to check if inputs have a value so the label can be styled as such. --- .../signUpModal/signUpModal.component.js | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/common/components/signUpModal/signUpModal.component.js b/src/common/components/signUpModal/signUpModal.component.js index 3ce31bda9..78c14beef 100644 --- a/src/common/components/signUpModal/signUpModal.component.js +++ b/src/common/components/signUpModal/signUpModal.component.js @@ -65,6 +65,7 @@ class SignUpModalController { this.countriesData = [] this.stateOptions = {} this.selectedCountry = {} + this.floatingLabelAbortControllers = [] } loadTranslations () { @@ -419,6 +420,7 @@ class SignUpModalController { this.redirectToSignInModalIfNeeded(context) this.injectErrorMessages() this.injectBackButton() + this.initializeFloatingLabels() if (this.loadingCountriesError && this.currentStep === 1) { this.injectCountryLoadError() @@ -525,6 +527,39 @@ class SignUpModalController { }) } + initializeFloatingLabels () { + // As the Label and Input fields are not directly related in the DOM, we need to manually + // add the active class to the label when the input is focused or has a value. + + // Remove any existing listeners before adding new ones + this.floatingLabelAbortControllers.forEach(controller => controller.abort()) + this.floatingLabelAbortControllers = [] + + document.querySelectorAll('.o-form-content input[type="text"], .o-form-content input[type="password"]').forEach((input) => { + const label = document.querySelector(`.o-form-content label[for="${input.id}"]`)?.parentNode; + if (!label) { + return; + } + // if the input already has a value, mark the label as active + if (input.value.trim() !== '') { + label.classList.add('active'); + } + // Create and save the controller so we can later remove the listeners. + const controller = new AbortController(); + this.floatingLabelAbortControllers.push(controller); + + input.addEventListener('focus', () => { + label.classList.add('active'); + }, { signal: controller.signal }); + input.addEventListener('blur', () => { + // When the input loses focus, check its value. + if (input.value.trim() === '') { + label.classList.remove('active'); + } + }, { signal: controller.signal }); + }); + } + goToNextStep () { this.currentStep++ this.reRenderWidget() From 18c3401378ef6a9c55dd14d5d4583ef8a606d32d Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Mon, 10 Feb 2025 11:20:34 -0500 Subject: [PATCH 03/18] Adding classes to the select dropdowns' label so they can be styled. --- .../components/signUpModal/signUpFormCustomFields.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/common/components/signUpModal/signUpFormCustomFields.js b/src/common/components/signUpModal/signUpFormCustomFields.js index f78886a11..ec55494f3 100644 --- a/src/common/components/signUpModal/signUpFormCustomFields.js +++ b/src/common/components/signUpModal/signUpFormCustomFields.js @@ -10,7 +10,8 @@ export const customFields = { label: 'Account Type', required: true, wide: true, - value: 'Household' + value: 'Household', + className: 'o-form-select-fieldset' }, organizationName: { name: 'organizationName', @@ -33,7 +34,8 @@ export const customFields = { 'label-top': true, multirowError: true, 'data-se': 'o-form-fieldset-userProfile.countryCode', - wide: true + wide: true, + className: 'o-form-select-fieldset' }, streetAddress: { name: 'userProfile.streetAddress', @@ -110,7 +112,8 @@ export const customFields = { wide: true, showWhen: { 'userProfile.countryCode': 'US' - } + }, + className: 'o-form-select-fieldset' }, zipCode: { name: 'userProfile.zipCode', From b02c8e5f95fc46fcf5f53a1beda35b81cca28661 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Mon, 10 Feb 2025 13:23:38 -0500 Subject: [PATCH 04/18] Adding form and input styles --- .../scss/components/_oktaSigninWidget.scss | 139 ++++++++++++++++-- 1 file changed, 129 insertions(+), 10 deletions(-) diff --git a/src/assets/scss/components/_oktaSigninWidget.scss b/src/assets/scss/components/_oktaSigninWidget.scss index 105aa21a3..2172e3fe7 100644 --- a/src/assets/scss/components/_oktaSigninWidget.scss +++ b/src/assets/scss/components/_oktaSigninWidget.scss @@ -8,8 +8,8 @@ } .auth-content { - padding-top: 10px; padding-bottom: 0; + padding-top: 10px; } .okta-form-title { @@ -19,8 +19,8 @@ sign-up-modal { #osw-container { - display: flex; align-items: center; + display: flex; justify-content: center; } @@ -29,31 +29,150 @@ sign-up-modal { } } -#okta-sign-in.auth-container { - // Injected cru back button +#okta-sign-in.auth-container { + $okta-grey: #D9D6D6; + // ============== Container ============== // + + &.main-container { + box-shadow: none; + } + + .o-form-fieldset-container { + border: 1px solid $okta-grey; + border-radius: 7px; + display: flex; + flex-wrap: wrap; + overflow: hidden; + } + // ============== Errors ============== // + + .o-form-explain.o-form-input-error { + background: #ffe3e3; + padding-left: 20px; + padding-top: 6px; + } + // ============== Fields ============== // + + .o-form-fieldset { + margin: 0; + position: relative; + } + + .o-form-label { + @include transition(top 0.3s ease, font-size 0.3s ease); + padding: 0; + padding-left: 8px; + position: absolute; + top: 17px; + width: auto; + z-index: 20; + + &.active { + top: 2px; + + label { + font-size: 12px; + } + } + + label { + color: #9C9C9C; + font-size: 16px; + font-weight: 400; + } + + .o-form-explain { + font-size: 12px; + } + } + + .o-form-select-fieldset { + .o-form-label { + top: 0px; + + label { + font-size: 12px; + } + } + + .chzn-container > .chzn-single { + border: none; + height: auto; + padding-top: 5px; + +div { + top: 6px; + } + } + } + + .o-form-fieldset { + border-bottom: 1px solid $okta-grey; + width: 100%; + + &[data-se="o-form-fieldset-userProfile.state"], + &[data-se="o-form-fieldset-userProfile.zipCode"] { + width: 50%; + } + &[data-se="o-form-fieldset-userProfile.zipCode"] { + border-left: 1px solid $okta-grey; + } + } + + .o-form-input .o-form-control { + border: none; + border-radius: 0; + height: auto; + + // Style input fields, but not input fields in dropdowns + input[type=text]:not(.chzn-search input), + input[type=password]:not(.chzn-search input) { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + border: none; + padding-bottom: 12px; + padding-top: 20px; + } + } + // ============== Password rules ============== // + + section[data-se="password-authenticator--rules"] { + background: $okta-grey; + padding: 10px; + width: 100%; + + .password-authenticator--list { + margin: 0; + } + } + // ============== Injected buttons ============== // + + // cru back button .o-form-button-bar { + align-items: center; display: flex; - gap: 50px; + gap: 10px; justify-content: space-between; - align-items: center; #backButton { width: 100%; } .button.button-primary { + color: #3a3a3a; height: auto; + @extend .btn; @extend .btn-primary; } } - // Injected cru error message + // cru error message .cru-error { float: left } - - // Injected cru retry button + // cru retry button .cru-retry-button:hover { text-decoration: underline; } -} + } From 188dd89fc478c5dad2207c6bd9678908d29c1700 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Feb 2025 09:34:45 -0500 Subject: [PATCH 05/18] Adding back button hover styles --- src/assets/scss/components/_oktaSigninWidget.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/assets/scss/components/_oktaSigninWidget.scss b/src/assets/scss/components/_oktaSigninWidget.scss index 2172e3fe7..47cf355f2 100644 --- a/src/assets/scss/components/_oktaSigninWidget.scss +++ b/src/assets/scss/components/_oktaSigninWidget.scss @@ -157,6 +157,13 @@ div { #backButton { width: 100%; + + &:hover, + &:focus, + &:active { + background: #f6f6f6 !important; + color: $colorCru-gray !important; + } } .button.button-primary { From bb07e6c7beca7dd4767ab3ba43eacad283850b0a Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Feb 2025 09:40:03 -0500 Subject: [PATCH 06/18] Upon doing more research, I believe the 401 introspect error is due to me not adding the feature->registration setting on, so it defaults back to the registration page if an error occurs. --- .../signUpModal/signUpModal.component.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/common/components/signUpModal/signUpModal.component.js b/src/common/components/signUpModal/signUpModal.component.js index 78c14beef..abb044f21 100644 --- a/src/common/components/signUpModal/signUpModal.component.js +++ b/src/common/components/signUpModal/signUpModal.component.js @@ -415,6 +415,18 @@ class SignUpModalController { } afterRender (context) { + // Handle inactivity error + // The Okta widget has an issue where if the page is idle for a period of time, + // the Okta interaction session will expire, causing the widget to show an error "You have been logged out due to inactivity..." + // The user then has to click "back to sign in," to rerender the Okta widget. + // To avoid the error showing, we check if the context formName is 'terminal'. If it is, we know there was an error, + // and we re-render the widget to refresh the widget. + // We also set a flag to prevent the widget from refreshing multiple times. + if (context.formName === 'terminal' && !this.refreshedDueToInactivity) { + this.refreshedDueToInactivity = true + this.reRenderWidget() + } + this.updateSignUpButtonText() this.resetCurrentStepOnRegistrationComplete(context) this.redirectToSignInModalIfNeeded(context) @@ -585,17 +597,12 @@ class SignUpModalController { ) } - signIn (retrying = false) { + signIn () { return this.oktaSignInWidget.showSignInAndRedirect({ el: '#osw-container' }).then(tokens => { this.oktaSignInWidget.authClient.handleLoginRedirect(tokens) }).catch(error => { - if (!retrying) { - // Retry once - return this.reRenderWidget().then(() => this.signIn(true)) - } - this.$log.error('Error showing Okta sign in widget.', error) }) } From a285fe86590d4ec4cd713233d8e01409623c57ee Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Feb 2025 13:18:38 -0500 Subject: [PATCH 07/18] Adding focus border onto inputs and selects. And cleaning up select dropdowns focus affects --- .../scss/components/_oktaSigninWidget.scss | 87 ++++++++++++++++--- 1 file changed, 75 insertions(+), 12 deletions(-) diff --git a/src/assets/scss/components/_oktaSigninWidget.scss b/src/assets/scss/components/_oktaSigninWidget.scss index 47cf355f2..a4dd20271 100644 --- a/src/assets/scss/components/_oktaSigninWidget.scss +++ b/src/assets/scss/components/_oktaSigninWidget.scss @@ -33,6 +33,11 @@ sign-up-modal { $okta-grey: #D9D6D6; // ============== Container ============== // + .o-form-content { + padding-top: 10px; + overflow: hidden; + } + &.main-container { box-shadow: none; } @@ -42,7 +47,6 @@ sign-up-modal { border-radius: 7px; display: flex; flex-wrap: wrap; - overflow: hidden; } // ============== Errors ============== // @@ -88,26 +92,47 @@ sign-up-modal { .o-form-select-fieldset { .o-form-label { - top: 0px; + top: 2px; label { font-size: 12px; } } - .chzn-container > .chzn-single { - border: none; - height: auto; - padding-top: 5px; - -div { - top: 6px; + .chzn-container { + &:focus-within { + box-shadow: none; + + & > .chzn-single { + box-shadow: none; + border-color: $colorCru-gold; + } + } + & > .chzn-single { + border: 1px solid transparent; + height: auto; + padding-top: 12px; + + div { + top: 6px; + } } } + .chzn-container-single .chzn-drop { + border-radius: 0 0 6px 6px; + } + } + + // override okta styles + .focused-input, + .link.help:focus, + input[type=radio]:focus + label, + input[type=text]:focus { + box-shadow: none } .o-form-fieldset { - border-bottom: 1px solid $okta-grey; + border-top: 1px solid $okta-grey; width: 100%; &[data-se="o-form-fieldset-userProfile.state"], @@ -117,12 +142,35 @@ div { &[data-se="o-form-fieldset-userProfile.zipCode"] { border-left: 1px solid $okta-grey; } + + &:first-child { + border-top: none; + } + + &:first-of-type { + input[type=text]:not(.chzn-search input), + input[type=password]:not(.chzn-search input), + .chzn-container a { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + } + + &:last-of-type { + input[type=text]:not(.chzn-search input), + input[type=password]:not(.chzn-search input), + .chzn-container a { + border-bottom-left-radius: 7px; + border-bottom-right-radius: 7px; + } + } } .o-form-input .o-form-control { border: none; border-radius: 0; height: auto; + background: none; // Style input fields, but not input fields in dropdowns input[type=text]:not(.chzn-search input), @@ -130,9 +178,14 @@ div { -moz-appearance: none; -webkit-appearance: none; appearance: none; - border: none; + border: 1px solid transparent; padding-bottom: 12px; padding-top: 20px; + + &:focus { + box-shadow: none; + border-color: $colorCru-gold; + } } } // ============== Password rules ============== // @@ -182,4 +235,14 @@ div { .cru-retry-button:hover { text-decoration: underline; } - } +} + +// ============== Okta overrides ============== // +// select dropdown focus style +.chzn-container:focus-within { + box-shadow: none; +} +// select dropdown border radius style +.chzn-container-single .chzn-single { + border-radius: 6px 6px 0 0; +} From 926322a7c6193fa6217bf0dbd17ea8082ba77da0 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Feb 2025 13:55:32 -0500 Subject: [PATCH 08/18] Formatting CSS styles --- .../scss/components/_oktaSigninWidget.scss | 38 +++++++++++++------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/src/assets/scss/components/_oktaSigninWidget.scss b/src/assets/scss/components/_oktaSigninWidget.scss index a4dd20271..869a34e09 100644 --- a/src/assets/scss/components/_oktaSigninWidget.scss +++ b/src/assets/scss/components/_oktaSigninWidget.scss @@ -29,13 +29,14 @@ sign-up-modal { } } -#okta-sign-in.auth-container { +#okta-sign-in.auth-container { $okta-grey: #D9D6D6; + // ============== Container ============== // .o-form-content { - padding-top: 10px; overflow: hidden; + padding-top: 10px; } &.main-container { @@ -48,6 +49,7 @@ sign-up-modal { display: flex; flex-wrap: wrap; } + // ============== Errors ============== // .o-form-explain.o-form-input-error { @@ -55,6 +57,7 @@ sign-up-modal { padding-left: 20px; padding-top: 6px; } + // ============== Fields ============== // .o-form-fieldset { @@ -103,12 +106,13 @@ sign-up-modal { &:focus-within { box-shadow: none; - & > .chzn-single { - box-shadow: none; + &>.chzn-single { border-color: $colorCru-gold; + box-shadow: none; } - } - & > .chzn-single { + } + + &>.chzn-single { border: 1px solid transparent; height: auto; padding-top: 12px; @@ -118,6 +122,7 @@ sign-up-modal { } } } + .chzn-container-single .chzn-drop { border-radius: 0 0 6px 6px; } @@ -126,8 +131,9 @@ sign-up-modal { // override okta styles .focused-input, .link.help:focus, - input[type=radio]:focus + label, + input[type=radio]:focus+label, input[type=text]:focus { + box-shadow: none } @@ -139,6 +145,7 @@ sign-up-modal { &[data-se="o-form-fieldset-userProfile.zipCode"] { width: 50%; } + &[data-se="o-form-fieldset-userProfile.zipCode"] { border-left: 1px solid $okta-grey; } @@ -148,15 +155,17 @@ sign-up-modal { } &:first-of-type { + input[type=text]:not(.chzn-search input), input[type=password]:not(.chzn-search input), .chzn-container a { - border-top-left-radius: 6px; - border-top-right-radius: 6px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } } &:last-of-type { + input[type=text]:not(.chzn-search input), input[type=password]:not(.chzn-search input), .chzn-container a { @@ -167,10 +176,10 @@ sign-up-modal { } .o-form-input .o-form-control { + background: none; border: none; border-radius: 0; height: auto; - background: none; // Style input fields, but not input fields in dropdowns input[type=text]:not(.chzn-search input), @@ -183,11 +192,12 @@ sign-up-modal { padding-top: 20px; &:focus { - box-shadow: none; border-color: $colorCru-gold; + box-shadow: none; } } } + // ============== Password rules ============== // section[data-se="password-authenticator--rules"] { @@ -199,6 +209,7 @@ sign-up-modal { margin: 0; } } + // ============== Injected buttons ============== // // cru back button @@ -227,10 +238,12 @@ sign-up-modal { @extend .btn-primary; } } + // cru error message .cru-error { - float: left + float: left; } + // cru retry button .cru-retry-button:hover { text-decoration: underline; @@ -242,6 +255,7 @@ sign-up-modal { .chzn-container:focus-within { box-shadow: none; } + // select dropdown border radius style .chzn-container-single .chzn-single { border-radius: 6px 6px 0 0; From a747ee9b82cbeb3cbd6c039b98efa37a4f9dba22 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Feb 2025 14:07:38 -0500 Subject: [PATCH 09/18] JS formatting --- .../signUpModal/signUpModal.component.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/common/components/signUpModal/signUpModal.component.js b/src/common/components/signUpModal/signUpModal.component.js index abb044f21..746e9c1e5 100644 --- a/src/common/components/signUpModal/signUpModal.component.js +++ b/src/common/components/signUpModal/signUpModal.component.js @@ -547,29 +547,29 @@ class SignUpModalController { this.floatingLabelAbortControllers.forEach(controller => controller.abort()) this.floatingLabelAbortControllers = [] - document.querySelectorAll('.o-form-content input[type="text"], .o-form-content input[type="password"]').forEach((input) => { - const label = document.querySelector(`.o-form-content label[for="${input.id}"]`)?.parentNode; + document.querySelectorAll('.o-form-content input[type="text"], .o-form-content input[type="password"]').forEach(input => { + const label = input.labels[0]?.parentNode if (!label) { - return; + return } // if the input already has a value, mark the label as active if (input.value.trim() !== '') { - label.classList.add('active'); + label.classList.add('active') } // Create and save the controller so we can later remove the listeners. - const controller = new AbortController(); - this.floatingLabelAbortControllers.push(controller); + const controller = new AbortController() + this.floatingLabelAbortControllers.push(controller) input.addEventListener('focus', () => { - label.classList.add('active'); - }, { signal: controller.signal }); + label.classList.add('active') + }, { signal: controller.signal }) input.addEventListener('blur', () => { // When the input loses focus, check its value. if (input.value.trim() === '') { - label.classList.remove('active'); + label.classList.remove('active') } - }, { signal: controller.signal }); - }); + }, { signal: controller.signal }) + }) } goToNextStep () { From b1fed517d89d4b7d691261c81ffc5f7bee46b43c Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Feb 2025 14:27:45 -0500 Subject: [PATCH 10/18] Removing display flex and flex related styles and replacing with width: 100% --- src/assets/scss/components/_oktaSigninWidget.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/assets/scss/components/_oktaSigninWidget.scss b/src/assets/scss/components/_oktaSigninWidget.scss index 869a34e09..bbaec7f13 100644 --- a/src/assets/scss/components/_oktaSigninWidget.scss +++ b/src/assets/scss/components/_oktaSigninWidget.scss @@ -18,11 +18,6 @@ } sign-up-modal { - #osw-container { - align-items: center; - display: flex; - justify-content: center; - } .back-to-sign-in { margin-top: 20px; @@ -31,6 +26,7 @@ sign-up-modal { #okta-sign-in.auth-container { $okta-grey: #D9D6D6; + width: 100%; // ============== Container ============== // @@ -74,6 +70,10 @@ sign-up-modal { width: auto; z-index: 20; + @media (prefers-reduced-motion) { + transition: none; + } + &.active { top: 2px; From a5cdaa00d0fdd51d912e1525443d070151672b84 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Feb 2025 14:28:14 -0500 Subject: [PATCH 11/18] Cleaning up HTML and removing alt text on decorative images --- .../components/signUpModal/signUpModal.tpl.html | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/common/components/signUpModal/signUpModal.tpl.html b/src/common/components/signUpModal/signUpModal.tpl.html index e4dbb15d1..59153ed35 100644 --- a/src/common/components/signUpModal/signUpModal.tpl.html +++ b/src/common/components/signUpModal/signUpModal.tpl.html @@ -25,13 +25,11 @@

Create Your Account

Step 1 - Identity + ng-if="$ctrl.currentStep > 1" + /> - dots between steps +
Create Your Account />
- dots between steps +
Date: Tue, 11 Feb 2025 14:56:16 -0500 Subject: [PATCH 12/18] Formatting SASS --- .../scss/components/_accountBenefits.scss | 10 ++-- .../components/_failedVerificationModal.scss | 2 +- .../components/_registerAccountModal.scss | 17 ++++--- src/assets/scss/components/_signInForm.scss | 48 +++++++++++-------- src/assets/scss/components/_signUpModal.scss | 44 ++++++++--------- 5 files changed, 65 insertions(+), 56 deletions(-) diff --git a/src/assets/scss/components/_accountBenefits.scss b/src/assets/scss/components/_accountBenefits.scss index c4b4c776b..c9310c52c 100644 --- a/src/assets/scss/components/_accountBenefits.scss +++ b/src/assets/scss/components/_accountBenefits.scss @@ -12,25 +12,25 @@ account-benefits-modal { } } - .sign-up { - text-align: center; margin-bottom: 10px; + text-align: center; + @media (max-width:550px) { margin-top: 10px; } + p { margin-bottom: 3px; } + button { width: 100%; } } .okta-link { - text-align: center; margin-top: 5px; + text-align: center; } } - - diff --git a/src/assets/scss/components/_failedVerificationModal.scss b/src/assets/scss/components/_failedVerificationModal.scss index 373c8eb35..5738cbfa1 100644 --- a/src/assets/scss/components/_failedVerificationModal.scss +++ b/src/assets/scss/components/_failedVerificationModal.scss @@ -1,7 +1,7 @@ failed-verification-modal { .modal-body { - max-width: 500px; margin: 0 auto; + max-width: 500px; padding: 0; } } diff --git a/src/assets/scss/components/_registerAccountModal.scss b/src/assets/scss/components/_registerAccountModal.scss index b2cb27aa1..a4c06f2d7 100644 --- a/src/assets/scss/components/_registerAccountModal.scss +++ b/src/assets/scss/components/_registerAccountModal.scss @@ -16,8 +16,8 @@ sign-up-modal { } .modal-header { - padding: 30px; background-color: #EBECEC; + padding: 30px; } .signup-header { @@ -26,7 +26,6 @@ sign-up-modal { } register-account-modal { - .modal-header ul:last-child { margin-bottom: 0; } @@ -36,6 +35,7 @@ register-account-modal { } .modal-dialog.modal-sm & { + &[data-state=sign-in], &[data-state=loading-donor] { .modal-body { @@ -45,12 +45,14 @@ register-account-modal { } .modal-dialog.modal-lg & { + &[data-state=sign-in], &[data-state=loading-donor] { @media screen and (min-width: 992px) { display: flex; .modal-header { + flex: 1 } @@ -59,32 +61,34 @@ register-account-modal { } } } - &[data-state=contact-info] { + &[data-state=contact-info] { .modal-header { text-align: center; width: 100%; .paragraph { - max-width: 500px; margin-left: auto; margin-right: auto; + max-width: 500px; } } contact-info-modal form { + column-gap: 20px; display: grid; grid-template: 1fr auto / auto 320px; - column-gap: 20px; .name { grid-column: 1; grid-row: 1; } + .address { grid-column: 2; grid-row: 1 / 3; } + .contact-info { grid-column: 1; grid-row: 2; @@ -95,8 +99,8 @@ register-account-modal { } } } - &[data-state=user-match] { + &[data-state=user-match] { .modal-header h3 { text-align: center; } @@ -107,5 +111,4 @@ register-account-modal { } } } - } diff --git a/src/assets/scss/components/_signInForm.scss b/src/assets/scss/components/_signInForm.scss index c5ba8f144..6e63aa929 100644 --- a/src/assets/scss/components/_signInForm.scss +++ b/src/assets/scss/components/_signInForm.scss @@ -2,12 +2,12 @@ sign-in-form { display: flex; flex-direction: column; gap: 20px; - text-align: center; margin-top: 20px; + text-align: center; hr { - width: 65%; margin-block: auto; + width: 65%; } .no-account { @@ -16,57 +16,65 @@ sign-in-form { .details-wrapper { display: flex; - flex-wrap: wrap; // Keep the summaries on the first line and wrap the description to the next line + flex-wrap: wrap; + + // Keep the summaries on the first line and wrap the description to the next line details:first-of-type summary { - flex: 1; // Push the second summary to the right edge - min-width: 150px; // Ensure that the summaries are wide enough that the description is forced to wrap to the next line + flex: 1; + min-width: 150px; + // Push the second summary to the right edge + // Ensure that the summaries are wide enough that the description is forced to wrap to the next line } } // The goal is to have two
on one line that display their descriptions in the same // location on the page on the line before details { - display: contents; // Make the descriptions participate in the .details-wrapper flexbox layout + display: contents; text-align: left; + // Make the descriptions participate in the .details-wrapper flexbox layout } summary { + cursor: pointer; display: list-item; - order: -1; // Make both summaries appear before the descriptions margin: 1rem 0; - cursor: pointer; + order: -1; + + // Make both summaries appear before the descriptions } - > p { + >p { margin-bottom: 0; } .okta-signup-button { $okta-brand: #007dc1; - - display: flex; - justify-content: center; + align-items: center; - gap: 0.5rem; - padding-block: 20px; - width: 100%; - font-size: 1.2rem; - font-weight: bold; background-color: white; - color: $okta-brand; border: 2px solid $okta-brand; border-radius: 4px; + color: $okta-brand; + display: flex; + font-size: 1.2rem; + font-weight: bold; + gap: 0.5rem; + justify-content: center; + padding-block: 20px; + width: 100%; &:hover { - color: white; background-color: $okta-brand; border-color: $okta-brand; + color: white; } + &:focus { - color: white; background-color: darken($okta-brand, 3%); border-color: darken($okta-brand, 3%); + color: white; } } diff --git a/src/assets/scss/components/_signUpModal.scss b/src/assets/scss/components/_signUpModal.scss index 27f7c940b..d15575617 100644 --- a/src/assets/scss/components/_signUpModal.scss +++ b/src/assets/scss/components/_signUpModal.scss @@ -2,27 +2,23 @@ sign-up-modal { position: relative; .signup-steps { - display: flex; - width: 100%; - justify-content: center; align-items: center; + display: flex; gap: 16px; + justify-content: center; padding: 10px 0; + width: 100%; - .between-steps { - img { - width: 18px; - } + .between-steps img { + width: 18px; } - .step { - img { - width: 55px; - opacity: 1; + .step img { + opacity: 1; + width: 55px; - &.semi-transparent { - opacity: .5; - } + &.semi-transparent { + opacity: .5; } } } @@ -30,18 +26,19 @@ sign-up-modal { form { margin-bottom: 40px; } + .buttons { - position: absolute; - width: 100%; - padding: 15px 30px; - bottom: 0; - left: 0; + align-items: center; background-color: #ffffff; border-top: rgba(0, 0, 0, 0.15) 1px solid; - align-items: center; + bottom: 0; display: flex; flex-direction: row-reverse; justify-content: space-between; + left: 0; + padding: 15px 30px; + position: absolute; + width: 100%; .back-to-sign-in { width: 150px; @@ -57,15 +54,15 @@ sign-up-modal { } .sticky-buttons { + height: calc(100vh - 170px); max-height: 560px; overflow-y: auto; position: unset; - height: calc(100vh - 170px); // When inside another modal &:not(.modal-body) { - max-height: 520px; height: calc(100vh - 230px); + max-height: 520px; form { margin-bottom: 60px; @@ -81,7 +78,8 @@ sign-up-modal { section[data-se="password-authenticator--rules"] { display: none; } - div[data-se="o-form-fieldset-credentials.passcode"] ~ section[data-se="password-authenticator--rules"] { + + div[data-se="o-form-fieldset-credentials.passcode"]~section[data-se="password-authenticator--rules"] { display: block; } } From c18123ebd8562d108c9325eebef925c7d4726124 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Feb 2025 15:13:08 -0500 Subject: [PATCH 13/18] Added the loading symbol to inform the user something is happening. --- src/assets/scss/components/_signUpModal.scss | 6 +++++- .../components/signUpModal/signUpModal.component.js | 9 ++++++++- src/common/components/signUpModal/signUpModal.tpl.html | 2 ++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/assets/scss/components/_signUpModal.scss b/src/assets/scss/components/_signUpModal.scss index d15575617..c7609885b 100644 --- a/src/assets/scss/components/_signUpModal.scss +++ b/src/assets/scss/components/_signUpModal.scss @@ -6,7 +6,7 @@ sign-up-modal { display: flex; gap: 16px; justify-content: center; - padding: 10px 0; + padding: 20px 0 0; width: 100%; .between-steps img { @@ -23,6 +23,10 @@ sign-up-modal { } } + .okta-signup-loading { + padding: 153px 0 153px; + } + form { margin-bottom: 40px; } diff --git a/src/common/components/signUpModal/signUpModal.component.js b/src/common/components/signUpModal/signUpModal.component.js index 746e9c1e5..b902d22d6 100644 --- a/src/common/components/signUpModal/signUpModal.component.js +++ b/src/common/components/signUpModal/signUpModal.component.js @@ -55,11 +55,11 @@ class SignUpModalController { } initializeVariables () { + this.isLoading = true this.currentStep = 1 this.donorDetails = {} this.translations = {} this.signUpErrors = [] - this.isLoading = true this.submitting = false this.countryCodeOptions = {} this.countriesData = [] @@ -127,6 +127,7 @@ class SignUpModalController { this.signIn() this.loadCountries({ initial: true }).subscribe() + this.oktaSignInWidget.on('ready', this.ready.bind(this)) this.oktaSignInWidget.on('afterRender', this.afterRender.bind(this)) this.oktaSignInWidget.on('afterError', this.afterError.bind(this)) } @@ -442,6 +443,12 @@ class SignUpModalController { } } + ready (context) { + this.$scope.$apply(() => { + this.isLoading = false + }) + } + updateSignUpButtonText () { // Change the text of the sign up button to ensure it's clear what the user is doing const signUpButton = angular.element(document.querySelector('.o-form-button-bar input.button.button-primary')) diff --git a/src/common/components/signUpModal/signUpModal.tpl.html b/src/common/components/signUpModal/signUpModal.tpl.html index 59153ed35..a96a2252a 100644 --- a/src/common/components/signUpModal/signUpModal.tpl.html +++ b/src/common/components/signUpModal/signUpModal.tpl.html @@ -56,6 +56,8 @@

Create Your Account

+ +
From 98cf4b760df1e77409e6ab63cd5172bfd76a65d7 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 12 Feb 2025 08:12:56 -0500 Subject: [PATCH 14/18] updating buttons --- src/common/components/signUpModal/signUpModal.component.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/components/signUpModal/signUpModal.component.js b/src/common/components/signUpModal/signUpModal.component.js index b902d22d6..ce0ae7115 100644 --- a/src/common/components/signUpModal/signUpModal.component.js +++ b/src/common/components/signUpModal/signUpModal.component.js @@ -18,8 +18,8 @@ export const countryFieldSelector = '.o-form-fieldset[data-se="o-form-fieldset-u export const regionFieldSelector = '.o-form-fieldset[data-se="o-form-fieldset-userProfile.state"]' export const inputFieldErrorSelectorPrefix = '.o-form-input-name-' const componentName = 'signUpModal' -const signUpButtonText = 'Create an Account' -const nextButtonText = 'Next' +const signUpButtonText = 'Create Account' +const nextButtonText = 'Continue' const backButtonId = 'backButton' const backButtonText = 'Back' const errorIconHtml = '' From e2a81318c205e0685188819f4d9429ee14b2c597 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 12 Feb 2025 08:22:05 -0500 Subject: [PATCH 15/18] Revert "Formatting SASS" This reverts commit 794179ccec514ef7cafbe92faac27b4f28cb4a59. --- .../scss/components/_accountBenefits.scss | 10 ++-- .../components/_failedVerificationModal.scss | 2 +- .../components/_registerAccountModal.scss | 17 +++---- src/assets/scss/components/_signInForm.scss | 48 ++++++++----------- src/assets/scss/components/_signUpModal.scss | 45 +++++++++-------- 5 files changed, 58 insertions(+), 64 deletions(-) diff --git a/src/assets/scss/components/_accountBenefits.scss b/src/assets/scss/components/_accountBenefits.scss index c9310c52c..c4b4c776b 100644 --- a/src/assets/scss/components/_accountBenefits.scss +++ b/src/assets/scss/components/_accountBenefits.scss @@ -12,25 +12,25 @@ account-benefits-modal { } } + .sign-up { - margin-bottom: 10px; text-align: center; - + margin-bottom: 10px; @media (max-width:550px) { margin-top: 10px; } - p { margin-bottom: 3px; } - button { width: 100%; } } .okta-link { - margin-top: 5px; text-align: center; + margin-top: 5px; } } + + diff --git a/src/assets/scss/components/_failedVerificationModal.scss b/src/assets/scss/components/_failedVerificationModal.scss index 5738cbfa1..373c8eb35 100644 --- a/src/assets/scss/components/_failedVerificationModal.scss +++ b/src/assets/scss/components/_failedVerificationModal.scss @@ -1,7 +1,7 @@ failed-verification-modal { .modal-body { - margin: 0 auto; max-width: 500px; + margin: 0 auto; padding: 0; } } diff --git a/src/assets/scss/components/_registerAccountModal.scss b/src/assets/scss/components/_registerAccountModal.scss index a4c06f2d7..b2cb27aa1 100644 --- a/src/assets/scss/components/_registerAccountModal.scss +++ b/src/assets/scss/components/_registerAccountModal.scss @@ -16,8 +16,8 @@ sign-up-modal { } .modal-header { - background-color: #EBECEC; padding: 30px; + background-color: #EBECEC; } .signup-header { @@ -26,6 +26,7 @@ sign-up-modal { } register-account-modal { + .modal-header ul:last-child { margin-bottom: 0; } @@ -35,7 +36,6 @@ register-account-modal { } .modal-dialog.modal-sm & { - &[data-state=sign-in], &[data-state=loading-donor] { .modal-body { @@ -45,14 +45,12 @@ register-account-modal { } .modal-dialog.modal-lg & { - &[data-state=sign-in], &[data-state=loading-donor] { @media screen and (min-width: 992px) { display: flex; .modal-header { - flex: 1 } @@ -61,34 +59,32 @@ register-account-modal { } } } - &[data-state=contact-info] { + .modal-header { text-align: center; width: 100%; .paragraph { + max-width: 500px; margin-left: auto; margin-right: auto; - max-width: 500px; } } contact-info-modal form { - column-gap: 20px; display: grid; grid-template: 1fr auto / auto 320px; + column-gap: 20px; .name { grid-column: 1; grid-row: 1; } - .address { grid-column: 2; grid-row: 1 / 3; } - .contact-info { grid-column: 1; grid-row: 2; @@ -99,8 +95,8 @@ register-account-modal { } } } - &[data-state=user-match] { + .modal-header h3 { text-align: center; } @@ -111,4 +107,5 @@ register-account-modal { } } } + } diff --git a/src/assets/scss/components/_signInForm.scss b/src/assets/scss/components/_signInForm.scss index 6e63aa929..c5ba8f144 100644 --- a/src/assets/scss/components/_signInForm.scss +++ b/src/assets/scss/components/_signInForm.scss @@ -2,12 +2,12 @@ sign-in-form { display: flex; flex-direction: column; gap: 20px; - margin-top: 20px; text-align: center; + margin-top: 20px; hr { - margin-block: auto; width: 65%; + margin-block: auto; } .no-account { @@ -16,65 +16,57 @@ sign-in-form { .details-wrapper { display: flex; - flex-wrap: wrap; - - // Keep the summaries on the first line and wrap the description to the next line + flex-wrap: wrap; // Keep the summaries on the first line and wrap the description to the next line details:first-of-type summary { - flex: 1; - min-width: 150px; - // Push the second summary to the right edge - // Ensure that the summaries are wide enough that the description is forced to wrap to the next line + flex: 1; // Push the second summary to the right edge + min-width: 150px; // Ensure that the summaries are wide enough that the description is forced to wrap to the next line } } // The goal is to have two
on one line that display their descriptions in the same // location on the page on the line before details { - display: contents; + display: contents; // Make the descriptions participate in the .details-wrapper flexbox layout text-align: left; - // Make the descriptions participate in the .details-wrapper flexbox layout } summary { - cursor: pointer; display: list-item; + order: -1; // Make both summaries appear before the descriptions margin: 1rem 0; - order: -1; - - // Make both summaries appear before the descriptions + cursor: pointer; } - >p { + > p { margin-bottom: 0; } .okta-signup-button { $okta-brand: #007dc1; - - align-items: center; - background-color: white; - border: 2px solid $okta-brand; - border-radius: 4px; - color: $okta-brand; + display: flex; - font-size: 1.2rem; - font-weight: bold; - gap: 0.5rem; justify-content: center; + align-items: center; + gap: 0.5rem; padding-block: 20px; width: 100%; + font-size: 1.2rem; + font-weight: bold; + background-color: white; + color: $okta-brand; + border: 2px solid $okta-brand; + border-radius: 4px; &:hover { + color: white; background-color: $okta-brand; border-color: $okta-brand; - color: white; } - &:focus { + color: white; background-color: darken($okta-brand, 3%); border-color: darken($okta-brand, 3%); - color: white; } } diff --git a/src/assets/scss/components/_signUpModal.scss b/src/assets/scss/components/_signUpModal.scss index c7609885b..a4def549b 100644 --- a/src/assets/scss/components/_signUpModal.scss +++ b/src/assets/scss/components/_signUpModal.scss @@ -2,23 +2,30 @@ sign-up-modal { position: relative; .signup-steps { - align-items: center; display: flex; - gap: 16px; justify-content: center; + gap: 16px; padding: 20px 0 0; width: 100%; + justify-content: center; + align-items: center; + gap: 16px; + padding: 10px 0; - .between-steps img { - width: 18px; + .between-steps { + img { + width: 18px; + } } - .step img { - opacity: 1; - width: 55px; + .step { + img { + width: 55px; + opacity: 1; - &.semi-transparent { - opacity: .5; + &.semi-transparent { + opacity: .5; + } } } } @@ -30,19 +37,18 @@ sign-up-modal { form { margin-bottom: 40px; } - .buttons { - align-items: center; + position: absolute; + width: 100%; + padding: 15px 30px; + bottom: 0; + left: 0; background-color: #ffffff; border-top: rgba(0, 0, 0, 0.15) 1px solid; - bottom: 0; + align-items: center; display: flex; flex-direction: row-reverse; justify-content: space-between; - left: 0; - padding: 15px 30px; - position: absolute; - width: 100%; .back-to-sign-in { width: 150px; @@ -58,15 +64,15 @@ sign-up-modal { } .sticky-buttons { - height: calc(100vh - 170px); max-height: 560px; overflow-y: auto; position: unset; + height: calc(100vh - 170px); // When inside another modal &:not(.modal-body) { - height: calc(100vh - 230px); max-height: 520px; + height: calc(100vh - 230px); form { margin-bottom: 60px; @@ -82,8 +88,7 @@ sign-up-modal { section[data-se="password-authenticator--rules"] { display: none; } - - div[data-se="o-form-fieldset-credentials.passcode"]~section[data-se="password-authenticator--rules"] { + div[data-se="o-form-fieldset-credentials.passcode"] ~ section[data-se="password-authenticator--rules"] { display: block; } } From d0528c9dc71a6ed2ca800ee174be55fd0d0baeee Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 12 Feb 2025 08:30:42 -0500 Subject: [PATCH 16/18] fixing border-radius on password ans select inputs Fixing the border radius on the last fields Button styles and password clean up Fixing password pixel displacement --- .../scss/components/_oktaSigninWidget.scss | 37 +++++++++++++++---- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/src/assets/scss/components/_oktaSigninWidget.scss b/src/assets/scss/components/_oktaSigninWidget.scss index bbaec7f13..eb54c9639 100644 --- a/src/assets/scss/components/_oktaSigninWidget.scss +++ b/src/assets/scss/components/_oktaSigninWidget.scss @@ -114,6 +114,7 @@ sign-up-modal { &>.chzn-single { border: 1px solid transparent; + border-radius: 0; height: auto; padding-top: 12px; @@ -157,7 +158,7 @@ sign-up-modal { &:first-of-type { input[type=text]:not(.chzn-search input), - input[type=password]:not(.chzn-search input), + input[type=password], .chzn-container a { border-top-left-radius: 6px; border-top-right-radius: 6px; @@ -166,13 +167,19 @@ sign-up-modal { &:last-of-type { + // We don't include password as it's the only field on it's step and has the password requirements below it. input[type=text]:not(.chzn-search input), - input[type=password]:not(.chzn-search input), .chzn-container a { - border-bottom-left-radius: 7px; - border-bottom-right-radius: 7px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } } + + // Allow the account type dropdown to have rounded corners if the organisation field is hidden + &:has(+ .o-form-fieldset[style="display: none;"]) .chzn-container a { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } } .o-form-input .o-form-control { @@ -183,11 +190,12 @@ sign-up-modal { // Style input fields, but not input fields in dropdowns input[type=text]:not(.chzn-search input), - input[type=password]:not(.chzn-search input) { + input[type=password] { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 1px solid transparent; + height: auto; padding-bottom: 12px; padding-top: 20px; @@ -201,7 +209,8 @@ sign-up-modal { // ============== Password rules ============== // section[data-se="password-authenticator--rules"] { - background: $okta-grey; + border-radius: 0 0 6px 6px; + border-top: 1px solid $okta-grey; padding: 10px; width: 100%; @@ -219,14 +228,23 @@ sign-up-modal { gap: 10px; justify-content: space-between; + #backButton, + .button.button-primary { + padding-top: 7px; + padding-bottom: 7px; + } + #backButton { + color: $colorCru-gray !important; + background-color: $colorCru-white !important; + border-color: $colorCru-gray !important; width: 100%; &:hover, &:focus, &:active { - background: #f6f6f6 !important; - color: $colorCru-gray !important; + color: $colorCru-white !important; + background: $colorCru-gray !important; } } @@ -258,5 +276,8 @@ sign-up-modal { // select dropdown border radius style .chzn-container-single .chzn-single { + border-radius: 0; +} +#countryCodeInput_chzn.chzn-container-single .chzn-single { border-radius: 6px 6px 0 0; } From 34086286246b0fb46d676c0fa0a94654e4de795f Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 12 Feb 2025 11:58:59 -0500 Subject: [PATCH 17/18] Order regions in alphabetical order --- src/common/components/signUpModal/signUpModal.component.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/common/components/signUpModal/signUpModal.component.js b/src/common/components/signUpModal/signUpModal.component.js index ce0ae7115..513ed4f77 100644 --- a/src/common/components/signUpModal/signUpModal.component.js +++ b/src/common/components/signUpModal/signUpModal.component.js @@ -271,6 +271,9 @@ class SignUpModalController { return this.geographiesService.getRegions(countryData).pipe( map((data) => { + // Order regions in alphabetical order + data.sort((a, b) => a['display-name'].localeCompare(b['display-name'])) + this.stateOptions = {} data.forEach(state => { this.stateOptions[state.name] = state['display-name'] From bf11cdb10579ca09dc7049cf21f3603ea7807b41 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 12 Feb 2025 13:39:15 -0500 Subject: [PATCH 18/18] Handle the inactivity error. I will --- src/common/components/signUpModal/signUpModal.component.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/common/components/signUpModal/signUpModal.component.js b/src/common/components/signUpModal/signUpModal.component.js index 513ed4f77..f7118a32f 100644 --- a/src/common/components/signUpModal/signUpModal.component.js +++ b/src/common/components/signUpModal/signUpModal.component.js @@ -425,10 +425,9 @@ class SignUpModalController { // The user then has to click "back to sign in," to rerender the Okta widget. // To avoid the error showing, we check if the context formName is 'terminal'. If it is, we know there was an error, // and we re-render the widget to refresh the widget. - // We also set a flag to prevent the widget from refreshing multiple times. - if (context.formName === 'terminal' && !this.refreshedDueToInactivity) { - this.refreshedDueToInactivity = true + if (context.formName === 'terminal') { this.reRenderWidget() + return } this.updateSignUpButtonText() @@ -446,7 +445,7 @@ class SignUpModalController { } } - ready (context) { + ready () { this.$scope.$apply(() => { this.isLoading = false })