Account Tile

The AccountTile component can be used when the user needs to frequently switch between or manage different accounts.

Import Syntax

xxxxxxxxxx
 
import AccountTile from 'calcite-react/AccountTile';

Basic Usage

Esri Professional Services

Joey Harig

jharig

 
() => {
  const AccountTileExample = () => {
    const placeholders = {
      actions: [
        {
          label: 'Sign out',
          onClick: () => console.log('sign out'),
        },
        {
          label: 'Remove Account',
          onClick: () => console.log('remove account'),
        },
      ],
      user: {
        arcgisAccountUrl: '',
        username: 'jharig',
        fullName: 'Joey Harig',
        firstName: 'Joey',
        lastName: 'Harig',
      },
      isAuthenticated: true,
      orgName: 'Esri Professional Services',
      userThumbnail: {
        url:
          'https://avatars1.githubusercontent.com/u/55154968?s=460&u=4034cb088cb3c99e051c2c89663e2c070b28666f&v=4',
        letters: 'JH',
      },
      orgThumbnail: {
        url:
          'https://www.esri.com/content/dam/esrisites/en-us/common/icons/product-logos/ArcGIS-Pro.png',
        letters: 'E',
      },
    }
    return (
      <AccountTile
        actions={placeholders.actions}
        user={placeholders.user}
        isAuthenticated={placeholders.isAuthenticated}
        orgName={placeholders.orgName}
        userThumbnail={placeholders.userThumbnail}
        orgThumbnail={placeholders.orgThumbnail}
      />
    )
  }
​
  return <AccountTileExample />
}

Not Clickable

Esri Professional Services

Joey Harig

jharig

 
() => {
  const AccountTileExample = () => {
    const placeholders = {
      user: {
        arcgisAccountUrl: '',
        username: 'jharig',
        fullName: 'Joey Harig',
        firstName: 'Joey',
        lastName: 'Harig',
      },
      isAuthenticated: true,
      orgName: 'Esri Professional Services',
      userThumbnail: {
        url:
          'https://avatars1.githubusercontent.com/u/55154968?s=460&u=4034cb088cb3c99e051c2c89663e2c070b28666f&v=4',
        letters: 'JH',
      },
      orgThumbnail: {
        url:
          'https://www.esri.com/content/dam/esrisites/en-us/common/icons/product-logos/ArcGIS-Pro.png',
        letters: 'E',
      },
    }
    return (
      <AccountTile
        actions={placeholders.actions}
        user={placeholders.user}
        isAuthenticated={placeholders.isAuthenticated}
        orgName={placeholders.orgName}
        userThumbnail={placeholders.userThumbnail}
        orgThumbnail={placeholders.orgThumbnail}
        clickable={false}
        hideAuthentication={true}
      />
    )
  }
​
  return <AccountTileExample />
}

Multiple Accounts

Esri Professional Services

Joey Harig

jharig

Another Organization

Someone Else

selse

 
() => {
  const AccountTilesExample = () => {
    const accounts = [
      {
        user: {
          username: 'jharig',
          fullName: 'Joey Harig',
          firstName: 'Joey',
          lastName: 'Harig',
        },
        isAuthenticated: true,
        orgName: 'Esri Professional Services',
        userThumbnail: null,
        userThumbnail: {
          url:
            'https://avatars1.githubusercontent.com/u/55154968?s=460&u=4034cb088cb3c99e051c2c89663e2c070b28666f&v=4',
          letters: 'JH',
        },
        orgThumbnail: {
          url:
            'https://www.esri.com/content/dam/esrisites/en-us/common/icons/product-logos/ArcGIS-Pro.png',
          letters: 'E',
        },
      },
      {
        user: {
          username: 'selse',
          fullName: 'Someone Else',
          firstName: 'Someone',
          lastName: 'Else',
        },
        isAuthenticated: false,
        orgName: 'Another Organization',
        userThumbnail: {
          url: null,
          letters: 'SE',
        },
        orgThumbnail: {
          url: null,
          letters: 'A',
        },
      },
    ]
    const createActions = (user, isAuthenticated) => {
      let actions = [
        {
          label: 'Remove account',
          onClick: () => console.log('remove'),
        },
      ]
      if (isAuthenticated) {
        actions.unshift({
          label: 'Sign out',
          onClick: () => console.log('sign out'),
        })
      } else {
        actions.unshift({
          label: 'Sign in',
          onClick: () => console.log('sign in'),
        })
      }
      return actions
    }
​
    const accountTiles = accounts.map(account => {
      return (
        <AccountTile
          key={account.user.fullName}
          actions={createActions(account.user, account.isAuthenticated)}
          user={account.user}
          isAuthenticated={account.isAuthenticated}
          orgName={account.orgName}
          userThumbnail={account.userThumbnail}
          orgThumbnail={account.orgThumbnail}
        />
      )
    })
​
    return (
      <Panel white style={{ width: '400px' }}>
        {accountTiles}
      </Panel>
    )
  }
​
  return <AccountTilesExample />
}

