DRAFT: Added OAUTH auth (#26)

* Added OAUTH auth * staging uri * Update constants * Upgraded react and applied config stuff for 3 envs * Bump version
acidjunk · Oct 28, 2022 · ec77c43 · ec77c43
1 parent ee81edd
commit ec77c43
Show file tree

Hide file tree

Showing 14 changed files with 3,500 additions and 1,351 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+src/Constants.js.backup
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/package.json b/package.json
@@ -8,12 +8,12 @@
  "ra-data-simple-rest": "^2.9.6",
  "ra-input-markdown": "^1.1.5",
  "ra-input-rich-text": "^2.9.3",
- "react": "^16.9.0",
+ "react": "^16.13.1",
  "react-admin": "^2.9.6",
  "react-admin-color-input": "^1.0.8",
- "react-dom": "^16.9.0",
+ "react-dom": "^16.13.1",
  "react-qr-code": "^2.0.7",
- "react-scripts": "3.1.1"
+ "react-scripts": "3.4.4"
  },
  "devDependencies": {
  "gh-pages": "^2.1.1",
@@ -26,9 +26,12 @@
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
+ "backup-constants": "cp src/Constants.js src/Constants.js.backup",
+ "restore-constants": "cp src/Constants.js.backup src/Constants.js",
  "deploy-github": "gh-pages -d build",
- "deploy": "yarn build && aws s3 sync build/ s3://admin.prijslijst.info --delete && aws cloudfront create-invalidation --distribution-id E1FGEHDQURI1BB --paths '/*'",
- "deploy-staging": "yarn build && aws s3 sync build/ s3://admin.staging.prijslijst.info --delete && aws cloudfront create-invalidation --distribution-id EA1479SLRMW9X --paths '/*'",
+ "deploy": "yarn backup-constants && cp src/Constantsproduction.js src/Constants.js && yarn build && aws s3 sync build/ s3://admin.prijslijst.info --delete && yarn restore-constants && aws cloudfront create-invalidation --distribution-id E1FGEHDQURI1BB --paths '/*'",
+ "deploy-preproduction": "yarn backup-constants && cp src/ConstantsPreproduction.js src/Constants.js && aws s3 sync build/ s3://admin.prijslijst.info --delete && yarn restore-constants && aws cloudfront create-invalidation --distribution-id E1FGEHDQURI1BB --paths '/*'",
+ "deploy-staging": "yarn backup-constants && cp src/ConstantsStaging.js src/Constants.js && yarn build && aws s3 sync build/ s3://admin.staging.prijslijst.info --delete && yarn restore-constants && aws cloudfront create-invalidation --distribution-id EA1479SLRMW9X --paths '/*'",
  "prettier": "prettier -c '{**/*.{js,jsx,scss,md},public/**/*.html}'",
  "prettier-fix": "prettier --write '{**/*.{js,jsx,scss,md},public/**/*.html}'"
  },

diff --git a/public/index.html b/public/index.html
@@ -21,7 +21,7 @@
  work correctly both with client-side routing and a non-root public URL.
  Learn how to configure a non-root public URL by running `npm run build`.
  -->
- <title>Prijslijst Admin v1.0.4</title>
+ <title>Prijslijst Admin v1.1.0</title>
  </head>
  <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,12 +1,12 @@
-import simpleRestProvider from "ra-data-simple-rest";
 import React, { Component } from "react";
 import { Admin, Resource, fetchUtils } from "react-admin";
 
 import AuthProvider from "./AuthProvider";
 import { CategoryCreate, CategoryEdit, CategoryIcon, CategoryList } from "./Categories";
 import { CategoryImageEdit, CategoryImageIcon, CategoryImageList } from "./CategoriesImages";
-import API_URL from "./Constants";
+import { API_URL, IMAGE_BUCKET } from "./Constants";
 import Dashboard from "./dashboard/Dashboard";
+import simpleRestProvider from "./dataProvider/dataProvider";
 import addUploadFeature from "./dataProvider/decorator";
 import { FlavorCreate, FlavorEdit, FlavorIcon, FlavorList, FlavorShow } from "./Flavors";
 import englishMessages from "./i18n/en";
@@ -42,13 +42,16 @@ const httpClient = (url, options = {}) => {
  options.headers = new Headers({ Accept: "application/json" });
  }
  // Cookie auth
- options.credentials = "include";
+ // options.credentials = "include";
 
  // Token auth:
- // const token = localStorage.getItem('token');
- // options.headers.set('Authentication-Token', token);
+ const token = localStorage.getItem("token");
+ options.headers.set("Authorization", `Bearer ${token}`);
  return fetchUtils.fetchJson(url, options);
 };
+console.log("API_URL:", API_URL);
+console.log("IMAGE_BUCKET:", IMAGE_BUCKET);
+
 const dataProvider = simpleRestProvider(`${API_URL}/v1`, httpClient);
 
 export const uploadDataProvider = addUploadFeature(dataProvider);

diff --git a/src/AuthProvider.js b/src/AuthProvider.js
@@ -1,38 +1,46 @@
 import { AUTH_ERROR, AUTH_LOGIN, AUTH_LOGOUT } from "react-admin";
 
