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
// NEW: on a phone these fields bring up the dialling keypad, not the letter keyboard
// NEW: when the worker leaves a number they have entered or changed, it has to be 10 digits. if it is not, the field goes red and says so. an empty field says nothing here
// NEW: each number offers the browser's saved home, mobile or work number separately, so the same one does not land in all three
// 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.
// NEW: when the worker leaves this field we check the address looks like an email address. if it does not, this field goes red and says so
// NEW: the confirm field below only appears once this address is edited AND looks valid. we do not ask anyone to confirm an address we have just told them is wrong
// NEW: once the confirm field is showing it stays put while they edit. it only goes away if the address is put back to what it was, or cleared
// NEW: both email fields accept pasting and autofill. do not block pasting on either one
Please enter your email address in the format name@email.com
Enter the same address again so we can check it was typed correctly.
// NEW: the two addresses are checked against each other when the worker leaves this field, not only when they save
// NEW: if they do not match, BOTH fields go red and the message says they do not match. we do not know which one holds the typo, so we never point at one
The provided email addresses do not match. Please check both fields.
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
// NEW: address fields offer the browser's saved addresses. each of the three address blocks is kept separate so one does not fill the others
// CHECK IN TESTING: picking an address from the lookup does not update the country field. worth confirming with the real canada post api before build
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.