With the `useAccountManager` hook

No accounts added yet

 
() => {
  const UseAccountManagerExample = () => {
    const options = {
      clientId: 'dwecSqF6H1LcJ1n3',
      redirectUri: `${window.location.origin}/account-tile`,
      popup: true,
    }
    const {
      accountManagerState,
      addAccount,
      logoutAccount,
      removeAccount,
      restoreAccount,
      refreshAccount,
      switchActiveAccount,
      getUserThumbnail,
      getOrgThumbnail,
    } = useAccountManager(options)
​
    const accounts = accountManagerState.accounts
​
    const createActions = (key, isAuthenticated) => {
      let actions = [
        {
          label: 'Remove account',
          onClick: () => removeAccount(accounts[key]),
        },
        {
          label: 'Set active',
          onClick: () => switchActiveAccount(accounts[key]),
        },
      ]
      if (isAuthenticated) {
        actions.unshift({
          label: 'Sign out',
          onClick: () => logoutAccount(accounts[key]),
        })
      } else {
        actions.unshift({
          label: 'Sign in',
          onClick: () => restoreAccount(accounts[key]),
        })
      }
      return actions
    }
​
    const accountTiles = Object.keys(accounts).map(key => {
      const account = accounts[key]
      const isAuthenticated = !!account.token
      return (
        <AccountTile
          key={key}
          actions={createActions(key, isAuthenticated)}
          user={account.user}
          isAuthenticated={isAuthenticated}
          orgName={account.portal.name}
          userThumbnail={getUserThumbnail(account)}
          orgThumbnail={getOrgThumbnail(account)}
        />
      )
    })
​
    return (
      <div>
        <Panel
          white
          style={{
            marginBottom: '16px',
            width: '400px',
          }}
        >
          {accountTiles.length ? accountTiles : 'No accounts added yet'}
        </Panel>
        <Button onClick={() => addAccount(options)}>Add account</Button>
      </div>
    )
  }
​
  return <UseAccountManagerExample />
}

Props

Property	Type	Required	Default	Description
actions	Arrayof	false	[]	Actions to be included in the dropdown. Each action should describe a label and an onClick method.
isAuthenticated	Bool	false	false	Is the user currently logged in or has their authentication expired?
width	String	false	100%	Style prop to define the width of the tile.
authenticatedText	String	false	Signed in	Text to show when the account is authenticated.
expiredText	String	false	Session expired	Text to show when the account has expired (is not authenticated).
clickable	Bool	false	true	Can the time be clicked (false will disable hover effects and pointer events)
hideAuthentication	Bool	false	false	Should the account tile authentication be hidden
user	Object	true	-	The ArcGIS user object.
orgName	String	false	-	Name of the user's organization.
userThumbnail	Shape	true	-	Object containing thumbnail url and fallback letters for the avatar. If url is falsy, the avatar will show letters instead.
orgThumbnail	Shape	false	-	Object containing thumbnail url and fallback letters for the avatar. If url is falsy, the avatar will show letters instead. If orgThumbnail or orgName are not given, no org avatar will be shown.

Calcite React

Account Tile

Import Syntax

Basic Usage

Not Clickable

Multiple Accounts

With the useAccountManager hook

Props

With the `useAccountManager` hook