-import API_URL from "./Constants";
+import { API_URL } from "./Constants";
 
 export default (type, params) => {
+ // Uncomment for debugging
+ console.log("AuthProvider =>", type, params);
+
  if (type === AUTH_LOGIN) {
  const { username, password } = params;
- const request = new Request(`${API_URL}/login`, {
+ const formData = new FormData();
+ formData.append("username", username);
+ formData.append("password", password);
+ formData.append("grant_type", "password");
+
+ const request = new Request(`${API_URL}/v1/login/access-token`, {
  method: "POST",
- body: JSON.stringify({ email: username, password }),
- credentials: "include",
- headers: new Headers({ "Content-Type": "application/json" })
- });
- return fetch(request).then(response => {
- if (response.status < 200 || response.status >= 300) {
- throw new Error(response.statusText);
- }
- localStorage.setItem("authenticated", true);
- // Next lines are handy for token based login
- // return response.json()
+ body: formData
+ // credentials: "include",
+ // headers: new Headers({ "Content-Type": "application/json" })
  });
- // .then(({ response }) => {
- // debugger;
- // localStorage.setItem('token', response.user.authentication_token);
- // });
+ return fetch(request)
+ .then(response => {
+ if (response.status < 200 || response.status >= 300) {
+ throw new Error(response.statusText);
+ }
+ return response.json();
+ })
+ .then(response => {
+ // console.log(response)
+ localStorage.setItem("token", response.access_token);
+ });
+ return Promise.reject();
  }
 
  if (type === AUTH_LOGOUT) {
- localStorage.removeItem("authenticated");
+ localStorage.removeItem("token");
  return Promise.resolve();
  }
  if (type === AUTH_ERROR) {
  const status = params.status;
  if (status === 401 || status === 403) {
- localStorage.removeItem("authenticated");
+ localStorage.removeItem("token");
  return Promise.reject();
  }
  return Promise.resolve();

diff --git a/src/CategoriesImages.jsx b/src/CategoriesImages.jsx
@@ -17,6 +17,7 @@ import {
 } from "react-admin";
 
 import DeleteImageButton from "./components/DeleteImageButton";
+import { IMAGE_URL } from "./Constants";
 
 export const CategoryImageIcon = BrokenImage;
 
@@ -66,7 +67,7 @@ const ProductImageListField = ({ record, source }) => {
  const strRequest = JSON.stringify(options);
  const encRequest = btoa(strRequest);
 
- return <img width={192} src={`https://d3sticxdmgvhkp.cloudfront.net/${encRequest}`} />;
+ return <img width={192} src={`${IMAGE_URL}/${encRequest}`} />;
 };
 
 const ProductImageField = ({ record, source }) => {

diff --git a/src/Constants.js b/src/Constants.js
@@ -1,5 +1,3 @@
-const API_URL = process.env.NODE_ENV === "development" ? "http://localhost:5000" : "https://api.prijslijst.info";
-
-export const imageUrl = "https://d3sticxdmgvhkp.cloudfront.net/";
-
-export default API_URL;
+export const API_URL = "https://api.staging.prijslijst.info";
+export const IMAGE_URL = "https://d3sticxdmgvhkp.cloudfront.net";
+export const IMAGE_BUCKET = "prijslijst-upload";
diff --git a/src/ConstantsPreProduction.js b/src/ConstantsPreProduction.js
@@ -0,0 +1,3 @@
+export const API_URL = "https://api.production.prijslijst.info";
+export const IMAGE_URL = "https://d3sticxdmgvhkp.cloudfront.net";
+export const IMAGE_BUCKET = "prijslijst-upload";
diff --git a/src/ConstantsProduction.js b/src/ConstantsProduction.js
@@ -0,0 +1,3 @@
+export const API_URL = "https://api.prijslijst.info";
+export const IMAGE_URL = "https://d3sticxdmgvhkp.cloudfront.net";
+export const IMAGE_BUCKET = "images-prijslijst-info";
diff --git a/src/ConstantsStaging.js b/src/ConstantsStaging.js
@@ -0,0 +1,3 @@
+export const API_URL = "https://api.staging.prijslijst.info";
+export const IMAGE_URL = "https://d3sticxdmgvhkp.cloudfront.net";
+export const IMAGE_BUCKET = "prijslijst-upload";
diff --git a/src/ProductsImages.jsx b/src/ProductsImages.jsx
@@ -14,6 +14,7 @@ import {
 } from "react-admin";
 
 import DeleteImageButton from "./components/DeleteImageButton";
+import { IMAGE_BUCKET } from "./Constants";
 
 export const ProductImageIcon = Image;
 
@@ -63,7 +64,7 @@ const ProductImageField = ({ record, source }) => {
  return null;
  }
  const options = {
- bucket: "images-prijslijst-info",
+ bucket: IMAGE_BUCKET,
  key: record[source],
  edits: {
  resize: {

diff --git a/src/Tables.jsx b/src/Tables.jsx
@@ -1,8 +1,6 @@
 import { RestaurantMenu } from "@material-ui/icons";
 import React from "react";
 import {
- BooleanField,
- BooleanInput,
  Create,
  Datagrid,
  DisabledInput,
@@ -20,8 +18,6 @@ import {
 } from "react-admin";
 import QRCode from "react-qr-code";
 
-import API_URL from "./Constants";
-
 export const TableIcon = RestaurantMenu;
 
 const TableFilter = props => (