cc-email-list: init component

[pdesoyres-cc]

Context

A component that displays the email addresses associated with a user account.

The component shows two things:

• the primary email address
• the secondary email addresses

The primary email address

• The component displays a description of what this email address is used for.
• The component displays whether the primary email address has been verified. If not, the user has the ability to resend the confirmation email that will let him finish the verification process.

The secondary email addresses

• The component displays a description of what these email addresses are used for.
• The user can add a new secondary email address.
• A secondary email address can be removed.
• A secondary email address can be marked as primary.

To be discussed

"email" vs "email address"

In this component, we talk about two different things but the wording can be confusing. I'm talking about the email address versus the email sent for verification. We need to think about a good wording that will tackle ambiguity between these two notions. Both in the localized texts and in the properties and event namings.

Should we rename the whole component into cc-email-address?

verification email

How do we call the email that will let the user finalize the process?

• verification email
• confirmation email
• validation email

How do we call the action for finalizing the process?

• verify email address
• validate email address

As for now,

• API uses "confirmation_email".
• The email uses
  • title: "Please validate you address… " (notice the typo 🙄)
  • body: "verify your email address" and "verify your address".
• The console uses "confirmation email", "validate this email", "resend account confirmation email".

Notification messages

When the user clicks on the "resend confirmation email" button, we should notify him that the email has been sent and he needs to check his mailbox. Who is responsible for displaying this notification?

Inputs

Attributes/properties

Property	Type	Default value	Mandatory	Description
model	EmailModel	null	false	Model containing primary email address, secondary email addresses and state
_addAddressInputValue	string	''	false	Email address form input value
_addAddressInputError	'empty'|'invalid'|'already-defined'|'used'|null	null	false	Email address form input error key

Outputs

Event	Data type	Description
send-confirmation-email	String	Triggered when the user asks for sending a new confirmation email
add	String	Triggered when the user adds a new secondary email address
delete	String	Triggered when the user deletes a secondary email address
mark-as-primary	String	Triggered when the user marks a secondary email address as primary

Type Definitions

export type PrimaryModelErrorType = "sendingConfirmationEmail";
export type PrimaryModelStateType = "sendingConfirmationEmail";

export type SecondaryModelErrorType = "adding";
export type SecondaryModelStateType = "adding";

export type SecondaryAddressErrorType = "markingAsPrimary" | "deleting";
export type SecondaryAddressStateType = "markingAsPrimary" | "deleting";

export interface EmailModel {
  primary: null | 'loadingError' | PrimaryModel;
  secondary: null | 'loadingError' | SecondaryModel;
}

export interface PrimaryModel {
  address: EmailAddress;
  state: PrimaryModelStateType;
  error: PrimaryModelErrorType;
}

export interface SecondaryModel {
  addresses: SecondaryAddressModel[];
  state: SecondaryModelStateType;
  error: SecondaryModelErrorType;
}

export interface SecondaryAddressModel {
  address: EmailAddress;
  state: SecondaryAddressStateType;
  error: SecondaryAddressErrorType;
}


export interface EmailAddress {
  value: string;
  verified: boolean;
}

Data/APIs

• get the primary email address: GET https://api.clever-cloud.com/v2/self
• Send confirmation email: GET https://api.clever-cloud.com/v2/self/confirmation_email
• list secondary email addresses: GET api.clever-cloud.com/v2/self/emails
• add secondary email address: PUT api.clever-cloud.com/v2/self/emails/{emailAddress}
• delete secondary email address: DELETE api.clever-cloud.com/v2/self/emails/{emailAddress}
• mark secondary email address as primary: PUT /v2/self/emails/<email>

Handling verified/unverified state

As for now, we cannot display the verified/unverified state because the API doesn't give us this information. In fact, we can only get verified email addresses from the API (unverified email addresses are never returned by the API).

We need the API to support:

• list all secondary email addresses (verified and unverified)
• each email address returned should have a verified boolean property.

Resending confirmation email

As for now, the only way to resend a confirmation email is to submit the add form again. There is no explicit action for resending the confirmation email. And this is for the same reason as above: unverified email addresses are never returned by the API. Also, the API for such an action is missing.

See https://gitlab.corp.clever-cloud.com/core-team/cc-api/-/issues/743

Stories & states

• Skeleton/loading
• Empty
• Loaded
• Loaded with a huge email addresses
• Waiting/sendingConfirmationEmail
• Waiting/adding
• Waiting/deleting
• Waiting/markingAsPrimary
• Error/loading
• Error/sendingConfirmationEmail
• Error/adding
• Error/deleting
• Simulation

UX writing & i18n

• title: Secondary email addresses
• description: TODO
• delete button: just the icon without any label is ok.
• add button: Ajouter, Add
• error.add
• error.delete

Wireframes and UI propositions

TBD