Giters

KlimaDAO / klimadao

Monorepo for the official KlimaDAO site, dApp, components and design system.

Home Page:https://klimadao.finance

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[CM Wallets Phase 1] Onboarding flow

jabby09 opened this issue · comments

commented

Summary

In this first workstream, we create /login and /logout pages
and the profile-creation flow at a new route called /onboarding
The onboarding flow is where we instantiate a user Team and assign it a unique Name.
We also need /team and /team/{team_uuid} api endpoints
This Team will be necessary for part 2, which is wallet creation flow.

Requirements

See Phase 1 - onboarding flow of discovery tree.

Use the discovery tree for requirements across four parts of the stack (NOTE: branches / tasks that are complete will have a green checkmark ✅)

  • Frontend
  • Database (looks to be completed)
  • Supabase Auth
  • API

Other Notes / Requirements

  • Non-logged in user can navigate and view the site, however, with this version ALL USERS must create a CM account to perform any transaction, including retire with a credit card or bank transfer

Sequence Diagrams

Two sequence diagrams are provided:

Supabase Auth

The designs for login and signup screens are styled on top of what is provided by Supabase Auth which we will leverage as much as possible.

Resources:

Figma Designs

IMPORTANT NOTE: Designs of project and other pages are showing future state of CM UI v2 which is a workstream in progress. If the project pages are not updated to the new designs, the FE changes will need to be applied to existing implementation that is in production.

Login to buy or retire flow

Notes:

  • desktop and mobile designs provided
  • The onboarding flow is shown from a project details page. This is a new user, with no CM account thus is not logged in. Note that on the project listing(s), need to show a LOGIN TO BUY OR RETIRE button CTA. In this flow, the user clicked the LOGIN TO BUY OR RETIRE button
  • The user may have also clicked on LOGIN OR SIGNUP CTA in the top navigation
  • Login screen...this is a page, not a modal
  • See notes above on use of Supabase auth
  • email/password and Google/Apple social login (OAuth) supported
  • Need to implement the Supabase auth Forgot password flow
  • User enters email and pw and clicks LOGIN or login with google or apple
  • User is returned to the project details page. On the listing, BUY and RETIRE button CTAs are now shown.
  • If the user had clicked LOGIN OR SIGNUP CTA in the top navigation, after signing in user is returned to the page they started from
  • Also see login screen designs here

Sign up to buy or retire flow

Notes:

  • desktop and mobile designs provided
  • The onboarding flow is shown from a project details page. This is a new user, with no CM account thus is not logged in. Note that on the project listing(s), need to show a LOGIN TO BUY OR RETIRE button CTA. In this flow, the user clicked the LOGIN TO BUY OR RETIRE button
  • The user may have also clicked on LOGIN OR SIGNUP CTA in the top navigation
  • Login screen...this is a page, not a modal
  • See notes above on use of Supabase auth
  • In this flow, user then clicks Sign up
  • On the sign up page (not a modal), email/password and Google/Apple social login (OAuth) supported
  • If email/password selected, there is an email confirmation step with a Email verification sent message
  • Signup requires at a minimum creating a handle on the Complete profile screen
    • User is returned to the project details page. On the listing, BUY and RETIRE button CTAs are now shown.
  • If the user had clicked LOGIN OR SIGNUP CTA in the top navigation, after signing in user is returned to the page they started from
  • Also see sign up screen designs here

Sign up but didn't verify email + Invalid credentials + Reset Password flows

Notes:

  • desktop and mobile designs provided
  • the first screen is shows what happens if a user did not complete the verification step during sign up and attempts to login to CM; not the Please verify your email and Don't see an email from us? messaging
  • if email or pw is incorrect, we show Invalid login credentials messaging
  • forgot pw flow also provided, starts after user clicks Forgot password link