From 927299cef01fb8722cf249e4de4493063a3f8b0a Mon Sep 17 00:00:00 2001 From: Jonathan Zernik Date: Thu, 29 Oct 2020 18:22:01 -0400 Subject: [PATCH] Allow frontend testing without login (#345) * Frontend testing working in dev mode * Make login_disabled and cors configs configurables * Update frontend readme --- docker/config.ini | 1 - frontend/squeak-node-frontend/README.md | 117 +++--------------- .../src/squeakclient/requests.js | 4 +- requirements.txt | 1 + squeaknode/admin/webapp/app.py | 15 ++- squeaknode/main.py | 4 +- 6 files changed, 37 insertions(+), 105 deletions(-) diff --git a/docker/config.ini b/docker/config.ini index dfc0d86f..983b73c5 100644 --- a/docker/config.ini +++ b/docker/config.ini @@ -34,7 +34,6 @@ host=0.0.0.0 port=12994 username=devuser password=devpass -use_ssl=false [postgresql] host=db diff --git a/frontend/squeak-node-frontend/README.md b/frontend/squeak-node-frontend/README.md index 01e6ab34..a8277f27 100755 --- a/frontend/squeak-node-frontend/README.md +++ b/frontend/squeak-node-frontend/README.md @@ -1,106 +1,23 @@ -# React Material Admin — Material-UI Dashboard Template +# frontend -Built with [React](https://facebook.github.io/react/), [Material-UI](https://material-ui.com), [React Router](https://reacttraining.com/react-router/). -**No jQuery and Bootstrap!** +## Run in dev mode -**This version uses React 16.8.6, React Router v5, MaterialUI v4, built with React Hooks and React Context (No Redux)** +- Edit **config.ini** and add the following configs in the `webadmin` section + ``` + login_disabled=true + allow_cors=true + ``` +- Start the squeak server. +- Start the frontend in dev mode with the `REACT_APP_SERVER_PORT` environment variable. + ``` + $ REACT_APP_SERVER_PORT=12994 npm start + ``` -[Demo](https://flatlogic.com/admin-dashboards/react-material-admin/demo). Use any credentials to log in. +## Build -[![image](https://user-images.githubusercontent.com/24964748/55800639-df780300-5adc-11e9-84b7-7c2437088516.png)](https://flatlogic.com/admin-dashboards/react-material-admin/demo) +- Install `protoc` and `protoc-gen-grpc-web`: + https://github.com/grpc/grpc-web#code-generator-plugin -## Full Version +- Run `make-build.sh` -This is a limited version of [**Full React Material Admin**](https://flatlogic.com/templates/react-material-admin-full/demo) with more components, pages and theme support. - -## Features - -- React (**16.8.6**) -- React Hooks -- React Context -- **No jQuery and Bootstrap!** -- Mobile friendly layout (responsive) -- Create-react-app under the hood -- React Router v5 -- Material-UI v4 -- Modular Architecture -- CSS-in-JS styles -- Webpack build -- Stylish, clean, responsive layout -- Authentication - -## Pages - -We have implemented some basic pages, so you can see our template in action. - -- Dashboard -- Typography -- Tables -- Notifications -- Charts -- Icons -- Maps -- Login -- Error - -## Quick Start - -#### 1. Get the latest version - -You can start by cloning the latest version of React Dashboard on your -local machine by running: - -```shell -$ git clone https://github.com/flatlogic/react-material-admin.git MyApp -$ cd MyApp -``` - -#### 2. Run `yarn install` - -This will install both run-time project dependencies and developer tools listed -in [package.json](package.json) file. - -#### 3. Run `yarn start` - -Runs the app in the development mode. - -Open http://localhost:3000 to view it in the browser. Whenever you modify any of the source files inside the `/src` folder, -the module bundler ([Webpack](http://webpack.github.io/)) will recompile the -app on the fly and refresh all the connected browsers. - -#### 4. Run `yarn build` - -Builds the app for production to the build folder. -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes. -Your app is ready to be deployed! - -## Support - -For any additional information please refer to [Flatlogic homepage](https://flatlogic.com). - -## How can I support developers? - -- Star our GitHub repo :star: -- [Tweet about it](https://twitter.com/intent/tweet?text=Amazing%20dashboard%20built%20with%20NodeJS,%20React%20and%20Bootstrap!&url=https://github.com/flatlogic/react-material-template&via=flatlogic). -- Create pull requests, submit bugs, suggest new features or documentation updates :wrench: -- Follow [@flatlogic on Twitter](https://twitter.com/flatlogic). -- Subscribe to Flatlogic newsletter at [flatlogic.com](https://flatlogic.com/) -- Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup: - -## More from Flatlogic - -- [React Native Starter](https://github.com/flatlogic/react-native-starter) - 🚀 A powerful react native starter template that bootstraps development of your mobile application -- [Sing App](https://github.com/flatlogic/sing-app) - 💥 Free and open-source admin dashboard template built with Bootstrap 4 -- [Awesome Bootstrap Checkboxes & Radios](https://github.com/flatlogic/awesome-bootstrap-checkbox) - ✅ Pure css way to make inputs look prettier -- [React Dashboard](https://github.com/flatlogic/react-dashboard) - 🔥 React Dashboard - isomorphic admin dashboard template with GraphQL -- [Light Blue Dashboard](https://github.com/flatlogic/light-blue-dashboard) - 💦 Free and open-source admin dashboard template built with Bootstrap - -## Premium themes - -Looking for premium themes and templates? Check out more [admin dashboard templates at flatlogic.com](https://flatlogic.com/admin-dashboards). - -## License - -[MIT](https://github.com/flatlogic/react-material-dashboard/blob/master/LICENSE.txt). +- Copy the generated `build` folder into `squeaknode/admin/webapp/static/`. diff --git a/frontend/squeak-node-frontend/src/squeakclient/requests.js b/frontend/squeak-node-frontend/src/squeakclient/requests.js index 4918574c..5e3e367b 100644 --- a/frontend/squeak-node-frontend/src/squeakclient/requests.js +++ b/frontend/squeak-node-frontend/src/squeakclient/requests.js @@ -76,8 +76,10 @@ import { DeleteSqueakReply, } from "../proto/squeak_admin_pb" +console.log('The value of REACT_APP_SERVER_PORT is:', process.env.REACT_APP_SERVER_PORT); +const SERVER_PORT = process.env.REACT_APP_SERVER_PORT || window.location.port; -export let web_host_port = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port; +export let web_host_port = window.location.protocol + '//' + window.location.hostname + ':' + SERVER_PORT; function handleErrorResponse(response, route) { response.text() diff --git a/requirements.txt b/requirements.txt index 0eb72fd2..43883be9 100644 --- a/requirements.txt +++ b/requirements.txt @@ -11,3 +11,4 @@ Flask protobuf flask-login Flask-WTF +flask-cors diff --git a/squeaknode/admin/webapp/app.py b/squeaknode/admin/webapp/app.py index c814ae50..6fc2fcc3 100644 --- a/squeaknode/admin/webapp/app.py +++ b/squeaknode/admin/webapp/app.py @@ -13,6 +13,8 @@ from flask_login import current_user, login_user from flask_login import login_required from flask_login import logout_user +from flask_cors import CORS + from google.protobuf import json_format from google.protobuf import message @@ -44,7 +46,6 @@ def create_app(handler, username, password): logger.info("Starting flask with app.root_path: {}".format(app.root_path)) logger.info("Files in root path: {}".format(os.listdir(app.root_path))) - @login.user_loader def load_user(id): return valid_user.get_user_by_username(id) @@ -394,13 +395,23 @@ def create_app(handler, username, password): class SqueakAdminWebServer(): - def __init__(self, host, port, username, password, use_ssl, handler): + def __init__(self, host, port, username, password, use_ssl, login_disabled, allow_cors, handler): self.host = host self.port = port self.use_ssl = use_ssl + self.login_disabled = login_disabled + self.allow_cors = allow_cors self.app = create_app(handler, username, password) def serve(self): + # Set LOGIN_DISABLED and allow CORS if login not required. + if self.login_disabled: + self.app.config['LOGIN_DISABLED'] = True + + # Allow CORS + if self.allow_cors: + CORS(self.app) + self.app.run( self.host, self.port, diff --git a/squeaknode/main.py b/squeaknode/main.py index 9190e5ff..93ff3974 100644 --- a/squeaknode/main.py +++ b/squeaknode/main.py @@ -67,7 +67,9 @@ def load_admin_web_server(config, handler) -> SqueakAdminWebServer: config["webadmin"]["port"], config["webadmin"]["username"], config["webadmin"]["password"], - config["webadmin"].getboolean("use_ssl"), + config["webadmin"].getboolean("use_ssl", fallback=False), + config["webadmin"].getboolean("login_disabled", fallback=False), + config["webadmin"].getboolean("allow_cors", fallback=False), handler, )