NgxHtaLogin

This library was generated with Angular CLI version 17.3.0.

This is an updated release of HtaLogin.

Requires ngx-toastr for toaster alerts.

Installation

npm install --save ngx-hta-login
npm install --save ngx-toastr

Do not forget to add the ngx-toastr provider and CSS!

Basic Usage

*.component.html:

<lib-hta-login apiUrl="YOUR_API_HERE" [usernameControl]="username" [passwordControl]="password" (loginSuccess)="onLoginSuccess($event)" (loginFailure)="onLoginFailure($event)" />

*.component.ts:

export class ExampleComponent {
  username = { key: "username", value: "", required: true };
  password = { key: "password", value: "", required: true };

  onLoginSuccess(event: any) {
    // YOUR CODE HERE
  }

  onLoginFailure(event: any) {
    // YOUR CODE HERE
  }
}

This allows the library to perform its login functionality with the bare minimum inputs to handle login responses.

Inputs

The library provides multiple inputs for customising how it works and looks:

• loginInputType: Required. String input for choosing between email (email) and username (username).
• usernameControl: Required. Object to specify the username or email key that will be used in the login payload: { key: 'YOUR_KEY_HERE', value: '', required: true }.
• passwordControl: Required. Object to specify the password key that will be used in the login payload: { key: 'YOUR_KEY_HERE', value: '', required: true }.
• apiUrl: Required. The API URL that the payload will be sent to. Preferred to be referenced from a string in your .component.ts file for security reasons.
• formControls: Array of additional control objects to be added to the login payload, if needed: [ { key: 'YOUR_KEY_HERE', value: '', required: true } ].
• placeholderEmail: A string for the placeholder text in the email input when loginInputType is email.
• placeholderUser: A string for the placeholder text in the username input when loginInputType is username.
• placeholderPassword: A string for the placeholder text in the password input.
• rememberMe: String to show in the "Remember Me" area.
• isRememberMe: Boolean to select whether the "Remember Me" area is enabled or not.
• forgotPassword: String to show in the "Forgot Password?" area.
• isForgotPassword: Boolean to select whether the "Forgot Password?" area is enabled or not.
• passwordTitle: String to show in the "Password" label area.
• isShowPassword: Boolean to enable or disable the functionality to show the password.
• buttonText: String to show in the login button. Will always be overridden by Loading... when the login payload has been sent and is awaiting the response.
• isShowOrSocialBtns: Boolean to enable or disable the Social login buttons, currently Facebook and Google.
• isFacebookLogin: Boolean to enable the Facebook login. Requires isShowOrSocialBtns to be true.
• isGoogleLogin: Boolean to enable the Google login. Requires isShowOrSocialBtns to be true.
• CompanyLogoSrc: String to reference the image asset that will be used in the Company Logo area.
• isShowCompanyLogo: Boolean to enable or disable the Company Logo area.

Outputs

There are mainly two outputs for handling login responses:

• loginSuccess: Event fired when the login is successful. The response varies depending on how your API handles login responses.
• loginFailure: Event fired when the login fails. The response varies depending on how your API handles login responses.

CSS Inputs

The library also provides inputs in the form of CSS objects that can be used to customise how the library looks:

• wholePageContainerStyle: The container that holds the login form. Defaults to:

{
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100vh',
  width: '100vw'
}

• loginWrapperStyle: The login form. Defaults to:

{
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  height: 'auto',
  width: '500px',
  borderRadius: '56px',
  padding: '2px',
  margin: 'auto',
  boxShadow: '0px 4px 15px rgba(0, 0, 0, 0.2)',
  background: 'linear-gradient(180deg, var(--primary-color) 25%, rgba(33, 150, 243, 0) 50%)'
}

• eyeShowPassword: The button that shows or hides the password. Defaults to:

{
  position: 'absolute',
  background: 'none',
  border: 'none',
  cursor: 'pointer',
  left: '30px',
  bottom: '31px'
}

• direction: The direction of the elements, left-to-right or right-to-left. Defaults to:

{
  direction: "rtl";
}