Add Login Splash Screen

[BenjaminCharmes]

Closes #767

• Login splash screen that displays the login options (GitHub, ORCID, and email)
• Updated route handling to redirect unauthenticated users to the /login page, with the exception of the /about page, which remains accessible without authentication.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 68.22%. Comparing base (39be3fb) to head (7148186).
Report is 86 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #907   +/-   ##
=======================================
  Coverage   68.22%   68.22%           
=======================================
  Files          62       62           
  Lines        3909     3909           
=======================================
  Hits         2667     2667           
  Misses       1242     1242           

[cypress]

datalab    Run #2485

Run Properties:   Failed #2485  •  1e9ee94c49 ℹ️: Merge 7148186ab79d792a13999b2fc3bb0006521ea550 into 39be3fb056179b66d37cf2de259a...

Project	datalab
Branch Review	bc/login-screen
Run status	Failed #2485
Run duration	09m 59s
Commit	1e9ee94c49 ℹ️: Merge 7148186ab79d792a13999b2fc3bb0006521ea550 into 39be3fb056179b66d37cf2de259a...
Committer	Benjamin Charmes
View all properties for this run ↗︎

---

Test results
Failures	132
Flaky	0
Pending	0
Skipped	0
Passing	0
View all changes introduced in this branch ↗︎

---

Tests for review

  batchSampleFeature.cy.js • 17 failed tests • End-to-end tests (chrome)

View Output

Test		Artifacts
Batch sample creation > Adds 3 valid samples		Test Replay Screenshots
Batch sample creation > adds two valid samples		Test Replay Screenshots
Batch sample creation > adds four base samples		Test Replay Screenshots
Batch sample creation > modifies some data in the first sample		Test Replay Screenshots
Batch sample creation > modifies some data in the second sample		Test Replay Screenshots
Batch sample creation > makes samples copied from others		Test Replay Screenshots
Batch sample creation > checks the copied samples		Test Replay Screenshots
Batch sample creation > creates samples using components		Test Replay Screenshots
Batch sample creation > checks the created samples		Test Replay Screenshots
Batch sample creation > uses the template id		Test Replay Screenshots
The first 10 failed tests are shown, see all 17 tests in Cypress Cloud.

  editPage.cy.js • 9 failed tests • End-to-end tests (chrome)

View Output

Test		Artifacts
Edit Page > Loads the main page without any errors		Test Replay Screenshots
Edit Page > Adds a valid sample		Test Replay Screenshots
Edit Page > Add some more samples, to use as components		Test Replay Screenshots
Edit Page > Checks editing the sample edit page		Test Replay Screenshots
Edit Page > adds a chemical formula to component1		Test Replay Screenshots
Edit Page > adds some synthesis information		Test Replay Screenshots
Edit Page > deletes synthesis components and re-adds them		Test Replay Screenshots
Edit Page > tries to add a non-numeric value into quantity		Test Replay Screenshots
Edit Page > Add some blocks to the sample and checks unsaved warning behavior		Test Replay Screenshots

  equipment.cy.js • 8 failed tests • End-to-end tests (chrome)

View Output

Test		Artifacts
Equipment table page > Loads the equipment page without any errors		Test Replay Screenshots
Equipment table page > Adds some valid equipment entries		Test Replay Screenshots
Equipment table page > Checks if one of the equipment items is in the database		Test Replay Screenshots
Equipment table page > Attempts to Add an item with the same name		Test Replay Screenshots
Equipment table page > Deletes an item		Test Replay Screenshots
Equipment table page > copies an equipment entry		Test Replay Screenshots
Equipment edit page > Checks the equipment edit page		Test Replay Screenshots
Equipment edit page > modifies some data in a sample		Test Replay Screenshots

  sampleTablePage.cy.js • 10 failed tests • End-to-end tests (chrome)

View Output

Test		Artifacts
Advanced sample creation features > Adds some valid samples		Test Replay Screenshots
Advanced sample creation features > Adds a third sample copied from the first		Test Replay Screenshots
Advanced sample creation features > deletes the first sample and makes sure the copy is still there		Test Replay Screenshots
Advanced sample creation features > makes some more items for testing as components		Test Replay Screenshots
Advanced sample creation features > modifies some data in the second sample		Test Replay Screenshots
Advanced sample creation features > copies the second sample		Test Replay Screenshots
Advanced sample creation features > checks the edit page of the copied sample		Test Replay Screenshots
Advanced sample creation features > copies the copied sample, this time with additional components		Test Replay Screenshots
Advanced sample creation features > checks the edit page of the copied sample with components		Test Replay Screenshots
Advanced sample creation features > selects a sample by checkbox, adds it to a new collection, then checks the collections page		Test Replay Screenshots

  batchSampleFeature.cy.js • 17 failed tests • End-to-end tests (firefox)

View Output

Test		Artifacts
Batch sample creation > Adds 3 valid samples		Screenshots
Batch sample creation > adds two valid samples		Screenshots
Batch sample creation > adds four base samples		Screenshots
Batch sample creation > modifies some data in the first sample		Screenshots
Batch sample creation > modifies some data in the second sample		Screenshots
Batch sample creation > makes samples copied from others		Screenshots
Batch sample creation > checks the copied samples		Screenshots
Batch sample creation > creates samples using components		Screenshots
Batch sample creation > checks the created samples		Screenshots
Batch sample creation > uses the template id		Screenshots
The first 10 failed tests are shown, see all 17 tests in Cypress Cloud.

The first 5 failed specs are shown, see all 12 specs in Cypress Cloud.

[BenjaminCharmes]

A (very quick) first draft to give an idea of what it might look like.
I really have no idea at the moment, so I'll try to make few different ones.
If you have any ideas, or even examples of things you might like, don't hesitate to send them to me.

Feedback are more than welcome!

[BenjaminCharmes]

Another one.

[BenjaminCharmes]

Another one

[ml-evs]

Some combination of 1+2 would be nice! A central box, perhaps split into two with a datalab logo/title at the top left and a bit of text, then the login buttons in a box on the right under the grey-group logo.

I think ultimately we need to think about what the top section of the table page should look like; I've tried adding more datalab logo-ish stuff to it in the past, but struggled to make it look good.

[ml-evs]

I would suggest that we now you've thrown together the logic side of it, we can play around with designs in canva/inkscape or something. Could you upload an svg of these screens so we can drag stuff around?

[BenjaminCharmes]

Something more like this ?

If you have some datalab logo that you like, you can send me them and I can try to do something for the table page if you want.