1- import { AdminPortal , ChangePasswordForm , EditEmailForm , InviteUserDialog , ProfilePage , useAuth , useInviteUserDialog , UsersTable , useUsersTable } from '@frontegg/nextjs' ;
1+ import {
2+ AdminPortal ,
3+ ChangePasswordForm ,
4+ EditEmailForm ,
5+ InviteUserDialog ,
6+ ProfilePage ,
7+ useAuth ,
8+ useInviteUserDialog ,
9+ UsersTable ,
10+ useUsersTable ,
11+ } from '@frontegg/nextjs' ;
212import Link from 'next/link' ;
313import { AppHolder } from '@frontegg/js/AppHolder' ;
414import { useEffect , useState } from 'react' ;
515import Loader from '../components/loader' ;
616import Testing from '../components/Testing' ;
717
8-
918export default function SsgPage1 ( ) {
1019 const { user, isAuthenticated, isLoading } = useAuth ( ) ;
1120
1221 // get the frontegg app instance // import { AppHolder } from '@frontegg/js/AppHolder';
13- const app = AppHolder . getInstance ( 'default' )
22+ const app = AppHolder . getInstance ( 'default' ) ;
1423 const [ appLoading , setLoading ] = useState ( app . loading ) ;
1524
16- const { openDialog : openInviteUserDialog , } = useInviteUserDialog ( ) ;
17- const { onSearch, } = useUsersTable ( ) ;
25+ const { openDialog : openInviteUserDialog } = useInviteUserDialog ( ) ;
26+ const { onSearch } = useUsersTable ( ) ;
1827 // console.log({ appLoading, isLoading, isAuthenticated, app })
1928 useEffect ( ( ) => {
2029 // single time load listener that trigger when the login-box cdn js files is loaded
2130 app . addOnLoadedListener ( ( ) => {
2231 console . log ( 'App loaded' ) ;
23- setLoading ( false )
24- } )
25- } , [ app ] )
26-
32+ setLoading ( false ) ;
33+ } ) ;
34+ } , [ app ] ) ;
2735
2836 // detect SSG build time and render content as should be with optional user object
2937 // this is important to avoid the loader to be pre-rendered in all in SSG pages
30- const isBuildTime = process . env . NEXT_PHASE == 'phase-production-build'
38+ const isBuildTime = process . env . NEXT_PHASE == 'phase-production-build' ;
3139
3240 // check if the app is loading
3341 if ( ! isBuildTime && ( isLoading || appLoading ) ) {
34- return < >
35- < Loader />
36- </ >
42+ return (
43+ < >
44+ < Loader />
45+ </ >
46+ ) ;
3747 } else {
3848 console . log ( 'Loaded' , { user, isAuthenticated } ) ;
3949 }
4050
41-
4251 /**
4352 * refreshingToken is true when the token is being refreshed.
4453 * this will be added to the useAuth hook in the next release.
@@ -52,49 +61,62 @@ export default function SsgPage1() {
5261 < div style = { { background : '#c2f2f8' , padding : '16px' , minHeight : '100vh' } } >
5362 < div style = { { display : 'flex' , flexDirection : 'column' , gap : '16px' } } >
5463 components examples
55-
56- < button onClick = { ( ) => {
57- openInviteUserDialog ( )
58- } } > Open invite user dialog</ button >
59-
60- < input type = "text" onChange = { ( e ) => {
61- onSearch ( e . target . value )
62- } } />
64+ < button
65+ onClick = { ( ) => {
66+ openInviteUserDialog ( ) ;
67+ } }
68+ >
69+ Open invite user dialog
70+ </ button >
71+ < input
72+ type = 'text'
73+ onChange = { ( e ) => {
74+ onSearch ( e . target . value ) ;
75+ } }
76+ />
6377 < div style = { { display : 'flex' , flexDirection : 'column' , gap : '16px' } } >
64- < UsersTable props = { { } } themeOptions = { {
65- adminPortal : {
66- components : {
67- MuiTableCell : {
68- styleOverrides : {
69- head : {
70- background : 'lightgreen' ,
71- border : '1px solid red' ,
72- } ,
73- body : {
74- background : 'pink' ,
75- border : '1px solid red' ,
78+ < UsersTable
79+ props = { { } }
80+ themeOptions = { {
81+ adminPortal : {
82+ components : {
83+ MuiTableCell : {
84+ styleOverrides : {
85+ head : {
86+ background : 'lightgreen' ,
87+ border : '1px solid red' ,
88+ } ,
89+ body : {
90+ background : 'pink' ,
91+ border : '1px solid red' ,
92+ } ,
7693 } ,
7794 } ,
7895 } ,
7996 } ,
80- }
81- } } hostStyle = { { width : '100%' , height : '450px' , marginBottom : '50px' } } />
82- < ProfilePage props = { { } } hostStyle = { { width : '100%' , height : '350px' , marginBottom : '50px' } } />
97+ } }
98+ hostStyle = { { width : '100%' , height : '450px' , marginBottom : '50px' } }
99+ />
100+ < ProfilePage
101+ props = { { } }
102+ containerStyle = { { border : '1px solid red' } }
103+ hostStyle = { { width : '100%' , height : '350px' , marginBottom : '50px' } }
104+ />
83105 < ChangePasswordForm props = { { } } hostStyle = { { width : '100%' , height : '150px' , marginBottom : '50px' } } />
84106 < InviteUserDialog props = { { } } hostStyle = { { width : '100%' , height : '0px' , marginBottom : '50px' } } />
85- < EditEmailForm props = { { } } hostStyle = { { width : '100%' , height : '350px' , margin : '50px 0 '} } />
107+ < EditEmailForm props = { { } } containerStyle = { { border : '1px solid blue ' } } />
86108 </ div >
87109 </ div >
88110 < Testing />
89111 < h1 style = { { marginBottom : '32px' } } > SSG Page 1</ h1 >
90112 { user ? < div > Logged in as: { user . email } </ div > : < div > SSG not authorized</ div > }
91113 < br />
92114 < br />
93- < Link href = " /ssg-page-2" >
115+ < Link href = ' /ssg-page-2' >
94116 < button > Go to SSG page 2</ button >
95117 </ Link >
96118 < br />
97- < Link href = "/" >
119+ < Link href = '/' >
98120 < button > Go home page (SSR)</ button >
99121 </ Link >
100122 < br />
0 commit comments