poc - cookie auth

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,

pulp-ui-config.json

@@ -1,6 +1,6 @@
 {
   "API_BASE_PATH": "/pulp/api/v3/",
   "UI_BASE_PATH": "/ui/",
-  "UI_EXTERNAL_LOGIN_URI": null,
+  "UI_EXTERNAL_LOGIN_URI": "/auth/login/",
   "EXTRA_VERSION": ""
 }

src/api/base.ts

@@ -10,7 +10,7 @@ export class BaseAPI {
     this.http = axios.create({
       // adapter + withCredentials ensures no popup on http basic auth fail
       adapter: 'fetch',
-      withCredentials: false,
+      //withCredentials: false,
 
       // baseURL gets set in PulpAPI
       paramsSerializer: {

src/api/pulp.ts

@@ -11,11 +11,14 @@ export class PulpAPI extends BaseAPI {
 
     this.http.interceptors.request.use((request) => {
       if (!request.auth) {
-        request.auth = JSON.parse(
+        const credentials = JSON.parse(
           window.sessionStorage.credentials ||
             window.localStorage.credentials ||
             '{}',
         );
+        if (credentials?.username !== 'HACK') {
+          request.auth = credentials;
+        }
       }
 
       request.baseURL = config.API_BASE_PATH;

src/app-context.tsx

@@ -14,15 +14,15 @@ export interface IAppContextType {
   queueAlert: (alert: AlertType) => void;
   setAlerts: (alerts: AlertType[]) => void;
   settings; // deprecated
-  user; // deprecated
 }
 
 export const AppContext = createContext<IAppContextType>(undefined);
 export const useAppContext = () => useContext(AppContext);
 
+// FIXME: rename to AlertContext*; deal with deprecated featureFlags & settings
 export const AppContextProvider = ({ children }: { children: ReactNode }) => {
   const [alerts, setAlerts] = useState<AlertType[]>([]);
-  const { credentials } = useUserContext();
+  const { hasPermission } = useUserContext();
 
   // hub compat for now
   const featureFlags = {
@@ -43,7 +43,6 @@ export const AppContextProvider = ({ children }: { children: ReactNode }) => {
   };
 
   const queueAlert = (alert) => setAlerts((alerts) => [...alerts, alert]);
-  const hasPermission = (_name) => true; // FIXME: permission handling
 
   return (
     <AppContext.Provider
@@ -54,14 +53,6 @@ export const AppContextProvider = ({ children }: { children: ReactNode }) => {
         queueAlert,
         setAlerts,
         settings,
-        // FIXME: hack
-        user: credentials
-          ? {
-              username: credentials.username,
-              groups: [],
-              model_permissions: {},
-            }
-          : null,
       }}
     >
       {children}

src/components/delete-user-modal.tsx

@@ -19,7 +19,7 @@ export const DeleteUserModal = ({
   user,
 }: IProps) => {
   const [waiting, setWaiting] = useState(false);
-  const { credentials } = useUserContext();
+  const { getUsername } = useUserContext();
 
   if (!user || !isOpen) {
     return null;
@@ -29,11 +29,11 @@ export const DeleteUserModal = ({
     <DeleteModal
       cancelAction={() => closeModal(false)}
       deleteAction={() => deleteUser()}
-      isDisabled={waiting || user.username === credentials.username}
+      isDisabled={waiting || user.username === getUsername()}
       spinner={waiting}
       title={t`Delete user?`}
     >
-      {user.username === credentials.username ? (
+      {user.username === getUsername() ? (
         t`Deleting yourself is not allowed.`
       ) : (
         <Trans>

src/components/pulp-about-modal.tsx

@@ -26,14 +26,14 @@ const Value = ({ children }: { children: ReactNode }) => (
 interface IProps {
   isOpen: boolean;
   onClose: () => void;
-  userName: string;
+  username: string;
 }
 
 interface IApplicationInfo {
   pulp_core_version?: string;
 }
 
-export const PulpAboutModal = ({ isOpen, onClose, userName }: IProps) => {
+export const PulpAboutModal = ({ isOpen, onClose, username }: IProps) => {
   const [applicationInfo, setApplicationInfo] = useState<IApplicationInfo>({});
 
   useEffect(() => {
@@ -54,7 +54,7 @@ export const PulpAboutModal = ({ isOpen, onClose, userName }: IProps) => {
   const ui_extra = config.EXTRA_VERSION;
 
   // FIXME
-  const user = { username: userName, id: null, groups: [] };
+  const user = { username, id: null, groups: [] };
 
   return (
     <AboutModal
@@ -115,10 +115,10 @@ export const PulpAboutModal = ({ isOpen, onClose, userName }: IProps) => {
                   ? formatPath(Paths.core.user.detail, { user_id: user.id })
                   : null
               }
-              title={userName}
+              title={username}
             >
-              {userName}
-              {user?.username && user.username !== userName ? (
+              {username}
+              {user?.username && user.username !== username ? (
                 <> ({user.username})</>
               ) : null}
             </MaybeLink>

src/containers/ansible-remote/tab-access.tsx

@@ -28,7 +28,6 @@ interface TabProps {
     featureFlags;
     hasPermission;
     state: { params };
-    user;
   };
 }
 

src/containers/ansible-repository/tab-access.tsx

@@ -28,7 +28,6 @@ interface TabProps {
     featureFlags;
     hasPermission;
     state: { params };
-    user;
   };
 }
 

src/containers/login/login.tsx

@@ -14,7 +14,7 @@ function PulpLoginPage(_props) {
   const { setCredentials, clearCredentials } = useUserContext();
   const { next } = useQueryParams();
 
-  const [username, setUsername] = useState('');
+  const [username, setUsername] = useState('HACK');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [redirect, setRedirect] = useState('');
@@ -25,6 +25,15 @@ function PulpLoginPage(_props) {
   }, []);
 
   const onLoginClick = (e) => {
+    if (username === 'HACK') {
+      setCredentials(username, password, remember);
+      setRedirect(
+        next && next !== '/login/' ? next : formatPath(Paths.core.status),
+      );
+      e?.preventDefault();
+      return;
+    }
+
     PulpLoginAPI.try(username, password)
       .then(() => {
         // verified, save

src/containers/task-management/task-detail.tsx

@@ -261,7 +261,7 @@ class TaskDetail extends Component<RouteProps, IState> {
                       {resources.map((resource, index) => {
                         return (
                           <Fragment key={resource.type + index}>
-                            <hr />
+                            {index ? <hr /> : null}
                             <DescriptionListGroup>
                               <DescriptionListTerm>{t`Type`}</DescriptionListTerm>
                               <DescriptionListDescription>

src/layout.tsx

@@ -31,40 +31,12 @@ import { StandaloneMenu } from './menu';
 import { Paths, formatPath } from './paths';
 import { useUserContext } from './user-context';
 
-export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
-  const [aboutModalVisible, setAboutModalVisible] = useState<boolean>(false);
-  const { credentials, clearCredentials } = useUserContext();
-
-  let aboutModal = null;
-  let docsDropdownItems = [];
-  let userDropdownItems = [];
-  let userName: string;
-
-  if (credentials) {
-    userName = credentials.username;
-
-    userDropdownItems = [
-      <DropdownItem isDisabled key='username'>
-        <Trans>Username: {userName}</Trans>
-      </DropdownItem>,
-      <DropdownSeparator key='separator' />,
-      <DropdownItem
-        key='profile'
-        component={
-          <Link to={formatPath(Paths.core.user.profile)}>{t`My profile`}</Link>
-        }
-      />,
-
-      <DropdownItem
-        key='logout'
-        aria-label={'logout'}
-        onClick={() => clearCredentials()}
-      >
-        {t`Logout`}
-      </DropdownItem>,
-    ];
-
-    docsDropdownItems = [
+const DocsDropdown = ({ showAbout }: { showAbout: () => void }) => (
+  <StatefulDropdown
+    ariaLabel={t`Docs dropdown`}
+    data-cy='docs-dropdown'
+    defaultText={<QuestionCircleIcon />}
+    items={[
       <DropdownItem
         key='documentation'
         component={
@@ -74,19 +46,56 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
           >{t`Documentation`}</ExternalLink>
         }
       />,
-      <DropdownItem key='about' onClick={() => setAboutModalVisible(true)}>
+      <DropdownItem key='about' onClick={() => showAbout()}>
         {t`About`}
       </DropdownItem>,
-    ].filter(Boolean);
+    ]}
+    toggleType='icon'
+  />
+);
+
+const UserDropdown = ({
+  username,
+  clearCredentials,
+}: {
+  username?: string;
+  clearCredentials: () => void;
+}) =>
+  username ? (
+    <StatefulDropdown
+      ariaLabel={t`User dropdown`}
+      data-cy='user-dropdown'
+      defaultText={username}
+      items={[
+        <DropdownItem isDisabled key='username'>
+          <Trans>Username: {username}</Trans>
+        </DropdownItem>,
+        <DropdownSeparator key='separator' />,
+        <DropdownItem
+          key='profile'
+          component={
+            <Link
+              to={formatPath(Paths.core.user.profile)}
+            >{t`My profile`}</Link>
+          }
+        />,
+        <DropdownItem
+          key='logout'
+          aria-label={'logout'}
+          onClick={() => clearCredentials()}
+        >
+          {t`Logout`}
+        </DropdownItem>,
+      ]}
+      toggleType='dropdown'
+    />
+  ) : null;
+
+export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
+  const [aboutModalVisible, setAboutModalVisible] = useState<boolean>(false);
+  const { getUsername, clearCredentials } = useUserContext();
 
-    aboutModal = (
-      <PulpAboutModal
-        isOpen={aboutModalVisible}
-        onClose={() => setAboutModalVisible(false)}
-        userName={userName}
-      />
-    );
-  }
+  const username = getUsername();
 
   const Header = (
     <Masthead>
@@ -105,33 +114,22 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
               padding: '9px 0 0 4px',
             }}
           >
-            Pulp UI
+            {APPLICATION_NAME}
           </span>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
         <span style={{ flexGrow: 1 }} />
         <DarkmodeSwitcher />
         <LanguageSwitcher />
-        {credentials ? (
-          <StatefulDropdown
-            ariaLabel={t`Docs dropdown`}
-            data-cy='docs-dropdown'
-            defaultText={<QuestionCircleIcon />}
-            items={docsDropdownItems}
-            toggleType='icon'
+        <DocsDropdown showAbout={() => setAboutModalVisible(true)} />
+        {username ? (
+          <UserDropdown
+            clearCredentials={clearCredentials}
+            username={username}
           />
-        ) : null}
-        {!credentials ? (
-          <LoginLink />
         ) : (
-          <StatefulDropdown
-            ariaLabel={t`User dropdown`}
-            data-cy='user-dropdown'
-            defaultText={userName}
-            items={userDropdownItems}
-            toggleType='dropdown'
-          />
+          <LoginLink />
         )}
       </MastheadContent>
     </Masthead>
@@ -148,7 +146,13 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
   return (
     <Page isManagedSidebar header={Header} sidebar={Sidebar}>
       {children}
-      {aboutModalVisible && aboutModal}
+      {aboutModalVisible ? (
+        <PulpAboutModal
+          isOpen
+          onClose={() => setAboutModalVisible(false)}
+          username={username}
+        />
+      ) : null}
     </Page>
   );
 };

src/menu.tsx

@@ -28,7 +28,7 @@ const menuSection = (name, options = {}, items = []) => ({
 const altPath = (p) => formatPath(p, {}, null, { ignoreMissing: true });
 
 // condition: loggedIn OR condition: and(loggedIn, hasPlugin('rpm'))
-const loggedIn = ({ user }) => !!user;
+const loggedIn = ({ isLoggedIn }) => isLoggedIn();
 const hasPlugin =
   (name) =>
   ({ plugins }) =>
@@ -284,7 +284,7 @@ export const StandaloneMenu = () => {
   const location = useLocation();
   const [menu, setMenu] = useState([]);
 
-  const { credentials } = useUserContext();
+  const { isLoggedIn } = useUserContext();
 
   const plugins = usePlugins();
 
@@ -312,7 +312,7 @@ export const StandaloneMenu = () => {
       <NavList>
         <Menu
           items={menu}
-          context={{ user: credentials, plugins }}
+          context={{ isLoggedIn, plugins }}
           expandedSections={expandedSections}
         />
       </NavList>