diff --git a/src/gui/src/UI/UIWindowPhoneVerificationRequired.js b/src/gui/src/UI/UIWindowPhoneVerificationRequired.js index d3d151e48..551666575 100644 --- a/src/gui/src/UI/UIWindowPhoneVerificationRequired.js +++ b/src/gui/src/UI/UIWindowPhoneVerificationRequired.js @@ -18,12 +18,24 @@ */ import UIWindow from './UIWindow.js'; +import { get_country_list } from '../helpers/country_codes.js'; +import { + format_phone_as_you_type, + inspect_phone, + phone_example_for, + detect_country_from_input, +} from '../helpers/phone.js'; // SMS phone verification dialog. Two steps in one window: // 1. Enter a phone number → POST /send-confirm-phone (Prelude sends an SMS). // 2. Enter the 6-digit code → POST /confirm-phone (Prelude validates it). // The 6-digit code UX mirrors UIWindowEmailConfirmationRequired.js. Used as a // hard gate for low-reputation signups, so by default it has no close button. +// +// The number field combines a searchable country-code picker with the national +// number. Everything the user types is normalized to E.164 with libphonenumber +// before it's sent, so country selection and on-screen formatting are purely a +// convenience — they can never change which number actually reaches the server. // Friendly, non-accusatory messages for the abuse `reason` codes the backend // forwards on a refused send. The backend never interprets these (the abuse @@ -40,6 +52,9 @@ const SEND_REASON_MESSAGES = { "We couldn't verify your device. Please email hi@puter.com for assistance.", }; +// Seconds the "Re-send code" link stays disabled after a send. +const RESEND_COOLDOWN_SECONDS = 30; + function UIWindowPhoneVerificationRequired(options) { return new Promise(async (resolve) => { options = options ?? {}; @@ -47,15 +62,136 @@ function UIWindowPhoneVerificationRequired(options) { let final_code = ''; let is_checking_code = false; let is_sending = false; + // Resolve the returned promise at most once. Success resolves(true); + // a user-initiated close resolves(false). Idempotent so the close hook + // can fire after a success without clobbering the result. + let settled = false; + const settle = (val) => { + if (settled) return; + settled = true; + resolve(val); + }; + // Logout is handled by a global 'logout' event, not by resolving this + // gate. Setting this before closing keeps the close hook from + // resolving(false) — which would make the caller's do/while reopen the + // dialog instead of letting the logout transition take over. + let logging_out = false; + // Touch devices: skip auto-focusing the country search (which would pop + // the on-screen keyboard over the inline list); larger tap targets and + // tap-to-select carry the interaction instead. Users can still tap the + // search field to filter, at which point the keyboard is expected. + const isTouch = (() => { + try { + return !!( + window.matchMedia && + window.matchMedia('(pointer: coarse)').matches + ); + } catch (_) { + return false; + } + })(); + + // Localized UI strings. i18n() falls back to English and then to the + // raw key, so missing translations degrade gracefully rather than break. + const T = { + title: i18n('phone_verify_title'), + subtitle: i18n('phone_verify_subtitle'), + country_label: i18n('phone_country_label'), + number_label: i18n('phone_number_label'), + send_code: i18n('phone_send_code'), + verify_btn: i18n('phone_verify_btn'), + resend_code: i18n('phone_resend_code'), + change_number: i18n('phone_change_number'), + enter_valid: i18n('phone_enter_valid'), + invalid_code: i18n('phone_invalid_code'), + could_not_send: i18n('phone_could_not_send'), + could_not_verify: i18n('phone_could_not_verify'), + search_countries: i18n('phone_search_countries'), + no_matches: i18n('phone_no_matches'), + select_country: i18n('phone_select_country'), + code_sent_to: i18n('phone_code_sent_to'), + suggested: i18n('phone_suggested'), + all_countries: i18n('phone_all_countries'), + }; const spinner = 'circle anim'; - const send_btn_txt = 'Send Code'; - const verify_btn_txt = 'Verify Phone'; + const send_btn_txt = T.send_code; + const verify_btn_txt = T.verify_btn; const phoneIcon = ''; + // Authoritative country list (libphonenumber + localized names). + const countries = get_country_list(window.locale); + const countryByIso = {}; + for (const c of countries) countryByIso[c.iso] = c; + + // Best-effort starting country: last-used (this browser), else the + // browser locale's region, else US, else whatever's first. + const detectDefaultIso = () => { + try { + const stored = localStorage.getItem('phone_verif_last_country'); + if (stored && countryByIso[stored]) return stored; + } catch (_) {} + try { + const langs = navigator.languages?.length + ? navigator.languages + : [navigator.language]; + for (const l of langs) { + const region = (l || '').split('-')[1]; + if (region && countryByIso[region.toUpperCase()]) { + return region.toUpperCase(); + } + } + } catch (_) {} + return countryByIso['US'] ? 'US' : countries[0]?.iso; + }; + let currentIso = detectDefaultIso(); + let currentDial = (countryByIso[currentIso] || {}).dial || ''; + + // A short "Suggested" group pinned to the top: the chosen country + // (last-used or locale-detected) plus a few common ones, deduped. This + // keeps the typical pick one click away despite the ~245-item list. + const POPULAR_ISOS = ['US', 'GB', 'CA', 'AU', 'IN', 'DE', 'FR']; + const suggestedIsos = []; + const pushSuggested = (iso) => { + if (iso && countryByIso[iso] && !suggestedIsos.includes(iso)) { + suggestedIsos.push(iso); + } + }; + pushSuggested(currentIso); // already prefers last-used, then locale + POPULAR_ISOS.forEach(pushSuggested); + const suggested = suggestedIsos.slice(0, 6).map((iso) => countryByIso[iso]); + + // Render one
  • option. `data-search` is a pre-lowercased haystack + // (name + dial with/without "+" + iso) so filtering is a substring test. + // `data-group` lets the filter hide the Suggested copies while searching. + const renderOption = (c, idPrefix, group) => { + const search = + `${c.name} ${c.dial} ${c.dial.replace('+', '')} ${c.iso}`.toLowerCase(); + return ( + `
  • ` + + `${c.flag}` + + `${html_encode(c.name)}` + + `${html_encode(c.dial)}` + + `` + + `
    • ` + ); + }; + + let countryOptions = ''; + if (suggested.length) { + countryOptions += ``; + countryOptions += suggested + .map((c) => renderOption(c, 'cc-sug-', 'suggested')) + .join(''); + countryOptions += ``; + } + countryOptions += countries + .map((c) => renderOption(c, 'cc-opt-', 'all')) + .join(''); + let h = ''; // Scoped styling for this dialog. h += ``; if (options.show_close_button !== false) { h += @@ -111,20 +349,31 @@ function UIWindowPhoneVerificationRequired(options) { h += '
    '; h += `
    ${phoneIcon}
    `; - h += '

    Verify your phone number

    '; + h += `

    ${T.title}

    `; // -- Step 1: phone number -- h += '
    '; - h += - '

    We\'ll text you a verification code to confirm it\'s really you.

    '; + h += `

    ${T.subtitle}

    `; // Offer a friendly human fallback so verification is never a dead end — // worded as help, not as an accusation. h += `

    Need help? Email hi@puter.com and we'll assist creating your account.

    `; - h += '
    '; + h += ''; + h += ``; + h += '
    '; + h += `'; h += - ''; - h += - ''; + ''; + h += ''; + h += '
    '; + h += ''; h += ``; if (options.logout_in_footer) { h += `
    ${i18n('log_out')}
    `; @@ -133,22 +382,20 @@ function UIWindowPhoneVerificationRequired(options) { // -- Step 2: 6-digit code (hidden until a code is sent) -- h += ''; - h += - '

    Enter the 6-digit code sent to

    '; - h += '
    '; + h += `

    ${T.code_sent_to}

    `; + h += ''; h += `
    - - - + + + - - - + + +
    `; h += ``; h += '
    '; - h += - 'Re-send code  •  Change number'; + h += `${T.resend_code}  •  ${T.change_number}`; if (options.logout_in_footer) { h += '  •  '; h += `${i18n('log_out')}`; @@ -178,8 +425,18 @@ function UIWindowPhoneVerificationRequired(options) { width: 390, dominant: true, ...options.window_options, + // Teardown that must run on EVERY close path (close button, parent + // cascade, programmatic .close()), not just the buttons we wire + // below — otherwise the resend setInterval keeps firing on a + // detached node. Also settles the promise for the closable variant. + on_close: () => { + cleanup(); + if (!logging_out) settle(false); + }, onAppend: function (el_window) { - $(el_window).find('.phone-input').first().focus(); + const $inp = $(el_window).find('.phone-input').first(); + $inp.focus(); + $inp.closest('.phone-input-group').addClass('focused'); }, window_class: 'window-confirm-phone-using-code', window_css: { @@ -195,21 +452,265 @@ function UIWindowPhoneVerificationRequired(options) { }); const showError = (msg) => { - $(el_window).find('.error').html(html_encode(msg)).fadeIn(); + $(el_window).find('.phone-step:visible .error').html(html_encode(msg)).fadeIn(); }; const clearError = () => { $(el_window).find('.error').hide(); }; + // 6-digit code DOM refs (used by paste/WebOTP and the per-digit logic). + const numberCodeForm = el_window.querySelector('[data-number-code-form]'); + const numberCodeInputs = [ + ...numberCodeForm.querySelectorAll('[data-number-code-input]'), + ]; + + // -- teardown: clear timers / listeners that outlive a single render -- + let resendTimer = null; + let otpAbort = null; + const onDocMouseDown = (e) => { + // Self-heal: if the window is gone, detach and stop. + if (!document.body.contains(el_window)) { + document.removeEventListener('mousedown', onDocMouseDown, true); + return; + } + if (!comboOpen) return; + const grp = el_window.querySelector('.phone-input-group'); + const pnl = el_window.querySelector('.phone-country-panel'); + if ((grp && grp.contains(e.target)) || (pnl && pnl.contains(e.target))) return; + closeCombo(); + }; + const cleanup = () => { + try { if (resendTimer) { clearInterval(resendTimer); resendTimer = null; } } catch (_) {} + try { otpAbort?.abort(); } catch (_) {} + try { document.removeEventListener('mousedown', onDocMouseDown, true); } catch (_) {} + }; + + // ---------- Country picker (searchable, inline-expanding) ---------- + let comboOpen = false; + const $panel = () => $(el_window).find('.phone-country-panel'); + const searchEl = () => el_window.querySelector('.phone-country-search'); + const allOptions = () => [ + ...el_window.querySelectorAll('.phone-country-option'), + ]; + const visibleOptions = () => + allOptions().filter((o) => o.style.display !== 'none'); + + const updateValidityHint = () => { + const inp = el_window.querySelector('#phone-verif-input'); + const { is_valid } = inspect_phone(inp ? inp.value : '', currentIso); + $(el_window).find('.phone-input-group').toggleClass('valid', is_valid); + }; + + const setCountry = (iso) => { + const c = countryByIso[iso]; + if (!c) return; + currentIso = c.iso; + currentDial = c.dial; + const $btn = $(el_window).find('.phone-country-btn'); + $btn.find('.phone-country-btn-flag').text(c.flag || ''); + $btn.find('.phone-country-btn-dial').text(c.dial); + $btn.attr('aria-label', `${T.select_country}: ${c.name} ${c.dial}`); + const inp = el_window.querySelector('#phone-verif-input'); + if (inp) inp.setAttribute('placeholder', phone_example_for(c.iso) || ''); + // Mark the currently-selected country (both its Suggested and + // All-countries copies) so the check stays visible as the keyboard + // cursor / hover moves elsewhere. + allOptions().forEach((o) => + o.classList.toggle('selected', o.dataset.iso === c.iso), + ); + try { localStorage.setItem('phone_verif_last_country', c.iso); } catch (_) {} + updateValidityHint(); + }; + + const reformatNationalValue = () => { + const inp = el_window.querySelector('#phone-verif-input'); + if (!inp) return; + inp.value = format_phone_as_you_type(inp.value, currentIso); + updateValidityHint(); + }; + + const setActiveOption = (el) => { + allOptions().forEach((o) => o.classList.remove('active')); + const s = searchEl(); + if (el) { + el.classList.add('active'); + if (s) s.setAttribute('aria-activedescendant', el.id); + el.scrollIntoView({ block: 'nearest' }); + } else if (s) { + s.removeAttribute('aria-activedescendant'); + } + }; + + const filterOptions = (q) => { + const query = (q || '').trim().toLowerCase(); + const labels = [...el_window.querySelectorAll('.cc-group-label')]; + let anyVisible = false; + if (query) { + // Searching: drop the Suggested group + its labels so results + // aren't shown twice, then substring-filter the full list. + labels.forEach((l) => (l.style.display = 'none')); + for (const o of allOptions()) { + if (o.dataset.group === 'suggested') { + o.style.display = 'none'; + continue; + } + const match = o.dataset.search.indexOf(query) !== -1; + o.style.display = match ? '' : 'none'; + if (match) anyVisible = true; + } + } else { + labels.forEach((l) => (l.style.display = '')); + for (const o of allOptions()) o.style.display = ''; + anyVisible = true; + } + $(el_window).find('.phone-country-empty').prop('hidden', anyVisible); + setActiveOption(visibleOptions()[0] || null); + }; + + const openCombo = () => { + if (comboOpen) return; + comboOpen = true; + $panel().prop('hidden', false); + $(el_window).find('.phone-country-btn').attr('aria-expanded', 'true'); + const s = searchEl(); + if (s) s.value = ''; + filterOptions(''); + // Open at the top so the pinned Suggested group is what users see + // first, then highlight the selected country (its Suggested copy). + const list = el_window.querySelector('.phone-country-list'); + if (list) list.scrollTop = 0; + const sel = el_window.querySelector( + `.phone-country-option[data-iso="${currentIso}"]`, + ); + if (sel) setActiveOption(sel); + if (s && !isTouch) s.focus(); + }; + + const closeCombo = () => { + if (!comboOpen) return; + comboOpen = false; + $panel().prop('hidden', true); + $(el_window).find('.phone-country-btn').attr('aria-expanded', 'false'); + }; + + const toggleCombo = () => (comboOpen ? closeCombo() : openCombo()); + + const selectOption = (el) => { + if (!el) return; + setCountry(el.dataset.iso); + reformatNationalValue(); + closeCombo(); + const inp = el_window.querySelector('#phone-verif-input'); + if (inp) inp.focus(); + }; + + // National-number input: live formatting with caret preservation, plus + // auto-detecting the country when the user types a "+..." number. + const handleNationalInput = () => { + const inp = el_window.querySelector('#phone-verif-input'); + if (!inp) return; + const before = inp.value; + const caret = inp.selectionStart ?? before.length; + const digitsBeforeCaret = before + .slice(0, caret) + .replace(/\D/g, '').length; + + const detected = detect_country_from_input(before); + if (detected && detected !== currentIso && countryByIso[detected]) { + setCountry(detected); + } + + const formatted = format_phone_as_you_type(before, currentIso); + inp.value = formatted; + + // Put the caret back after the same number of digits it preceded. + let pos = 0; + let seen = 0; + while (pos < formatted.length && seen < digitsBeforeCaret) { + if (/\d/.test(formatted[pos])) seen++; + pos++; + } + try { inp.setSelectionRange(pos, pos); } catch (_) {} + + updateValidityHint(); + }; + + // ---------- Resend cooldown ---------- + const fmtMMSS = (s) => { + const m = Math.floor(s / 60); + const sec = s % 60; + return `${m}:${sec < 10 ? '0' : ''}${sec}`; + }; + const startResendCooldown = (secs) => { + const $link = $(el_window).find('.phone-resend-code'); + let remaining = secs; + const render = () => { + // Self-heal: stop ticking if the window is gone. + if (!document.body.contains(el_window)) { + if (resendTimer) { clearInterval(resendTimer); resendTimer = null; } + return; + } + if (remaining <= 0) { + if (resendTimer) { clearInterval(resendTimer); resendTimer = null; } + $link.removeClass('disabled').text(T.resend_code); + return; + } + $link.addClass('disabled').text( + i18n('phone_resend_in', [fmtMMSS(remaining)]), + ); + remaining--; + }; + if (resendTimer) { clearInterval(resendTimer); resendTimer = null; } + render(); + resendTimer = setInterval(render, 1000); + }; + + // ---------- WebOTP: auto-fill the SMS code on supporting devices ---------- + const fillCode = (code) => { + const digits = (code || '').replace(/\D/g, '').slice(0, 6).split(''); + if (!digits.length) return; + numberCodeInputs.forEach((inp, i) => { + inp.value = digits[i] ?? ''; + }); + final_code = digits.join(''); + if (final_code.length === 6) { + $(el_window).find('.phone-verify-btn').prop('disabled', false); + doVerify(); + } else { + (numberCodeInputs[digits.length] ?? numberCodeInputs[numberCodeInputs.length - 1]).focus(); + } + }; + const startWebOTP = () => { + if (!('OTPCredential' in window)) return; + try { + if (otpAbort) { try { otpAbort.abort(); } catch (_) {} } + otpAbort = new AbortController(); + navigator.credentials + .get({ otp: { transport: ['sms'] }, signal: otpAbort.signal }) + .then((otp) => { + if (otp && otp.code) fillCode(String(otp.code)); + }) + .catch(() => {}); + } catch (_) {} + }; + // -- Step 1: send the code -- const sendCode = async () => { if (is_sending) return; clearError(); - const phone = $(el_window).find('.phone-input').val(); - if (!phone || phone.trim().length < 5) { - showError('Please enter a valid phone number.'); + const inp = el_window.querySelector('#phone-verif-input'); + const raw = (inp ? inp.value : '').trim(); + const digits = raw.replace(/\D/g, ''); + if (digits.length < 4) { + showError(T.enter_valid); return; } + // Canonical E.164 from libphonenumber; fall back to a naive join + // only if parsing fails entirely, so we always send *something* and + // let the server be the final arbiter (never block a real signup). + const { e164 } = inspect_phone(raw, currentIso); + const phone = e164 || `${currentDial}${digits}`; + is_sending = true; $(el_window) .find('.phone-send-btn') @@ -235,18 +736,29 @@ function UIWindowPhoneVerificationRequired(options) { headers: { Authorization: `Bearer ${window.auth_token}` }, statusCode: { 401: (xhr) => window.handle401(xhr) }, success: function () { - // Advance to the code-entry step. + // Advance to the code-entry step with a clean slate. $(el_window).find('.phone-target').text(phone); + numberCodeInputs.forEach((i) => { + i.value = ''; + i.disabled = false; + }); + final_code = ''; + $(el_window) + .find('.phone-verify-btn') + .prop('disabled', true) + .html(verify_btn_txt); $(el_window).find('.phone-step-1').hide(); $(el_window).find('.phone-step-2').show(); - $(el_window).find('.digit-input').first().focus(); + numberCodeInputs[0]?.focus(); + startResendCooldown(RESEND_COOLDOWN_SECONDS); + startWebOTP(); }, error: function (xhr) { const reason = xhr.responseJSON?.reason; showError( SEND_REASON_MESSAGES[reason] ?? xhr.responseJSON?.error ?? - 'Could not send a code to that number.', + T.could_not_send, ); }, complete: function () { @@ -259,117 +771,152 @@ function UIWindowPhoneVerificationRequired(options) { }); }; - $(el_window) - .find('.phone-send-btn') - .on('click submit', function (e) { - e.preventDefault(); - e.stopPropagation(); - sendCode(); + // -- Step 2: verify the code -- + const doVerify = () => { + if (is_checking_code) return; + if (!final_code || final_code.length !== 6) return; + is_checking_code = true; + clearError(); + $(el_window).find('.phone-verify-btn').prop('disabled', true).html(spinner); + $(el_window).find('.digit-input').prop('disabled', true); + + $.ajax({ + url: `${window.api_origin}/confirm-phone`, + type: 'POST', + data: JSON.stringify({ code: final_code }), + async: true, + contentType: 'application/json', + headers: { Authorization: `Bearer ${window.auth_token}` }, + statusCode: { 401: (xhr) => window.handle401(xhr) }, + success: function (res) { + if (res.phone_verified) { + // Settle before close() so the on_close hook's + // settle(false) is a no-op; cleanup runs via on_close. + settle(true); + window.refresh_user_data(window.auth_token); + $(el_window).close(); + } else { + showError(T.invalid_code); + $(el_window).find('.digit-input').val('').prop('disabled', false); + final_code = ''; + numberCodeInputs[0]?.focus(); + $(el_window) + .find('.phone-verify-btn') + .prop('disabled', true) + .html(verify_btn_txt); + } + }, + error: function (xhr) { + showError(xhr.responseJSON?.error ?? T.could_not_verify); + $(el_window).find('.digit-input').val('').prop('disabled', false); + final_code = ''; + numberCodeInputs[0]?.focus(); + $(el_window) + .find('.phone-verify-btn') + .prop('disabled', true) + .html(verify_btn_txt); + }, + complete: function () { + is_checking_code = false; + }, }); + }; + + // ---------- Wire up events ---------- + $(el_window).find('.phone-country-btn').on('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + toggleCombo(); + }); + + const sEl = searchEl(); + if (sEl) { + sEl.addEventListener('input', (e) => filterOptions(e.target.value)); + sEl.addEventListener('keydown', (e) => { + const vis = visibleOptions(); + const active = el_window.querySelector('.phone-country-option.active'); + const idx = vis.indexOf(active); + if (e.key === 'ArrowDown') { + e.preventDefault(); + if (vis.length) setActiveOption(vis[Math.min(idx + 1, vis.length - 1)] ?? vis[0]); + } else if (e.key === 'ArrowUp') { + e.preventDefault(); + if (vis.length) setActiveOption(vis[Math.max(idx - 1, 0)]); + } else if (e.key === 'Enter') { + e.preventDefault(); + selectOption(active || vis[0]); + } else if (e.key === 'Escape') { + e.preventDefault(); + closeCombo(); + $(el_window).find('.phone-country-btn').focus(); + } + }); + } + + $(el_window) + .find('.phone-country-list') + .on('click', '.phone-country-option', function () { + selectOption(this); + }); + + document.addEventListener('mousedown', onDocMouseDown, true); + + const $inp = $(el_window).find('#phone-verif-input'); + $inp.on('input', handleNationalInput); + $inp.on('focus', function () { + $(this).closest('.phone-input-group').addClass('focused'); + }); + $inp.on('blur', function () { + $(this).closest('.phone-input-group').removeClass('focused'); + }); + + $(el_window).find('.phone-send-btn').on('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + sendCode(); + }); + $(el_window).find('.phone-step-1').on('submit', function (e) { + e.preventDefault(); + sendCode(); + }); + + $(el_window).find('.phone-verify-btn').on('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + doVerify(); + }); + $(el_window).find('.phone-step-2').on('submit', function (e) { + e.preventDefault(); + doVerify(); + }); // Re-send / change number on the code step. - $(el_window) - .find('.phone-resend-code') - .on('click', function () { - sendCode(); - }); - $(el_window) - .find('.phone-change-number') - .on('click', function () { - clearError(); - $(el_window).find('.phone-step-2').hide(); - $(el_window).find('.phone-step-1').show(); - $(el_window).find('.phone-input').focus(); - }); + $(el_window).find('.phone-resend-code').on('click', function () { + if ($(this).hasClass('disabled')) return; + sendCode(); + }); + $(el_window).find('.phone-change-number').on('click', function () { + clearError(); + try { otpAbort?.abort(); } catch (_) {} + $(el_window).find('.phone-step-2').hide(); + $(el_window).find('.phone-step-1').show(); + $(el_window).find('#phone-verif-input').focus(); + }); - // -- Step 2: verify the code -- - $(el_window) - .find('.phone-verify-btn') - .on('click submit', function (e) { - e.preventDefault(); - e.stopPropagation(); - - $(el_window).find('.phone-verify-btn').prop('disabled', true); - $(el_window).find('.digit-input').prop('disabled', true); - clearError(); - - if (is_checking_code) return; - is_checking_code = true; - - $(el_window).find('.phone-verify-btn').html(spinner); - - setTimeout(() => { - $.ajax({ - url: `${window.api_origin}/confirm-phone`, - type: 'POST', - data: JSON.stringify({ code: final_code }), - async: true, - contentType: 'application/json', - headers: { - Authorization: `Bearer ${window.auth_token}`, - }, - statusCode: { 401: (xhr) => window.handle401(xhr) }, - success: function (res) { - if (res.phone_verified) { - $(el_window).close(); - window.refresh_user_data(window.auth_token); - resolve(true); - } else { - showError('Invalid verification code.'); - $(el_window).find('.digit-input').val(''); - $(el_window) - .find('.digit-input') - .first() - .focus(); - $(el_window) - .find('.phone-verify-btn') - .prop('disabled', false) - .html(verify_btn_txt); - $(el_window) - .find('.digit-input') - .prop('disabled', false); - } - }, - error: function (xhr) { - showError( - xhr.responseJSON?.error ?? - 'Could not verify code.', - ); - $(el_window).find('.digit-input').val(''); - $(el_window).find('.digit-input').first().focus(); - $(el_window) - .find('.phone-verify-btn') - .prop('disabled', false) - .html(verify_btn_txt); - $(el_window) - .find('.digit-input') - .prop('disabled', false); - }, - complete: function () { - is_checking_code = false; - }, - }); - }, 1000); - }); - - // logout - $(el_window) - .find('.phone-log-out') - .on('click', function () { - window.logout(); - $(el_window).close(); - }); + // logout — handled by the global 'logout' event; flag it so the + // close hook doesn't resolve(false) and trigger a caller re-open. + // (Teardown for the close button and all other paths runs via on_close.) + $(el_window).find('.phone-log-out').on('click', function () { + logging_out = true; + window.logout(); + $(el_window).close(); + }); // -- 6-digit input handling (mirrors the email confirmation dialog) -- - const numberCodeForm = el_window.querySelector( - '[data-number-code-form]', - ); - const numberCodeInputs = [ - ...numberCodeForm.querySelectorAll('[data-number-code-input]'), - ]; - numberCodeForm.addEventListener('input', ({ target }) => { if (!target.value.length) { + final_code = ''; + $(el_window).find('.phone-verify-btn').prop('disabled', true); return (target.value = null); } const inputLength = target.value.length; @@ -401,7 +948,7 @@ function UIWindowPhoneVerificationRequired(options) { if (final_code.length === 6) { $(el_window).find('.phone-verify-btn').prop('disabled', false); $(el_window).find('.digit-input').prop('disabled', false); - $(el_window).find('.phone-verify-btn').trigger('click'); + doVerify(); } }); @@ -435,6 +982,9 @@ function UIWindowPhoneVerificationRequired(options) { break; } }); + + // Initialize the picker button (flag, dial, placeholder example). + setCountry(currentIso); }); } diff --git a/src/gui/src/helpers/country_codes.js b/src/gui/src/helpers/country_codes.js new file mode 100644 index 000000000..c3eee9463 --- /dev/null +++ b/src/gui/src/helpers/country_codes.js @@ -0,0 +1,109 @@ +/** + * Copyright (C) 2024-present Puter Technologies Inc. + * + * This file is part of Puter. + * + * Puter is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import { getCountries, getCountryCallingCode } from 'libphonenumber-js'; + +// The country list for the SMS phone-verification dropdown is derived at +// runtime from libphonenumber-js (the authoritative set of dialable countries +// and their calling codes) and Intl.DisplayNames (localized country names). +// Nothing is hand-maintained, so the list can never drift out of sync with the +// parsing/validation logic that uses the same library. + +/** + * Convert a two-letter ISO 3166-1 alpha-2 country code into its flag emoji by + * mapping each ASCII letter to its regional-indicator symbol. Returns an empty + * string for malformed input so callers can safely concatenate the result. + * + * @global + * @param {string} iso - Two-letter country code, e.g. "US". + * @returns {string} The flag emoji, or '' if the code is not two ASCII letters. + */ +const flag_emoji_for = (iso) => { + if (typeof iso !== 'string' || iso.length !== 2) return ''; + const base = 0x1f1e6; // regional indicator symbol letter A + const cc = iso.toUpperCase(); + const a = cc.charCodeAt(0) - 65; + const b = cc.charCodeAt(1) - 65; + if (a < 0 || a > 25 || b < 0 || b > 25) return ''; + return String.fromCodePoint(base + a) + String.fromCodePoint(base + b); +}; + +// Cache the assembled list per locale — building it touches ~245 countries. +const _list_cache = {}; + +/** + * The full list of dialable countries for the given locale, each entry: + * { iso: 'US', dial: '+1', name: 'United States', flag: '🇺🇸' } + * Sorted by localized name. Cached per locale. Always returns an array (empty + * only in the extremely unlikely event libphonenumber yields nothing). + * + * @global + * @param {string} [locale] - BCP-47 locale for country names (defaults to 'en'). + * @returns {Array<{ iso: string, dial: string, name: string, flag: string }>} + */ +const get_country_list = (locale) => { + const key = locale || 'en'; + if (_list_cache[key]) return _list_cache[key]; + + let display_names = null; + try { + display_names = new Intl.DisplayNames([key, 'en'], { type: 'region' }); + } catch (_) { + try { + display_names = new Intl.DisplayNames(['en'], { type: 'region' }); + } catch (__) { + display_names = null; + } + } + + let isos = []; + try { + isos = getCountries(); + } catch (_) { + isos = []; + } + + const list = []; + for (const iso of isos) { + let dial = ''; + try { + dial = '+' + getCountryCallingCode(iso); + } catch (_) { + continue; // skip anything without a usable calling code + } + let name = iso; + try { + name = (display_names && display_names.of(iso)) || iso; + } catch (_) { + name = iso; + } + list.push({ iso, dial, name, flag: flag_emoji_for(iso) }); + } + + try { + list.sort((a, b) => a.name.localeCompare(b.name, key)); + } catch (_) { + list.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0)); + } + + _list_cache[key] = list; + return list; +}; + +export { get_country_list, flag_emoji_for }; diff --git a/src/gui/src/helpers/phone.js b/src/gui/src/helpers/phone.js new file mode 100644 index 000000000..41d8026de --- /dev/null +++ b/src/gui/src/helpers/phone.js @@ -0,0 +1,113 @@ +/** + * Copyright (C) 2024-present Puter Technologies Inc. + * + * This file is part of Puter. + * + * Puter is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import { + AsYouType, + parsePhoneNumber, + getExampleNumber, +} from 'libphonenumber-js'; +import phoneExamples from 'libphonenumber-js/mobile/examples'; + +// Thin, defensive wrappers around libphonenumber-js used by the SMS +// phone-verification dialog. Every function swallows the library's throws +// (it throws on empty/garbage input) and returns a safe fallback, so the UI +// can call them on every keystroke without guarding each call site. + +/** + * Format a partially-typed national number for display as the user types, + * e.g. "2015550123" → "(201) 555-0123" for US. Purely cosmetic: the value is + * always re-parsed before submission, so a formatting miss can never corrupt + * the number actually sent. Returns the original input on any error. + * + * @param {string} value - Raw input value. + * @param {string} iso - Selected country (ISO 3166-1 alpha-2). + * @returns {string} + */ +const format_phone_as_you_type = (value, iso) => { + try { + return new AsYouType(iso).input(value ?? ''); + } catch (_) { + return value ?? ''; + } +}; + +/** + * Parse a typed number against the selected country and report its canonical + * E.164 form and whether it is a valid number. Accepts either a national + * number (interpreted using `iso`) or a full international number (leading + * "+", which overrides `iso`). libphonenumber correctly handles trunk + * prefixes here — e.g. UK "07400 123456" → "+447400123456". + * + * @param {string} input - Raw input value. + * @param {string} iso - Selected country (ISO 3166-1 alpha-2). + * @returns {{ e164: string|null, is_valid: boolean }} + */ +const inspect_phone = (input, iso) => { + const raw = (input ?? '').trim(); + if (!raw) return { e164: null, is_valid: false }; + try { + const parsed = parsePhoneNumber(raw, iso); + if (!parsed) return { e164: null, is_valid: false }; + return { e164: parsed.number, is_valid: parsed.isValid() }; + } catch (_) { + return { e164: null, is_valid: false }; + } +}; + +/** + * An example national-format number for a country, used as the field + * placeholder so users see the expected shape. "" when unavailable. + * + * @param {string} iso - Country (ISO 3166-1 alpha-2). + * @returns {string} + */ +const phone_example_for = (iso) => { + try { + const ex = getExampleNumber(iso, phoneExamples); + return ex ? ex.formatNational() : ''; + } catch (_) { + return ''; + } +}; + +/** + * If the user typed or pasted a full international number (leading "+"), + * detect which country it belongs to so the picker can follow along. Returns + * an ISO code, or null when the input isn't international or is ambiguous. + * + * @param {string} input - Raw input value. + * @returns {string|null} + */ +const detect_country_from_input = (input) => { + const raw = (input ?? '').trim(); + if (!raw.startsWith('+')) return null; + try { + const parsed = parsePhoneNumber(raw); + return parsed?.country ?? null; + } catch (_) { + return null; + } +}; + +export { + format_phone_as_you_type, + inspect_phone, + phone_example_for, + detect_country_from_input, +}; diff --git a/src/gui/src/i18n/translations/en.js b/src/gui/src/i18n/translations/en.js index 134b18095..6d330071c 100644 --- a/src/gui/src/i18n/translations/en.js +++ b/src/gui/src/i18n/translations/en.js @@ -228,6 +228,25 @@ const en = { paste_into_folder: 'Paste Into Folder', path: 'Path', personalization: 'Personalization', + phone_verify_title: 'Verify your phone number', + phone_verify_subtitle: "We'll text you a verification code to confirm it's really you.", + phone_country_label: 'Country', + phone_number_label: 'Phone number', + phone_send_code: 'Send Code', + phone_verify_btn: 'Verify Phone', + phone_resend_code: 'Re-send code', + phone_resend_in: 'Resend in %%', + phone_change_number: 'Change number', + phone_enter_valid: 'Please enter a valid phone number.', + phone_invalid_code: 'Invalid verification code.', + phone_could_not_send: 'Could not send a code to that number.', + phone_could_not_verify: 'Could not verify code.', + phone_search_countries: 'Search countries', + phone_no_matches: 'No matches', + phone_suggested: 'Suggested', + phone_all_countries: 'All countries', + phone_select_country: 'Select country', + phone_code_sent_to: 'Enter the 6-digit code sent to', pick_name_for_website: 'Pick a name for your website:', pick_name_for_worker: 'Pick a name for your worker:', picture: 'Picture',