@sparkvault/sdk 1.1.5 → 1.1.6

package/dist/sparkvault.esm.js

@@ -2301,71 +2301,6 @@ function getStyles(options) {
        TOTP VIEW
        ======================================== */
 
-    .sv-resend-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: 16px;
-    }
-
-    .sv-resend-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      color: ${tokens.textSecondary};
-      font-size: 13px;
-      font-weight: 500;
-      text-decoration: none;
-      cursor: pointer;
-      background: none;
-      border: none;
-      padding: 0;
-      transition: color 0.15s ease;
-    }
-
-    .sv-resend-btn:hover:not(:disabled) {
-      color: ${tokens.primary};
-    }
-
-    .sv-resend-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .sv-resend-btn svg {
-      width: 14px;
-      height: 14px;
-    }
-
-    .sv-resend-timer {
-      font-size: 13px;
-      font-weight: 500;
-      color: ${tokens.textMuted};
-      min-width: 24px;
-      text-align: right;
-    }
-
-    .sv-alt-method-link {
-      display: block;
-      width: 100%;
-      text-align: center;
-      color: ${tokens.textSecondary};
-      font-size: 13px;
-      font-weight: 400;
-      text-decoration: none;
-      cursor: pointer;
-      background: none;
-      border: none;
-      padding: 16px 0 0 0;
-      margin-top: 8px;
-      transition: color 0.15s ease;
-    }
-
-    .sv-alt-method-link:hover {
-      color: ${tokens.primary};
-      text-decoration: underline;
-    }
-
     .sv-resend-container {
       text-align: center;
       margin-top: 16px;
@@ -2757,27 +2692,6 @@ function createBackArrowIcon() {
     }));
     return svg;
 }
-/**
- * Resend/refresh icon - circular arrow
- */
-function createResendIcon() {
-    const svg = createSvgElement('0 0 16 16');
-    svg.appendChild(createPath('M13.5 8a5.5 5.5 0 11-1.21-3.45', {
-        stroke: 'currentColor',
-        'stroke-width': '1.5',
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-        fill: 'none',
-    }));
-    svg.appendChild(createPath('M13.5 2.5v2.5H11', {
-        stroke: 'currentColor',
-        'stroke-width': '1.5',
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-        fill: 'none',
-    }));
-    return svg;
-}
 /**
  * Close (X) icon
  */
@@ -3700,7 +3614,6 @@ class TotpVerifyView {
         this.inputElements = [];
         this.submitButton = null;
         this.resendButton = null;
-        this.timerDisplay = null;
         this.backLink = null;
         this.errorContainer = null;
         this.resendTimer = null;
@@ -3718,12 +3631,14 @@ class TotpVerifyView {
     }
     render() {
         const container = div();
+        this.backLink = this.createBackLink();
         const title = document.createElement('h3');
         title.className = 'sv-title';
         title.textContent = 'Enter verification code';
+        const methodText = this.props.method === 'email' ? 'email' : 'phone';
         const subtitle = document.createElement('p');
         subtitle.className = 'sv-subtitle';
-        subtitle.innerHTML = `Enter the 6 digit code that has been sent to <strong>${escapeHtml(this.props.email)}</strong> to log in.`;
+        subtitle.innerHTML = `We sent a 6-digit code to your ${methodText}<br><strong>${escapeHtml(this.props.email)}</strong>`;
         this.errorContainer = div();
         if (this.props.error) {
             this.errorContainer.appendChild(errorMessage(this.props.error));
@@ -3741,32 +3656,35 @@ class TotpVerifyView {
                 this.startBackoff(this.props.backoffExpires);
             }
         }
-        // Resend row: icon + text on left, timer on right
-        const resendContainer = div('sv-resend-row');
+        const resendContainer = div('sv-resend-container');
         this.resendButton = document.createElement('button');
-        this.resendButton.className = 'sv-resend-btn';
-        this.resendButton.appendChild(createResendIcon());
-        this.resendButton.appendChild(document.createTextNode('Resend code'));
+        this.resendButton.className = 'sv-back-link';
+        this.resendButton.textContent = 'Resend code';
         this.resendButton.addEventListener('click', this.boundHandleResend);
-        this.timerDisplay = document.createElement('span');
-        this.timerDisplay.className = 'sv-resend-timer';
         resendContainer.appendChild(this.resendButton);
-        resendContainer.appendChild(this.timerDisplay);
-        // "Log in another way" link at bottom
-        this.backLink = document.createElement('button');
-        this.backLink.className = 'sv-alt-method-link';
-        this.backLink.textContent = 'Log in another way';
-        this.backLink.addEventListener('click', this.boundHandleBack);
+        // Use flex column layout so we can use CSS order for tab order control
+        container.style.display = 'flex';
+        container.style.flexDirection = 'column';
+        // Append in TAB ORDER (not visual order) - back link last for tab navigation
         container.appendChild(title);
         container.appendChild(subtitle);
         container.appendChild(this.errorContainer);
         container.appendChild(inputGroup);
         container.appendChild(this.submitButton);
         container.appendChild(resendContainer);
-        container.appendChild(this.backLink);
+        container.appendChild(this.backLink); // Last in DOM = last in tab order
         this.focusTimeoutId = setTimeout(() => this.inputElements[0]?.focus(), 50);
         return container;
     }
+    createBackLink() {
+        const link = document.createElement('button');
+        link.className = 'sv-back-link';
+        link.style.order = '-1'; // Visually keep at top with flexbox (DOM order controls tab order)
+        link.appendChild(createBackArrowIcon());
+        link.appendChild(document.createTextNode(' Choose another method'));
+        link.addEventListener('click', this.boundHandleBack);
+        return link;
+    }
     createInputGroup() {
         const group = div('sv-totp-input-group');
         for (let i = 0; i < CODE_LENGTH; i++) {
@@ -3941,15 +3859,15 @@ class TotpVerifyView {
         this.resendTimer = new CooldownTimer({
             duration: 30,
             onTick: (secondsRemaining) => {
-                if (!this.resendButton || !this.timerDisplay)
+                if (!this.resendButton)
                     return;
-                this.timerDisplay.textContent = `${secondsRemaining}s`;
+                this.resendButton.textContent = `Resend code (${secondsRemaining}s)`;
                 this.resendButton.disabled = true;
             },
             onComplete: () => {
-                if (!this.resendButton || !this.timerDisplay)
+                if (!this.resendButton)
                     return;
-                this.timerDisplay.textContent = '';
+                this.resendButton.textContent = 'Resend code';
                 this.resendButton.disabled = false;
             },
         });