1
0
forked from mirror/misskey
mi.moris.day/packages/frontend/src/components/MkSigninDialog.vue
Yuri Lee d8dd1683c9
Add Sign in with passkey Button ()
* Sign in with passkey (PoC)

* 💄 Added "Login with Passkey" Button

* refactor: Improve error response when WebAuthn challenge fails

* signinResponse should be placed under the SigninWithPasskeyResponse object.

* Frontend fix

* Fix: Rate limiting key for passkey signin

Use specific rate limiting key: 'signin-with-passkey'  for passkey sign-in API to avoid collisions with signin rate-limit.

* Refactor: enhance Passkey sign-in flow and error handling

- Increased the rate limit for Passkey sign-in attempts to accommodate the two API calls needed per sign-in.
- Improved error messages and handling in both the `WebAuthnService` and the `SigninWithPasskeyApiService`, providing more context and better usability.
- Updated error messages to provide more specific and helpful details to the user.

These changes aim to enhance the Passkey sign-in experience by providing more robust error handling, improving security by limiting API calls, and delivering a more user-friendly interface.

* Refactor: Streamline 2FA flow and remove redundant Passkey button.

- Separate the flow of 1FA and 2FA.
- Remove duplicate passkey buttons

* Fix: Add error messages to MkSignin

* chore: Hide passkey button if the entered user does not use passkey login

* Update CHANGELOG.md

* Refactor: Rename functions and Add comments

* Update locales/ja-JP.yml

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Fix: Update translation

- update index.d.ts
- update ko-KR.yml, en-US.yml
- Fix: Reflect Changed i18n key on MkSignin

---------

Co-authored-by: Squarecat-meow <kw7551@gmail.com>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
2024-09-26 08:25:33 +09:00

57 lines
1.2 KiB
Vue

<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkModalWindow
ref="dialog"
:width="400"
:height="450"
@close="onClose"
@closed="emit('closed')"
>
<template #header>{{ i18n.ts.login }}</template>
<MkSpacer :marginMin="20" :marginMax="28">
<MkSignin :autoSet="autoSet" :message="message" :openOnRemote="openOnRemote" @login="onLogin"/>
</MkSpacer>
</MkModalWindow>
</template>
<script lang="ts" setup>
import { shallowRef } from 'vue';
import type { OpenOnRemoteOptions } from '@/scripts/please-login.js';
import MkSignin from '@/components/MkSignin.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
import { i18n } from '@/i18n.js';
withDefaults(defineProps<{
autoSet?: boolean;
message?: string,
openOnRemote?: OpenOnRemoteOptions,
}>(), {
autoSet: false,
message: '',
openOnRemote: undefined,
});
const emit = defineEmits<{
(ev: 'done', v: any): void;
(ev: 'closed'): void;
(ev: 'cancelled'): void;
}>();
const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
function onClose() {
emit('cancelled');
if (dialog.value) dialog.value.close();
}
function onLogin(res) {
emit('done', res);
if (dialog.value) dialog.value.close();
}
</script>