Invitation

Documentation: Invitation Component

The Invitation Component is a Vue.js component designed to handle user invitations with a registration form. It allows users to input their first name, last name, password, and confirm their password, while handling validation and error reporting. This component is particularly useful for scenarios where users need to register or set a new password through an invitation link.

Overview

The Invitation Component provides a form for users to complete their registration or password reset process. It includes fields for personal information and password creation, along with client-side validation to ensure all input meets specified criteria. The component also manages form submission and error handling, displaying appropriate messages based on user input and server responses.

Model Documentation

The model object is used to configure the Invitation Component. It provides dynamic text and error messages for the form based on user input and validation results.

Model Structure

id: String
A unique identifier for the component's root element, used to set the id attribute.

cssClass: String
Optional CSS class(es) for additional styling of the component.

Example Model

{
  "id": "invitation-form",
  "cssClass": "invitation-form",
}

Component Structure

The Invitation Component includes:

Form Header: Displays the title of the form (Invitation).

Form Fields: Collects user information including first name, last name, password, confirm password, and email.

Validation Messages: Provides feedback for form validation errors.

Submit Button: Submits the form and triggers the validation and registration process.

HTML Template

The HTML template defines the layout and structure of the component:

JavaScript

The JavaScript code handles form logic, validation, and submission:

Explanation

Data Handling: The component manages user input and validation states with Vue.js data properties.

Validation: Custom methods ensure the password meets security policies and that all fields are correctly filled out. Errors are flagged and displayed if validation fails.

Form Submission: Upon submission, the component checks for validation errors, makes an API request to register the user, and handles responses including errors and successful registrations.

Email Extraction: The component retrieves the email from the URL, which is encoded in Base64 and decoded for use.

Usage

To integrate the Invitation Component into a Vue.js application:

Include the Component:
Register invitationdefault in your Vue app.

Provide the Model:
Pass a configuration object to the component to define error messages and other dynamic content.

Initialize the Component:
The component automatically handles form setup, validation, and submission based on user input and server responses.

Customize as Needed:
Adjust the model and styles to fit your application's design and error messaging requirements.

Documentation: Invitation Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Usage#