Mwc-components NPM

MWC-LOGIN-WIDGET

A web component that can be used in any Framework, built using vue

Motivation

Many teams in Morningstar uses a Sign-in widget in their web internal tools or products. by Using Morningstar Web Components this sign in widget can be used in any framework. With features:

- The Sign in widget supports many Languages as Morningstar is a global company

- The Widget Provides many Options and variation that covers many of Morningstar team's Requirements.

Code style

This project uses Yarn. Vue cli 3

Usage

supports the following component attributes :

attribute	type	Description
`mwc-id`	Required	important to initiate an mwc instance in window
`config`	Optional	Provide an object with options i.e language `

The provided options within config :

option	Description
`isEmail`	To determine the populate email input field or user name field as each has it own validations rules
`languageId`	To determine the language needed now it supports en, fr, ar, ch English, French, Arabic, Chinese
`logoUrl`	to user a logo just provide a link for it otherwise it use Morningstar's logo `
`resetPasswordUrl`	if reset password link is preset it will show the 'forget password link' and will redirect to that link when pressed`
`errorText`	The component will listen to this field if the consumer changed the errorText from empty to any text it will populate an error message in the form `

After the login submit. it will return an object of

{

    keepUserLoggedIn: true
    password: "rdsfsfds"
    userName: "Rahmo"
    
}

the consumer has to listen to this even signInRequested to get the object from the component

scripts :

$ yarn install

$ yarn build-component //it creates the dist for the component with demo

Make sure you modify the Demo.html with the parameter to load the page

$ open dist/demo.html

run local development

yarn serve

Screenshots

The sign-in in English Language

Screenshot

The sign-in in Arabic Language

Screenshot

Links

Repository

mswiki

design chart

Requirements

VueJS
Web Components Polyfills
Dependency scripts
```
Those scripts needed for IE
```

Demo

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
<script src="./mwc-login.js"></script>


<mwc-login
        mwc-id="login-container"
        config="{
                    &quot;settings&quot;:
                        {
                        &quot;useEmail&quot;:false,
                        &quot;languageId&quot;:&quot;en&quot;,
                        &quot;errorText&quot;:&quot;&quot;,
                        &quot;resetPasswordUrl&quot;:&quot;https://access.lim.com/authws/pages/pw_reset.jsp&quot;
                        }
                    }"
></mwc-login>

Task Lists

Use a CSS naming Methodology, like BEM
add tests for 'Forget Password' link

Project setup

yarn install

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

using it for existing Apps

//At the bottom of Main.js

window.Vue = Vue;
let GlobalVue = null;
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue;
}
if (GlobalVue) {
  import('mwc-components/dist/mwc-login');
}