Login page redesign

[deansheather]

Use Christin's design in Slack for redesigning the login page.

Relates to #22

[phorcys420]

We should also make the "Server URL" field enter-able (i.e pressing enter) if that wasn't already taken into account.

---

Other thoughts :

• The "main" field should be focused when switching back to the login window (e.g "Server URL", and then "Session Token")
• The fields should be autofilled if the data meets expectations (for "Server URL", just parse the clipboard data to check if it's a URL, for "Session Token", i think just do whatever the VSCode extension is doing)

[ibetitsmike]

@phorcys420 I've implemented the enter part in a separate issue.

Auto pasting URI sounds like a bad idea, with the token I'd also prefer users to actually "paste it in". I would however consider clearing their clipboard after login so they don't accidentialy paste it somewhere else.

[phorcys420]

@ibetitsmike what's so bad about auto pasting the URI?

Also, regarding the token, that's just how the VSCode extension works, so I think we'd want to be on the same page for that.

[ibetitsmike]

I think I could be fine with automatically pasting the URI - cause you see it and can change if desired.

The token is masked so the user doesn't necessarily know if he pasted in the correct thing. And how does the VS Code extension know when the clipboard contains the token? It does a pattern check?

[phorcys420]

@ibetitsmike it just validates it against the server

https://github.com/coder/vscode-coder/blob/main/src%2Fcommands.ts#L243-L264

[matifali]

@deansheather moving this as a GA candidate.