Skip to content
VTEX Login app
Branch: master
Clone or download
Latest commit 162e66c May 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Initial implementation of login app (#1) Jun 8, 2018
messages fix some issues and run eslint May 17, 2019
react remove function onOutSideBoxClick May 22, 2019
store Remove inheritComponent from blocks Jan 29, 2019
.eslintignore
.gitignore Initial implementation of login app (#1) Jun 8, 2018
.prettierrc Start tests Mar 7, 2019
.travis.yml Fix travix.yml Mar 7, 2019
.vtexignore Start tests Mar 7, 2019
CHANGELOG.md Release v2.13.1 May 23, 2019
README.md
manifest.json Release v2.13.1 May 23, 2019

README.md

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

Release Status Initial Release Maintenance LTS Start End-of-life Store Compatibility
[2.x] Current Release 2018-11-08 2.x
[1.x] Maintenance LTS 2018-07-26 2018-11-08 March 2019 1.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.

  "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:

"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.

{
  "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 name Type Description Default value
optionsTitle String Set title of login options -
emailAndPasswordTitle String Set title of login with email and password -
accessCodeTitle String Set title of login by access code -
emailPlaceholder String Set placeholder to email input -
passwordPlaceholder String Set placeholder to password input -
showPasswordVerificationIntoTooltip Boolean Set show password format verification as tooltip -
acessCodePlaceholder String Set placeholder to access code input -

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

Prop name Type Description Default value
isInitialScreenOptionOnly Boolean Set to show only the login options on the initial screen true
defaultOption Enum Set the initial form to show. 0 for access code login, 1 for email and password login 0
optionsTitle String Set title of login options -
emailAndPasswordTitle String Set title of login with email and password -
accessCodeTitle String Set title of login by access code -
emailPlaceholder String Set placeholder to email input -
passwordPlaceholder String Set placeholder to password input -
showPasswordVerificationIntoTooltip Boolean Set show password format verification as tooltip -
acessCodePlaceholder String Set 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:
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.login.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;
}

CSS namespaces

Class name Description Component Source
container Login main container LoginComponent
contentInitialScreen Login Content initial screen LoginContent
contentFormVisible Login Content form LoginContent
profile Profile email or name when logged in LoginComponent
label Icon label LoginComponent
optionsSticky Login options in sticky mode LoginOptions
optionsList Login options list LoginOptions
optionsListItem Login options item LoginOptions
optionsListItemContainer Container in Login options LoginOptions
oauthProvider OAuth provider name OAuth
inputContainer Any input container CodeConfirmation, EmailAndPassword, EmailVerification, RecoveryPassword
inputContainerAccessCode Access code input container CodeConfirmation, RecoveryPassword
inputContainerPassword Password input container EmailAndPassword, RecoveryPassword
inputContainerEmail Email input container EmailAndPassword, EmailVerification
emailVerification Email verification form EmailAndPassword, EmailVerification, RecoveryPassword
formLinkContainer Container for links EmailAndPassword
arrowUp Arrow up LoginComponent
buttonLink Button link LoginComponent
formError Error form LoginComponent
content Login Content container LoginContent
button Any button AccountOptions, LoginOptions, OAuth
sendButton Buttons sending informations CodeConfirmation, EmailAndPassword, EmailVerification, RecoveryPassword
buttonSocial Button to social media OAuth
buttonDanger Danger button LoginOptions
backButton Back button GoBackButton
accountOptions Account options container AccountOption
codeConfirmation Code Confirmation container CodeConfirmation
formTitle Form Title FormTitle
box Login box LoginContent
contentContainer Login content container LoginContent
formFooter Form footer container FormFooter
contentForm Login Content form LoginContent
contentAlwaysWithOptions Login content with options LoginContent
options Login Options container LoginOptions
tooltipContainer Tooltip Container Tooltip
tooltipContainerTop Tooltip Top Tooltip
tooltipContainerLeft Tooltip Left Tooltip

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

You can’t perform that action at this time.