Login & Homepage

[hello-binit]

Description

This PR is the first of two PRs (the second is #103) that will make web teleop deployable on the internet. It introduces a new page at the root URL, which shows a login page if the user isn't logged in, or shows a homepage if the user is logged in. The homepage shows a robots selector, which enables them to initiate calls with their robot(s).

TODO:

• Show password button the login form
• Calling a robot when the robot is occupied should tell the user. Currently, it says "Loading..." forever.
• A "Kick out" button to kick out all background operators occupying or trying to connect with the robot
• Get rid of lorem ipsum on the changelog
• Aria labels on the login / home pages (details)
• Make robot's onwindowunload succeed in telling the backend that it's going offline

Testing procedure

Update Nov 8th: Switch to the "feature/signaling" branch before going through these instructions. I've amended the instructions below to account for changes since this PR was originally published.

Since this PR is part 1 of many, some functionality has been left intentionally unimplemented and some of the UI won't work. Please read this section carefully to understand the success criteria for this PR.

Running the interface locally

Check out this branch and launch the interface.

1. Go to https://localhost in a browser and you should see the homepage.

   • 

2. There should be a single robot. It should have your robot's serial number. It should be online. The "Call Robot" button should be active/click-able, and link to https://localhost/operator/?robot=<serial-number>. The button doesn't lead to anything currently; clicking it will yield 'Cannot GET /operator/stretch-se3-3004" or similar. The button will become functional in the next PR.

   • 

3. In a second tab, go to https://localhost/operator and you should see the normal interface. Return to the first tab. The robot should now be occupied. The "Call Robot" button should be inactive/not-clickable.

   • 
   • Note: Closing the second tab doesn't return the robot to "Online" currently. We'll switch to heartbeats in a future PR.

4. Click the "Logout" button and you should see the login page.

   • 

5. You can "fuzz test" the login form with various email addresses/passwords and see reasonable behavior. Locally, all well-formatted credentials are accepted and the user is redirected to the homepage.

   • Empty form:
     • 
   • Bad format email
     • 
   • Not enough characters password
     • 
   • Note: There is no auth state persistence when the interface is run locally. Refreshing the page leads to the homepage. With Firebase, this works as expected. The "remember me" option decides if login state is persisted when the browser tab is closed.

6. Click the "Forgot your password?" button and you should see a password reset dialog.

   • 
   • Note: Providing an email and pressing "Continue" yields an NotImplementedError snackbar at the bottom of the screen. It doesn't make sense to implement this for the local interface.
     • 

Running the interface online

This version of the interface uses a Firebase backend. You will need to send me your email address and robot's serial number before you can test this section. Then, you can either visit the website at https://web.hello-robot.com/
or, if you'd prefer to test it locally, ask me for the .env file to put in the root folder of your Stretch Web Teleop repo, change "localstorage" to "firebase" in line 4 of start_web_server_and_robot_browser.sh, and then launch the interface normally.

1. Go to the temporary website or localhost in a browser and you should see the login page.

   • 

2. Refreshing the page should continue to show the login page. Enter some well formatted but incorrect credentials. You should see a banner that tells you that you have incorrect credentials.

   • 

3. Click on "Forgot your password?" and go through the form twice. The first time, use an email address that you own but didn't provide to me. This simulates an attacker trying to brute force identify email addresses that are registered with this app. To combat this, the form succeeds, but you shouldn't receive a password reset email. The second time, use the email address that you did provide to me. The form succeeds, and you should receive a password reset email.

   • 

4. Go to your email, find the password reset link, click through, and enter a new password.

   • 

5. Return to the login page, enter your email address and newly set password (we'll use this flow for new users until we create a registration page). You should be able to log in and see the homepage.

   • 

6. On the homepage, you'll see your robot. It should be offline (this will become functional in the next PR). You can refresh the page, open the website on a new page, close/reopen the browser, etc. and you should remain logged in. If you uncheck the "Remember Me" option on the login page, the auth state should persist in the same tab, but become logged out after the tab is closed.

   • 

7. The "Logout" button should work.

Before opening a pull request

From the top-level of this repository, run:

• pre-commit run --all-files

To merge

• Squash & Merge