web-login v1.0.1
Web Login
What is web login component?
Web login component is login form page of any website with validation.
How to use web login component?
You can use web login component in following ways: 1) Using index.html or JavaScript
<script src="web-login/weblogin.js"></script>
<web-login
content-id="login"
username-pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$"
password-pattern="(?=.*[A-Z])"
username-error-msg="Please enter valid username"
password-error-msg="Please enter valid password"
container-background-color="#fff"
login-img-src=""
container-border-color="#fff"
button-background-color="#6BBF4F"
button-color="#fff"
create-account-show="true"
forgot-password-show="true">
</web-login>
<script>
const webLogin = document.querySelector('web-login')
webLogin.addEventListener('submitForm', event => {
})
webLogin.addEventListener('forgotPassword', event => {
})
webLogin.addEventListener('createAccount', event => {
})
</script>
In JS you can handle sumbit form event using addEventListener.
2) For use in Angular Include CUSTOM_ELEMENTS_SCHEMA in schemas to allows the use of the web components in the HTML markup without the compiler producing errors.
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, SharedModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
Add defineCustomElements in main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { defineCustomElements } from 'web-login/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
defineCustomElements(window);
Once you complete configuration, you can use web login component in login module as below
<web-login
content-id="login"
username-pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$"
password-pattern="(?=.*[A-Z])"
username-error-msg="Please enter valid username"
password-error-msg="Please enter valid password"
container-background-color="#fff"
login-img-src=""
container-border-color="#fff"
button-background-color="#6BBF4F"
button-color="#fff"
create-account-show="true"
forgot-password-show="true">
</web-login>
You can catch submit form event as below
ngAfterViewInit() {
this.elementRef.nativeElement.querySelector('web-login').addEventListener('submitForm', ev => {
console.log(ev)
})
this.elementRef.nativeElement.querySelector('web-login').addEventListener('forgotPassword', ev => {
console.log(ev)
})
this.elementRef.nativeElement.querySelector('web-login').addEventListener('createAccount', ev => {
console.log(ev)
})
}
3) For use in React and Vue: Please visit https://stenciljs.com/docs/react for how to use stencil component in React. Please visit https://stenciljs.com/docs/vue for how to use stencil component in Vue.
Web login functionality?
Web login gives you login form. You can customize login form using some attribute like container-background-color, container-border-color, button-background-color, button-color. If you want login img icon for your form you cam provide it using login-img-src attribute. Web login form hanlde validation of username and password field with using provided pattern as well display given error msg if any validation wrong.
Installation and import
For install use
npm i web-login --save
For import
import 'web-login/weblogin.js'