diff --git a/src/UI/Components/ConfirmationsView.js b/src/UI/Components/ConfirmationsView.js index cca3d3fe..1b662186 100644 --- a/src/UI/Components/ConfirmationsView.js +++ b/src/UI/Components/ConfirmationsView.js @@ -40,7 +40,7 @@ export default class ConfirmationsView extends Component { `; }).join('') } - Looks good! + ${i18n('looks_good')} `); } diff --git a/src/UI/Components/StringView.js b/src/UI/Components/StringView.js index 70ec350a..a16f5617 100644 --- a/src/UI/Components/StringView.js +++ b/src/UI/Components/StringView.js @@ -8,6 +8,7 @@ export default class StringView extends Component { static PROPERTIES = { text: { value: '' }, heading: { value: 0 }, + no_html_encode: { value: false }, } static CSS = /*css*/` @@ -26,7 +27,9 @@ export default class StringView extends Component { const either = ({ heading, text }) => { console.log('---', { heading, text }); const wrapper_nodeName = heading ? 'h' + heading : 'span'; - $(this.dom_).find('span').html(`<${wrapper_nodeName}>${html_encode(text)}`); + $(this.dom_).find('span').html(`<${wrapper_nodeName}>${ + this.get('no_html_encode') ? text : html_encode(text) + }`); }; listen('heading', heading => { either({ heading, text: this.get('text') }); diff --git a/src/UI/UIWindow2FASetup.js b/src/UI/UIWindow2FASetup.js index 8871b855..a4bd9118 100644 --- a/src/UI/UIWindow2FASetup.js +++ b/src/UI/UIWindow2FASetup.js @@ -95,21 +95,22 @@ const UIWindow2FASetup = async function UIWindow2FASetup () { children: [ new StepHeading({ symbol: '1', - text: 'Open Authenticator App', + text: i18n('setup2fa_1_step_heading'), }), new StringView({ - text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare augue eu est pharetra, non faucibus eros finibus. Morbi metus sapien, pretium consequat erat eu, accumsan imperdiet metus. Donec varius libero tellus, malesuada rhoncus nunc viverra eget. Quisque ultrices scelerisque ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non purus varius, molestie nibh vitae, elementum urna. Suspendisse ultricies porta gravida. Nulla eu consequat mi, id mattis leo.', + text: i18n('setup2fa_1_instructions', [], false), + no_html_encode: true, }), new StepHeading({ symbol: '2', - text: 'Scan This QR Code', + text: i18n('setup2fa_2_step_heading') }), new QRCodeView({ value: data.url, }), new StepHeading({ symbol: '3', - text: 'Enter Verification Code', + text: i18n('setup2fa_3_step_heading') }), new CodeEntryView({ _ref: me => code_entry = me, @@ -133,26 +134,28 @@ const UIWindow2FASetup = async function UIWindow2FASetup () { children: [ new StepHeading({ symbol: '4', - text: 'Copy Recovery Codes', + text: i18n('setup2fa_4_step_heading') }), new StringView({ - text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare augue eu est pharetra, non faucibus eros finibus. Morbi metus sapien, pretium consequat erat eu, accumsan imperdiet metus. Donec varius libero tellus, malesuada rhoncus nunc viverra eget. Quisque ultrices scelerisque ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non purus varius, molestie nibh vitae, elementum urna. Suspendisse ultricies porta gravida. Nulla eu consequat mi, id mattis leo.', + text: i18n('setup2fa_4_instructions', [], false) }), new RecoveryCodesView({ values: data.codes, }), new StepHeading({ symbol: '5', - text: 'Confirm Recovery Codes', + text: i18n('setup2fa_5_step_heading') }), new ConfirmationsView({ confirmations: [ - 'I have copied the recovery codes', + i18n('setup2fa_5_confirmation_1'), + i18n('setup2fa_5_confirmation_2'), ], confirmed: done_enabled, }), new Button({ enabled: done_enabled, + label: i18n('setup2fa_5_button'), on_click: async () => { await enable_2fa_(); stepper.next(); diff --git a/src/i18n/translations/en.js b/src/i18n/translations/en.js index 0c5d37ac..c42db8b9 100644 --- a/src/i18n/translations/en.js +++ b/src/i18n/translations/en.js @@ -134,6 +134,7 @@ const en = { log_in: "Log In", log_into_another_account_anyway: 'Log into another account anyway', log_out: 'Log Out', + looks_good: "Looks good!", manage_sessions: "Manage Sessions", move: 'Move', moving: "Moving", @@ -271,6 +272,26 @@ const en = { yes_release_it: 'Yes, Release It', you_have_been_referred_to_puter_by_a_friend: "You have been referred to Puter by a friend!", zip: "Zip", + + // === 2FA Setup === + setup2fa_1_step_heading: 'Open your authenticator app', + setup2fa_1_instructions: ` + You can use any authenticator app that supports the Time-based One-Time Password (TOTP) protocol. + There are many to choose from, but if you're unsure + Authy + is a solid choice for Android and iOS. + `, + setup2fa_2_step_heading: 'Scan the QR code', + setup2fa_3_step_heading: 'Enter the 6-digit code', + setup2fa_4_step_heading: 'Copy your recovery codes', + setup2fa_4_instructions: ` + These recovery codes are the only way to access your account if you lose your phone or can't use your authenticator app. + Make sure to store them in a safe place. + `, + setup2fa_5_step_heading: 'Confirm 2FA setup', + setup2fa_5_confirmation_1: 'I have saved my recovery codes in a secure location', + setup2fa_5_confirmation_2: 'I am ready to enable 2FA', + setup2fa_5_button: 'Enable 2FA', } };