Common UI Library

Welcome to the Common UI Library! This library provides a set of reusable Angular components for user authentication including login, registration, and password reset forms with built-in validation using Angular Reactive Forms.

Components

This library includes the following components:

• LoginComponent: A form for user login.
• RegisterComponent: A form for user registration.
• ResetPasswordComponent: A form for resetting user passwords.

Features

• Angular Reactive Forms: All forms use Angular's reactive form approach for managing form state and validation.
• Validation: Built-in validation for email and password fields.
• Output: Emits form data upon successful submission when forms are valid.

Installation

To install this library, use npm:

npm install @tagangular/common-ui

Replace @tagangular/common-ui with the actual name of your library package.

Usage

1. Import the Module: Import the CommonUiModule into your Angular application module:

    import {LoginComponent, RegisterComponent} from '@tagangular/common-ui';
    @Component({
     selector: "app-my",
     templateUrl: "./my.component.html",
     styleUrls: ["./my.component.scss"],
     imports: [....,LoginComponent, RegisterComponent],
     standalone: true,
    })
    export class AppModule {}

2. Add Components: Use the provided components in your Angular templates:

   <!-- For Login Form -->
   <login-page (submitForm)="handleLogin($event)"></login-page>
   
   <!-- For Registration Form -->
   <register-page (submitForm)="handleRegister($event)"></register-page>
   
   <!-- For Password Reset Form -->
   <reset-password-page (submitForm)="handleResetPassword($event)"></reset-password-page>

3. Handle Form Submission: Implement the methods to handle form data:

   handleLogin(formData: any) {
     console.log('Login Form Data:', formData);
     // Handle login
   }
   
   handleRegister(formData: any) {
     console.log('Register Form Data:', formData);
     // Handle registration
   }
   
   handleResetPassword(formData: any) {
     console.log('Reset Password Form Data:', formData);
     // Handle password reset
   }

Forms Validation

• Email: Validates email format.
• Password: Ensures password meets complexity requirements (e.g., minimum length, uppercase letters, etc.).

Output

Each component emits form data via the submitForm event when the form is successfully submitted and validated. You can listen to this event in your parent component to handle the data as needed.

Contributing

We welcome contributions! If you have suggestions or improvements, please submit a pull request or open an issue on our GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact