<np-logout>

Description
Overview

A button component to log out an authenticated user.

Properties

Name	Type	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`	Ends 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 inherits from the NoPwdError.

Slots

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

Usage:

<!-- Override the default slot -->
<np-logout></np-logout>

<!-- Override specific slots -->
<np-logout>
  Logout
  <span slot="loggingout">Please wait</span>
  <span slot="loggedout">Bye!</span>
  <span slot="error">Oops</span>
</np-logout>

Parts

Name	Description
`button`	The component’s button wrapper.

Usage:

/* 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;
}