@ciromaciel/auth-react 1.5.0 → 1.6.0

package/README.md

@@ -170,6 +170,29 @@ organization and on which plan, then one list of actions with "Sair" last.
   cites. `termsUrl` points it elsewhere, `termsUrl={null}` drops the link, and `branded={false}`
   removes the footer.
 
+### The account screen
+
+`<UserProfile />` is what "Conta" on the account card opens: the photo, the name and the email;
+the ways in; and the devices with an open session.
+
+```jsx
+<UserProfile opened={opened} onClose={close} />
+```
+
+- Every text defaults to Portuguese. `labels` changes a word (`labels={{ edit: 'Editar' }}`);
+  a panel does not need it to translate the screen.
+- Name and photo are edited in place: "Alterar" opens the field on the same row, Enter saves,
+  Esc cancels and leaves the screen open. The email does not change here, and says why: it is
+  where the sign-in code arrives.
+- "Formas de entrar" lists the emailed code, which always works, and the providers the
+  application enabled, with "Conectar" and "Desconectar". With none enabled, the group is not
+  drawn. `showSignInMethods={false}` hides it.
+- The sessions sit on one line ("2 sessões abertas", and which one is this device); a click
+  opens the list right below. The current device comes first and cannot be ended from here —
+  that is "Sair". "Encerrar as outras" asks before ending them.
+- Failures are shown on the screen, next to what failed. `onError` still receives the error,
+  with `{ section, isShownOnScreen: true }`; do not show it a second time.
+
 ## API
 
 ### Components
@@ -177,7 +200,7 @@ organization and on which plan, then one list of actions with "Sair" last.
 | Component                 | Description                                                  |
 | ------------------------- | ------------------------------------------------------------ |
 | `<SignIn />`              | The whole way in: asks for the email, then takes the code     |
-| `<UserProfile />`         | User profile management modal                                 |
+| `<UserProfile />`         | The account screen: profile, ways in, open sessions           |
 | `<UserInformation />`     | The account card: who, where, which plan, then the actions    |
 | `<SocialButtons />`       | Sign-in buttons for the providers the application enabled     |
 | `<AuthCard />`            | The card shell the screens are built on                       |