account-access

Account Access

Sign-in and security settings card: a pending-change notice, email and password with change actions, a two-factor switch, and account deletion.

States: Default

Parts

Part	File	Does
AccountAccess	AccountAccess.vue	Lets the shopper change email and password, switch two-factor on and delete the account.

Styling

Part	Recipe
AccountAccess	account-access-delete-title

Install

Writes 2 files into components/sections/account-access/. For agents, npx @frontic/ui docs account-access prints this reference as markdown; the MCP server serves the same.

Installs with it: alert; button; card; field; input; item; switch
npm packages: @lucide/vue

Built from

Alert Button Card Field Input Item Switch

API reference

AccountAccess AccountAccess.vue

Lets the shopper change email and password, switch two-factor on and delete the account.

Prop	Type	Default
title	string	'Sign-in & security'

description	string	'How you get into your account.'

noticeTitle	string	—

noticeDescription	string	—

emailLabel	string	'Email'

passwordLabel	string	'Password'

passwordHint	string	—

changeLabel	string	'Change'

twoFactorLabel	string	'Two-factor authentication'

twoFactorHint	string	—

deleteTitle	string	'Delete account'

deleteDescription	string	'Erases orders and saved addresses.'

deleteLabel	string	'Delete'

surface	'raised' \| 'bare'	'raised'

class	ClassValue	—

email	string	''

password	string	''

twoFactor	boolean	false

Event	Payload
delete	—

update:email	value: string

update:password	value: string

update:twoFactor	value: boolean

changeEmail	email: string

changePassword	password: string

Data attribute	Values
data-surface	'raised' \| 'bare'

Recipe account-access-delete-title	Sets
base: account-access-delete-title	1 property

Example