Making the Login Username appear in the url of the members Profile page and not the email

I’m trying to make it so when clients create an account, the username that they are entering in the custom signup window is added to their URL and not the first section of their email address. I would also like that later on they can enter either their email address or their username and password to login.

There doesnt seem to be a clear way to link the two. Any help is greatly appreciated