Implement Sign-in with Passkey Button

[yunochi]

Summary

Implement Login with passkey Button

EN: Instead of entering an ID and authenticating with a passkey, create a dedicated 'Login with Passkey' button.

JA: idから入力してpasskey認証をする代わりに、「Passkeyでログインボタン」を作成します

Purpose

WHY (EN)

Password-less login accounts have the inconvenience of having to first enter an ID and then click the login button to authenticate the passkey.
In addition, multi-account users have the inconvenience of having to enter an ID and then select a passkey from the list.
Since Misskey already uses residentKey, it is possible to skip the ID entry process and log in directly by selecting a passkey.

For reference, GitHub also adopts the same interface for its login screen.

WHY (JA)

パスワードレスログイン アカウントは、id を最初に入力してからログインボタンを押してパスキー認証をする不便があります。 さらに、複数のアカウントを持つユーザーは、id入力後にパスキーリストから選択する必要があるという不便さもあります。
MisskeyはすでにresidentKeyを使用しているため、idを入力するプロセスをスキップしてパスキーを選択してすぐにログインすることが可能です。

ちなみにgithubも同じインターフェースをログイン画面に採用しています。

Do you want to implement this feature yourself?

• Yes, I will implement this by myself and send a pull request

[yunochi]

PRを準備しています。
Passkeyログインボタンを作成する際に、パスワードレスログインがオンになっているアカウントを入力するとパスワードフィールドが消える挙動をなくし、
ログイン方法を 1FA (Passkey) と 2FA (id/pw の後に OTP or Passkey) で確実に区別したいと思います。

I'm currently preparing a PR.
While creating a Passkey login button, I want to eliminate the behavior where the password input field disappears when you enter an account with passwordless login turned on,
and clearly distinguish the login method between 1FA (Passkey) and 2FA (ID/PW, then OTP or Passkey).

Example video

Login with passkey

Screen_Recording_20240919_160112_Chrome.mp4

Login with 2FA

Screen_Recording_20240919_160300_Chrome.mp4

• NOTE: The black screen after selecting the passkey is the fingerprint recognition prompt. (Due to Android recording limitations)

[kakkokari-gtyih]

Done in #14577