Add login page to on prem (#131)

Add:
    - Login page
    - Masthead with user's name and username
    - Authentication checks on every page

package.json

@@ -5,21 +5,22 @@
     "author": "Red Hat, Inc.",
     "private": true,
     "dependencies": {
-        "@babel/runtime": "^7.7.2",
-        "@patternfly/patternfly": "^2.40.13",
-        "@patternfly/react-core": "^3.120.8",
+        "@babel/runtime": "^7.9.6",
+        "@patternfly/patternfly": "^2.71.6",
+        "@patternfly/react-core": "^3.153.13",
         "@redhat-cloud-services/frontend-components": "^0.0.32",
         "@redhat-cloud-services/frontend-components-utilities": "^0.0.10",
-        "@types/node": "^12.12.6",
-        "@types/react": "^16.9.11",
-        "@types/react-dom": "^16.9.4",
+        "@types/node": "^12.12.38",
+        "@types/react": "^16.9.34",
+        "@types/react-dom": "^16.9.7",
         "@types/react-router-dom": "^4.3.5",
-        "axios": "^0.19.0",
+        "axios": "^0.19.2",
         "classnames": "^2.2.5",
-        "moment": "^2.24.0",
-        "react": "^16.11.0",
-        "react-dom": "^16.11.0",
-        "react-markdown": "^4.2.2",
+        "js-cookie": "^2.2.1",
+        "moment": "^2.25.3",
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1",
+        "react-markdown": "^4.3.1",
         "react-redux": "^5.1.2",
         "react-router-dom": "^4.2.2",
         "react-router-hash-link": "^1.2.2",
@@ -45,47 +46,47 @@
         }
     },
     "devDependencies": {
-        "@babel/core": "^7.7.2",
+        "@babel/core": "^7.9.6",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
-        "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-        "@babel/plugin-transform-runtime": "^7.6.2",
-        "@babel/preset-env": "^7.7.1",
-        "@babel/preset-flow": "^7.0.0",
-        "@babel/preset-react": "^7.7.0",
+        "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-runtime": "^7.9.6",
+        "@babel/preset-env": "^7.9.6",
+        "@babel/preset-flow": "^7.9.0",
+        "@babel/preset-react": "^7.9.4",
         "@redhat-cloud-services/frontend-components-config": "0.0.7",
         "awesome-typescript-loader": "^5.2.1",
-        "axios-mock-adapter": "^1.17.0",
+        "axios-mock-adapter": "^1.18.1",
         "babel-core": "^7.0.0-bridge.0",
-        "babel-eslint": "^10.0.3",
+        "babel-eslint": "^10.1.0",
         "babel-jest": "^24.9.0",
         "babel-plugin-dual-import": "^1.2.1",
         "babel-plugin-lodash": "^3.3.2",
         "cross-fetch": "^2.2.3",
         "css-loader": "^2.1.1",
-        "enzyme": "^3.10.0",
-        "enzyme-adapter-react-16": "^1.15.1",
-        "enzyme-to-json": "^3.4.3",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.2",
+        "enzyme-to-json": "^3.4.4",
         "eslint": "^5.16.0",
         "eslint-config-prettier": "^2.10.0",
         "eslint-loader": "^2.2.1",
-        "eslint-plugin-react": "^7.16.0",
-        "husky": "^4.2.3",
+        "eslint-plugin-react": "^7.19.0",
+        "husky": "^4.2.5",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^24.9.0",
-        "node-sass": "^4.13.1",
+        "node-sass": "^4.14.1",
         "npm-run-all": "^4.1.5",
-        "postcss": "^7.0.21",
-        "prettier": "^1.15.3",
+        "postcss": "^7.0.29",
+        "prettier": "^1.19.1",
         "prop-types": "^15.7.2",
         "source-map-loader": "^0.2.4",
         "stylelint": "^9.10.1",
         "stylelint-config-recommended-scss": "^3.3.0",
-        "stylelint-scss": "^3.12.1",
-        "typescript": "^3.7.2",
-        "webpack": "^4.41.2",
-        "webpack-bundle-analyzer": "^3.6.0",
-        "webpack-cli": "^3.3.10"
+        "stylelint-scss": "^3.17.2",
+        "typescript": "^3.8.3",
+        "webpack": "^4.43.0",
+        "webpack-bundle-analyzer": "^3.7.0",
+        "webpack-cli": "^3.3.11"
     },
     "scripts": {
         "build": "webpack --config config/insights.prod.webpack.config.js",

src/api/user.ts → src/api/active-user.ts

@@ -1,4 +1,3 @@
-import { UserAuthType } from '../api';
 import { BaseAPI } from './base';
 import { Constants } from '../constants';
 
@@ -9,7 +8,7 @@ class API extends BaseAPI {
     super();
   }
 
-  getUser(): Promise<UserAuthType> {
+  getUser(): Promise<any> {
     if (DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE) {
       return new Promise((resolve, reject) => {
         (window as any).insights.chrome.auth
@@ -21,25 +20,48 @@ class API extends BaseAPI {
       });
     } else if (DEPLOYMENT_MODE === Constants.STANDALONE_DEPLOYMENT_MODE) {
       return new Promise((resolve, reject) => {
-        resolve({} as UserAuthType);
+        super
+          .list()
+          .then(result => {
+            resolve(result.data);
+          })
+          .catch(result => reject(result));
       });
     }
   }
 
-  isPartnerEngineer() {
-    return this.http.get(this.apiPath);
-  }
-
   // insights has some asinine way of loading tokens that involves forcing the
   // page to refresh before loading the token that can't be done witha single
   // API request.
   getToken(): Promise<any> {
-    if (DEPLOYMENT_MODE === Constants.STANDALONE_DEPLOYMENT_MODE) {
+    if (DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE) {
       return new Promise((resolve, reject) => {
-        resolve({ refresh_token: 'FAKE TEMPORARY TOKEN!!!!' });
+        reject(
+          'Use window.chrome.insights.auth to get tokens for insights deployments',
+        );
       });
     }
+    return this.http.post('v3/_ui/auth/token/', {});
+  }
+
+  // Note: This does not reset the app's authentication state. That has to be done
+  // separately by setting the user state in the app's root component
+  logout() {
+    return this.http.post('v3/_ui/auth/logout/', {});
+  }
+
+  // Note: This does not reset the app's authentication state. That has to be done
+  // separately by setting the user state in the app's root component
+  login(username, password) {
+    return this.http.post('v3/_ui/auth/login/', {
+      username: username,
+      password: password,
+    });
+  }
+
+  isPartnerEngineer() {
+    return this.http.get(this.apiPath);
   }
 }
 
-export const UserAPI = new API();
+export const ActiveUserAPI = new API();

src/api/base.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { Constants } from '../constants';
 import { ParamHelper } from '../utilities';
+import * as Cookies from 'js-cookie';
 
 export class BaseAPI {
   apiBaseURL = API_HOST + API_BASE_PATH;
@@ -48,6 +49,9 @@ export class BaseAPI {
     if (DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE) {
       await (window as any).insights.chrome.auth.getUser();
     }
+    if (DEPLOYMENT_MODE === Constants.STANDALONE_DEPLOYMENT_MODE) {
+      request.headers['X-CSRFToken'] = Cookies.get('csrftoken');
+    }
     return request;
   }
 

src/api/index.ts

@@ -18,7 +18,7 @@ export {
   ImportMessageCodes,
 } from './response-types/import';
 export { ImportAPI } from './import';
-export { UserAPI } from './user';
+export { ActiveUserAPI } from './active-user';
 export { UserAuthType, MeType } from './response-types/user';
 export { CollectionVersionAPI } from './collection-version';
 export { MyNamespaceAPI } from './my-namespace';

src/api/response-types/user.ts

@@ -1,4 +1,4 @@
-export class UserAuthType {
+export class InsightsUserAuthType {
   account_number: string;
   internal: {
     account_id: number;
@@ -17,6 +17,16 @@ export class UserAuthType {
   };
 }
 
+export class UserAuthType {
+  id: number;
+  username: string;
+  first_name?: string;
+  last_name?: string;
+  email?: string;
+  groups: { id: number; name: string }[];
+  is_partner_engineer: boolean;
+}
+
 export class MeType {
   is_partner_engineer: boolean;
 }

src/components/index.ts

@@ -24,9 +24,7 @@ export { CollectionInfo } from './collection-detail/collection-info';
 export { CollectionHeader } from './headers/collection-header';
 export { TableOfContents } from './collection-detail/table-of-contents';
 export { RenderPluginDoc } from './collection-detail/render-plugin-doc';
-export {
-  CollectionContentList,
-} from './collection-detail/collection-content-list';
+export { CollectionContentList } from './collection-detail/collection-content-list';
 export { LoadingPageSpinner } from './loading/loading-page-spinner';
 export { LoadingPageWithHeader } from './loading/loading-with-header';
 export { CompoundFilter } from './patternfly-wrappers/compound-filter';

src/containers/certification-dashboard/certification-dashboard.tsx

@@ -34,7 +34,7 @@ import {
   CollectionVersionAPI,
   CollectionVersion,
   CertificationStatus,
-  UserAPI,
+  ActiveUserAPI,
   MeType,
 } from '../../api';
 import { ParamHelper } from '../../utilities';
@@ -105,7 +105,7 @@ class CertificationDashboard extends React.Component<
   }
 
   componentDidMount() {
-    UserAPI.isPartnerEngineer().then(response => {
+    ActiveUserAPI.isPartnerEngineer().then(response => {
       const me: MeType = response.data;
       if (!me.is_partner_engineer) {
         this.setState({ redirect: Paths.notFound });

src/containers/collection-detail/collection-content.tsx

@@ -14,7 +14,7 @@ import { ParamHelper } from '../../utilities/param-helper';
 import { formatPath, Paths } from '../../paths';
 
 // renders list of contents in a collection
-class CollectionImportLog extends React.Component<
+class CollectionContent extends React.Component<
   RouteComponentProps,
   IBaseCollectionState
 > {
@@ -93,4 +93,4 @@ class CollectionImportLog extends React.Component<
   }
 }
 
-export default withRouter(CollectionImportLog);
+export default withRouter(CollectionContent);

src/containers/collection-detail/collection-import-log.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { Main, Section } from '@redhat-cloud-services/frontend-components';
+import { Section } from '@redhat-cloud-services/frontend-components';
 
 import { ImportAPI, ImportDetailType, ImportListType } from '../../api';
 import {
   CollectionHeader,
   LoadingPageWithHeader,
   ImportConsole,
+  Main,
 } from '../../components';
 
 import { loadCollection, IBaseCollectionState } from './base';

src/containers/edit-namespace/namespace-form.tsx → src/containers/edit-namespace/edit-namespace.tsx

@@ -12,7 +12,7 @@ import {
   AlertType,
   Main,
 } from '../../components';
-import { MyNamespaceAPI, NamespaceType, UserAPI } from '../../api';
+import { MyNamespaceAPI, NamespaceType, ActiveUserAPI } from '../../api';
 import { Constants } from '../../constants';
 
 import { Form, ActionGroup, Button } from '@patternfly/react-core';
@@ -62,7 +62,7 @@ class EditNamespace extends React.Component<RouteComponentProps, IState> {
   }
 
   componentDidMount() {
-    UserAPI.getUser().then(result => {
+    ActiveUserAPI.getUser().then(result => {
       this.setState({ userId: result.account_number }, () =>
         this.loadNamespace(),
       );

src/containers/index.ts

@@ -0,0 +1,15 @@
+export { default as CertificationDashboard } from './certification-dashboard/certification-dashboard';
+export { default as CollectionContent } from './collection-detail/collection-content';
+export { default as CollectionDetail } from './collection-detail/collection-detail';
+export { default as CollectionDocs } from './collection-detail/collection-docs';
+export { default as CollectionImportLog } from './collection-detail/collection-import-log';
+export { default as EditNamespace } from './edit-namespace/edit-namespace';
+export { default as LoginPage } from './login/login';
+export { default as MyImports } from './my-imports/my-imports';
+export { default as ManageNamespace } from './namespace-detail/manage-namespace';
+export { default as PartnerDetail } from './namespace-detail/partner-detail';
+export { default as MyNamespaces } from './namespace-list/my-namespaces';
+export { default as Partners } from './namespace-list/my-namespaces';
+export { default as NotFound } from './not-found/not-found';
+export { default as Search } from './search/search';
+export { default as TokenPage } from './token/token';