1"use strict";(self.webpackChunkone_web=self.webpackChunkone_web||[]).push([[3023],{65676:(e,t,s)=>{function r(e){return e.length<1?{isError:!0,errorMessage:"Cannot be blank"}:{isError:!1,errorMessage:""}}function a(e){return e.length<1?{isError:!0,errorMessage:"Please select a value."}:{isError:!1,errorMessage:""}}function i(e){return void 0===e?r:t=>e&&t.length<e?{isError:!0,errorMessage:`Response must contain at least ${e} characters`}:{isError:!1,errorMessage:""}}s.d(t,{JT:()=>i,hj:()=>r,nk:()=>n,td:()=>a});const o=/(?!.*\.{2})^([a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;function n(e){return function(e){return o.test(String(e).toLowerCase())}(e)?{isError:!1,errorMessage:""}:{isError:!0,errorMessage:"Must submit valid email address"}}},28300:(e,t,s)=>{var r=s(71413),a=s(92412),i=s(52706),o=s(30555),n=s(25461),l=s(38155),c=s(32701),d=s(24634),u=s(82625),p=s(31376),h=s(56188),m=Object.defineProperty,g=Object.getOwnPropertyDescriptor,b=(e,t,s,r)=>{for(var a,i=r>1?void 0:r?g(t,s):t,o=e.length-1;o>=0;o--)(a=e[o])&&(i=(r?a(t,s,i):a(i))||i);return r&&i&&m(t,s,i),i};let f=class extends r.WF{constructor(){super(...arguments),this.inputType="text",this.label="",this.name="",this.value="",this.autocompleteValue="off",this.errorText="",this.floatLabel=!1,this.disabled=!1,this.isLoading=!1,this.isError=!1,this.isRequired=!1,this.labelClientWidth=0,this.labelRef=(0,l._)(),this.inputRef=(0,l._)()}static get styles(){return[c.A,d.A,u.A,p.A,r.AH` 2 :host { 3 display: block; 4 position: relative; 5 } 6 `]}render(){return r.qy` 7 <label 8 ${(0,l.K)(this.labelRef)} 9 for=${this.name} 10 class=${(0,o.H)({"base-input-label":!0,"float-label":this.floatLabel})} 11 > 12 ${this.label} 13 </label> 14 <input 15 ${(0,l.K)(this.inputRef)} 16 id=${this.name} 17 class=${(0,o.H)({"base-input":!0,"input-is-error":this.isError})} 18 type=${this.inputType} 19 name=${this.name} 20 label=${this.label} 21 .value=${(0,n.V)(this.value)}
22 @input=${this.onInput} 23 @blur=${this.onBlur} 24 @focus=${this.onFocus} 25 @keydown=${this.onKeyDown} 26 aria-required=${this.isRequired} 27 ?disabled=${this.disabled} 28 aria-invalid=${this.isError} 29 aria-describedby=${`${this.name}-error`} 30 autocomplete="${this.autocompleteValue?this.autocompleteValue:"off"}" 31 aria-autocomplete="${"off"!==this.autocompleteValue?"list":"none"}" 32 /> 33 <p 34 id=${`${this.name}-error`} 35 class=${(0,o.H)({"input-error-label":!0,"input-error-label-show":this.isError})} 36 role=${this.isError?"alert":"status"} 37 part="error" 38 tabindex="-1" 39 style=${(0,a.W)({"max-width":0===this.labelClientWidth?"auto":`${this.labelClientWidth}px`})} 40 > 41 <svg class="input-error-label-icon" role="presentation" aria-hidden="true"> 42 <use href="${"/images/sprites.svg#close"}" /> 43 </svg> 44 ${this.errorText} 45 </p> 46 <div 47 class=${(0,o.H)({"error-spacer":!0,"error-spacer-is-error":this.isError})} 48 part="error" 49 ></div> 50 ${this.isLoading?r.qy`<div class="input-spinner-container"> 51 <div class="spinner" aria-label="Loading..."></div> 52 </div>`:void 0} 53 `}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.focusInput)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.focusInput)}focusInput(){this.inputRef.value?.focus()}onInput(e){const{name:t,value:s}=e.currentTarget;this.dispatchEvent((0,h.h)("crc:textInput:input",{detail:{name:t,value:s}}))}onBlur(e){const{name:t,value:s}=e.currentTarget;this.dispatchEvent((0,h.h)("crc:textInput:blur",{detail:{name:t,value:s}})),""===s&&(this.floatLabel=!1)}onFocus(){this.floatLabel=!0}onKeyDown(e){const{name:t}=e.currentTarget,{key:s}=e;this.dispatchEvent((0,h.h)("crc:textInput:keydown",{detail:{name:t,key:s}}))}willUpdate(e){e.has("value")&&(""===this.value?this.floatLabel=!1:this.floatLabel=!0),e.has("errorText")&&this.labelRef.value&&(this.labelClientWidth=this.labelRef.value.clientWidth)}};b([(0,i.MZ)({type:String})],f.prototype,"inputType",2),b([(0,i.MZ)({type:String})],f.prototype,"label",2),b([(0,i.MZ)({type:String})],f.prototype,"name",2),b([(0,i.MZ)({type:String})],f.prototype,"value",2),b([(0,i.MZ)({type:String})],f.prototype,"autocompleteValue",2),b([(0,i.MZ)({type:String})],f.prototype,"errorText",2),b([(0,i.MZ)({type:Boolean})],f.prototype,"floatLabel",2),b([(0,i.MZ)({type:Boolean})],f.prototype,"disabled",2),b([(0,i.MZ)({type:Boolean})],f.prototype,"isLoading",2),b([(0,i.MZ)({type:Boolean})],f.prototype,"isError",2),b([(0,i.MZ)({type:Boolean})],f.prototype,"isRequired",2),b([(0,i.MZ)({type:Number})],f.prototype,"labelClientWidth",2),f=b([(0,i.EM)("text-input")],f)},51427:(e,t,s)=>{var r=s(71413),a=s(52706),i=s(38155),o=Object.defineProperty,n=Object.getOwnPropertyDescriptor,l=(e,t,s,r)=>{for(var a,i=r>1?void 0:r?n(t,s):t,l=e.length-1;l>=0;l--)(a=e[l])&&(i=(r?a(t,s,i):a(i))||i);return r&&i&&o(t,s,i),i};let c=class extends r.WF{constructor(){super(...arguments),this.inputRef=(0,i._)(),this.checked=!1,this.label="",this.name="",this.disabled=!1,this.hideSwitch=!1}static get styles(){return[r.AH` 54 @media screen and (prefers-reduced-motion: reduce) { 55 :host { 56 transition: none; 57 } 58 } 59 :host { 60 --toggle-switch-disabled-opacity: 0.5; 61 --toggle-switch-toggle-duration: 0.1s; 62 63 --toggle-switch-color: rgb(var(--concrete)); 64 --toggle-switch-color-active: rgb(var(--peter-river)); 65 --toggle-switch-color-focus: rgba(var(--peter-river), 0.5); 66 67 --toggle-switch-track-height: 0.75rem; 68 69 --toggle-switch-knob-color: rgb(var(--concrete)); 70 --toggle-switch-knob-color-active: rgb(var(--peter-river)); 71 72 display: block; 73 outline: 0.25rem solid transparent; 74 cursor: pointer; 75 transition: fill 0.1s linear, color 0.1s linear, outline 0.15s ease-in-out; 76 fill: var(--toggle-switch-color); 77 } 78 79 :host([hidden]) { 80 display: none; 81 } 82 83 :host([disabled]) { 84 opacity: var(--toggle-switch-disabled-opacity); 85 } 86 87 :host([checked]) { 88 /*color: var(--toggle-switch-color-active);*/ 89 fill: var(--toggle-switch-color-active); 90 } 91 92 :host(:focus), 93 :host(:hover) { 94 --toggle-switch-knob-color: rgb(var(--peter-river)); 95 } 96 97 label { 98 flex-grow: 1; 99 } 100 101 #track, 102 #knob { 103 position: absolute; 104 top: 0; 105 bottom: 0; 106 left: 0; 107 margin: auto; 108 } 109 110 #wrapper { 111 display: flex; 112 padding: 0.5rem var(--gap); 113 /*border-top: 1px solid black;*/ 114 /*justify-content: space-between;*/ 115 align-items: center; 116 } 117 118 label { 119 /*margin-right: var(--gap);*/ 120 display: flex;
121 align-items: stretch; 122 } 123 124 #inner-wrap { 125 position: relative; 126 height: 1.25rem; 127 width: 2em; 128 margin-right: 0.5rem; 129 } 130 131 #inner-wrap:focus:focus-visible { 132 outline: rgb(var(--peter-river)) solid 0.25rem; 133 } 134 135 @media screen and (prefers-reduced-motion: reduce) { 136 #track { 137 transition: none; 138 } 139 } 140 #track { 141 height: var(--toggle-switch-track-height); 142 width: 100%; 143 border-radius: 1rem; 144 background-color: var(--toggle-switch-knob-color); 145 opacity: 0.25; 146 transition: background-color var(--toggle-switch-toggle-duration); 147 } 148 149 :host([checked]) #track { 150 background-color: var(--toggle-switch-knob-color-active); 151 } 152 153 @media screen and (prefers-reduced-motion: reduce) { 154 #knob { 155 transition: none; 156 } 157 } 158 #knob { 159 position: absolute; 160 left: 0; 161 top: 0; 162 bottom: 0; 163 margin: auto; 164 height: 90%; 165 width: 1.1rem; 166 border-radius: 50%; 167 background-color: var(--toggle-switch-knob-color); 168 transition: transform var(--toggle-switch-toggle-duration), 169 background-color var(--toggle-switch-toggle-duration); 170 } 171 172 @media screen and (prefers-reduced-motion: reduce) { 173 :host([checked]) #knob { 174 transition: none; 175 } 176 } 177 :host([checked]) #knob { 178 transform: translateX(70%); 179 background-color: var(--toggle-switch-knob-color-active); 180 } 181 `]}render(){return r.qy` 182 <span id="wrapper" @click="${this.clickHandler}"> 183 ${this.hideSwitch?"":r.qy` 184 <span 185 ${(0,i.K)(this.inputRef)} 186 id="inner-wrap" 187 aria-label="${this.label||this.name}" 188 tabindex="0" 189 role="switch" 190 aria-checked="${this.checked}" 191 > 192 <span id="track"></span> 193 <span id="knob"></span> 194 </span> 195 `} 196 <label for="wrapper"> 197 <slot></slot> 198 </label> 199 </span> 200 `}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.focusInput),this.addEventListener("keydown",this.keyDownHandler),this.hasAttribute("checked")||(this.checked=!1)}disconnectedCallback(){this.removeEventListener("focus",this.focusInput),this.removeEventListener("keydown",this.keyDownHandler)}focusInput(){this.inputRef.value?.focus()}clickHandler(e){this.disabled||(e.preventDefault(),this.toggleChecked())}keyDownHandler(e){"Enter"!==e.code&&"Space"!==e.code||this.disabled||(e.preventDefault(),this.toggleChecked())}toggleChecked(){this.checked=!this.checked,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}};l([(0,a.MZ)({type:Boolean,reflect:!0})],c.prototype,"checked",2),l([(0,a.MZ)({type:String})],c.prototype,"label",2),l([(0,a.MZ)({type:String})],c.prototype,"name",2),l([(0,a.MZ)({type:Boolean})],c.prototype,"disabled",2),l([(0,a.MZ)({type:Boolean,attribute:"hide-switch"})],c.prototype,"hideSwitch",2),c=l([(0,a.EM)("toggle-switch")],c)},43555:(e,t,s)=>{var r=s(71413),a=s(52706),i=s(80027),o=s(32701),n=s(24634),l=s(82625),c=s(16221),d=s(52850),u=s(21379),p=s(10388),h=Object.defineProperty,m=Object.getOwnPropertyDescriptor,g=(e,t,s,r)=>{for(var a,i=r>1?void 0:r?m(t,s):t,o=e.length-1;o>=0;o--)(a=e[o])&&(i=(r?a(t,s,i):a(i))||i);return r&&i&&h(t,s,i),i};if(!i.Vu)throw new Error(d.vmQ);const b=i.Vu;let f=class extends r.WF{constructor(){super(...arguments),this.header=""}static get styles(){return[o.A,n.A,l.A,c.A,r.AH``]}render(){return r.qy` 201 <modal-content @close=${this.close}> 202 <div slot="header" class="h-display modal-header"> 203 <h3>${this.header}</h3> 204 </div> 205 206 <div slot="body" class="settings-min"> 207 <div class="modal-spinner-container"> 208 <div class="spinner" aria-label="Loading..."></div> 209 </div> 210 </div> 211 212 <div slot="footer" class="modal-footer"> 213 <div class="left-footer-box"> 214 <a 215 class="modal-link" 216 href="${b.helpURL}" 217 target="_blank" 218 aria-label="Open help page in a new tab" 219 >Need help?</a 220 > 221 </div> 222 <button class="btn modal-link back-link" @click=${this.close}>Cancel</button> 223 <button type="button" class="btn account-btn account-btn-dark submit-modal-btn" disabled> 224 Update 225 </button> 226 </div> 227 </modal-content> 228 `}close(){p.Ay.dispatch((0,u.A)(null))}};g([(0,a.MZ)({type:String})],f.prototype,"header",2),f=g([(0,a.EM)("modal-form-loading")],f)},70396:(e,t,s)=>{s.r(t),s.d(t,{default:()=>B});var r=s(71413),a=s(52706),i=s(5218),o=s(56599),n=s(38155),l=s(52850),c=s(80027),d=s(10388),u=s(21379),p=s(4983),h=s(36007),m=s(32701),g=s(82625),b=s(24634),f=s(16221),v=s(63822),w=s(70131),y=s(40540),$=(s(45502),s(28300),s(40342)),k=s(65676),F=Object.defineProperty,x=Object.getOwnPropertyDescriptor,D=(e,t,s,r)=>{for(var a,i=r>1?void 0:r?x(t,s):t,o=e.length-1;o>=0;o--)(a=e[o])&&(i=(r?a(t,s,i):a(i))||i);return r&&i&&F(t,s,i),i};let E=class extends((0,o.N)(d.M_)(y.Ay)){constructor(){var e;super(...arguments),this.formData=(e=d.M_.getState().your511,{email:{value:e.account?.email,isError:!1,isLoading:!1,errorMessage:"",validateField:k.nk},currentPassword:{...y.$A,validateField:w.jj},password:{...y.$A,validateField:w.yz},passwordConfirmation:{...y.$A,validateField:w.nY}}),this.submissionStatus=l.vky.UNSUBMITTED,this.showErrorMessage=!1,this.showSuccessMessage=!1,this.errorMessage="",this.currentPasswordInputRef=(0,n._)(),this.passwordInputRef=(0,n._)(),this.passwordConfirmationInputRef=(0,n._)()}static get styles(){const e=(0,r.iz)(l.EA.PHONE_XL);return[m.A,b.A,g.A,f.A,r.AH` 229 .save-btn { 230 margin-bottom: 1rem; 231 } 232 233 .error-message, 234 .success-message { 235 text-align: left; 236 } 237 238 @media all and (min-width: ${e}) { 239 .save-btn { 240 float: right; 241 } 242 243 .error-message, 244 .success-message { 245 text-align: right; 246 } 247 } 248 `]}render(){const e=this.submissionStatus===l.vky.PENDING;return r.qy` 249 <div> 250 <text-input 251 ${(0,n.K)(this.currentPasswordInputRef)} 252 inputType="password" 253 label="Current Password" 254 name="currentPassword" 255 @crc:textInput:input="${this.handleTextInput}" 256 @crc:textInput:blur="${this.handleTextBlur}" 257 value=${this.formData.currentPassword.value} 258 ?isError=${this.formData.currentPassword.isError} 259 errorText=${this.formData.currentPassword.errorMessage} 260 ></text-input> 261 <p style="font-size: 12px; margin-bottom: 10px;"> 262 ${(0,$._)((0,v.A)("your511.settings.passwordHint.text","Your password must be between 8 and 100 characters and include the following: an uppercase letter, a lowercase letter, a number, and a special character from the following: !@#$%^&*. You cannot use a password that has been used before."))} 263 </p> 264 <text-input 265 ${(0,n.K)(this.passwordInputRef)} 266 inputType="password" 267 label="New Password" 268 name="password" 269 @crc:textInput:input="${this.handleTextInput}" 270 @crc:textInput:blur="${this.handleTextBlur}" 271 value=${this.formData.password.value} 272 ?isError=${this.formData.password.isError} 273 errorText=${this.formData.password.errorMessage} 274 ></text-input> 275 <text-input 276 ${(0,n.K)(this.passwordConfirmationInputRef)} 277 inputType="password" 278 label="Confirm New Password" 279 name="passwordConfirmation" 280 @crc:textInput:input="${this.handleTextInput}" 281 @crc:textInput:blur="${this.handleTextBlur}" 282 value=${this.formData.passwordConfirmation.value} 283 ?isError=${this.formData.passwordConfirmation.isError} 284 errorText=${this.formData.passwordConfirmation.errorMessage} 285 ></text-input> 286 <div class="error-message" role="alert"> 287 <p>${this.showErrorMessage?this.errorMessage:""}</p> 288 </div> 289 <div class="success-message"> 290 <p>${this.showSuccessMessage?"Password updated":""}</p> 291 </div> 292 293 <button 294 class="btn account-btn account-btn-dark save-btn" 295 @click="${this.submitPasswordChange}" 296 ?disabled=${e} 297 > 298 ${e?r.qy`<div class="spinner-contain-btn"> 299 <div class="spinner spinner-light" aria-label="Loading..."></div> 300 </div>`:void 0} 301 Update Password 302 </button> 303 </div> 304 `}async submitPasswordChange(){await this.validateAllAndCheck()&&d.M_.dispatch((0,h.f3)({currentPassword:this.formData.currentPassword.value,
304newPassword:this.formData.password.value}))}connectedCallback(){super.connectedCallback(),this.formData.currentPassword.ref=this.currentPasswordInputRef,this.formData.password.ref=this.passwordInputRef,this.formData.passwordConfirmation.ref=this.passwordConfirmationInputRef}stateChanged(e){const{passwordUpdateFormStatus:t,error:s,errorMessage:r}=e.your511;this.submissionStatus=t,this.submissionStatus===l.vky.ERROR&&(this.showSuccessMessage=!1,this.showErrorMessage=!0,this.errorMessage=s===l.i65.PREVIOUS_PASSWORD?r??"This password has been used before. Please enter a new password.":"Incorrect password"),this.submissionStatus===l.vky.SUCCESS&&(this.showErrorMessage=!1,this.showSuccessMessage=!0,this.errorMessage="")}};D([(0,a.MZ)({type:Object})],E.prototype,"formData",2),D([(0,a.MZ)({type:String})],E.prototype,"submissionStatus",2),D([(0,a.MZ)({type:Boolean})],E.prototype,"showErrorMessage",2),D([(0,a.MZ)({type:Boolean})],E.prototype,"showSuccessMessage",2),D([(0,a.MZ)({type:String})],E.prototype,"errorMessage",2),E=D([(0,a.EM)("new-password-form")],E);var M=Object.defineProperty,A=Object.getOwnPropertyDescriptor,S=(e,t,s,r)=>{for(var a,i=r>1?void 0:r?A(t,s):t,o=e.length-1;o>=0;o--)(a=e[o])&&(i=(r?a(t,s,i):a(i))||i);return r&&i&&M(t,s,i),i};let I=class extends((0,o.N)(d.M_)(y.Ay)){constructor(){super(...arguments),this.formData={password:{...y.$A,validateField:w.jj}},this.submissionStatus=l.vky.UNSUBMITTED,this.showErrorMessage=!1,this.passwordInputRef=(0,n._)()}static get styles(){const e=(0,r.iz)(l.EA.PHONE_XL);return[m.A,b.A,g.A,f.A,r.AH` 305 .delete-btn { 306 margin-bottom: 1rem; 307 } 308 309 .error-message, 310 .success-message { 311 text-align: left; 312 } 313 314 @media all and (min-width: ${e}) { 315 .delete-btn { 316 float: right; 317 } 318 319 .error-message, 320 .success-message { 321 text-align: right; 322 } 323 } 324 `]}render(){const e=this.submissionStatus===l.vky.PENDING;return r.qy` 325 <div> 326 <text-input 327 ${(0,n.K)(this.passwordInputRef)} 328 inputType="password" 329 label="Password" 330 name="password" 331 @crc:textInput:input="${this.handleTextInput}" 332 @crc:textInput:blur="${this.handleTextBlur}" 333 value=${this.formData.password.value} 334 ?isError=${this.formData.password.isError} 335 errorText=${this.formData.password.errorMessage} 336 ></text-input> 337 <div class="error-message" role="alert"> 338 <p>${this.showErrorMessage?"Incorrect password":""}</p> 339 </div> 340 341 <button 342 class="btn account-btn account-btn-dark delete-btn" 343 @click="${this.clickDelete}" 344 ?disabled=${e} 345 > 346 ${e?r.qy`<div class="spinner-contain-btn"> 347 <div class="spinner spinner-light" aria-label="Loading..."></div> 348 </div>`:void 0} 349 Confirm Delete 350 </button> 351 </div> 352 `}connectedCallback(){super.connectedCallback(),this.formData.password.ref=this.passwordInputRef}async clickDelete(){await this.validateAllAndCheck()&&d.M_.dispatch((0,h.lw)(this.formData.password.value))}stateChanged(e){const{accountDeleteStatus:t}=e.your511;this.submissionStatus=t,this.showErrorMessage=this.submissionStatus===l.vky.ERROR}};S([(0,a.MZ)({type:Object})],I.prototype,"formData",2),S([(0,a.MZ)({type:String})],I.prototype,"submissionStatus",2),S([(0,a.MZ)({type:Boolean})],I.prototype,"showErrorMessage",2),I=S([(0,a.EM)("account-delete-form")],I);var T=Object.defineProperty,C=Object.getOwnPropertyDescriptor,N=(e,t,s,r)=>{for(var a,i=r>1?void 0:r?C(t,s):t,o=e.length-1;o>=0;o--)(a=e[o])&&(i=(r?a(t,s,i):a(i))||i);return r&&i&&T(t,s,i),i};let R=class extends((0,o.N)(d.M_)(y.Ay)){constructor(){super(...arguments),this.formData={email:{...y.$A,validateField:k.nk},password:{...y.$A,validateField:w.jj}},this.submissionStatus=l.vky.UNSUBMITTED,this.showErrorMessage=!1,this.showSuccessMessage=!1,this.emailInputRef=(0,n._)(),this.passwordInputRef=(0,n._)()}static get styles(){const e=(0,r.iz)(l.EA.PHONE_XL);return[m.A,b.A,g.A,f.A,r.AH` 353 .save-btn { 354 margin-bottom: 1rem; 355 } 356 357 .error-message, 358 .success-message { 359 text-align: left; 360 } 361 362 @media all and (min-width: ${e}) { 363 .save-btn { 364 float: right; 365 } 366 367 .error-message, 368 .success-message { 369 text-align: right; 370 } 371 } 372 `]}render(){const e=this.submissionStatus===l.vky.PENDING;return r.qy` 373 <div> 374 <text-input 375 ${(0,n.K)(this.emailInputRef)} 376 inputType="email" 377 name="email" 378 @crc:textInput:input="${this.handleTextInput}" 379 @crc:textInput:blur="${this.handleTextBlur}" 380 label="New email address" 381 ?isError=${this.formData.email.isError} 382 errorText=${this.formData.email.errorMessage} 383 value="${this.formData.email.value}" 384 ?disabled=${this.formData.email.isLoading} 385 ?isLoading=${this.formData.email.isLoading} 386 ></text-input> 387 <text-input 388 ${(0,n.K)(this.passwordInputRef)} 389 inputType="password" 390 label="Password" 391 name="password" 392 @crc:textInput:input="${this.handleTextInput}" 393 @crc:textInput:blur="${this.handleTextBlur}" 394 value=${this.formData.password.value} 395 ?isError=${this.formData.password.isError} 396 errorText=${this.formData.password.errorMessage} 397 ></text-input> 398 <div class="error-message" role="alert"> 399 <p>${this.showErrorMessage?"Incorrect password":""}</p> 400 </div> 401 <div class="success-message"> 402 <p> 403 ${this.showSuccessMessage?"Email update request sent. A confirmation email was sent to the new email address":""} 404 </p> 405 </div> 406 407 <button 408 class="btn account-btn account-btn-dark save-btn" 409 @click="${this.submitEmailChange}" 410 ?disabled=${e} 411 > 412 ${e?r.qy`<div class="spinner-contain-btn"> 413 <div class="spinner spinner-light" aria-label="Loading..."></div> 414 </div>`:void 0} 415 Update Email 416 </button> 417 </div> 418 `}async submitEmailChange(){await this.validateAllAndCheck()&&d.M_.dispatch((0,h.Wo)({newEmail:this.formData.email.value,password:this.formData.password.value}))}connectedCallback(){super.connectedCallback(),this.formData.email.ref=this.emailInputRef,this.formData.password.ref=this.passwordInputRef}stateChanged(e){const{emailUpdateFormStatus:t}=e.your511;this.submissionStatus=t,this.submissionStatus===l.vky.ERROR&&(this.showSuccessMessage=!1,this.showErrorMessage=!0),this.submissionStatus===l.vky.SUCCESS&&(this.showErrorMessage=!1,this.showSuccessMessage=!0)}};N([(0,a.MZ)({type:Object})],R.prototype,"formData",2),N([(0,a.MZ)({type:String})],R.prototype,"submissionStatus",2),N([(0,a.MZ)({type:Boolean})],R.prototype,"showErrorMessage",2),N([(0,a.MZ)({type:Boolean})],R.prototype,"showSuccessMessage",2),R=N([(0,a.EM)("email-change-form")],R),s(3314),s(97506),s(43555),s(51427);var P=Object.defineProperty,L=Object.getOwnPropertyDescriptor,_=(e,t,s,r)=>{for(var a,i=r>1?void 0:r?L(t,s):t,o=e.length-1;o>=0;o--)(a=e[o])&&(i=(r?a(t,s,i):a(i))||i);return r&&i&&P(t,s,i),i};if(!c.Vu)throw new Error(l.vmQ);const O=c.Vu;function Z(e,t,s){return{firstName:{...y.$A,value:e,validateField:w.yS},lastName:{...y.$A,value:t,validateField:w.yS},isTrucker:{...y.mO,value:s}}}let B=class extends((0,o.N)(d.M_)(y.Ay)){constructor(){super(...arguments),this.formData=Z("","",!1),this.submissionStatus=l.vky.UNSUBMITTED,this.showPasswordForm=!1,this.showEmailForm=!1,this.showAccountDeleteForm=!1,this.isLoading=!0,this.showExpiredSession=!1,this.firstNameInputRef=(0,n._)(),this.lastNameInputRef=(0,n._)(),this.isTruckerInputRef=(0,n._)()}static get styles(){const e=(0,r.iz)(l.EA.PHONE_XL);return[m.A,b.A,g.A,f.A,r.AH` 419 .settins-min { 420 min-height: 36rem; 421 } 422 423 .delete-box { 424 margin-top: 1rem; 425 } 426 427 .delete-btn, 428 .change-password-btn { 429 margin: 1rem; 430 color: rgb(var(--darker)); 431 border: 1px solid rgb(var(--dell-gray)); 432 cursor: pointer; 433 } 434 435 .change-email-btn { 436 color: rgb(var(--darker)); 437 border: 1px solid rgb(var(--dell-gray)); 438 cursor: pointer; 439 } 440 441 .error-message, 442 .success-message { 443 margin-top: var(--gap); 444 } 445 446 .account-gdpr { 447 margin-top: 1rem; 448 } 449 450 @media all and (min-width: ${e}) { 451 .change-email-btn { 452 float: right; 453 } 454 } 455 456 @media all and (max-width: ${(0,r.iz)(l.EA.TABLET)}) {
457 .modal-footer { 458 padding-bottom: 75px; 459 } 460 } 461 `]}render(){const e=this.submissionStatus===l.vky.PENDING,t=this.submissionStatus===l.vky.ERROR,s=this.submissionStatus===l.vky.SUCCESS;return this.isLoading?this.loadingHTML():r.qy` 462 <modal-content @close=${this.close}> 463 <div slot="header" class="h-display modal-header"> 464 ${this.showExpiredSession?this.tokenExpiredHTML():void 0} 465 <h3>Settings</h3> 466 </div> 467 <div slot="body" class="settings-min"> 468 <settings-tabs account-modal-view=${l.Bjw.SETTINGS}></settings-tabs> 469 470 <div class="wide-form-group"> 471 <div class="wide-form-group-left"> 472 <div class="wide-form-group-label"> 473 <p>Name</p> 474 </div> 475 </div> 476 <div class="wide-form-group-fields"> 477 <div class="wide-form-field-block"> 478 <text-input 479 ${(0,n.K)(this.firstNameInputRef)} 480 inputType="text" 481 name="firstName" 482 @crc:textInput:input="${this.handleTextInput}" 483 @crc:textInput:blur="${this.handleTextBlur}" 484 label="First Name" 485 ?isError=${this.formData.firstName.isError} 486 errorText=${this.formData.firstName.errorMessage} 487 value=${this.formData.firstName.value} 488 ?disabled=${this.formData.firstName.isLoading} 489 ?isLoading=${this.formData.firstName.isLoading} 490 ></text-input> 491 <text-input 492 ${(0,n.K)(this.lastNameInputRef)} 493 inputType="text" 494 name="lastName" 495 @crc:textInput:input="${this.handleTextInput}" 496 @crc:textInput:blur="${this.handleTextBlur}" 497 label=${(0,v.A)("form.input.lastName","Last name")} 498 ?isError=${this.formData.lastName.isError} 499 errorText=${this.formData.lastName.errorMessage} 500 value=${this.formData.lastName.value} 501 ?disabled=${this.formData.lastName.isLoading} 502 ?isLoading=${this.formData.lastName.isLoading} 503 ></text-input> 504 </div> 505 </div> 506 </div> 507 508 ${!1===c.Vu?.truckerModeAvailable?r.qy``:r.qy` 509 <div class="wide-form-group"> 510 <div class="wide-form-group-left"> 511 <div class="wide-form-group-label"> 512 <p>${(0,v.A)("your511.settings.commercialdriver.title","Commercial Driver")}</p> 513 </div> 514 <p class="wide-form-group-subtext"> 515 ${(0,i._)((0,v.A)("your511.settings.commercialdriver.text","I am interested in viewing trucking specific events and information"))} 516 </p> 517 </div> 518 519 <div class="wide-form-group-fields"> 520 <toggle-switch 521 ${(0,n.K)(this.isTruckerInputRef)} 522 name="isTrucker" 523 ?checked=${this.formData.isTrucker.value} 524 @change=${this.handleToggleChange} 525 ></toggle-switch> 526 </div> 527 </div> 528 `} 529 530 <div class="wide-form-group"> 531 <div class="wide-form-group-left"> 532 <div class="wide-form-group-label"> 533 <p>Email</p> 534 </div> 535 </div> 536 <div class="wide-form-group-fields"> 537 <div class="wide-form-field-block"> 538 ${this.showEmailForm?r.qy` <email-change-form></email-change-form> `:r.qy`<text-input 539 inputType="email" 540 label="Email Address" 541 value="${this.account?.email||""}" 542 disabled 543 ></text-input 544 ><button class="account-btn change-email-btn" @click=${this.startEmailChange}> 545 Change Email 546 </button>`} 547 </div> 548 </div> 549 </div> 550 551 <div class="wide-form-group wide-form-group-last"> 552 <div class="wide-form-group-left"> 553 <div class="wide-form-group-label"> 554 <p>Password</p> 555 </div> 556 </div> 557 558 ${this.showPasswordForm?r.qy`<div class="wide-form-group-fields"> 559 <div class="wide-form-field-block"> 560 <new-password-form></new-password-form> 561 </div> 562 </div>`:r.qy`<button 563 class="account-btn change-password-btn" 564 @click=${this.startPasswordChange} 565 > 566 Change Password 567 </button>`} 568 </div> 569 570 <div class="wide-form-group wide-form-group-last delete-box"> 571 <div class="wide-form-group-left"> 572 <p class="wide-form-group-label">Delete Account</p> 573 <p class="wide-form-group-subtext"> 574 ${(0,i._)((0,v.A)("your511.settings.deleteaccount.text","I want to permanently delete my account"))} 575 </p> 576 </div> 577 ${this.showAccountDeleteForm?r.qy`<div class="wide-form-group-fields"> 578 <div class="wide-form-field-block"> 579 <account-delete-form></account-delete-form> 580 </div> 581 </div>`:r.qy` <button 582 type="button" 583 class="account-btn delete-btn" 584 @click=${this.startAccountDelete} 585 > 586 Delete 587 </button>`} 588 </div> 589 590 ${c.Wx["your511.alerts.gdpr"]?r.qy`<p class="account-gdpr"> 591 ${(0,i._)(c.Wx["your511.alerts.gdpr"])} 592 </p>`:r.qy``} 593 594 <div class="error-message" role="alert"> 595 <p> 596 ${t?"There was an error updating your settings. Please try again":""} 597 </p> 598 </div> 599 <div class="success-message"> 600 ${s?r.qy` <p>Update successful.</p> 601 <div class="check-container"><success-check></success-check></div>`:r.qy``} 602 </div>
603 </div> 604 <div slot="footer" class="modal-footer"> 605 <div class="left-footer-box"> 606 <a 607 class="modal-link help-link" 608 href=${O.helpURL} 609 target="_blank" 610 aria-label="Open help page in a new tab" 611 >Need help?</a 612 > 613 </div> 614 <button class="btn modal-link back-link" @click="${this.close}">Cancel</button> 615 <button 616 class="btn account-btn account-btn-dark submit-modal-btn" 617 @click="${this.submitSettings}" 618 ?disabled=${e} 619 > 620 ${e?r.qy`<div class="spinner-contain-btn"> 621 <div class="spinner spinner-light" aria-label="Loading..."></div> 622 </div>`:void 0} 623 Update 624 </button> 625 </div> 626 </modal-content> 627 `}loadingHTML(){return r.qy` <modal-form-loading header="Settings"></modal-form-loading> `}tokenExpiredHTML(){return r.qy` 628 <div class="modal-error"> 629 ${(0,i._)((0,v.A)("session.expired",'Session expired. <a href="#login">Please login again</a>.'))} 630 </div> 631 `}willUpdate(e){e.has("account")&&!e.get("account")&&this.account&&(this.formData=Z(this.account.firstName,this.account.lastName,this.account.userType===p.ut.Trucker),this.formData.firstName.ref=this.firstNameInputRef,this.formData.lastName.ref=this.lastNameInputRef,this.formData.isTrucker.ref=this.isTruckerInputRef)}startPasswordChange(){this.showPasswordForm=!0}startEmailChange(){this.showEmailForm=!0}startAccountDelete(){this.showAccountDeleteForm=!0}close(){d.M_.dispatch((0,u.z)(null))}async submitSettings(){await this.validateAllAndCheck()&&d.M_.dispatch((0,h.$q)({firstName:this.formData.firstName.value,lastName:this.formData.lastName.value,userType:this.formData.isTrucker.value?p.ut.Trucker:p.ut.Standard}))}connectedCallback(){super.connectedCallback(),this.formData.firstName.ref=this.firstNameInputRef,this.formData.lastName.ref=this.lastNameInputRef,this.formData.isTrucker.ref=this.isTruckerInputRef}disconnectedCallback(){d.M_.dispatch({type:l.nt6,status:l.vky.UNSUBMITTED}),d.M_.dispatch({type:l.M3h,status:l.vky.UNSUBMITTED})}stateChanged(e){const{status:t,account:s}=e.your511;this.account=s,this.submissionStatus=t,this.isLoading=!s,this.showExpiredSession=e.your511.showExpiredSession}};_([(0,a.MZ)({type:Object})],B.prototype,"formData",2),_([(0,a.MZ)({type:String})],B.prototype,"submissionStatus",2),_([(0,a.MZ)({type:Object})],B.prototype,"account",2),_([(0,a.MZ)({type:Boolean})],B.prototype,"showPasswordForm",2),_([(0,a.MZ)({type:Boolean})],B.prototype,"showEmailForm",2),_([(0,a.MZ)({type:Boolean})],B.prototype,"showAccountDeleteForm",2),_([(0,a.MZ)({type:Boolean})],B.prototype,"isLoading",2),_([(0,a.MZ)({type:Boolean})],B.prototype,"showExpiredSession",2),B=_([(0,a.EM)("settings-form")],B)}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.