Registration and authorization

Containers must have #login-form, #restore-form, #registration-form and #profile-form tags. You can use prototype actions with these containers; in this case, after a successful action, you will be taken to the next screen.

Each container must have a #submit-button element inside it. This is a button that, when clicked, will perform the authorization, registration, update or password reset action.

Also inside the container there may (but not necessarily) be a container with the #error-message tag - this container will be shown in case of an error.

Also inside the container there may (but not necessarily) be a container with the #notvalid-message tag - this container will be shown if the email is entered incorrectly

The #login-form container must contain two fields: #email-field and #password-field - they will be converted to input fields.

Example with the structure in the figure:

The password reset form (the #restore-form container) should contain only the #email-field and the #submit-button.

The profile registration and editing forms (registration-form and #profile-form containers), in addition to the main fields #email-field and #password-field, must contain the fields #name-field, #lastname-field.

If additional custom fields are specified in the settings, then for them you need to use a universal wrapper container #custom-field-wrapper, inside which there should be an input field #custom-field. This field will be selected from the form and used as a template for all custom fields. An example:

The profile form can also have an element with the tag #clear-avatar - clicking on this element clears the avatar.

Containers for working with Wordpress: If the application works with a user base running CMS wordpress, you need to use separate forms for authorization, registration, and profile editing. They are located in the Wordpress section. Password reset works like this in normal forms.

Navigation for authorized and unauthorized users:

If you need to perform different actions for an authorized or unauthorized user on the same #action element, then the direction of action should be directed to a special element (container) Action switch #actionrouter:

Inside this container there are two blocks, #authorized-action and #unauthorized-action - from them you can direct the appropriate actions for different scenarios.