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

@@ -34,7 +34,6 @@ host=0.0.0.0
 port=12994
 username=devuser
 password=devpass
-use_ssl=false
 
 [postgresql]
 host=db

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/`.

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()

requirements.txt

@@ -11,3 +11,4 @@ Flask
 protobuf
 flask-login
 Flask-WTF
+flask-cors

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,

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,
     )