Skip to content

Commit f5d3f6e

Browse files
rax7389rax7389
committed
feat(react, examples): add invitation hook, container, and example apps
1 parent 3fef17b commit f5d3f6e

18 files changed

Lines changed: 977 additions & 3 deletions

File tree

‎examples/next-rwa/src/app/member-management/page.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
'use client';
2+
3+
// import { OrganizationMemberManagement } from '@auth0/universal-components-react/rwa';
4+
5+
export default function MemberManagementPage() {
6+
return (
7+
<div className="p-6 pt-8 space-y-6">
8+
<p className="text-primary">
9+
Follow{' '}
10+
<a
11+
href="https://github.com/auth0/auth0-ui-components/tree/main/examples/next-rwa#adding-a-universal-component-to-your-app"
12+
target="_blank"
13+
>
14+
<u>Quickstart guidance</u>
15+
</a>{' '}
16+
on how to add Member Management component.
17+
</p>
18+
{/* <OrganizationMemberManagement /> */}
19+
</div>
20+
);
21+
}

‎examples/next-rwa/src/components/navigation/side-bar.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { useUser } from '@auth0/nextjs-auth0';
4-
import { Building, Settings, Shield, User } from 'lucide-react';
4+
import { Building, Settings, Shield, User, Users } from 'lucide-react';
55
import Link from 'next/link';
66
import React from 'react';
77
import { useTranslation } from 'react-i18next';
@@ -74,6 +74,15 @@ export const Sidebar: React.FC = () => {
7474
<span className="truncate">{t('sidebar.identity-providers')}</span>
7575
</Link>
7676
</li>
77+
<li>
78+
<Link
79+
href="/member-management"
80+
className="flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800 transition-colors"
81+
>
82+
<Users className="h-4 w-4 flex-shrink-0" />
83+
<span className="truncate">{t('sidebar.members')}</span>
84+
</Link>
85+
</li>
7786
</ul>
7887
</div>
7988
</div>

‎examples/next-rwa/src/providers/i18n-provider.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ i18n.use(initReactI18next).init({
2626
'sidebar.organization-settings': 'Organization Settings',
2727
'sidebar.domains': 'Domains',
2828
'sidebar.identity-providers': 'Identity Providers',
29+
'sidebar.members': 'Members',
2930
},
3031
},
3132
},

‎examples/react-spa-npm/src/App.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Navbar } from './components/nav-bar';
88
import { Sidebar } from './components/side-bar';
99
import DomainManagementPage from './views/domain-management-page';
1010
import HomePage from './views/home-page';
11+
import MemberManagementPage from './views/member-management-page';
1112
import MFAPage from './views/mfa-page';
1213
import OrganizationManagementPage from './views/organization-management-page';
1314
import ProfilePage from './views/profile-page';
@@ -101,6 +102,14 @@ function AppContent() {
101102
</ProtectedRoute>
102103
}
103104
/>
105+
<Route
106+
path="/member-management"
107+
element={
108+
<ProtectedRoute>
109+
<MemberManagementPage />
110+
</ProtectedRoute>
111+
}
112+
/>
104113
</Routes>
105114
</main>
106115
</div>

