@adonis-agora/authkit-react 0.12.0

package/build/src/components/authorized_apps.d.ts

@@ -0,0 +1,10 @@
+export interface AuthorizedAppsProps {
+    className?: string;
+    revokeLabel?: string;
+    emptyLabel?: string;
+}
+declare function AuthorizedAppsInner({ className, revokeLabel, emptyLabel, }: AuthorizedAppsProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+export declare function AuthorizedApps(props: Parameters<typeof AuthorizedAppsInner>[0]): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/src/components/authorized_apps.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement } from 'react';
+import { useAuthkitConfig } from '../config.js';
+import { useAuthorizedApps } from '../hooks/use_authorized_apps.js';
+function AuthorizedAppsInner({ className, revokeLabel = 'Revogar', emptyLabel = 'Nenhum app autorizado.', }) {
+    const { data, loading, error, actions } = useAuthorizedApps();
+    if (loading && !data) {
+        return createElement('div', { className: 'authkit-apps__loading' }, 'Carregando…');
+    }
+    if (error) {
+        return createElement('p', { className: 'authkit-error', role: 'alert' }, error.message);
+    }
+    const apps = data ?? [];
+    if (apps.length === 0) {
+        return createElement('p', { className: 'authkit-apps__empty' }, emptyLabel);
+    }
+    return createElement('ul', { className: ['authkit-apps', className].filter(Boolean).join(' ') }, ...apps.map((app) => createElement('li', { key: app.clientId, className: 'authkit-apps__item' }, createElement('div', { className: 'authkit-apps__info' }, app.logoUrl
+        ? createElement('img', {
+            className: 'authkit-apps__logo',
+            src: app.logoUrl,
+            alt: '',
+        })
+        : null, createElement('span', { className: 'authkit-apps__name' }, app.name ?? app.clientId)), createElement('button', {
+        type: 'button',
+        className: 'authkit-button authkit-button--danger',
+        onClick: () => void actions.revoke(app.clientId),
+    }, revokeLabel))));
+}
+export function AuthorizedApps(props) {
+    const { idp } = useAuthkitConfig();
+    if (idp === 'external')
+        return null;
+    return _jsx(AuthorizedAppsInner, { ...props });
+}

package/build/src/components/avatar.d.ts

@@ -0,0 +1,22 @@
+import type { AuthUser } from '../types.js';
+export interface AvatarProps {
+    user: Pick<AuthUser, 'name' | 'email' | 'avatarUrl'>;
+    size?: number;
+    className?: string;
+}
+export declare function Avatar({ user, size, className }: AvatarProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+    src: string;
+    alt: string;
+    style: {
+        width: number;
+        height: number;
+    };
+}, HTMLElement> | import("react").DetailedReactHTMLElement<{
+    className: string;
+    style: {
+        width: number;
+        height: number;
+    };
+    'aria-hidden': true;
+}, HTMLElement>;

package/build/src/components/avatar.js

@@ -0,0 +1,15 @@
+import { createElement } from 'react';
+import { deriveInitials } from '../utils.js';
+export function Avatar({ user, size = 36, className }) {
+    const cls = ['authkit-avatar', className].filter(Boolean).join(' ');
+    const style = { width: size, height: size };
+    if (user.avatarUrl) {
+        return createElement('img', {
+            className: cls,
+            src: user.avatarUrl,
+            alt: user.name ?? user.email ?? '',
+            style,
+        });
+    }
+    return createElement('span', { className: cls, style, 'aria-hidden': true }, deriveInitials(user.name, user.email));
+}

package/build/src/components/can.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+export interface CanProps {
+    children: ReactNode;
+    role?: string;
+    roles?: string[];
+    mode?: 'any' | 'all';
+    appRole?: boolean;
+    fallback?: ReactNode;
+}
+export declare function Can({ children, role, roles, mode, appRole, fallback, }: CanProps): import("react").FunctionComponentElement<import("react").FragmentProps>;

package/build/src/components/can.js

@@ -0,0 +1,19 @@
+import { createElement, Fragment } from 'react';
+import { useAuth } from '../use_auth.js';
+import { hasAllAppRoles, hasAllGlobalRoles, hasAnyAppRole, hasAnyGlobalRole, hasAppRole, hasGlobalRole, } from '../roles.js';
+export function Can({ children, role, roles, mode = 'any', appRole = false, fallback = null, }) {
+    const { user } = useAuth();
+    let allowed = false;
+    if (role !== undefined) {
+        allowed = appRole ? hasAppRole(user, role) : hasGlobalRole(user, role);
+    }
+    else if (roles !== undefined) {
+        if (appRole) {
+            allowed = mode === 'all' ? hasAllAppRoles(user, roles) : hasAnyAppRole(user, roles);
+        }
+        else {
+            allowed = mode === 'all' ? hasAllGlobalRoles(user, roles) : hasAnyGlobalRole(user, roles);
+        }
+    }
+    return createElement(Fragment, null, allowed ? children : fallback);
+}

