@ciromaciel/auth-react 1.4.1 → 1.6.0

package/README.md

@@ -151,7 +151,7 @@ organization and on which plan, then one list of actions with "Sair" last.
     onAccountClick={openAccount}
     onBillingClick={openBilling}
     items={[{ id: 'docs', label: 'Documentação', icon: IconFileText, onClick: openDocs }]}
-    plan={{ name: 'Pro', used: 3, limit: 9, unit: 'projetos', onClick: openPlans }}
+    plan={{ name: 'Pro', used: 8, limit: 9, unit: 'projetos', canUpgrade: true, onClick: openPlans }}
     organization={{ name: 'Acme', role: 'owner' }}
 />
 ```
@@ -162,10 +162,37 @@ organization and on which plan, then one list of actions with "Sair" last.
   own group after billing. The component takes no JSX, so every app's card keeps the same shape.
 - `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"
+  invite only when `canUpgrade` is `true` (there is a plan above this one) and usage is at 80%
+  of the limit or more. At the limit, the bar and the count turn red and "Limite atingido" appears on the badge's line.
+  `plan.onClick` is what the invite opens; `actionLabel` renames it.
 - The footer reads "Protegido por Auth" with a "Termos" link to the same terms the sign-in
   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
@@ -173,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                       |