Pipeline UI login demo with restricted balance

This demo shows:

Deploying the application

Clone the repository, enter the directory and run npm install. This is enough.

Run npm start in the application's root directory. After a few seconds the application will appear in a browser.
Open theconfig.json file in the src subdirectory. It looks like this:

{
    "minBalance": 50
}

Change 50 to the value that exceeds your own Algorand balance and save the file.

Go to the page in a browser and make sure the value you entered is on the screen.
Click 'Login' button and log in. See that you're redirected to the page with a failure message.
Try to change '/failure' to '/restricted' in the browser's address bar. Make sure you're redirected to the home page.
Change the value in config.json again, but now to the value smaller than your balance (if your balance is zero, write -1 there)
Go to the browser, see the new value on the home page and click 'Login'. See the restricted page.

This is a standard React application with routes. It consists of 3 pages and two additional components.

That's where it can appear to be interesting to look at:

App.js Root component. Almost nothing related to Pipeline-UI, just a simple React routing sample.
Pages
- Home Absolutely nothing interesting. Almost a plain text.
- Restricted and Failure can be interesting. They show how to obtain and display user's balance.
Components
- Title Just an icon and a label. Nothing interesting.
- Login A Login button. It does all the Pipeline-related job: logs in, checks balance and transfers results to the root component to handle. If you look there you'll find that there are more comments than code.