[profile] Log-Out behavior from user's profile

[ladytrekker]

Description

This is the current behavior for profile page which is accessible for logged-in users only:

• Profile Page not-logged-in => Login Screen and main menu highlights "Profile", URL: /login
• Profile Page logged-in => Carbonmark user data and main menu highlights "Profile", URL: /users/<Address_or_handle>
• Log-Out while on Profile => Show User page and main menu highlights "Marketplace", URL: /users/<Address_or_handle>

See this discussion here too

Problem

@0xemc @ladytrekker yes I agree it is confusing, I raised this during dev but it was low priority and we had bigger UX issues to solve :)

I think if you are on your profile page logged in (https://www.carbonmark.com/users/jabby) and I click the LOG OUT button, I should be redirected to https://www.carbonmark.com/users/login

(note: this is the behaviour on the Portfolio page)

Originally posted by @jabby09 in KlimaDAO/bezos-frontend#434 (comment)

Questions

• How should the navigation in the main menu behave when looking at different user's profile? What is the URL? What is highlighted? (compare with the current behavior described above)
• Do we need a new URL structure for this and introduce /profile? E.g. user which is not logged in: users/<Address_or_handle>, user which is logged in looking at own profile: /profile/<Address_or_handle> ?
• How to detect at which point while browsing carbonmark a user is logging out? A user can log-out from any page at the moment?
• When a user logs out => the page is re-rendered, we therefore need to know from which page the re-fresh was triggered (or pass a callback to the web3 modal?) and decide what to do/redirect to which URL depending on the former URL => Please write down a complete list for each page

[jabby09]

@theprofessora some questions on UX when logging out of profile page.

[theprofessora]

Some answers to the questions:

How should the navigation in the main menu behave when looking at different user's profile? What is the URL? What is highlighted?

The "Marketplace" tab in the nav should be selected. The vast majority of the time, I suspect a user will navigate to someone's profile by clicking their username on a project details page or on a project listing. Especially since I don't think our search bar works for finding other users at the moment, only for searching projects.

Do we need a new URL structure for this and introduce /profile? E.g. user which is not logged in: users/<Address_or_handle>, user which is logged in looking at own profile: /profile/<Address_or_handle> ?

Given the future design plans we have for the profile, I think we definitely need a /profile.

How to detect at which point while browsing carbonmark a user is logging out? A user can log-out from any page at the moment?

I like the ability to logout from any page. I'm not sure this is a question for me, though, because I don't know what engineering will be required to detect when a user has logged out.

When a user logs out => the page is re-rendered, we therefore need to know from which page the re-fresh was triggered (or pass a callback to the web3 modal?) and decide what to do/redirect to which URL depending on the former URL => Please write down a complete list for each page

From Profile
when a user logs out while on their profile page, they're redirected to: https://www.carbonmark.com/profile/login (Note this is after the implementation of a /profile addition)

From Portfolio
when a user logs out while on their portfolio page, they're redirected to: https://www.carbonmark.com/portfolio/login

From any other page
when a user logs out on any other page, they shouldn't be redirected. However they will lose the ability to complete a purchase. When logged out, all project cards will look like this (These designs are in the figma as well):

Clicking the "login to buy" launches the login modal.

[jabby09]

this will all change with new onboarding flow