<np-logout>

A button component for logging out the authenticated user.

Properties

Name	Format	required	default	Description
state	State	no	undefined	The component’s internal state.

enum State {
  LOGGINGOUT = "loggingout", // revoking session
  LOGGEDOUT = "loggedout", // session is revoked
  ERROR = "error", // something went wrong
}

Methods

Name	Description
logout()	End the current session.

Custom Events

Name	Description	Type
np:logout	The session is closed.	void
np:error	Something went wrong.	NoPwdError

The np:error custom event detail inherites from the NoPwdError.

if (event.detail instanceof NetworkError) {
  // no network
}

if (event.detail instanceof UnexpectedError) {
  // Something went wrong
}

Slots

Name	Description
(default)	The button’s label.
loggingout	closing the session.
loggedout	Session is closed.
error	An error occured.

Usage:

<!-- To override the default slot-->
<np-logout></np-logout>

<!-- to override specific slots-->
<np-logout>
  Logout
  <span slot="loggingout">please wait</span>
  <span slot="loggedout">Bye!</span>
  <span slot="error">Oooooops</span>
</np-logout>

Parts

Name	Description
button	The component’s button wrapper.

Usage:

/* to target only the default state  */
np-logout:not([state])::part(button) {
  background-color: black;
  color: white;
}

np-logout[state="loggingout"]::part(button) {
  background-color: transparent;
  color: grey;
}

np-logout[state="loggedout"]::part(button) {
  background-color: green;
  color: white;
}

np-logout[state="error"]::part(button) {
  background-color: red;
  color: white;
}