+
+
+
+
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue
new file mode 100644
index 000000000..a647bd0da
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue
@@ -0,0 +1,178 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ $t('MFA_SETTINGS.MANAGEMENT.BACKUP_CODES') }} +
++ {{ $t('MFA_SETTINGS.MANAGEMENT.BACKUP_CODES_DESC') }} +
+ +
+
+
+
+
+
+ + {{ $t('MFA_SETTINGS.MANAGEMENT.DISABLE_MFA') }} +
++ {{ $t('MFA_SETTINGS.MANAGEMENT.DISABLE_MFA_DESC') }} +
+ +
+
+
+
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue
new file mode 100644
index 000000000..673f97143
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+ + {{ $t('MFA_SETTINGS.TITLE') }} +
++ {{ $t('MFA_SETTINGS.SUBTITLE') }} +
+
+
+
+
+
+
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSetupWizard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSetupWizard.vue
new file mode 100644
index 000000000..528df7658
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSetupWizard.vue
@@ -0,0 +1,323 @@
+
+
+
+
+
+
+
+
+
+
+ + {{ $t('MFA_SETTINGS.TITLE') }} +
++ {{ $t('MFA_SETTINGS.DESCRIPTION') }} +
+
+
+
+
+
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaStatusCard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaStatusCard.vue
new file mode 100644
index 000000000..3dc22eb4a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaStatusCard.vue
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+
+
+
+ + {{ $t('MFA_SETTINGS.SETUP.STEP1_TITLE') }} +
++ {{ $t('MFA_SETTINGS.SETUP.STEP1_DESCRIPTION') }} +
+
+
+
+
+ ![MFA QR Code]()
+
+
+
+ {{ $t('MFA_SETTINGS.SETUP.LOADING_QR') }}
+
+
+
+
+
+ + {{ $t('MFA_SETTINGS.SETUP.MANUAL_ENTRY') }} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ $t('MFA_SETTINGS.BACKUP.TITLE') }} +
++ {{ $t('MFA_SETTINGS.BACKUP.DESCRIPTION') }} +
+
+
+
+
+ + {{ $t('MFA_SETTINGS.BACKUP.IMPORTANT') }} + {{ $t('MFA_SETTINGS.BACKUP.IMPORTANT_NOTE') }} +
+
+
+
+
+
+
+ {{ code }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ $t('MFA_SETTINGS.ENHANCE_SECURITY') }} +
++ {{ $t('MFA_SETTINGS.ENHANCE_SECURITY_DESC') }} +
+ +
+
+
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
index b99031047..ef208eae4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
@@ -1,7 +1,9 @@
import { frontendURL } from '../../../../helper/URLHelper';
+import { parseBoolean } from '@chatwoot/utils';
import SettingsContent from './Wrapper.vue';
import Index from './Index.vue';
+import MfaSettings from './MfaSettings.vue';
export default {
routes: [
@@ -21,6 +23,23 @@ export default {
permissions: ['administrator', 'agent', 'custom_role'],
},
},
+ {
+ path: 'mfa',
+ name: 'profile_settings_mfa',
+ component: MfaSettings,
+ meta: {
+ permissions: ['administrator', 'agent', 'custom_role'],
+ },
+ beforeEnter: (to, from, next) => {
+ // Check if MFA is enabled globally
+ if (!parseBoolean(window.chatwootConfig?.isMfaEnabled)) {
+ // Redirect to profile settings if MFA is disabled
+ next({ name: 'profile_settings_index' });
+ } else {
+ next();
+ }
+ },
+ },
],
},
],
diff --git a/app/javascript/shared/helpers/clipboard.js b/app/javascript/shared/helpers/clipboard.js
index dcd25afae..3b66c39ac 100644
--- a/app/javascript/shared/helpers/clipboard.js
+++ b/app/javascript/shared/helpers/clipboard.js
@@ -17,3 +17,22 @@ export const copyTextToClipboard = async data => {
throw new Error(`Unable to copy text to clipboard: ${error.message}`);
}
};
+
+/**
+ * Handles OTP paste events by extracting numeric digits from clipboard data.
+ *
+ * @param {ClipboardEvent} event - The paste event from the clipboard
+ * @param {number} maxLength - Maximum number of digits to extract (default: 6)
+ * @returns {string|null} - Extracted numeric string or null if invalid
+ */
+export const handleOtpPaste = (event, maxLength = 6) => {
+ if (!event?.clipboardData) return null;
+
+ const pastedData = event.clipboardData
+ .getData('text')
+ .replace(/\D/g, '') // Remove all non-digit characters
+ .slice(0, maxLength); // Limit to maxLength digits
+
+ // Only return if we have the exact expected length
+ return pastedData.length === maxLength ? pastedData : null;
+};
diff --git a/app/javascript/shared/helpers/specs/clipboard.spec.js b/app/javascript/shared/helpers/specs/clipboard.spec.js
index c675edd35..a169e0939 100644
--- a/app/javascript/shared/helpers/specs/clipboard.spec.js
+++ b/app/javascript/shared/helpers/specs/clipboard.spec.js
@@ -1,4 +1,4 @@
-import { copyTextToClipboard } from '../clipboard';
+import { copyTextToClipboard, handleOtpPaste } from '../clipboard';
const mockWriteText = vi.fn();
Object.assign(navigator, {
@@ -172,3 +172,113 @@ describe('copyTextToClipboard', () => {
});
});
});
+
+describe('handleOtpPaste', () => {
+ // Helper function to create mock clipboard event
+ const createMockPasteEvent = text => ({
+ clipboardData: {
+ getData: vi.fn().mockReturnValue(text),
+ },
+ });
+
+ describe('valid OTP paste scenarios', () => {
+ it('extracts 6-digit OTP from clean numeric string', () => {
+ const event = createMockPasteEvent('123456');
+ const result = handleOtpPaste(event);
+
+ expect(result).toBe('123456');
+ expect(event.clipboardData.getData).toHaveBeenCalledWith('text');
+ });
+
+ it('extracts 6-digit OTP from string with spaces', () => {
+ const event = createMockPasteEvent('1 2 3 4 5 6');
+ const result = handleOtpPaste(event);
+
+ expect(result).toBe('123456');
+ });
+
+ it('extracts 6-digit OTP from string with dashes', () => {
+ const event = createMockPasteEvent('123-456');
+ const result = handleOtpPaste(event);
+
+ expect(result).toBe('123456');
+ });
+
+ it('handles negative numbers by extracting digits only', () => {
+ const event = createMockPasteEvent('-123456');
+ const result = handleOtpPaste(event);
+
+ expect(result).toBe('123456');
+ });
+
+ it('handles decimal numbers by extracting digits only', () => {
+ const event = createMockPasteEvent('123.456');
+ const result = handleOtpPaste(event);
+
+ expect(result).toBe('123456');
+ });
+
+ it('extracts 6-digit OTP from mixed alphanumeric string', () => {
+ const event = createMockPasteEvent('Your code is: 987654');
+ const result = handleOtpPaste(event);
+
+ expect(result).toBe('987654');
+ });
+
+ it('extracts first 6 digits when more than 6 digits present', () => {
+ const event = createMockPasteEvent('12345678901234');
+ const result = handleOtpPaste(event);
+
+ expect(result).toBe('123456');
+ });
+
+ it('handles custom maxLength parameter', () => {
+ const event = createMockPasteEvent('12345678');
+ const result = handleOtpPaste(event, 8);
+
+ expect(result).toBe('12345678');
+ });
+
+ it('extracts 4-digit OTP with custom maxLength', () => {
+ const event = createMockPasteEvent('Your PIN: 9876');
+ const result = handleOtpPaste(event, 4);
+
+ expect(result).toBe('9876');
+ });
+ });
+
+ describe('invalid OTP paste scenarios', () => {
+ it('returns null for insufficient digits', () => {
+ const event = createMockPasteEvent('12345');
+ const result = handleOtpPaste(event);
+
+ expect(result).toBeNull();
+ });
+
+ it('returns null for text with no digits', () => {
+ const event = createMockPasteEvent('Hello World');
+ const result = handleOtpPaste(event);
+
+ expect(result).toBeNull();
+ });
+
+ it('returns null for empty string', () => {
+ const event = createMockPasteEvent('');
+ const result = handleOtpPaste(event);
+
+ expect(result).toBeNull();
+ });
+
+ it('returns null when event is null', () => {
+ const result = handleOtpPaste(null);
+
+ expect(result).toBeNull();
+ });
+
+ it('returns null when event is undefined', () => {
+ const result = handleOtpPaste(undefined);
+
+ expect(result).toBeNull();
+ });
+ });
+});
diff --git a/app/javascript/v3/App.vue b/app/javascript/v3/App.vue
index 992c0b381..ef7107beb 100644
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -15,8 +15,10 @@ export default {
setColorTheme() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
this.theme = 'dark';
+ document.documentElement.classList.add('dark');
} else {
- this.theme = 'light ';
+ this.theme = 'light';
+ document.documentElement.classList.remove('dark');
}
},
listenToThemeChanges() {
@@ -25,8 +27,10 @@ export default {
mql.onchange = e => {
if (e.matches) {
this.theme = 'dark';
+ document.documentElement.classList.add('dark');
} else {
this.theme = 'light';
+ document.documentElement.classList.remove('dark');
}
};
},
diff --git a/app/javascript/v3/api/auth.js b/app/javascript/v3/api/auth.js
index a4793d3d0..146db4e07 100644
--- a/app/javascript/v3/api/auth.js
+++ b/app/javascript/v3/api/auth.js
@@ -13,6 +13,16 @@ export const login = async ({
}) => {
try {
const response = await wootAPI.post('auth/sign_in', credentials);
+
+ // Check if MFA is required
+ if (response.status === 206 && response.data.mfa_required) {
+ // Return MFA data instead of throwing error
+ return {
+ mfaRequired: true,
+ mfaToken: response.data.mfa_token,
+ };
+ }
+
setAuthCredentials(response);
clearLocalStorageOnLogout();
window.location = getLoginRedirectURL({
@@ -20,8 +30,17 @@ export const login = async ({
ssoConversationId,
user: response.data.data,
});
+ return null;
} catch (error) {
+ // Check if it's an MFA required response
+ if (error.response?.status === 206 && error.response?.data?.mfa_required) {
+ return {
+ mfaRequired: true,
+ mfaToken: error.response.data.mfa_token,
+ };
+ }
throwErrorMessage(error);
+ return null;
}
};
diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
index 4a51b3059..ff8022714 100644
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -15,6 +15,7 @@ import FormInput from '../../components/Form/Input.vue';
import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
import Spinner from 'shared/components/Spinner.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
+import MfaVerification from 'dashboard/components/auth/MfaVerification.vue';
const ERROR_MESSAGES = {
'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
@@ -29,6 +30,7 @@ export default {
GoogleOAuthButton,
Spinner,
NextButton,
+ MfaVerification,
},
props: {
ssoAuthToken: { type: String, default: '' },
@@ -58,6 +60,8 @@ export default {
hasErrored: false,
},
error: '',
+ mfaRequired: false,
+ mfaToken: null,
};
},
validations() {
@@ -87,8 +91,10 @@ export default {
this.submitLogin();
}
if (this.authError) {
- const message = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
- useAlert(this.$t(message));
+ const messageKey = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
+ // Use a method to get the translated text to avoid dynamic key warning
+ const translatedMessage = this.getTranslatedMessage(messageKey);
+ useAlert(translatedMessage);
// wait for idle state
this.requestIdleCallbackPolyfill(() => {
// Remove the error query param from the url
@@ -98,6 +104,18 @@ export default {
}
},
methods: {
+ getTranslatedMessage(key) {
+ // Avoid dynamic key warning by handling each case explicitly
+ switch (key) {
+ case 'LOGIN.OAUTH.NO_ACCOUNT_FOUND':
+ return this.$t('LOGIN.OAUTH.NO_ACCOUNT_FOUND');
+ case 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY':
+ return this.$t('LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY');
+ case 'LOGIN.API.UNAUTH':
+ default:
+ return this.$t('LOGIN.API.UNAUTH');
+ }
+ },
// TODO: Remove this when Safari gets wider support
// Ref: https://caniuse.com/requestidlecallback
//
@@ -140,7 +158,15 @@ export default {
};
login(credentials)
- .then(() => {
+ .then(result => {
+ // Check if MFA is required
+ if (result?.mfaRequired) {
+ this.loginApi.showLoading = false;
+ this.mfaRequired = true;
+ this.mfaToken = result.mfaToken;
+ return;
+ }
+
this.handleImpersonation();
this.showAlertMessage(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
})
@@ -163,6 +189,17 @@ export default {
this.submitLogin();
},
+ handleMfaVerified() {
+ // MFA verification successful, continue with login
+ this.handleImpersonation();
+ window.location = '/app';
+ },
+ handleMfaCancel() {
+ // User cancelled MFA, reset state
+ this.mfaRequired = false;
+ this.mfaToken = null;
+ this.credentials.password = '';
+ },
},
};
@@ -193,7 +230,19 @@ export default {
+
+
+
+
+
+
+ + {{ $t('MFA_SETTINGS.STATUS_ENABLED') }} +
++ {{ $t('MFA_SETTINGS.STATUS_ENABLED_DESC') }} +
+