package/build/src/components/key_rotation.d.ts

@@ -0,0 +1,8 @@
+export interface KeyRotationProps {
+    className?: string;
+}
+declare function KeyRotationInner({ className }: KeyRotationProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+export declare function KeyRotation(props: Parameters<typeof KeyRotationInner>[0]): import("react").FunctionComponentElement<KeyRotationProps>;
+export {};

package/build/src/components/key_rotation.js

@@ -0,0 +1,36 @@
+import { createElement, useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useKeysQueryOptions, useRotateKeysMutationOptions } from '../queries/admin/index.js';
+import { authkitKeys } from '../queries/keys.js';
+function KeyRotationInner({ className }) {
+    const qc = useQueryClient();
+    const status = useQuery(useKeysQueryOptions());
+    const rotate = useMutation({
+        ...useRotateKeysMutationOptions(),
+        onSuccess: () => qc.invalidateQueries({ queryKey: authkitKeys.admin.keys() }),
+    });
+    const [retire, setRetire] = useState(false);
+    if (status.isLoading && !status.data) {
+        return createElement('div', { className: 'authkit-keys__loading' }, 'Carregando…');
+    }
+    if (status.error) {
+        return createElement('p', { className: 'authkit-error', role: 'alert' }, status.error.message);
+    }
+    const data = status.data;
+    const p = data.policy;
+    return createElement('div', { className: ['authkit-card', 'authkit-keys', className].filter(Boolean).join(' ') }, createElement('h3', { className: 'authkit-keys__title' }, 'Chave de assinatura'), createElement('dl', { className: 'authkit-keys__stats' }, createElement('dt', null, 'Idade'), createElement('dd', null, `${data.ageDays} dia(s)`), createElement('dt', null, 'Rotação automática'), createElement('dd', null, p.enabled ? `a cada ${p.maxAgeDays}d (mantém ${p.keep})` : 'desligada'), createElement('dt', null, 'Próxima rotação'), createElement('dd', null, data.nextRotationInDays === null ? '—' : `em ~${data.nextRotationInDays} dia(s)`)), createElement('label', { className: 'authkit-keys__retire' }, createElement('input', {
+        type: 'checkbox',
+        checked: retire,
+        onChange: (e) => setRetire(e.target.checked),
+    }), ' Aposentar as chaves antigas de imediato'), rotate.error
+        ? createElement('p', { className: 'authkit-error', role: 'alert' }, rotate.error.message)
+        : null, createElement('button', {
+        type: 'button',
+        className: 'authkit-button authkit-button--primary',
+        disabled: rotate.isPending,
+        onClick: () => rotate.mutate(retire ? { retire: true } : undefined),
+    }, rotate.isPending ? 'Rotacionando…' : 'Rotacionar agora'));
+}
+export function KeyRotation(props) {
+    return createElement(KeyRotationInner, props);
+}

package/build/src/components/organization_profile.d.ts

@@ -0,0 +1,10 @@
+export interface OrganizationProfileProps {
+    inviteLabel?: string;
+    leaveLabel?: string;
+    className?: string;
+}
+declare function OrganizationProfileInner({ inviteLabel, leaveLabel, className, }: OrganizationProfileProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;
+export declare function OrganizationProfile(props: Parameters<typeof OrganizationProfileInner>[0]): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/src/components/organization_profile.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement, useState } from 'react';
+import { useOrganizations } from '../hooks/use_organizations.js';
+import { useOrganization } from '../hooks/use_organization.js';
+import { useAuth } from '../use_auth.js';
+import { useAuthkitConfig } from '../config.js';
+import { jsonRequest } from '../hooks/use_resource.js';
+function OrganizationProfileInner({ inviteLabel = 'Convidar membro', leaveLabel = 'Sair da organização', className, }) {
+    const { isAuthenticated } = useAuth();
+    const config = useAuthkitConfig();
+    const { activeOrgId, actions: orgListActions } = useOrganizations();
+    const { data: org, loading, error, actions } = useOrganization(activeOrgId);
+    const [inviteEmail, setInviteEmail] = useState('');
+    const [inviteRole, setInviteRole] = useState('member');
+    const [inviteLoading, setInviteLoading] = useState(false);
+    const [inviteError, setInviteError] = useState(null);
+    if (!isAuthenticated || !activeOrgId)
+        return null;
+    if (loading)
+        return createElement('div', { className: 'authkit-org-profile__loading' }, 'Carregando…');
+    if (error)
+        return createElement('div', { className: 'authkit-error' }, error.message);
+    if (!org)
+        return null;
+    const base = config.endpoints.orgs.replace('/json', '');
+    const handleInvite = async (e) => {
+        e.preventDefault();
+        if (!inviteEmail.trim())
+            return;
+        setInviteLoading(true);
+        setInviteError(null);
+        try {
+            await jsonRequest(`${base}/${encodeURIComponent(activeOrgId)}/invite`, {
+                method: 'POST',
+                body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole }),
+                csrfToken: config.csrfToken,
+            });
+            setInviteEmail('');
+            await actions.refetch();
+        }
+        catch (err) {
+            setInviteError(err);
+        }
+        finally {
+            setInviteLoading(false);
+        }
+    };
+    const handleLeave = async () => {
+        try {
+            await jsonRequest(`${base}/${encodeURIComponent(activeOrgId)}/leave`, {
+                method: 'POST',
+                csrfToken: config.csrfToken,
+            });
+            await orgListActions.refetch();
+        }
+        catch {
+        }
+    };
+    const memberList = createElement('div', { className: 'authkit-org-profile__members' }, createElement('h3', { className: 'authkit-org-profile__section-title' }, 'Membros'), ...(org.members.length === 0
+        ? [createElement('p', { className: 'authkit-org-profile__empty' }, 'Nenhum membro.')]
+        : org.members.map((m) => createElement('div', { key: m.accountId, className: 'authkit-org-profile__member' }, createElement('div', { className: 'authkit-org-profile__member-info' }, createElement('span', { className: 'authkit-org-profile__member-email' }, m.email ?? m.accountId), createElement('span', { className: 'authkit-org-profile__member-role' }, m.role))))));
+    const inviteForm = org.canManage
+        ? createElement('form', { className: 'authkit-org-profile__invite-form', onSubmit: handleInvite }, createElement('h3', { className: 'authkit-org-profile__section-title' }, inviteLabel), createElement('input', {
+            className: 'authkit-input',
+            type: 'email',
+            placeholder: 'Email',
+            value: inviteEmail,
+            onChange: (e) => setInviteEmail(e.target.value),
+        }), createElement('input', {
+            className: 'authkit-input',
+            placeholder: 'Papel (ex: member)',
+            value: inviteRole,
+            onChange: (e) => setInviteRole(e.target.value),
+        }), inviteError
+            ? createElement('p', { className: 'authkit-error', role: 'alert' }, inviteError.message)
+            : null, createElement('button', {
+            type: 'submit',
+            className: 'authkit-button authkit-button--primary',
+            disabled: inviteLoading,
+        }, inviteLoading ? 'Enviando…' : inviteLabel))
+        : null;
+    const leaveButton = createElement('button', {
+        type: 'button',
+        className: 'authkit-button authkit-button--danger',
+        onClick: handleLeave,
+    }, leaveLabel);
+    return createElement('div', { className: ['authkit-card', 'authkit-org-profile', className].filter(Boolean).join(' ') }, createElement('div', { className: 'authkit-org-profile__header' }, createElement('div', { className: 'authkit-org-profile__name' }, org.name), createElement('div', { className: 'authkit-org-profile__slug' }, org.slug)), memberList, inviteForm, leaveButton);
+}
+export function OrganizationProfile(props) {
+    const { idp } = useAuthkitConfig();
+    if (idp === 'external')
+        return null;
+    return _jsx(OrganizationProfileInner, { ...props });
+}

