twp-login-component

1.1.16 • Public • Published

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.js and src/index.html is where the element is added to run locally.
  • React: src/fusion/Login/index.js and src/fusion/index.html is where the app root element is.

Running Locally

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.TWPLC is available, call new window.TWPLC({ env: "dev", name: "acquistion" }).init() to render elements.
  • React
    • Add <Login {...props} /> component after importing (import {Login} from 'twp-auth-component').
    • LoginState is exported too, you can use import {LoginState} from 'twp-login-component' to use its' functions.
      • ex: new LoginState({ env: "dev", name: "fusion:navigationContext" })

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-text or text={} (React), {{displayName}} can be passed in the signedIn value. It will replaced with LoginState.getUsername return value.

Name Values Default Description
display ["button", "link"] "button" none
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" none
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.

Package Sidebar

Install

npm i twp-login-component

Weekly Downloads

7

Version

1.1.16

License

ISC

Unpacked Size

104 kB

Total Files

8

Last publish

Collaborators

  • andrew.frye
  • subs-npm-builder