Update your personal and contact information
// this page is a design reference, not finished code. ALREADY EXISTS = use the library one. DEMO ONLY = do not copy. NEW = build it from this page. REBUILD = re-create the behaviour your way. the rules are in the handoff logic doc; build detail: search "DEV" in this page's 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: a summary card that flips into an edit form. not in the library yet. build hints in the DEV note
Personal information
EditLegal nameJohn Jay Doe
Preferred nameJhonny Do
Date of birthDecember 31, 1987
Sex at birthNot provided
Personal Health Numberending in 2 1 0
GenderNot provided
PronounsNot provided
Indigenous identityNot provided
// ALREADY EXISTS: the locked name fields open the standard pop-up. DEMO ONLY: the click-catcher script
// REBUILD: this checkbox shows or hides the preferred name fields
Enter a preferred first name, or uncheck "Use a preferred name"
// ALREADY EXISTS: date of birth is locked, now for everyone. same pop-up as the name fields
// DEMO ONLY: preview both PHN states. in production this comes from the worker's record
ending in 2 1 0
Update my Personal Health Number
// ALREADY EXISTS: the locked field, same as legal name and date of birth. NEW: the eye beside it shows the full number
// KNOWN ISSUE: the greyed-out field can't be tabbed to and is hard to read. the eye can be tabbed to
// ALREADY EXISTS: the standard field and error pattern, used when no PHN is on file. NEW: only the show/hide eye
Cancel
Save or cancel these changes first.
// NEW: same card pattern as above. REBUILD: the save-or-cancel warning and the declaration tick
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 numbers as you type. rebuild it as input validation
// NEW: phones bring up the dialling keypad, not the letter keyboard
// NEW: 10 digits, checked when they leave the field. an empty field says nothing
// NEW: each field offers the browser's saved home, mobile or work number separately
// REBUILD: exactly one number is primary. picking one unpicks the others
// NEW: "+1" is a placeholder, not a value. numbers only, up to 5 digits
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 nowhere here. the real build has a separate login-email page
// NEW: with unsaved changes, this link opens the "You have unsaved changes" pop-up first
This email is used for communications. To change the email you use to log in, go to Change my login email.
// NEW: the format check runs when they leave the field
// NEW: the confirm field appears once this address is edited and looks valid
// NEW: once showing, it stays until the address is put back or cleared
// NEW: both email fields accept pasting and autofill. never block pasting
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 they leave this field
// NEW: a mismatch turns BOTH fields red. we never point at one as the typo
The provided email addresses do not match. Please check both fields.
Mailing address
// DEMO ONLY: fake address suggestions. the real build uses the canada post api
// NEW: address fields offer saved addresses. the three blocks stay separate
// CHECK IN TESTING: picking a suggestion does not fill the country field
If your address contains "attention" or "care of" information, please put "ATTN:" or "C/O" in this field, followed by that information.
// REBUILD: the tick reveals this section. mail is redirected for the chosen dates, then switches back
Going away? Update your mailing address temporarily.
// DEMO ONLY: this calendar. use the library date picker
Select a start and end date
Choose a start and end date
Enter the temporary address
// ALREADY EXISTS: the green-topped box is the standard library callout
Where your mail is going
// REBUILD: the tick hides these fields when residential matches mailing. a temporary address never changes residential
Residential address
Cancel
Save or cancel these changes first.
// ALREADY EXISTS: the library survey band. the copy and link are placeholders
Help us improve your experience
We are making ongoing improvements and you may notice changes over time. Your feedback helps guide these updates.