TransitFormLoginX

This is a working repository for the TransitFormLogin library.

Origin:

TransitFormLogin

TransitFormLogin is an Angular library that provides a login form component with email and password inputs. The form is built using reactive forms in Angular and styled with Bootstrap.
, The goal is to create a simple core library that can be customized and extended.
This library was generated with Angular CLI version 14.2.0.

Compatibility

| Angular Version | Compatible? | | ---------------- | ----------- | | 14.2.0+ | ✅ | | 14.1.0 and below | ❌ |

Installation

You can install the TransitFormLogin library using npm:

** npm i transit-form-login **

Usage

1. Import the TransitFormLoginModule into your Angular module:

import { TransitFormLoginModule } from 'transit-form-login';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, TransitFormLoginModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Add the PrimeNG CSS and the TransitFormLogin assets to your angular.json:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/transit-form-login/assets",
    "output": "/assets"
  }
]

3. Use the TransitFormLoginComponent in your template:

<lib-transit-form-login apiLink="apiLink" backgroundLink="imageSrc" logoLink="logo" lang="en" inputType="email" passwordThreshold="8" passphraseThreshold="32" [regExp]="regExp" (onLoginStart)="handleLogin($event)"></lib-transit-form-login>

The lib-transit-form-login component takes the following:

• apiLink (string): The URL of the API to submit the data to.
• backgroundLink (string): The URL of the background, preferably a project-supplied asset.
• logoLink (string): The URL of the logo, preferably a project-supplied asset.
• lang (string): The language to choose. Default is "ar" for Arabic, otherwise set "en" for English.
• inputType (string): Whether to login via username or e-mail. Default is "username", otherwise set "email" for e-mail login.
• passwordThreshold (number): The minimum number of characters allowed in the password. Default is 8.
• passphraseThreshold (number): The maximum number of characters before the password is considered a passphrase (which is more secure). Default is 32.
• regExp (regular expression): What pattern to check the password against. Supply from a variable for the best results.

The lib-transit-form-login component also has an event onLoginStart which allows you to handle its data from the project itself.

4. Set the function that will handle the onLoginStart event:

handleLogin(event: any) {
  // Your code here
}

Do not forget to call the module service's handleLogin(event) function.