# mwc-components

> ## Project setup ``` yarn install ```

Latest version **1.5.4** (published 2019-11-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install mwc-components
pnpm add mwc-components
yarn add mwc-components
bun add mwc-components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.4 |
| Published | 2019-11-18 |
| First published | 2019-08-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 5.1 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | rahmo alzahrani |
| Maintainers | rahmo |
| Keywords | mwc |

## Links

- npm: https://www.npmjs.com/package/mwc-components
- npm.io page: https://npm.io/package/mwc-components

## Dependencies (9)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [path](https://npm.io/package/path.md) ^0.12.7
- [vuex](https://npm.io/package/vuex.md) ^3.0.1
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [vuelidate](https://npm.io/package/vuelidate.md) ^0.7.4
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.6.10
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^3.5.2
- [document-register-element](https://npm.io/package/document-register-element.md) ^1.14.1
- [@webcomponents/webcomponentsjs](https://npm.io/package/@webcomponents/webcomponentsjs.md) ^2.2.10

## Recent versions

- 1.5.4 (latest) — 2019-11-18
- 1.5.3 — 2019-11-04
- 1.5.2 — 2019-11-04
- 1.5.1 — 2019-11-04
- 1.4.9 — 2019-10-08
- 1.4.8 — 2019-10-07
- 1.4.7 — 2019-10-04
- 1.4.6 — 2019-10-02
- 1.4.5 — 2019-09-25
- 1.4.4 — 2019-09-25
- 1.4.3 — 2019-09-12
- 1.4.2 — 2019-08-27
- 1.4.1 — 2019-08-27
- 1.4.0 — 2019-08-27
- 1.3.9 — 2019-08-27
- … 29 more at https://npm.io/package/mwc-components/versions

## README

## 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/).

---
_Source: https://npm.io/package/mwc-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._