Experiment use login api

config/start.config.js

@@ -15,6 +15,7 @@ module.exports = webpackBase({
   DEV_PROXY: {
     '/api/': proxyTarget,
     '/assets/': proxyTarget,
+    '/auth/': proxyTarget,
     '/extensions/': proxyTarget,
     '/pulp/': proxyTarget,
     '/static/rest_framework/': proxyTarget,

src/api/base.ts

@@ -8,9 +8,11 @@ export class BaseAPI {
 
   constructor() {
     this.http = axios.create({
-      // adapter + withCredentials ensures no popup on http basic auth fail
       adapter: 'fetch',
-      withCredentials: false,
+      // Allow session cookie to be used.
+      withCredentials: true,
+      // Don't let the browser ask for username/password.
+      headers: { 'X-Request-With': 'XMLHttpRequest' },
 
       // baseURL gets set in PulpAPI
       paramsSerializer: {

src/api/pulp.ts

@@ -10,14 +10,6 @@ export class PulpAPI extends BaseAPI {
     super();
 
     this.http.interceptors.request.use((request) => {
-      if (!request.auth) {
-        request.auth = JSON.parse(
-          window.sessionStorage.credentials ||
-            window.localStorage.credentials ||
-            '{}',
-        );
-      }
-
       request.baseURL = config.API_BASE_PATH;
       request.headers['X-CSRFToken'] = Cookies.get('csrftoken');
 

src/app-context.tsx

@@ -1,23 +1,30 @@
 import { type ReactNode, createContext, useContext, useState } from 'react';
 import { type AlertType } from 'src/components';
-import { useUserContext } from './user-context';
 
+export interface IUser {
+  username?: string;
+}
 export interface IAppContextType {
   alerts: AlertType[];
   featureFlags; // deprecated
   hasPermission: (name: string) => boolean;
   queueAlert: (alert: AlertType) => void;
   setAlerts: (alerts: AlertType[]) => void;
   settings; // deprecated
-  user; // deprecated
+  user: IUser;
 }
 
 export const AppContext = createContext<IAppContextType>(undefined);
 export const useAppContext = () => useContext(AppContext);
 
-export const AppContextProvider = ({ children }: { children: ReactNode }) => {
+export const AppContextProvider = ({
+  user,
+  children,
+}: {
+  user: IUser;
+  children: ReactNode;
+}) => {
   const [alerts, setAlerts] = useState<AlertType[]>([]);
-  const { credentials } = useUserContext();
 
   // hub compat for now
   const featureFlags = {
@@ -49,14 +56,7 @@ export const AppContextProvider = ({ children }: { children: ReactNode }) => {
         queueAlert,
         setAlerts,
         settings,
-        // FIXME: hack
-        user: credentials
-          ? {
-              username: credentials.username,
-              groups: [],
-              model_permissions: {},
-            }
-          : null,
+        user,
       }}
     >
       {children}

src/app-routes.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/react/macro';
 import { Banner, Flex, FlexItem } from '@patternfly/react-core';
 import WrenchIcon from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
 import { type ElementType } from 'react';
-import { Navigate, useLocation } from 'react-router';
+import { Navigate, redirect, useLocation } from 'react-router';
 import { ErrorBoundary, ExternalLink, NotFound } from 'src/components';
 import {
   AboutProject,
@@ -31,7 +31,6 @@ import {
   ExecutionEnvironmentRegistryList,
   GroupDetail,
   GroupList,
-  LoginPage,
   MultiSearch,
   MyImports,
   MyNamespaces,
@@ -50,11 +49,10 @@ import {
   UserList,
   UserProfile,
 } from 'src/containers';
-import { StandaloneLayout } from 'src/layout';
 import { Paths, formatPath } from 'src/paths';
 import { config } from 'src/ui-config';
 import { loginURL } from 'src/utilities';
-import { useUserContext } from './user-context';
+import { useAppContext } from './app-context';
 
 interface IRouteConfig {
   beta?: boolean;
@@ -211,12 +209,6 @@ const routes: IRouteConfig[] = [
     path: Paths.ansible.namespace.mine,
     beta: true,
   },
-  {
-    component: LoginPage,
-    path: Paths.meta.login,
-    noAuth: true,
-    beta: true,
-  },
   {
     component: CollectionDocs,
     path: Paths.ansible.collection.docs_page,
@@ -301,10 +293,10 @@ const AuthHandler = ({
   noAuth,
   path,
 }: IRouteConfig) => {
-  const { credentials } = useUserContext();
+  const { user } = useAppContext();
   const { pathname } = useLocation();
 
-  if (!credentials && !noAuth) {
+  if (!user.username && !noAuth) {
     // NOTE: also update LoginLink when changing this
     if (config.UI_EXTERNAL_LOGIN_URI) {
       window.location.replace(loginURL(pathname));
@@ -358,16 +350,32 @@ const appRoutes = () =>
     ...rest,
   }));
 
+const convert = (m) => {
+  const {
+    default: Component,
+    clientLoader: loader,
+    clientAction: action,
+    ...rest
+  } = m;
+  return { ...rest, loader, action, Component };
+};
+
 export const dataRoutes = [
   {
-    element: <StandaloneLayout />,
+    id: 'root',
+    lazy: () => import('src/routes/root').then((m) => convert(m)),
     children: [
       {
         errorElement: <ErrorBoundary />,
         children: [
           {
             index: true,
-            element: <Navigate to={formatPath(Paths.core.status)} />,
+            loader: () => redirect(formatPath(Paths.core.status)),
+          },
+          {
+            path: 'login',
+            id: 'login',
+            lazy: () => import('src/routes/login').then((m) => convert(m)),
           },
           ...appRoutes(),
           // "No matching route" is not handled by the error boundary.

src/components/delete-user-modal.tsx

@@ -3,7 +3,7 @@ import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 import { UserAPI, type UserType } from 'src/api';
 import { DeleteModal } from 'src/components';
-import { useUserContext } from 'src/user-context';
+import { useAppContext } from 'src/app-context';
 import { jsxErrorMessage, mapErrorMessages } from 'src/utilities';
 
 interface IProps {
@@ -20,7 +20,7 @@ export const DeleteUserModal = ({
   user,
 }: IProps) => {
   const [waiting, setWaiting] = useState(false);
-  const { credentials } = useUserContext();
+  const { user: currentUser } = useAppContext();
 
   if (!user || !isOpen) {
     return null;
@@ -30,11 +30,11 @@ export const DeleteUserModal = ({
     <DeleteModal
       cancelAction={() => closeModal(false)}
       deleteAction={() => deleteUser()}
-      isDisabled={waiting || user.username === credentials.username}
+      isDisabled={waiting || user.username === currentUser.username}
       spinner={waiting}
       title={t`Delete user?`}
     >
-      {user.username === credentials.username ? (
+      {user.username === currentUser.username ? (
         t`Deleting yourself is not allowed.`
       ) : (
         <Trans>

src/components/error-boundary.tsx

@@ -9,7 +9,7 @@ export const ErrorBoundary = () => {
         <h1>
           {error.status} {error.statusText}
         </h1>
-        <p>{error.data}</p>
+        <p>{error.data.toString()}</p>
       </>
     );
   } else if (error instanceof Error) {

src/containers/settings/user-profile.tsx

@@ -3,6 +3,7 @@ import { Trans } from '@lingui/react/macro';
 import { Button } from '@patternfly/react-core';
 import { useEffect, useState } from 'react';
 import { UserAPI, type UserType } from 'src/api';
+import { useAppContext } from 'src/app-context';
 import {
   AlertList,
   type AlertType,
@@ -11,7 +12,6 @@ import {
   UserFormPage,
   closeAlert,
 } from 'src/components';
-import { useUserContext } from 'src/user-context';
 import {
   type ErrorMessagesType,
   type RouteProps,
@@ -28,10 +28,8 @@ function UserProfile(_props: RouteProps) {
   const [user, setUser] = useState<UserType>();
 
   const {
-    credentials: { username },
-    updateUsername,
-    updatePassword,
-  } = useUserContext();
+    user: { username },
+  } = useAppContext();
 
   const addAlert = (alert: AlertType) => {
     setAlerts([...alerts, alert]);
@@ -66,14 +64,6 @@ function UserProfile(_props: RouteProps) {
           variant: 'success',
           title: <Trans>Saved changes to user &quot;{username}&quot;.</Trans>,
         });
-
-        // update saved credentials when password of logged user is changed
-        if (user.password) {
-          updatePassword(user.password);
-        }
-        if (username !== user.username) {
-          updateUsername(user.username);
-        }
       })
       .catch((err) => setErrorMessages(mapErrorMessages(err)));
 

src/containers/user-management/user-edit.tsx

@@ -9,7 +9,6 @@ import {
   UserFormPage,
 } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
-import { useUserContext } from 'src/user-context';
 import {
   type ErrorMessagesType,
   type RouteProps,
@@ -19,23 +18,15 @@ import {
 
 function UserEdit(props: RouteProps) {
   const [errorMessages, setErrorMessages] = useState<ErrorMessagesType>({});
-  const [initialState, setInitialState] = useState<UserType>();
   const [redirect, setRedirect] = useState<string>();
   const [unauthorized, setUnauthorized] = useState<boolean>(false);
   const [user, setUser] = useState<UserType>();
 
-  const {
-    credentials: { username },
-    updateUsername,
-    updatePassword,
-  } = useUserContext();
-
   const id = props.routeParams.user_id;
   useEffect(() => {
     UserAPI.get(id)
       .then(({ data: result }) => {
         const extendedResult = { ...result, password: '' };
-        setInitialState({ ...extendedResult });
         setUser(extendedResult);
         setUnauthorized(false);
       })
@@ -45,14 +36,6 @@ function UserEdit(props: RouteProps) {
   const saveUser = () =>
     UserAPI.saveUser(user)
       .then(() => {
-        // update saved credentials when password of logged user is changed
-        if (initialState.username === username && user.password) {
-          updatePassword(user.password);
-        }
-        if (initialState.username === username && username !== user.username) {
-          updateUsername(user.username);
-        }
-
         setRedirect(formatPath(Paths.core.user.list));
       })
       .catch((err) => setErrorMessages(mapErrorMessages(err)));

src/entrypoint.tsx

@@ -8,12 +8,10 @@ import { StrictMode, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider, createBrowserRouter } from 'react-router';
 import { Alert, LoadingSpinner } from 'src/components';
-import { AppContextProvider } from './app-context';
 import { dataRoutes } from './app-routes';
 import './darkmode';
 import './l10n';
 import { configFallback, configPromise } from './ui-config';
-import { UserContextProvider } from './user-context';
 
 // App entrypoint
 
@@ -97,11 +95,5 @@ function LoadConfig(_props) {
     basename: config.UI_BASE_PATH,
   });
 
-  return (
-    <UserContextProvider>
-      <AppContextProvider>
-        <RouterProvider router={router} />
-      </AppContextProvider>
-    </UserContextProvider>
-  );
+  return <RouterProvider router={router} />;
 }