GAID

Please enter the google analytics ID for appData file.

Gain insights into using Python and Transcrypt to build complete web applications. Delve into refactoring, adding new features, and creating cohesive frontend-backend projects with React.

tarball.tar.gz

Final_App

ReactPythonStep01

ReactPythonStep02

ReactPythonStep03

ReactPythonStep04

ReactPythonStep05

ReactPythonStep06

ReactPythonStep07

ReactPythonStep08

ReactPythonStep09

ReactPythonStep10

ReactPythonStep11

ReactPythonStep12

ReactPythonStep13

FinalWebApp

Gunicorn_run

ReactPythonStep01-copy

Python is already used in the backend of most web applications, but sadly it does not work with web browsers to drive the frontend of those applications. Transcrypt can help by creating more coherent web-based projects, using Python to write both the backend and the frontend.

This course builds on the lessons in Using the Python Transcrypt Transipler for Front-end Coding to implement a complete React and Python web-based project. In each chapter, we will refactor existing code to add new functionality, building up the application as you go. Each chapter ends with a running application that includes all of the features we added up to that specific point.

Using Python and Transcrypt to Build a Complete Web Application

# About the application

In this application, we will be looking at some modifications in our landing page, `landingPageView.py`. We have a `Login` component in the component tree that will be holding all the login functionality, which includes authenticating the user on the provided privileges and getting back to the user with feedback about login’s status. This feedback is either `success` or `failure`.

This is what the application looks like:

> **Note:** To log in, use the username `admin` and password `123`.

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

# Refactoring the `LandingPage` component

First, we will look at how to refactor the existing `LandingPage` component in `landingPageView.py` located inside the `src/views/landingPage/` folder to add the state variables required by the `Login` component. Also, we'll look at how we can provide a DOM attachment point for the `Login` component and define the required login functionality. 

Let’s destructure the three additional props related to logging in that will pass in from the main `App` component.

First, the application stores them in local variables at lines 14–16. 

Then, we have three state variables:
 
* At line 20, we have `loginModal` to keep track of whether the login form should appear or not.

 * At lines 21 and 22, we have `username` and `password` to hold entered values into the login form.

---
## Utilizing the snackbar feature for user information

At line 24, we have a reference to snackbar using `useSnackbar()` function to utilize the snackbar feature. This hook function pulls a reference from the `SnackbarProvider`, which we can find into the component tree in the `App` component.

---

## The login process with the `doLogin()` function

Starting from line 26, we have a `doLogin()` function that is the cornerstone of this section and performs the login process. It first calls the `/api/login` route of the rest API, passing it the `username` and `password` collected from the login form in the body of an HTTP `POST` request. It then immediately sets the modal state of the `Login` component to `False` so that it disappears.

If the response from the REST server is successful, then at line 28, it calls the `login()` function that was passed in from the main `App` component to set the `user` state variable there.

At line 29, it also triggers a snackbar to show and indicate the successful login.

However, at line 32, if the response returned from the REST server is indicated as being unauthorized, the modal state for the `Login` component sets back to `True` to show the login form again, and at line 33, the snackbar gets triggered to show the failed status.

---
## Resetting the form fields

At line 59, whenever the `Login` component appears, the application will reset the `username` and `password` displayed on the login form back to empty strings for security purposes.  The `clearUser()` function is called on any change to the `loginModal` state variable via the React `useEffect()` hook function.

---

In lines 91–93, to open the login form, it sets the value of the `loginModal` state variable in the `onClick` event of the `Link` element from `Login`.  Once there is a valid session and the user gets logged in, it hides that login link based on the login state so that it isn't triggered unnecessarily.

Finally, starting from line 97, we can see the modal `Login` component added to the element tree.

# Handling of user logout on the UI

Starting from line 72, one last detail to note is the logout menu item in the `LandingPageMenu` component.  It should be enabled anytime the user is logged in and disabled when they are not.  This modification is on the existing `landingPageMenu.py` module in the `bookapp/client/src/views/landingPage/` folder.

In lines 11 and 12, for the logout menu item to work, we have two more props to be passed in, an indicator of whether the user is logged in or not, and the function to do the logout.  

In lines 45 and 46, we have a `logout()` function that gets triggered when the user clicks the logout menu item. The application then uses the `isLoggedIn` prop to determine whether or not the logout menu item should be disabled or not.

Now, when the `Login` link is clicked, the `Login` modal form will appear, and we will be able to establish a client session.

A look at the mechanism to handle login functionality.

Introduction

Environment Setup

Landing Page

Modal View

REST Service

Books

Menus

User Login

Lookups

User Context

Editing Lookups

Filtering Data

Editing Books

SPA Redirect

Deploying the Application

Conclusion

Login Functionality

About the application