The authorization and registration page is a separate route that has 2 forms, for registration of a new user and a log-in form for sign-in of an existing user.
<aside> ℹ️ Usually, styling this element takes from-to: 5-8h
</aside>
Page is accessible in /account/create or for newer SPWA version (^5.2.x) customer/account/create for log-in form and customer/account/login for log-in form
Designs should have representation for two main forms:
By default, each form is rendered as a separate route.
<aside> ➡️ Forms’ inputs should inherit BT styles and if not and custom styling is needed to be applied, all states as error, success, etc, should be correctly represented.
</aside>
Styles should provide representation for success log-in notification or any other action and also for error during log-in and/or registration.
CreateAccountPage and LoginAccountPage routes are responsible for authorization and registration pages rendered.
Possibly designs will require to have both forms at one page, therefore override for Route and combination, refactor of components mentioned above into one will be required.
<aside> ➡️ Additionally, adjustments for smaller elements may be needed.
</aside>
Depending on the design adjustments for the breadcrumbs will be required since we do not have them rendering by default for these routes. The easiest way is to add render of Breadcrumbs manually and pass the needed path, however, some adjustments for Breadcrumbs logic will be required.
To style a component, override its .style.scss file. You can also customize how it is rendered by overriding the .component.js file.
How to override JavaScript classes?