Profile and contact details

Says which auth the User parts below read, and whether they may do without it. The parts need no root: left out, they read the nearest auth root's config, or "default", and render nothing without auth. `<User.Root enabled="optional">` is for the one who wants that said in the code.

Source: @slices.sh/auth/src/headless/user/root.tsx

SignedIn and SignedOut open once the session has answered, so nobody flashes signed out. Loading covers the first load only. SessionExpired opens when the session on screen has run out while its name and picture are still shown. ReadError is <p role="alert"> with { message } when the session could not be read, and Retry reads it again.

Source: @slices.sh/auth/src/headless/user/signed-in.tsx

The session on screen has run out. Shown while the avatar and the name are still there, because they are: the read that loaded them succeeded, and what changed is the clock. Everything offered from here is going to come back `SIGNED_OUT`, so it is worth saying so before somebody tries.

Source: @slices.sh/auth/src/headless/user/session-expired.tsx

SignedIn and SignedOut open once the session has answered, so nobody flashes signed out. Loading covers the first load only. SessionExpired opens when the session on screen has run out while its name and picture are still shown. ReadError is <p role="alert"> with { message } when the session could not be read, and Retry reads it again.

Source: @slices.sh/auth/src/headless/user/loading.tsx

SignedIn and SignedOut open once the session has answered, so nobody flashes signed out. Loading covers the first load only. SessionExpired opens when the session on screen has run out while its name and picture are still shown. ReadError is <p role="alert"> with { message } when the session could not be read, and Retry reads it again.

Source: @slices.sh/auth/src/headless/user/read-error.tsx

SignedIn and SignedOut open once the session has answered, so nobody flashes signed out. Loading covers the first load only. SessionExpired opens when the session on screen has run out while its name and picture are still shown. ReadError is <p role="alert"> with { message } when the session could not be read, and Retry reads it again.

Source: @slices.sh/auth/src/headless/user/retry.tsx

Image is <img alt=""> with src locked to the stored image, else Gravatar, and nothing when neither exists or it fails to load. Initials are two letters from the name, else the address. Name and Phone render nothing when absent. Email is the address.

Source: @slices.sh/auth/src/headless/user/image.tsx

Image is <img alt=""> with src locked to the stored image, else Gravatar, and nothing when neither exists or it fails to load. Initials are two letters from the name, else the address. Name and Phone render nothing when absent. Email is the address.

Source: @slices.sh/auth/src/headless/user/initials.tsx

Image is <img alt=""> with src locked to the stored image, else Gravatar, and nothing when neither exists or it fails to load. Initials are two letters from the name, else the address. Name and Phone render nothing when absent. Email is the address.

Source: @slices.sh/auth/src/headless/user/name.tsx

Image is <img alt=""> with src locked to the stored image, else Gravatar, and nothing when neither exists or it fails to load. Initials are two letters from the name, else the address. Name and Phone render nothing when absent. Email is the address.

Source: @slices.sh/auth/src/headless/user/email.tsx

Image is <img alt=""> with src locked to the stored image, else Gravatar, and nothing when neither exists or it fails to load. Initials are two letters from the name, else the address. Name and Phone render nothing when absent. Email is the address.

Source: @slices.sh/auth/src/headless/user/user-phone.tsx

Form holds the fields, prevents the page submit and gives { pending }; nothing when the backend changes neither field. Label takes field="name" | "image" and renders nothing when its field is hidden. Name starts at the stored name, with { invalid }.

Capability: profile: name

Source: @slices.sh/auth/src/headless/user/profile/form.tsx

Form holds the fields, prevents the page submit and gives { pending }; nothing when the backend changes neither field. Label takes field="name" | "image" and renders nothing when its field is hidden. Name starts at the stored name, with { invalid }.

Capability: profile: name

Source: @slices.sh/auth/src/headless/user/profile/label.tsx

Form holds the fields, prevents the page submit and gives { pending }; nothing when the backend changes neither field. Label takes field="name" | "image" and renders nothing when its field is hidden. Name starts at the stored name, with { invalid }.

Capability: profile: name

Source: @slices.sh/auth/src/headless/user/profile/name.tsx

`save` stages a legacy upload; `change` persists a cropped portrait independently of other draft fields.

Capability: profile: image

Source: @slices.sh/auth/src/headless/user/profile/image-upload.tsx

ImageUpload is auth's half of an avatar upload: its function child gets { save }, which keeps the permalink an Avatar.Root or Upload.Root reports. Auth stores no bytes. Picture shows what a save would leave: the edit, else the stored picture, else Gravatar. RemoveImage renders nothing while there is no picture.

