@ciromaciel/auth-react 1.5.0 → 1.7.0

package/README.md

@@ -160,6 +160,16 @@ organization and on which plan, then one list of actions with "Sair" last.
   thing.
 - `items` are your app's own rows, passed as data (`{ id, label, icon, onClick }`), shown in their
   own group after billing. The component takes no JSX, so every app's card keeps the same shape.
+  A row may add `description` (one line saying what it does) and `tone: 'danger'` (red, for what
+  cannot be undone); `itemsLabel` titles the group:
+
+  ```jsx
+  itemsLabel="Seus dados"
+  items={[
+      { id: 'export', label: 'Exportar', description: 'Uma cópia de tudo, em JSON', icon: IconDownload, onClick: exportAll },
+      { id: 'erase', label: 'Apagar tudo', description: 'Sem volta', tone: 'danger', icon: IconTrash, onClick: eraseAll },
+  ]}
+  ```
 - `plan` and `organization` draw the context strip; leave them out and it is not drawn.
   `limit: null` hides the usage bar.
 - The strip informs; "Assinatura" is the way to billing. The strip adds a "Fazer upgrade"
@@ -170,6 +180,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 +210,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                       |