VTEX Login app

Description

The VTEX Login app responsible to handle user login, and this app is used by store theme.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Release schedule

ReleaseStatusInitial ReleaseMaintenance LTS StartEnd-of-lifeStore Compatibility
2.xCurrent Release2018-11-082.x
1.xMaintenance LTS2018-07-262018-11-08March 20191.x

See our LTS policy for more information.

Table of Contents

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

We add the login as a block in our Store Header.

To configure or customize this app, you need to import it in your dependencies in manifest.json.

1
2
3
  "dependencies": {
    "vtex.login": "2.x"
  }

Then, add login or login-content block into your app theme as we do in our Store theme app. login-content is just the login form and login contains the login form and adds the possibility of other display modes such as pop-up.

Now, you can change the behavior of the login block that is in the store header. See an example of how to configure:

1
2
3
4
5
6
7
8
9
"login": {
  "props": {
    "emailAndPasswordTitle": "LOG-IN",
    "accessCodeTitle": "Acess Code LOG-IN",
    "emailPraceholder": "e-mail",
    "passwordPlaceholder": "password",
    "showPasswordVerificationIntoTooltip": true,
  }
}

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within login and login-content and describes if they are required or optional.

1
2
3
4
5
6
7
8
{
  "login": {
    "component": "Login"
  },
  "login-content": {
    "component": "LoginContent"
  }
}

For now these blocks do not have any required or optional blocks.

Configuration

Through the Storefront, you can change the login's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop nameTypeDescriptionDefault value
optionsTitleStringSet title of login options-
emailAndPasswordTitleStringSet title of login with email and password-
accessCodeTitleStringSet title of login by access code-
emailPlaceholderStringSet placeholder to email input-
passwordPlaceholderStringSet placeholder to password input-
showPasswordVerificationIntoTooltipBooleanSet show password format verification as tooltip-
acessCodePlaceholderStringSet placeholder to access code input-

You can also change the login-content's behaviour and interface through the Store front.

Prop nameTypeDescriptionDefault value
isInitialScreenOptionOnlyBooleanSet to show only the login options on the initial screentrue
defaultOptionEnumSet the initial form to show. 0 for access code login, 1 for email and password login0
optionsTitleStringSet title of login options-
emailAndPasswordTitleStringSet title of login with email and password-
accessCodeTitleStringSet title of login by access code-
emailPlaceholderStringSet placeholder to email input-
passwordPlaceholderStringSet placeholder to password input-
showPasswordVerificationIntoTooltipBooleanSet show password format verification as tooltip-
acessCodePlaceholderStringSet placeholder to access code input-

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
1
2
3
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.login.css inside the styles/css folder. Add your custom styles:
1
2
3
.container {
  margin-top: 10px;
}

CSS namespaces

Class nameDescriptionComponent Source
containerLogin main containerLoginComponent
contentInitialScreenLogin Content initial screenLoginContent
contentFormVisibleLogin Content formLoginContent
profileProfile email or name when logged inLoginComponent
labelIcon labelLoginComponent
optionsStickyLogin options in sticky modeLoginOptions
optionsListLogin options listLoginOptions
optionsListItemLogin options itemLoginOptions
optionsListItemContainerContainer in Login optionsLoginOptions
oauthProviderOAuth provider nameOAuth
inputContainerAny input containerCodeConfirmation, EmailAndPassword, EmailVerification, RecoveryPassword
inputContainerAccessCodeAccess code input containerCodeConfirmation, RecoveryPassword
inputContainerPasswordPassword input containerEmailAndPassword, RecoveryPassword
inputContainerEmailEmail input containerEmailAndPassword, EmailVerification
emailVerificationEmail verification formEmailAndPassword, EmailVerification, RecoveryPassword
formLinkContainerContainer for linksEmailAndPassword
arrowUpArrow upLoginComponent
buttonLinkButton linkLoginComponent
formErrorError formLoginComponent
contentLogin Content containerLoginContent
buttonAny buttonAccountOptions, LoginOptions, OAuth
sendButtonButtons sending informationsCodeConfirmation, EmailAndPassword, EmailVerification, RecoveryPassword
buttonSocialButton to social mediaOAuth
buttonDangerDanger buttonLoginOptions
backButtonBack buttonGoBackButton
accountOptionsAccount options containerAccountOption
codeConfirmationCode Confirmation containerCodeConfirmation
formTitleForm TitleFormTitle
boxLogin boxLoginContent
contentContainerLogin content containerLoginContent
formFooterForm footer containerFormFooter
contentFormLogin Content formLoginContent
contentAlwaysWithOptionsLogin content with optionsLoginContent
optionsLogin Options containerLoginOptions
tooltipContainerTooltip ContainerTooltip
tooltipContainerTopTooltip TopTooltip
tooltipContainerLeftTooltip LeftTooltip

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Contributing

Check it out how to contribute with this project.

Tests

To execute our tests go to react/ folder and run yarn test

Travis CI

Build Status