4014a846f0
FE support for https://github.com/chatwoot/chatwoot/pull/12290 ## Linear: - https://github.com/chatwoot/chatwoot/issues/486 ## Description This PR implements Multi-Factor Authentication (MFA) support for user accounts, enhancing security by requiring a second form of verification during login. The feature adds TOTP (Time-based One-Time Password) authentication with QR code generation and backup codes for account recovery. ## Type of change - [ ] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Added comprehensive RSpec tests for MFA controller functionality - Tested MFA setup flow with QR code generation - Verified OTP validation and backup code generation - Tested login flow with MFA enabled/disabled ## Checklist: - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: iamsivin <iamsivin@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Sojan Jose <sojan@pepalo.com>
48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<script setup>
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
|
|
import Button from 'dashboard/components-next/button/Button.vue';
|
|
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const navigateToMfa = () => {
|
|
router.push({
|
|
name: 'profile_settings_mfa',
|
|
params: {
|
|
accountId: route.params.accountId,
|
|
},
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-n-background rounded-xl p-4 border border-n-slate-4">
|
|
<div class="flex flex-col xs:flex-row items-center justify-between gap-4">
|
|
<div class="flex flex-col items-start gap-1.5">
|
|
<div class="flex items-center gap-2">
|
|
<Icon
|
|
icon="i-lucide-lock-keyhole"
|
|
class="size-4 text-n-slate-10 flex-shrink-0"
|
|
/>
|
|
<h5 class="text-sm font-semibold text-n-slate-12">
|
|
{{ $t('MFA_SETTINGS.TITLE') }}
|
|
</h5>
|
|
</div>
|
|
<p class="text-sm text-n-slate-11">
|
|
{{ $t('MFA_SETTINGS.DESCRIPTION') }}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
faded
|
|
:label="$t('PROFILE_SETTINGS.FORM.SECURITY_SECTION.MFA_BUTTON')"
|
|
icon="i-lucide-settings"
|
|
class="flex-shrink-0"
|
|
@click="navigateToMfa"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|