@payez/next-mvp 4.8.1 → 4.8.2

package/src/components/recovery/SetPasswordStep.tsx

@@ -1,118 +1,118 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { usePasswordValidation } from '../../hooks/usePasswordValidation';
-import { passwordRulesText } from '../../lib/password-rules';
-
-interface Props {
-  onSubmit: (password: string, confirmPassword: string) => void;
-  loading: boolean;
-}
-
-export function SetPasswordStep({ onSubmit, loading }: Props) {
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-
-  const passwordsMatch = password === confirmPassword && password !== '';
-
-  // PAY-1591: ADVISORY only. It shows the rules and what is missing; it never disables submit, because the validator
-  // may be down and the IdP is the authority (a dead validator must not trap a user who already spent their code).
-  const { setPassword: validateAsYouType, policy, failedRequirements } = usePasswordValidation();
-  // The policy only comes back with a validation, so ask once on mount with a one-character probe (it never leaves the
-  // policy question; the answer is what the rules line is built from). Until it lands the line says the rules are coming.
-  useEffect(() => { validateAsYouType('a'); }, [validateAsYouType]);
-  const missing = failedRequirements.filter((r) => !/^(Unable to validate|Password validation)/i.test(r));
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (passwordsMatch) {
-      onSubmit(password, confirmPassword);
-    }
-  };
-
-  return (
-    <div className="bg-white border border-gray-300 rounded p-8">
-      <h2 className="text-xl font-semibold text-gray-900 mb-2">Set New Password</h2>
-      <p className="text-sm text-gray-600 mb-2">
-        Choose a strong password for your account.
-      </p>
-      <p data-testid="password-rules" className="text-sm text-gray-700 mb-6">
-        {passwordRulesText(policy)}
-      </p>
-
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="password" className="block text-sm font-medium text-gray-900 mb-1">
-            New Password
-          </label>
-          <div className="relative">
-            <input
-              type={showPassword ? 'text' : 'password'}
-              id="password"
-              value={password}
-              onChange={(e) => { setPassword(e.target.value); validateAsYouType(e.target.value); }}
-              required
-              disabled={loading}
-              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-gray-900 focus:outline-none disabled:opacity-50 disabled:bg-gray-50 pr-10"
-            />
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-600 hover:text-gray-900"
-            >
-              {showPassword ? '👁️' : '👁️‍🗨️'}
-            </button>
-          </div>
-        </div>
-
-        <div>
-          <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-900 mb-1">
-            Confirm New Password
-          </label>
-          <div className="relative">
-            <input
-              type={showConfirmPassword ? 'text' : 'password'}
-              id="confirmPassword"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              required
-              disabled={loading}
-              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-gray-900 focus:outline-none disabled:opacity-50 disabled:bg-gray-50 pr-10"
-            />
-            <button
-              type="button"
-              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-600 hover:text-gray-900"
-            >
-              {showConfirmPassword ? '👁️' : '👁️‍🗨️'}
-            </button>
-          </div>
-        </div>
-
-        {password && missing.length > 0 && (
-          <ul data-testid="password-missing" className="text-sm text-gray-700 list-disc pl-5">
-            {missing.map((r) => (
-              <li key={r}>{r}</li>
-            ))}
-          </ul>
-        )}
-
-        {!passwordsMatch && confirmPassword && (
-          <div className="bg-red-50 border border-red-200 rounded p-3">
-            <p className="text-red-700 text-sm">Passwords do not match</p>
-          </div>
-        )}
-
-        <button
-          type="submit"
-          disabled={!passwordsMatch || loading}
-          className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          {loading ? 'Resetting Password...' : 'Reset Password'}
-        </button>
-      </form>
-    </div>
-  );
-}
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { usePasswordValidation } from '../../hooks/usePasswordValidation';
+import { passwordRulesText } from '../../lib/password-rules';
+
+interface Props {
+  onSubmit: (password: string, confirmPassword: string) => void;
+  loading: boolean;
+}
+
+export function SetPasswordStep({ onSubmit, loading }: Props) {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const passwordsMatch = password === confirmPassword && password !== '';
+
+  // PAY-1591: ADVISORY only. It shows the rules and what is missing; it never disables submit, because the validator
+  // may be down and the IdP is the authority (a dead validator must not trap a user who already spent their code).
+  const { setPassword: validateAsYouType, policy, failedRequirements } = usePasswordValidation();
+  // The policy only comes back with a validation, so ask once on mount with a one-character probe (it never leaves the
+  // policy question; the answer is what the rules line is built from). Until it lands the line says the rules are coming.
+  useEffect(() => { validateAsYouType('a'); }, [validateAsYouType]);
+  const missing = failedRequirements.filter((r) => !/^(Unable to validate|Password validation)/i.test(r));
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (passwordsMatch) {
+      onSubmit(password, confirmPassword);
+    }
+  };
+
+  return (
+    <div className="bg-white border border-gray-300 rounded p-8">
+      <h2 className="text-xl font-semibold text-gray-900 mb-2">Set New Password</h2>
+      <p className="text-sm text-gray-600 mb-2">
+        Choose a strong password for your account.
+      </p>
+      <p data-testid="password-rules" className="text-sm text-gray-700 mb-6">
+        {passwordRulesText(policy)}
+      </p>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium text-gray-900 mb-1">
+            New Password
+          </label>
+          <div className="relative">
+            <input
+              type={showPassword ? 'text' : 'password'}
+              id="password"
+              value={password}
+              onChange={(e) => { setPassword(e.target.value); validateAsYouType(e.target.value); }}
+              required
+              disabled={loading}
+              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-gray-900 focus:outline-none disabled:opacity-50 disabled:bg-gray-50 pr-10"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-600 hover:text-gray-900"
+            >
+              {showPassword ? '👁️' : '👁️‍🗨️'}
+            </button>
+          </div>
+        </div>
+
+        <div>
+          <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-900 mb-1">
+            Confirm New Password
+          </label>
+          <div className="relative">
+            <input
+              type={showConfirmPassword ? 'text' : 'password'}
+              id="confirmPassword"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              disabled={loading}
+              className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-gray-900 focus:outline-none disabled:opacity-50 disabled:bg-gray-50 pr-10"
+            />
+            <button
+              type="button"
+              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-600 hover:text-gray-900"
+            >
+              {showConfirmPassword ? '👁️' : '👁️‍🗨️'}
+            </button>
+          </div>
+        </div>
+
+        {password && missing.length > 0 && (
+          <ul data-testid="password-missing" className="text-sm text-gray-700 list-disc pl-5">
+            {missing.map((r) => (
+              <li key={r}>{r}</li>
+            ))}
+          </ul>
+        )}
+
+        {!passwordsMatch && confirmPassword && (
+          <div className="bg-red-50 border border-red-200 rounded p-3">
+            <p className="text-red-700 text-sm">Passwords do not match</p>
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={!passwordsMatch || loading}
+          className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {loading ? 'Resetting Password...' : 'Reset Password'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/components/recovery/VerifyCodeStep.tsx

@@ -1,90 +1,90 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-
-interface Props {
-  code: string;
-  setCode: (code: string) => void;
-  onSubmit: () => void;
-  onResend: () => void;
-  loading: boolean;
-  maskedDestination?: string;
-}
-
-export function VerifyCodeStep({
-  code,
-  setCode,
-  onSubmit,
-  onResend,
-  loading,
-  maskedDestination
-}: Props) {
-  const [resendCooldown, setResendCooldown] = useState(0);
-
-  useEffect(() => {
-    if (resendCooldown > 0) {
-      const timer = setTimeout(() => setResendCooldown(resendCooldown - 1), 1000);
-      return () => clearTimeout(timer);
-    }
-  }, [resendCooldown]);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onSubmit();
-  };
-
-  const handleResend = () => {
-    onResend();
-    setResendCooldown(30);
-  };
-
-  return (
-    <div className="bg-white border border-gray-300 rounded p-8">
-      <h2 className="text-xl font-semibold text-gray-900 mb-2">Enter Verification Code</h2>
-      {maskedDestination && (
-        <p className="text-sm text-gray-600 mb-6">
-          Enter the 6-digit code sent to <span className="font-medium">{maskedDestination}</span>
-        </p>
-      )}
-
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="code" className="block text-sm font-medium text-gray-900 mb-1">
-            Verification Code
-          </label>
-          <input
-            type="text"
-            id="code"
-            value={code}
-            onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
-            required
-            disabled={loading}
-            placeholder="000000"
-            maxLength={6}
-            className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-gray-900 focus:outline-none disabled:opacity-50 disabled:bg-gray-50 text-center text-2xl tracking-widest font-mono"
-          />
-          <p className="text-xs text-gray-600 mt-1">Code expires in 5 minutes</p>
-        </div>
-
-        <button
-          type="submit"
-          disabled={loading || code.length !== 6}
-          className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          {loading ? 'Verifying...' : 'Verify Code'}
-        </button>
-
-        <div className="text-center">
-          <button
-            type="button"
-            onClick={handleResend}
-            disabled={loading || resendCooldown > 0}
-            className="text-sm text-gray-900 hover:underline font-medium disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline"
-          >
-            {resendCooldown > 0 ? `Resend Code (${resendCooldown}s)` : 'Resend Code'}
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}
+'use client';
+
+import React, { useState, useEffect } from 'react';
+
+interface Props {
+  code: string;
+  setCode: (code: string) => void;
+  onSubmit: () => void;
+  onResend: () => void;
+  loading: boolean;
+  maskedDestination?: string;
+}
+
+export function VerifyCodeStep({
+  code,
+  setCode,
+  onSubmit,
+  onResend,
+  loading,
+  maskedDestination
+}: Props) {
+  const [resendCooldown, setResendCooldown] = useState(0);
+
+  useEffect(() => {
+    if (resendCooldown > 0) {
+      const timer = setTimeout(() => setResendCooldown(resendCooldown - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [resendCooldown]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit();
+  };
+
+  const handleResend = () => {
+    onResend();
+    setResendCooldown(30);
+  };
+
+  return (
+    <div className="bg-white border border-gray-300 rounded p-8">
+      <h2 className="text-xl font-semibold text-gray-900 mb-2">Enter Verification Code</h2>
+      {maskedDestination && (
+        <p className="text-sm text-gray-600 mb-6">
+          Enter the 6-digit code sent to <span className="font-medium">{maskedDestination}</span>
+        </p>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="code" className="block text-sm font-medium text-gray-900 mb-1">
+            Verification Code
+          </label>
+          <input
+            type="text"
+            id="code"
+            value={code}
+            onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+            required
+            disabled={loading}
+            placeholder="000000"
+            maxLength={6}
+            className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-gray-900 focus:outline-none disabled:opacity-50 disabled:bg-gray-50 text-center text-2xl tracking-widest font-mono"
+          />
+          <p className="text-xs text-gray-600 mt-1">Code expires in 5 minutes</p>
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading || code.length !== 6}
+          className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {loading ? 'Verifying...' : 'Verify Code'}
+        </button>
+
+        <div className="text-center">
+          <button
+            type="button"
+            onClick={handleResend}
+            disabled={loading || resendCooldown > 0}
+            className="text-sm text-gray-900 hover:underline font-medium disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline"
+          >
+            {resendCooldown > 0 ? `Resend Code (${resendCooldown}s)` : 'Resend Code'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}