package/build/src/components/organization_switcher.d.ts

@@ -0,0 +1,9 @@
+export interface OrganizationSwitcherProps {
+    personalAccountLabel?: string;
+    className?: string;
+}
+declare function OrganizationSwitcherInner({ personalAccountLabel, className, }: OrganizationSwitcherProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;
+export declare function OrganizationSwitcher(props: Parameters<typeof OrganizationSwitcherInner>[0]): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/src/components/organization_switcher.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement, useState } from 'react';
+import { useAuthkitConfig } from '../config.js';
+import { useOrganizations } from '../hooks/use_organizations.js';
+import { useSwitchOrganization } from '../hooks/use_switch_organization.js';
+import { useAuth } from '../use_auth.js';
+function OrganizationSwitcherInner({ personalAccountLabel = 'Conta pessoal', className, }) {
+    const { isAuthenticated } = useAuth();
+    const { data: orgs, activeOrgId, supported } = useOrganizations();
+    const { activate, deactivate, loading: switching } = useSwitchOrganization();
+    const [open, setOpen] = useState(false);
+    if (!isAuthenticated || !supported)
+        return null;
+    const activeOrg = orgs?.find((o) => o.id === activeOrgId) ?? null;
+    const label = activeOrg ? activeOrg.name : personalAccountLabel;
+    const trigger = createElement('button', {
+        type: 'button',
+        className: 'authkit-orgswitcher__trigger',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': open,
+        disabled: switching,
+        onClick: () => setOpen((v) => !v),
+    }, createElement('span', { className: 'authkit-orgswitcher__label' }, label), createElement('span', { className: 'authkit-orgswitcher__chevron', 'aria-hidden': 'true' }, '▾'));
+    const menu = open
+        ? createElement('div', { className: 'authkit-orgswitcher__menu', role: 'listbox' }, createElement('button', {
+            type: 'button',
+            className: [
+                'authkit-orgswitcher__item',
+                !activeOrgId ? 'authkit-orgswitcher__item--active' : '',
+            ]
+                .filter(Boolean)
+                .join(' '),
+            role: 'option',
+            'aria-selected': !activeOrgId,
+            onClick: async () => {
+                setOpen(false);
+                if (activeOrgId)
+                    await deactivate();
+            },
+        }, createElement('span', { className: 'authkit-orgswitcher__item-name' }, personalAccountLabel)), ...(orgs ?? []).map((org) => createElement('button', {
+            key: org.id,
+            type: 'button',
+            className: [
+                'authkit-orgswitcher__item',
+                org.isActive ? 'authkit-orgswitcher__item--active' : '',
+            ]
+                .filter(Boolean)
+                .join(' '),
+            role: 'option',
+            'aria-selected': org.isActive,
+            onClick: async () => {
+                setOpen(false);
+                if (!org.isActive)
+                    await activate(org.id);
+            },
+        }, createElement('span', { className: 'authkit-orgswitcher__item-name' }, org.name), createElement('span', { className: 'authkit-orgswitcher__item-role' }, org.role))))
+        : null;
+    return createElement('div', { className: ['authkit-orgswitcher', className].filter(Boolean).join(' ') }, trigger, menu);
+}
+export function OrganizationSwitcher(props) {
+    const { idp } = useAuthkitConfig();
+    if (idp === 'external')
+        return null;
+    return _jsx(OrganizationSwitcherInner, { ...props });
+}

