Refactor frontend authentication a little bit

frontend/src/App.tsx

@@ -1,6 +1,5 @@
 import { ApplicationInsights } from '@microsoft/applicationinsights-web'
 import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react'
-import { LoginPage } from 'pages/LoginPage/LoginPage'
 import { FlotillaSite } from 'pages/FlotillaSite'
 import { LanguageProvider } from 'components/Contexts/LanguageContext'
 import { MissionControlProvider } from 'components/Contexts/MissionControlContext'
@@ -30,34 +29,30 @@ export const queryClient = new QueryClient()
 
 const App = () => (
     <AuthProvider>
-        <LanguageProvider>
-            <SignalRProvider>
-                <QueryClientProvider client={queryClient}>
-                    <AssetProvider>
-                        <InspectionsProvider>
-                            <MissionDefinitionsProvider>
-                                <MissionRunsProvider>
-                                    <AlertProvider>
-                                        <MissionControlProvider>
-                                            <UnauthenticatedTemplate>
-                                                <div className="sign-in-page">
-                                                    <LoginPage />
-                                                </div>
-                                            </UnauthenticatedTemplate>
-                                            <AuthenticatedTemplate>
+        <UnauthenticatedTemplate />
+        <AuthenticatedTemplate>
+            <LanguageProvider>
+                <SignalRProvider>
+                    <QueryClientProvider client={queryClient}>
+                        <AssetProvider>
+                            <InspectionsProvider>
+                                <MissionDefinitionsProvider>
+                                    <MissionRunsProvider>
+                                        <AlertProvider>
+                                            <MissionControlProvider>
                                                 <MediaStreamProvider>
                                                     <FlotillaSite />
                                                 </MediaStreamProvider>
-                                            </AuthenticatedTemplate>
-                                        </MissionControlProvider>
-                                    </AlertProvider>
-                                </MissionRunsProvider>
-                            </MissionDefinitionsProvider>
-                        </InspectionsProvider>
-                    </AssetProvider>
-                </QueryClientProvider>
-            </SignalRProvider>
-        </LanguageProvider>
+                                            </MissionControlProvider>
+                                        </AlertProvider>
+                                    </MissionRunsProvider>
+                                </MissionDefinitionsProvider>
+                            </InspectionsProvider>
+                        </AssetProvider>
+                    </QueryClientProvider>
+                </SignalRProvider>
+            </LanguageProvider>
+        </AuthenticatedTemplate>
     </AuthProvider>
 )
 

frontend/src/components/Contexts/AssetContext.tsx

@@ -22,7 +22,6 @@ interface Props {
 }
 
 interface IAssetContext {
-    isLoading: boolean
     enabledRobots: RobotWithoutTelemetry[]
     installationCode: string
     installationName: string
@@ -33,7 +32,6 @@ interface IAssetContext {
 }
 
 const defaultAssetState = {
-    isLoading: true,
     enabledRobots: [],
     installationCode: '',
     installationName: '',
@@ -50,7 +48,6 @@ export const AssetProvider: FC<Props> = ({ children }) => {
     const [activeInstallations, setActiveInstallations] = useState<Installation[]>([])
     const [selectedInstallation, setSelectedInstallation] = useState<Installation | undefined>(undefined)
     const [installationInspectionAreas, setInstallationInspectionAreas] = useState<InspectionArea[]>([])
-    const [isLoading, setIsLoading] = useState<boolean>(true)
 
     const { registerEvent, connectionReady, resetConnection } = useSignalRContext()
     const { TranslateText } = useLanguageContext()
@@ -127,7 +124,6 @@ export const AssetProvider: FC<Props> = ({ children }) => {
                 .getEnabledRobots()
                 .then((robots) => {
                     setEnabledRobots(robots)
-                    setIsLoading(false)
                 })
                 .catch(() => {
                     setAlert(
@@ -251,7 +247,6 @@ export const AssetProvider: FC<Props> = ({ children }) => {
     return (
         <AssetContext.Provider
             value={{
-                isLoading,
                 enabledRobots: filteredRobots,
                 installationCode,
                 installationName,

frontend/src/components/Contexts/AuthProvider.tsx

@@ -1,5 +1,6 @@
 import { useMsal } from '@azure/msal-react'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
+import { InteractionStatus } from '@azure/msal-browser'
 import { loginRequest } from 'api/AuthConfig'
 import { AuthContext } from './AuthContext'
 import { InteractionRequiredAuthError } from '@azure/msal-browser'
@@ -44,6 +45,14 @@ export const AuthProvider = ({ children }: Props) => {
         }
     }, [accounts, inProgress, instance])
 
+    useEffect(() => {
+        if (accounts.length > 0 || instance.getActiveAccount()) return
+
+        if (inProgress !== InteractionStatus.None) return
+
+        instance.loginRedirect(loginRequest)
+    }, [accounts.length, inProgress, instance])
+
     const value = useMemo(() => ({ getAccessToken, isAuthenticated }), [getAccessToken, isAuthenticated])
 
     return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>

frontend/src/pages/FlotillaSite.tsx

@@ -15,11 +15,10 @@ import { MissionDefinitionPageRouter, MissionPageRouter, RobotPageRouter, Simple
 import { PageNotFound } from './NotFoundPage'
 import { useAssetContext } from 'components/Contexts/AssetContext'
 import { DataViewPage } from './MissionHistory/DataViewPage'
-import { PageLoading } from './LoadingPage'
 
 export const FlotillaSite = () => {
     const frontPageTabOptions = Object.values(TabNames)
-    const { isLoading, installationCode } = useAssetContext()
+    const { installationCode } = useAssetContext()
 
     const installationCodePath = `${config.FRONTEND_BASE_ROUTE}/${installationCode}`
 
@@ -60,7 +59,7 @@ export const FlotillaSite = () => {
                     {installationCode ? installationSpecificPages : <></>}
 
                     <Route path={`${config.FRONTEND_BASE_ROUTE}/info`} element={<InfoPage />} />
-                    <Route path="*" element={isLoading ? <PageLoading /> : <PageNotFound />} />
+                    <Route path="*" element={<PageNotFound />} />
                 </Routes>
             </BrowserRouter>
         </>