‎examples/react-spa-npm/src/components/side-bar.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { User, Building, Settings, Shield } from 'lucide-react';
1+
import { User, Building, Settings, Shield, Users } from 'lucide-react';
22
import React from 'react';
33
import { useTranslation } from 'react-i18next';
44
import { Link } from 'react-router-dom';
@@ -70,6 +70,15 @@ export const Sidebar: React.FC = () => {
7070
<span className="truncate">{t('sidebar.domain-management')}</span>
7171
</Link>
7272
</li>
73+
<li>
74+
<Link
75+
to="/member-management"
76+
className="flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-accent/90 rounded-md dark:text-gray-300 dark:hover:text-white transition-colors cursor-default"
77+
>
78+
<Users className="h-4 w-4 flex-shrink-0" />
79+
<span className="truncate">{t('sidebar.member-management')}</span>
80+
</Link>
81+
</li>
7382
</ul>
7483
</div>
7584
</div>

‎examples/react-spa-npm/src/views/member-management-page.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// import { OrganizationMemberManagement } from '@auth0/universal-components-react/spa';
2+
3+
const MemberManagementPage = () => {
4+
return (
5+
<div className="p-6 pt-8 space-y-6">
6+
<p className="text-primary">
7+
Follow{' '}
8+
<a
9+
href="https://github.com/auth0/auth0-ui-components/tree/main/examples/react-spa-npm#adding-a-universal-component-to-your-app"
10+
target="_blank"
11+
>
12+
<u>Quickstart guidance</u>
13+
</a>{' '}
14+
on how to add Member Management component.
15+
</p>
16+
{/* <OrganizationMemberManagement /> */}
17+
</div>
18+
);
19+
};
20+
21+
export default MemberManagementPage;

‎examples/react-spa-shadcn/src/App.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Sidebar } from './components/side-bar';
1010
import { config } from './config/env';
1111
// import { useDarkMode } from './hooks/use-dark-mode';
1212
import DomainManagement from './pages/DomainManagement';
13+
import MemberManagement from './pages/MemberManagement';
1314
import IdentityProviderManagement from './pages/IdentityProviderManagement';
1415
import IdentityProviderManagementCreate from './pages/IdentityProviderManagementCreate';
1516
import IdentityProviderManagementEdit from './pages/IdentityProviderManagementEdit';
@@ -136,6 +137,14 @@ const App = () => {
136137
</ProtectedRoute>
137138
}
138139
/>
140+
<Route
141+
path="/member-management"
142+
element={
143+
<ProtectedRoute>
144+
<MemberManagement />
145+
</ProtectedRoute>
146+
}
147+
/>
139148
</Routes>
140149
</AppLayout>
141150
{/* </Auth0ComponentProvider> */}

‎examples/react-spa-shadcn/src/components/side-bar.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { User, Building, Shield, Settings } from 'lucide-react';
1+
import { User, Building, Shield, Settings, Users } from 'lucide-react';
22
import React from 'react';
33
import { useTranslation } from 'react-i18next';
44
import { Link } from 'react-router-dom';
@@ -70,6 +70,15 @@ export const Sidebar: React.FC = () => {
7070
<span className="truncate">{t('sidebar.domain-management')}</span>
7171
</Link>
7272
</li>
73+
<li>
74+
<Link
75+
to="/member-management"
76+
className="flex items-center gap-3 px-3 py-2 text-sm text-primary hover:bg-accent/60 rounded-md transition-colors cursor-default"
77+
>
78+
<Users className="h-4 w-4 flex-shrink-0" />
79+
<span className="truncate">{t('sidebar.member-management')}</span>
80+
</Link>
81+
</li>
7382
</ul>
7483
</div>
7584
</div>

‎examples/react-spa-shadcn/src/pages/MemberManagement.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// import { OrganizationMemberManagement } from '@auth0/universal-components-react/spa';
2+
3+
const MemberManagement = () => {
4+
return (
5+
<div className="p-6">
6+
<p className="text-primary">
7+
Follow{' '}
8+
<a
9+
href="https://github.com/auth0/auth0-ui-components/tree/main/examples/react-spa-shadcn#adding-a-universal-component-with-shadcn"
10+
target="_blank"
11+
>
12+
<u>Quickstart guidance</u>
13+
</a>{' '}
14+
on how to add Member Management component.
15+
</p>
16+
<div className="bg-background rounded-lg shadow p-6">
17+
{/* <OrganizationMemberManagement /> */}
18+
</div>
19+
</div>
20+
);
21+
};
22+
23+
export default MemberManagement;

‎examples/scripts/utils/env-writer.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ const MYORG_SCOPES = [
7272
"delete:my_org:domains",
7373
"create:my_org:domains",
7474
"update:my_org:domains",
75+
"read:my_org:member_invitations",
76+
"delete:my_org:member_invitations"
7577
]
7678

7779
// My Account API scopes

0 commit comments

Comments
 (0)