CS 124-Lab 5

• support logging in so that a user sees only her tasks

  At a minimum, support email/password accounts. Feel free to support additional login types (Google/Facebook/Apple, etc.).

  Challenge: support logging in via HMC Rapid identity (I do not know whether this is possible without the participation of HMC CIS).

• sharing of task lists so that one user can share a task list with another (Authentication/Authorization lab may be useful).

  A shared task list should be editable by either the original owner or by a user it is shared with.

  Design decisions (this is not an exhaustive list):

  • If user A shares a list with user B, can user B share that list with user C?
  • If user A shares a list with user B, can user B delete that list?
  • If user A shares a list with user B, does user B need to accept that sharing, or will a shared list just show up?
  • Should shared lists be distinguishable in the UI from unshared lists?
  • If user A shares a list with user B, can user B see that list if they don't have a verified email address?

You will need to create your own Firestore database (Firestore quickstart) for which you'll need a (non-HMC) Google login. You'll need to set up rules for that database (Authentication/Authorization lab may be useful).

Make sure to include the database rules as part of the Git repository (so that I can verify the rules ensure the correctness as specified above).

Hints

• You need to go to Authentication tab of Firebase to specify what authentication methods you support.
• The in-class exercise instructions for Authentication/Authorization have a challenge problem related to sharing that is a useful starting point for addressing sharing.
• There is no way for client code (your application) to get user IDs of anyone other than the logged-in user. Thus, you probably want to share based on email address.
• While writing Firestore rules for accessing tasks in a subcollection, you may need to check fields of the parent document. This post provides information on how to do that and this Stack Overflow post provides additional information.
• Firestore supports where clauses with many operators, including array-contains.

Getting started

Your work should be done in a branch named lab5.

$ cd ~/cs124/lab
$ git checkout lab4 	
$ git checkout -b lab5 	# creates a new branch named lab3 based on lab2 and checks it out
$ git push -u origin lab5 # pushes the new branch to the origin

Hand-In Procedure

You will turn in your labs using git and GitHub.

$ git commit -am "my last commit"
[lab1 c2e3c8b] my last commit
 2 files changed, 18 insertions(+), 2 deletions(-)

$ git push

Deploy your app to GitHub Pages so that https://{GITHUBUSERNAME}.github.io/cs124/ shows your running application.

You will then need to go to GitHub.com and create a pull request whose base is lab4 and whose compare is lab5. That is, you'll be submitting the changes between lab4 and lab5. This pull request should show, for example, changes between the lab4 and lab5 design.md rather than showing the entirety of the design.md as new.

Detailed instructions on creating a pull request on GitHub

1. Go to Pull Request tab on GitHub
2. Click on "New pull request".
3. Select 'lab4' as the base branch and 'lab5' as the compare branch .
4. Verify that the commits that are chosen are correct, and that the code that is shown as different is correct.
5. Click on "Create pull request".
6. In the right-hand column, click on the gear icon next to Reviewers
7. Type "nrhodes-hmc" and click on the GitHub name in the list below.
8. Click on "Create pull request".

Deliverables

• teams.txt: the file from Lab 1 containing team member names and GitHub ids.
• docs directory containing:
  • docs/design.md A design document (updated, as necessary, from lab1) (in Markdown format) that describes (either all in one markdown file or with links to others):
    • your design decisions, including their rationale (include images)
    • alternative designs you considered, including images
    • any user testing you did
    • the final design, including screen images and the flow for each task.
    • challenges you faced
    • parts of the design you're most proud of
  • any needed images or markdown files referenced from design.md.
• All the files/directories for your React application, including:
  • README.md (modified as appropriate for your project). Please add a link to your running application in this file.
  • package.json
  • src: directory containing your .js and .css files. Remove any unneeded files.
  • public: directory containing:
    • index.html: your initial HTML page.
    • favicon.ico: your icon (shows up next to title in web browser)
    • *.png: Other sized icons.
    • manifest.json: information to browser about web app. References .png files

• https://{GITHUBUSERNAME}.github.io/cs124/ shows your running application.