Add user login to web map client

[dadiorchen]

We need to add user login & registration into our web map, we will use Keycloak to do most of the job, what we need to implement here is to jump the keycloak web page to finish the login and registration.

In detail, we need to do these:

• Add UI of sign in and sign up button as shown here:

The design figma file is here

• If the User logged in already, display the avatar like this:

• If user logged in, by clicking the user avatar, we will jump to profile url provided by Keycloak.

Design file

• To jump to Keycloak, we need to use react library like this: react-oidc-context, please contact me to get the settings for Keycloak.

Some reference, some work we have done for an experiment:
https://github.com/Greenstand/treetracker-web-map-client/blob/user-profile/src/pages/login.js
Greenstand/treetracker-admin-client#261

[MohitBansal321]

but this beta version already have the user login system

[dadiorchen]

We don't, where did you see that feature? The situation is, we did some trying on the user-profile branch, but in a hack way, now we need to do a serious integration, maybe some lib for that is a good choice, and also take: user session, token management on the client side, @MohitBansal321 are you interested to take this task?

[MohitBansal321]

We don't, where did you see that feature? The situation is, we did some trying on the user-profile branch, but in a hack way, now we need to do a serious integration, maybe some lib for that is a good choice, and also take: user session, token management on the client side, @MohitBansal321 are you interested to take this task?

https://dev-k8s.treetracker.org/web-map-site/demo
on this beta version

[dadiorchen]

That's a temporary version and experiment for this, now we want to make a serious product.

[MohitBansal321]

so we need to make a login form and register form and but i do not work with keycloak

[dadiorchen]

We don't need to build login form, keycloak will do it, we just need to interact with keycloak on the client side

[dadiorchen]

This issue is open for contributors

[dadiorchen]

This is a implementation by admin panel team: Greenstand/treetracker-admin-client#1112 with oicd