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';