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
Requirements
- VueJS
- Web Components Polyfills
### Dependency scripts
Those scripts needed for IE/safari
Demo
<head>
<title>MDS Demo: Webpack + Babel + Vue</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"></script>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<!-- important for fonts and style-->
<link href="../node_modules/morningstar-design-system/dist/mds.css" rel="stylesheet">
</head>
<mwc-login
mwc-id="login-container"
config="{
"settings":
{
"useEmail":false,
"languageId":"en",
"errorText":"",
"resetPasswordUrl":"https://access.lim.com/authws/pages/pw_reset.jsp"
}
}"
></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');}