Enhancing the profile manager to selectively show the password tab, contingent upon the presence of securely hashed credentials stored in the local storage.

[Mahmoud-Emad]

Description

It enhances the profile manager to selectively show the password tab, contingent upon the presence of securely hashed credentials stored in the local storage.

Changes

• created a new interface named Credentials that includes passwordHash and mnemonicHash fields to represent securely hashed credentials.
• added new helper functions to manage the Credentials interface like getCredentials, setCredentials and isStoredCredentials to facilitate the handling and retrieval of stored credentials.
• Implemented a key-down function to enable login or connect functions when the Enter key is pressed on the password input, provided there are no validation errors.
• Change the Store and login button text to Connect

Related Issues

• change the default view for the login manager #488
• Store And Login action button #519

Screenshots

• 
• 

Update

• 

Checklist

• Tests included
• Build pass
• Documentation
• Code format and docstrings
• Screenshots/Video attached (needed for UI changes)

[MohamedElmdary]

Enter doesn't respect Mnemonic value

connector_issue_1.mp4

Using keydown.enter will cause some unexpected cases; It's better to use <form> with onsubmit event as it won't fire event if the button is disabled

[MohamedElmdary]

Please don't use setTimeout api to wait as it might lead to unexpected results like old playground

[Mahmoud-Emad]

Used requestAnimationFrame instead

[MohamedElmdary]

Don't use requestAnimationFrame either.
Please check nextTick

import { nextTick } from "vue"

nextTicket().then(mounte)

[MohamedElmdary]

@Mahmoud-Emad any updates?

[Mahmoud-Emad]

should be done

[MohamedElmdary]

Suggested change

	function getCredentials() {
	const getCredentials = localStorage.getItem("wallet");
	let credentials: Credentials = {};
	if (getCredentials) {
	credentials = JSON.parse(getCredentials);
	}
	return credentials;
	}
	const version = 1; // for example
	const WALLET_KEY = "wallet.v" + version
	function getCredentials() {
	const getCredentials = localStorage.getItem(WALLET_KEY);
	let credentials: Credentials = {};
	if (getCredentials) {
	credentials = JSON.parse(getCredentials);
	}
	return credentials;
	}

Support versioning for wallet as we might change how we manage password and mnemonic from time to time.
let's imagine if we changed the storing way when the user open his browser it will be broken as we will be expecting another way of parsing data and here versioning comes into play it won't respect any wallet beside the new one

[Mahmoud-Emad]

let's assume that we changed the version of storing the wallet, in that case, we have to update the version, which is the way we're going to update the wallet key, in both cases we have to change the key, what is the difference?

[MohamedElmdary]

Updating the version should be done whenever we change the behaviour of the wallet so it will break the user browser
@AhmedHanafy725

[AhmedHanafy725]

the version will make it easier to migrate from the old key to the new one. if the same key is used, you will have to check which one is used first and then decide whether to migrate to the new one or not.