Capability: profile: image

Source: @slices.sh/auth/src/headless/user/profile/picture.tsx

ImageUpload is auth's half of an avatar upload: its function child gets { save }, which keeps the permalink an Avatar.Root or Upload.Root reports. Auth stores no bytes. Picture shows what a save would leave: the edit, else the stored picture, else Gravatar. RemoveImage renders nothing while there is no picture.

Capability: profile: image

Source: @slices.sh/auth/src/headless/user/profile/remove-image.tsx

Save is the submit with { pending }, disabled while nothing changed. Saved opens after a save until a field changes. Error is <div role="alert"> with { code, message }.

Source: @slices.sh/auth/src/headless/user/profile/save.tsx

Save is the submit with { pending }, disabled while nothing changed. Saved opens after a save until a field changes. Error is <div role="alert"> with { code, message }.

Source: @slices.sh/auth/src/headless/user/profile/saved.tsx

Save is the submit with { pending }, disabled while nothing changed. Saved opens after a save until a field changes. Error is <div role="alert"> with { code, message }.

Source: @slices.sh/auth/src/headless/user/profile/error.tsx

The section, only where the backend can change an address. Every `ChangeEmail` part already renders nothing without the capability, but the heading and the hint around them are pattern code, not parts — so on a backend that cannot do it an installed `email=1` drew "Email address" over an empty space. A gate around the whole section is what `Passkeys.Root` does for the same reason. It also holds whether the person has asked to change their address: until they do, there is a sentence and nothing to fill in, which is what `Edit` and `Editing` divide.

Source: @slices.sh/auth/src/headless/user/change-email/root.tsx

What opens the form: the address itself, as something to press. The address was drawn as prose with a form already under it, so the one thing anybody tries — pressing their own address — did nothing at all. It is a button now, and the form it opens stands in its place.

Source: @slices.sh/auth/src/headless/user/change-email/edit.tsx

Edit is the address as a button: pressing it opens the form and it stands aside. Editing gates the form once Edit was pressed.

Source: @slices.sh/auth/src/headless/user/change-email/editing.tsx

Form holds the address and the code with { pending }. Label locks htmlFor. Input is <input type="email"> with { invalid } once the backend refuses it. Submit is disabled until the address is valid and differs from the current one.

Source: @slices.sh/auth/src/headless/user/change-email/form.tsx

Form holds the address and the code with { pending }. Label locks htmlFor. Input is <input type="email"> with { invalid } once the backend refuses it. Submit is disabled until the address is valid and differs from the current one.

Source: @slices.sh/auth/src/headless/user/change-email/label.tsx

Form holds the address and the code with { pending }. Label locks htmlFor. Input is <input type="email"> with { invalid } once the backend refuses it. Submit is disabled until the address is valid and differs from the current one.

Source: @slices.sh/auth/src/headless/user/change-email/input.tsx

Form holds the address and the code with { pending }. Label locks htmlFor. Input is <input type="email"> with { invalid } once the backend refuses it. Submit is disabled until the address is valid and differs from the current one.

Source: @slices.sh/auth/src/headless/user/change-email/submit.tsx

While the new address has a code outstanding. The address is not theirs until they prove it, and the only thing that can prove it is something delivered to it — so the code goes to the new address, and this is the step where it is entered.

Source: @slices.sh/auth/src/headless/user/change-email/pending.tsx

The address the code went to, which is the new one rather than the one on the account.

Source: @slices.sh/auth/src/headless/user/change-email/destination.tsx

Pending opens with { email } while a code is outstanding. Destination is the new address. Code is a numeric one-time-code input that checks itself on the last digit, read-only while it does. Verify does the same for a pasted code.

Source: @slices.sh/auth/src/headless/user/change-email/code.tsx

Spending the code, for anyone who does not reach its last digit by typing. The field checks itself on that digit, so this is the same deed rather than another one — for a pasted code, for a code whose last digit was corrected, and for anybody who wants a button to press.

Source: @slices.sh/auth/src/headless/user/change-email/verify.tsx

Changed opens with { email } once the address is the account's. Error is <div role="alert"> with { code, message } for whichever failed last.

Source: @slices.sh/auth/src/headless/user/change-email/changed.tsx

Changed opens with { email } once the address is the account's. Error is <div role="alert"> with { code, message } for whichever failed last.

