diff --git a/frontend/app/PublicRoutes.tsx b/frontend/app/PublicRoutes.tsx index 1173fcd80..1e1cee516 100644 --- a/frontend/app/PublicRoutes.tsx +++ b/frontend/app/PublicRoutes.tsx @@ -19,14 +19,14 @@ const Spot = lazy(() => import('Components/Spots/SpotPlayer/SpotPlayer')); function PublicRoutes() { const { userStore } = useStore(); - const authDetails = userStore.authDetails; + const authDetails = userStore.authStore.authDetails; const isEnterprise = userStore.isEnterprise; const hideSupport = isEnterprise || location.pathname.includes('spots') || location.pathname.includes('view-spot'); const [loading, setLoading] = React.useState(true); useEffect(() => { if (authDetails && !authDetails.tenants) { - userStore.fetchTenants().then(() => setLoading(false)); + userStore.authStore.fetchTenants().then(() => setLoading(false)); } else { setLoading(false); } diff --git a/frontend/app/components/Login/Login.tsx b/frontend/app/components/Login/Login.tsx index d272fbbe9..990e771e9 100644 --- a/frontend/app/components/Login/Login.tsx +++ b/frontend/app/components/Login/Login.tsx @@ -35,9 +35,8 @@ const Login = ({ const { loginStore, userStore } = useStore(); const errors = userStore.loginRequest.errors; const loading = loginStore.loading; - const authDetails = userStore.authDetails; + const authDetails = userStore.authStore.authDetails; const setJwt = userStore.updateJwt; - const fetchTenants = userStore.fetchTenants; const history = useHistory(); const params = new URLSearchParams(location.search); diff --git a/frontend/app/components/Signup/Signup.tsx b/frontend/app/components/Signup/Signup.tsx index 442a056ad..b5538cc10 100644 --- a/frontend/app/components/Signup/Signup.tsx +++ b/frontend/app/components/Signup/Signup.tsx @@ -26,7 +26,7 @@ type SignupProps = RouteComponentProps; const Signup: React.FC = ({ history }) => { const { userStore } = useStore(); - const authDetails = userStore.authDetails; + const authDetails = userStore.authStore.authDetails; const [healthModalPassed, setHealthModalPassed] = useState(localStorage.getItem(healthStatusCheck_key) === 'true'); const [healthStatusLoading, setHealthStatusLoading] = useState(true); const [healthStatus, setHealthStatus] = useState(null); diff --git a/frontend/app/mstore/index.tsx b/frontend/app/mstore/index.tsx index 01b0e9011..d3db1e304 100644 --- a/frontend/app/mstore/index.tsx +++ b/frontend/app/mstore/index.tsx @@ -168,4 +168,4 @@ export const withStore = (Component: any) => (props: any) => { return ; }; -export { userStore, sessionStore, searchStore, searchStoreLive, projectStore, client }; \ No newline at end of file +export { userStore, sessionStore, searchStore, searchStoreLive, projectStore, client }; diff --git a/frontend/app/mstore/userStore.ts b/frontend/app/mstore/userStore.ts index fb0906d7f..d6499b857 100644 --- a/frontend/app/mstore/userStore.ts +++ b/frontend/app/mstore/userStore.ts @@ -27,7 +27,6 @@ class UserStore { passwordRequestError: boolean = false; passwordErrors: string[] = []; tenants: any[] = []; - authDetails: Record = {}; onboarding: boolean = false; sites: any[] = []; jwt: string | null = null; @@ -50,10 +49,12 @@ class UserStore { errors: [] as string[], }; scopeState: number | null = null; - client = new Client(); + client = new Client() + authStore: AuthStore; - constructor() { + constructor(authStore: AuthStore) { makeAutoObservable(this); + this.authStore = authStore; void makePersistable( this, @@ -65,7 +66,6 @@ class UserStore { 'jwt', 'spotJwt', 'scopeState', - 'authDetails', 'onboarding', { key: 'account', @@ -76,15 +76,6 @@ class UserStore { return new Account(JSON.parse(json)); }, }, - { - key: 'authDetails', - serialize: (ad) => { - return Object.keys(ad).length > 0 ? JSON.stringify(ad) : JSON.stringify({}); - }, - deserialize: (json) => { - return JSON.parse(json) - }, - }, ], storage: window.localStorage, }, @@ -98,7 +89,7 @@ class UserStore { return ( this.account?.edition === 'ee' || this.account?.edition === 'msaas' || - this.authDetails?.edition === 'ee' + this.authStore.authDetails?.edition === 'ee' ); } @@ -446,17 +437,6 @@ class UserStore { } }; - fetchTenants = async () => { - try { - const response = await userService.fetchTenants(); - runInAction(() => { - this.authDetails = response; - }); - } catch (error) { - // TODO error handling - } - }; - fetchUserInfo = async () => { runInAction(() => { this.fetchInfoRequest = { loading: true, errors: [] }; @@ -603,7 +583,6 @@ class UserStore { this.passwordRequestError = false; this.passwordErrors = []; this.tenants = []; - this.authDetails = {}; this.onboarding = false; this.sites = []; this.jwt = null; @@ -628,6 +607,60 @@ class UserStore { }; } -const userStore = new UserStore(); +type AuthDetails = { + tenants: boolean; + sso: string | null; + ssoProvider: string | null; + enforceSSO: boolean | null; + edition: 'foss' | 'ee' | 'msaas'; +}; + +class AuthStore { + authDetails: AuthDetails = { + tenants: false, + sso: null, + ssoProvider: null, + enforceSSO: null, + edition: 'foss', + }; + + constructor() { + makeAutoObservable(this); + + void makePersistable(this, { + name: 'AuthStore', + properties: [ + 'authDetails', + { + key: 'authDetails', + serialize: (ad) => { + return Object.keys(ad).length > 0 ? JSON.stringify(ad) : JSON.stringify({}); + }, + deserialize: (json) => { + return JSON.parse(json) + }, + }, + ], + expireIn: 60000 * 60, + removeOnExpiration: true, + storage: window.localStorage, + }); + } + + fetchTenants = async () => { + try { + const response = await userService.fetchTenants(); + runInAction(() => { + this.authDetails = response; + }); + } catch (error) { + // TODO error handling + } + }; +} + + +export const authStore = new AuthStore(); +const userStore = new UserStore(authStore); export default userStore;