## 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

<mwc-login> 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](screen3.png)

The sign-in in Arabic Language

![Screenshot](screen4.png)

## Links
[Repository](https://msstash.morningstar.com/projects/CD/repos/mwc-components-common/browse) 

[mswiki](todo)

[design chart](https://coggle.it/diagram/XXfswhDFYZA6QKsM/t/login-component/2bd80bdfc23615c4a00a4a2146774db6ab9934b1967cbdb4639bac0eddfcf937)

## 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/core-js-bundle@3.0.0-alpha.1"></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 
```$xslt
//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](https://cli.vuejs.org/config/).