Source: @slices.sh/auth/src/headless/user/change-email/error.tsx

The section, only where the backend can text a code to a new number. The heading around the parts is pattern code, not a part, so on a backend that cannot do it an installed `phone=1` would draw a title over an empty space: a gate around the whole section is what `ChangeEmail.Root` does for the same reason. It also holds whether the person has asked to change their number, which `Edit` and `Editing` divide.

Source: @slices.sh/auth/src/headless/user/change-phone/root.tsx

What opens the form: the number itself, as something to press. The children get the number on the account, or `null` for an account that has none yet, which wants another sentence than "change".

Source: @slices.sh/auth/src/headless/user/change-phone/edit.tsx

Edit is the number as a button, with { phoneNumber }, which is null for an account without one, so it can say add. Editing gates the form.

Source: @slices.sh/auth/src/headless/user/change-phone/editing.tsx

Form holds the number and the code. PhoneRoot is Phone.Root over the form's field, taking defaultCountry, allowedCountries and locale; Phone.Country parts and Phone.Blocked go inside it. Label locks htmlFor to Input, which is Phone.Input with { invalid, status }. Submit is disabled until the number is valid, allowed and new.

Source: @slices.sh/auth/src/headless/user/change-phone/form.tsx

The new number and its country list, kept in the form's field as an E.164 number or as nothing at all. Renders nothing itself. The form's field keeps the id, so `ChangePhone.Label` finds the number's input without knowing a country list is there.

Source: @slices.sh/auth/src/headless/user/change-phone/phone-root.tsx

Form holds the number and the code. PhoneRoot is Phone.Root over the form's field, taking defaultCountry, allowedCountries and locale; Phone.Country parts and Phone.Blocked go inside it. Label locks htmlFor to Input, which is Phone.Input with { invalid, status }. Submit is disabled until the number is valid, allowed and new.

Source: @slices.sh/auth/src/headless/user/change-phone/label.tsx

The new number, typed in its country's own format. It sits inside `ChangePhone.PhoneRoot`, which is where the country list is too, and says "invalid" for a refusal the number's own reading cannot know about: a number that is taken, or a country nobody may text.

Source: @slices.sh/auth/src/headless/user/change-phone/input.tsx

Form holds the number and the code. PhoneRoot is Phone.Root over the form's field, taking defaultCountry, allowedCountries and locale; Phone.Country parts and Phone.Blocked go inside it. Label locks htmlFor to Input, which is Phone.Input with { invalid, status }. Submit is disabled until the number is valid, allowed and new.

Source: @slices.sh/auth/src/headless/user/change-phone/submit.tsx

While the new number has a code outstanding. The number is not theirs until they prove it, and the only thing that can prove it is something delivered to it: the code goes to the new number, and this is the step where it is entered.

Source: @slices.sh/auth/src/headless/user/change-phone/pending.tsx

The number the code went to, which is the new one rather than the one on the account.

Source: @slices.sh/auth/src/headless/user/change-phone/destination.tsx

Pending opens with { phoneNumber } while a code is outstanding. Destination, Code and Verify behave as in ChangeEmail.

Source: @slices.sh/auth/src/headless/user/change-phone/code.tsx

Spending the code, for anyone who does not reach its last digit by typing: a pasted code, a code whose last digit was corrected, and anybody who wants a button to press.

Source: @slices.sh/auth/src/headless/user/change-phone/verify.tsx

Changed opens with { phoneNumber }. Error reports whichever failed last.

Source: @slices.sh/auth/src/headless/user/change-phone/changed.tsx

Changed opens with { phoneNumber }. Error reports whichever failed last.

Source: @slices.sh/auth/src/headless/user/change-phone/error.tsx

Frame maps onto render={<Tabs />} and sets data-view="list" | "section" for a narrow panel. Back returns from the open section to the list; draw it only where the panel is too narrow for both.

Source: @slices.sh/auth/src/headless/settings/frame.tsx

Back to the list of sections, on a panel too narrow to show it beside the open one. It is drawn at every width: whether there is room for both is the layout's to say, from the panel's own width, so the button's styles hide it where the list is already in view.

Source: @slices.sh/auth/src/headless/settings/back.tsx

Narrow renders on a phone-shaped window, Wide otherwise. Exactly one renders.

Source: @slices.sh/auth/src/headless/layout/narrow.tsx

Narrow renders on a phone-shaped window, Wide otherwise. Exactly one renders.

Source: @slices.sh/auth/src/headless/layout/wide.tsx