-
- ${html_encode(i18n('setup2fa_5_confirmation_1'))}
-
-
- ${html_encode(i18n('setup2fa_5_confirmation_2'))}
-
-
${html_encode(i18n('looks_good'))}
-
';
+
+ // ── Progress bar ─────────────────────────────────────────────────────
+ h += '
';
+ h += '
';
+ h += '
1
';
+ h += '
Scan ';
+ h += '
';
+ h += '
';
+ h += '
';
+ h += '
2
';
+ h += '
Backup ';
+ h += '
';
+ h += '
';
+ h += '
';
+ h += `
${SVG_CHECK}
`;
+ h += '
Done ';
+ h += '
';
+ h += '
';
+
+ // ── Screen 1: Scan QR + Enter Code ───────────────────────────────────
+ h += '
';
+ h += `
${i18n('setup2fa_1_instructions', [], false)}
`;
+ h += `
`;
+
+ // Manual secret key
+ if ( secret ) {
+ h += '
';
+ h += ` ${html_encode(secret)} `;
+ h += ` ${SVG_COPY} `;
+ h += '
';
+ }
+
+ h += '
' + html_encode(i18n('setup2fa_3_step_heading')) + '
';
+
+ h += '
';
+ h += '
';
+ for ( let i = 0; i < 6; i++ ) {
+ h += `
';
+ h += '
';
+ h += `
`;
+ h += '
';
+ h += '
'; // end screen 1
+
+ // ── Screen 2: Recovery Codes ─────────────────────────────────────────
+ h += '
';
+ h += `
${i18n('setup2fa_4_instructions', [], false)}
`;
+ h += '
';
+ h += ` ${SVG_WARN}`;
+ h += ' These codes can only be viewed once. Store them in a safe place — you will need them if you lose access to your authenticator app. ';
+ h += '
';
+
+ h += '
';
+ h += '
';
+ data.codes.forEach((code, i) => {
+ h += `
${i + 1}. ${html_encode(code)}
`;
+ });
+ h += '
';
+ h += '
';
+ h += ` ${SVG_COPY} ${html_encode(i18n('copy'))} `;
+ h += ` ${SVG_PRINT} ${html_encode(i18n('print'))} `;
+ h += '
';
+ h += '
';
+
+ h += '
';
+
+ h += '
';
+
+ h += `
${html_encode(i18n('setup2fa_5_button'))} `;
+ h += '
'; // end screen 2
+
+ // ── Screen 3: Success ────────────────────────────────────────────────
+ h += '
';
+ h += `
${SVG_SHIELD_CHECK}
`;
+ h += `
${html_encode(i18n('two_factor_enabled'))}
`;
+ h += '
Your account is now protected with two-factor authentication. You\'ll be asked for a verification code each time you sign in.
';
+ h += `
Done `;
+ h += '
'; // end screen 3
+
+ h += '