package/build/src/components/password_strength_meter.d.ts

@@ -0,0 +1,11 @@
+import { type PasswordScorer } from '../hooks/use_password_strength.js';
+export interface PasswordStrengthMeterProps {
+    password: string;
+    scorer?: PasswordScorer;
+    showFeedback?: boolean;
+    labels?: [string, string, string, string, string];
+    className?: string;
+}
+export declare function PasswordStrengthMeter({ password, scorer, showFeedback, labels, className, }: PasswordStrengthMeterProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;

package/build/src/components/password_strength_meter.js

@@ -0,0 +1,39 @@
+import { createElement } from 'react';
+import { usePasswordStrength, } from '../hooks/use_password_strength.js';
+const DEFAULT_LABELS = [
+    'Very weak',
+    'Weak',
+    'Fair',
+    'Good',
+    'Strong',
+];
+export function PasswordStrengthMeter({ password, scorer, showFeedback = true, labels = DEFAULT_LABELS, className, }) {
+    const { score, feedback } = usePasswordStrength(password, { scorer });
+    const cls = ['authkit-strength', className].filter(Boolean).join(' ');
+    const segments = [0, 1, 2, 3].map((i) => createElement('span', {
+        key: i,
+        className: [
+            'authkit-strength__segment',
+            i < score ? 'authkit-strength__segment--filled' : '',
+        ]
+            .filter(Boolean)
+            .join(' '),
+    }));
+    const children = [
+        createElement('div', {
+            key: 'bar',
+            className: 'authkit-strength__bar',
+            role: 'meter',
+            'aria-valuemin': 0,
+            'aria-valuemax': 4,
+            'aria-valuenow': score,
+            'aria-label': labels[score],
+            'data-score': score,
+        }, segments),
+        createElement('span', { key: 'label', className: 'authkit-strength__label' }, labels[score]),
+    ];
+    if (showFeedback && feedback && feedback.length > 0) {
+        children.push(createElement('ul', { key: 'feedback', className: 'authkit-strength__feedback' }, feedback.map((tip, i) => createElement('li', { key: i }, tip))));
+    }
+    return createElement('div', { className: cls }, children);
+}