1.0.0 • Published 5 years ago
twp-login-component-temp v1.0.0
Login Component (TWP LC)
A JS library & components that determine a user's state. It's goal is to replace TWP's login entries to house logic in a single location. This project is broken into two parts: react and vanilla components.
Entry Points
- Vanilla:
src/vanilla/Login/index.jsandsrc/index.htmlis where the element is added to run locally. - React:
src/fusion/Login/index.jsandsrc/fusion/index.htmlis where the app root element is.
Running Locally
- Url: http://localhost.digitalink.com:9000
- Vanilla:
start:vanilla:dev - React:
start:fusion:dev
Integration
- Vanilla
- Add dist/lib/login.min.js file into page's
<head>...</head>using a script tag and add<div class="_twp_login-component"></div>to markup for component to be rendered. - When
window.TWPLCis available, callnew window.TWPLC({ env: "dev", name: "acquistion" }).init()to render elements.
- Add dist/lib/login.min.js file into page's
- React
- Add <Login {...props} /> component after importing (
import {Login} from 'twp-auth-component'). LoginStateis exported too, you can useimport {LoginState} from 'twp-login-component'to use its' functions.ex: new LoginState({ env: "dev", name: "fusion:navigationContext" })
- Add <Login {...props} /> component after importing (
Element options
If you are using vanilla component, use data-${option}=${value}. If use react component pass as props.
If overriding default text with
data-textortext={}(React),{{displayName}}can be passed in the signedIn value. It will replaced withLoginState.getUsernamereturn value.
| Name | Values | Default | Description |
|---|---|---|---|
| display | ["button", "link"] | "button" | |
| text | { "signedIn": "Sign me out, now!", "signedOut": "Oh, let's sign you in!"} | {signedIn: 'Sign out', signedOut: 'Sign in'} | This needs to be a valid JSON string if not using React, or it'll revert back to default |
| align | ["left", "center", "right"] | "left" | |
| styles | {} | {} | Override the button or a tag's default style (<button> or <a>) |
| nestedStyles | {} | {} | Override the innerHTML inside parent tag (<span>) |
| overlay | [true, false] | false | Display USW in overlay |
| callback | Function | undefined | Pass a callback, by default will redirect or pop-up modal |
Props (React)
| Name | Values | Default | Description |
|---|---|---|---|
| buttonClasses | "" | "" | Can be used as override class properties |
| textClasses | "" | "" | Can be used as override class properties |
Deploying
Once pushed to master branch, Jenkins will run ./scripts/pkg.sh to test, build and publish to npm repository.