Unity-account-switcher NPM

Unity Account Switcher

This is Web Component build with Stencil.

The Unity Account Switcher is a web component implementation of the Unity Account Widget, with added functionality for having multiple accounts logged in, and the ability to switch between them.

The component provides this core functionality, and also options for each website that uses the component, to configure what other links should be part of the menu when opened.

Using this component

Unity Account Switcher web component can be integrated into different web frameworks. Now we will show you how to embedded the component one by one.

Javascript

Put this line in the tag:

<head>
    ...
    <script src="https://unpkg.com/unity-account-switcher@0.1.5/dist/unity-account-switcher.js"></script>
</head>

Then you can use component unity-account-switcher directly in the body.

<body>
    ....
    <unity-account-switcher></unity-account-switcher>
</body>

Finaylly you can add config & eventListener in the javascript code:

    const uasCmp = document.querySelector('unity-account-switcher');
    const config = JSON.stringify({
      menuItems: [
        {
          key: 'create_company',
          title: 'Create a company',
        },
        {
          key: "contact_us",
          title: 'Contact us',
          href: 'https://forum.unity.com/forums/unity-connect.120',
        },
      ],
      env: 'int',
      loginRedirectURL: 'http://...',
      logoutRedirectURL: 'http://...',
      userProfileURL: 'https://...',
      clientID: '...',
    })
    uasCmp.config = config;
    uasCmp.addEventListener('menuClicked', e => {
      const menuKey = e.detail;
      // do the right thing
    });

ReactJS

Run the command to install the npm package:

     npm install unity-account-switcher --save

Then add this code before ReactDOM.hydrate or ReactDOM.render:

    const AccountSwitcher = require('unity-account-switcher/loader');
    AccountSwitcher.applyPolyfills().then(() => {
        AccountSwitcher.defineCustomElements(window);
    });

Finally you can use the component like this:

let registered = false;
export class DemoComponent extends Component {
    componentDidMount() {
        if (!registered) {
            registered = true;
            window.addEventListener('uasMenuClicked', this.onMenuClicked);
        }
    }

    componentWillUnmount() {
        window.addEventListener('uasMenuClicked', this.onMenuClicked);
    }

    onMenuClicked = (e) => {
        const menuKey = e.detail;
        // do the right thing
    }

    render() {
        const config = JSON.stringify({
            menuItems: [
                {
                key: 'create_company',
                title: 'Create a company',
                },
                {
                key: "contact_us",
                title: 'Contact us',
                href: 'https://forum.unity.com/forums/unity-connect.120',
                },
            ],
            env: 'int',
            clientID: '...',
        });

        return (
            <unity-account-switcher ref={e => this.unityAccountSwitcher = e} config={config}/>
        );
    }
}

unity,account switcher

@everything-registry/sub-chunk-3014

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago