Add client side state to login component

[Adam3371]

Why

We want to simplify a users login by remembering the identifier of the last successful login and allow the user to login with the saved identifier instead of let the user enter the identifier.

For this feature a design of a new screen was drafted in Figma

TODOS

• [x] If a user performs a successful signup or login with passkeys, save the state of the user in the local storage (see code below for an example)
• [x] Update the LoginInitScreen according to the Figma screen "S2.8.1 InitLoginWithState"
• [x] When navigating to login, add a logic that checks if a valid user state is found in the local storage, if yes, show the InitLoginWithState screen to the user.
• [x] Show the identifier from the user state the "Login with passkey" button.
• [x] If a user clicks on the "Login with passkey" button, the user is shown the passkey-verify screen (as it would have inserted the identifier in the normal login field).
• [x] If a user clicks on "Switch account", the user is taken to the normal LoginInit screen. There is no switch back, however, a refresh should load the user state again and the LoginInitWithState screen should be shown to the user.
• [x] If a user is switching account and successfully logging in with passkeys with another identifier, the user state should be updated/overwrite.

type cbo_last_passkey_identifier = {
  createdAt: numer,
  identifierValue: string, 
  identifierType: email|phone|username,
}

Implementation idea

• add/update a object to localstorage at the end of the passkey operations in ProcessService (appendPasskey, loginWithPasskey, loginWithPasskeyChallenge) => after the second call to the backend
• expose this state from localstorage through ProcessService to LoginInitBlock

[Adam3371]

Update

• [x] Logout brings the user always to signup screen, instead of login screen. If the issue is connected to the introduction of "Client side state"-screen, fix the issue.
• [x] Identifier text color should be rgba(161, 161, 161, 1)
• [x] Button with phone number does not work, to reproduce: (Enable username, email address and phone number, verification set to "None") Signup with username, email, phone with passkey -> logout (end up in InitLoginWithState) -> switch account -> login with phone number and passkey -> logout (State button is now showing phone number) -> button does not work anymore (Maybe the button just don't work with phone number)
• [x] Switch account and entering a wrong/non existing email automatically switches to the InitLoginWithState screen.
• [x] If a "Couldn't find your account" error occurs (e.g. the user is deleted in the DevPanel) the screen should be switched to the conventional Login screen, the identifier should be pre-filled in the input field and the according error message should be shown as usual. (screenshot 1)
• [x] Don't show the Client side state in the incognito mode.
• [x] General problem: if a user is signed up and then disabled in the DevPanel, the user can proceed the login (with state button or by conventional login) and get in an infinity loading state at the last step of the login. => @incorbador: is this a frontend or backend issue?

[Adam3371]

Update

• [x] For web-js the logout redirects the user to signup instead of login page

• [x] State button have no hover color -> use the same as for socials

• [ ] Signup with email (verification and signup) and phone (no verification) stores the phone number as value and phone number as type) instead of email. Backend returns email, in local storage the phone number is stored as value

• [ ] Only save user state in local storage if login with identifier is possible (@incorbador): Example: Email verify at first login Phone verify at signup => login only possible with phone (since it's verified) but the in the client state the email is saved.

  Side note: since the way to come to the conventional login screen is by the "switch account" button, the user might think that something is wrong with his account. So only save a user-state if we are sure that a login is possible. (e.g. not assume that user will verify email from the welcome email)

[Adam3371]

Update

• [x] Client side state button in react and web-js still have no hover color in light and dark mode -> use the same as for socials

[Adam3371]

Update:

• [x] When clicking on the client side state button and the loading animation starts, the "Login with passkey" text and the identifier text moves to the right. (Probably due to the laoding spinner)