Moodle SSO - Enhance proposed login screen and revise the Terraso consent screen.

[DerekCaelin]

RA has implemented a version of Terraso SSO but we want to improve upon the experience for the user.

Description

Improve Moodle login screen

https://learn-tst.landscapes.global/login/index.php

Problems with the current screen:

• it prioritizes email/password login
• it doesn't provide a description of what Terraso is or explain that people can use their current Google/Apple/Microsoft identity
• it mentions guest access - what is this?

Terraso SSO screen

(This is seen once the user clicks on the Terraso icon)

• lacks Terraso branding and colors

Assumptions

• RA has the capacity to / will be able to implement our designs

References

• Builds upon: https://github.com/techmatters/terraso-product/issues/14
• UI Copy edit (G-doc)

Designs

• Mockups (Figma)

Process

### Tasks
- [ ] https://github.com/techmatters/terraso-web-client/issues/1041
- [ ] https://github.com/techmatters/terraso-web-client/issues/1042

Acceptance criteria

Product

RA

• [ ] As a user on the learning platform, I want to know that Terraso is the primary way to log in (over email/password) so that I don't get confused in the future when my email doesn't show up on the Terraso platform
• [ ] As a user on the learning platform, I want to know what Terraso is, that it is free, and that you can use your work identity to create an account, so I know that it is worth clicking on

Consent screen

• [ ] As a user on the Terraso SSO consent screen, I should see the branding of Terraso so that I understand that I am giving Terraso consent to share my information.

Design

• [ ] Copy Editing
• [ ] Implemented as designed
• [ ] Translated to Spanish

[Hanal-code]

RELEASED TO RA team: Moodle login screen: https://www.figma.com/file/V2vch484f2clPH0G4hRhRj/Moodle-SSO_V1.0?type=design&node-id=157%3A984&mode=design&t=RyWe8kKOekvCAgZc-1

[DerekCaelin]

@paulschreiber would you mind copy-editing the UI text? Happy to meet if it would be helpful.

UI Copy edit (G-doc)

[paulschreiber]

@DerekCaelin Added comments to the document.

[DerekCaelin]

@paulschreiber thanks for the review!

One comment: this line was meant to be displayed to users who created Terraso accounts as a part of the sign-up process as a signifier that they now have a Terraso account. Unlike ordinary Terraso users, these users will not land on the Terraso home screen but go straight to Learning Landscapes, so there is no visual communication that they have successfully created a Terraso account.

I'm tempted to keep it in unless we can think of another signifier.

[paulschreiber]

It'd be good to signify that a new account has been created, but that sentence didn't make sense in the position it was in (in the middle of authentication info). We can add it to the bottom paragraph which explains what the account does.

[DerekCaelin]

I've moved the sentance to be with the explanation of what the account does - @Hanal-code please take a look at the changes.

[Hanal-code]

@DerekCaelin @paulschreiber Thx for the copy edit. I updated the button label and tweak the visual a bit. Here are the updated mockups:

[NEW TO TERRASO & MOODLE]

[EXISTING TERRASO USER]

[paulschreiber]

1. There are too many different font size here; we don't need that much hierarchy. Having everything at 16/18px would be fine.
2. Remove the link to tools — we don't want people getting distracted/leaving the signup flow.

[Hanal-code]

UPDATED MOCKUP

• Body copy style updated: Note that paragraph's leading is 150%, so body copy should be 16/24.
• the link tools has been removed.