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

The sign-in in Arabic Language

Links

Repository

mswiki

design chart

Requirements

• VueJS
• Web Components Polyfills

Dependency scripts

 Those scripts needed for IE
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="https://unpkg.com/vue"></script>
 

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
• [x]
• [x]

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

Customize configuration

See Configuration Reference.