Update your personal and contact information
// this page is a design reference, not finished code. pink notes mark each part: ALREADY EXISTS (use the library one), DEMO ONLY (do not copy), NEW (build it from this page), REBUILD (behaviour demoed here, re-create it your way). the notes are pointers to save digging, not build instructions. where they are silent, it's your call. full detail: search "DEV" in the page source
| Name: | John Doe |
| Customer Care number: | 98765432101 |
The information we have on file is shown below. Select Edit on a section to make changes.
Your information is being updated
The information below does not reflect the changes you just made. Please check back in a few minutes.
// NEW: this card (a summary that flips into an edit form) is not in the library yet. the box look can be made with plain bootstrap classes: border rounded bg-white p-4. the label and value rows: row + col-sm-4 fw-bold + col
Personal information
EditLegal nameJohn Jay Doe
Preferred nameJhonny Do
Date of birthDecember 31, 1987
Sex at birthNot provided
Personal Health Number**** *** 210
GenderNot provided
PronounsNot provided
Indigenous identityNot provided
// ALREADY EXISTS: the locked name fields open the standard library pop-up. the click-catcher script here is DEMO ONLY, do not copy it
// REBUILD: this checkbox shows or hides the preferred name fields. the script here just demos it, do not copy it
Enter a preferred first name, or uncheck "Use a preferred name".
// ALREADY EXISTS: date of birth is locked (pension cases). clicking it opens the same standard pop-up as the name fields
// this field + its red error text = the standard form pattern, ALREADY EXISTS. the rules (10 digits, must start with 9) are input validation to rebuild. NEW: only the show/hide eye. it can be composed with bootstrap input-group + a button, or use this page's css for the in-field look. dev's call
Cancel
Save or cancel these changes first.
// NEW: same card pattern as the one above. REBUILD: the "save or cancel" warning and the declaration checkbox are behaviour, demoed by this page's script, not something to copy
Contact information
EditHome phone604.456.6654 (Primary)
Mobile phone604.456.6654
Work phoneNot provided
Email addressjoe@email.com
Mailing address1234 Main St, Surrey, BC V5J 4B7
Temporary mailing addressNot set
Residential addressSame as mailing
// DEMO ONLY: the script that formats phone numbers as you type. do not copy it, rebuild the same rules as proper input validation
// REBUILD: exactly one number is marked primary (any type, including work). picking one unpicks the others; the primary number can't be blank
// the "+" prefix stays fixed and is part of the field. the country code accepts numbers only and brings up the number pad on mobile
Enter your home phone number.
Enter your mobile phone number.
Enter your work phone number.
Select one phone number as your primary.
// PLACEHOLDER: this link goes to the separate login-email page in the real build. it goes nowhere here
This email is used for communications. To change the email you use to log in, go to Change my login email.
Mailing address
// DEMO ONLY: the address suggestions are fake sample data. the real build uses the canada post address api. applies to all three address sections
If your address contains "attention" or "care of" information, please put "ATTN:" or "C/O" in this field, followed by that information.
// REBUILD: the checkbox reveals this section. a temporary mailing address redirects mail for the chosen dates only, then it switches back on its own
Going away? Update your mailing address temporarily.
// DEMO ONLY: this calendar widget. do not build or copy it. use the date picker that already exists in the library (ngx-bootstrap daterangepicker)
Select a start and end date
Choose a start and end date.
Enter the temporary address.
// ALREADY EXISTS: the green-topped box below is the standard library callout (wsbc-leaf-H2). use as is
Where your mail is going
// DEMO ONLY: this selector is not part of the screen. it models the three states the message moves through so each can be previewed. in production the state is chosen automatically from the saved dates against today's date, and the user never sees a control
preview state:
// REBUILD: the tick hides these fields when residential matches mailing (the exact rules are in a DEV note in the page source). important: a temporary mailing address must never change the residential address
Residential address
Cancel
Save or cancel these changes first.
// ALREADY EXISTS: this survey band is the library survey component (wsbc-survey-band; wsbc-survey-bar is the fixed-to-bottom version). markup copied from the claim screen demo. the copy and link are placeholders. "no thanks" hides it, and the real component remembers that choice
Help us improve your experience
We are making ongoing improvements and you may notice changes over time. Your feedback helps guide these updates.