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}quot;
        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}quot;
        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'