Add success messages to authentication flow

[Copilot]

Users receive no feedback after completing critical authentication actions (OTP verification, profile completion, password operations), creating confusion about whether their actions succeeded.

Changes

Backend (mobile-auth.php)

Added success query parameter to 5 redirect points:

• otp_verified - After OTP verification for existing users
• profile_saved - After profile form submission
• password_set - After setting new password
• login - After successful password login
• password_reset - After password reset completion

// Example: OTP verification redirect
wp_redirect(add_query_arg('success', 'otp_verified', $redir));

Templates

Added success message displays with 2-second auto-redirect:

templates/auth.php (3 additions)

• OTP verification: "کد تایید شد، در حال هدایت..."
• Password login: "ورود موفق، در حال هدایت..."
• Password reset: "رمز عبور با موفقیت تغییر یافت"

templates/complete-profile.php (1 addition)

• Profile saved: "ثبت نام شما با موفقیت انجام شد!"

templates/set-password.php (2 additions)

• Profile saved (carried from previous step)
• Password set: "رمز عبور شما با موفقیت ذخیره شد"

<?php if (isset($_GET['success']) && $_GET['success'] == 'otp_verified'): ?>
    <p class="ma_success">کد تایید شد، در حال هدایت...</p>
    <script>
    setTimeout(function() {
        window.location.href = '<?php echo esc_url($redirect_url); ?>';
    }, 2000);
    </script>
<?php endif; ?>

All messages use existing .ma_success CSS class. Existing error handling unchanged.

Original prompt

Problem

Users currently don't receive clear feedback after completing important actions like:

• OTP verification (success/failure)
• Profile completion (success)
• Password login (errors)
• Password setting (success)

This creates confusion and poor user experience as users don't know if their actions were successful or failed.

Solution Required

Add appropriate success and error messages at all critical points in the authentication flow:

1. OTP Verification (templates/auth.php - verify step)

• ✅ Success: Show "کد تایید شد، در حال هدایت..." message for 1-2 seconds before redirect
• ❌ Error: Already exists, keep current behavior

2. Complete Profile (templates/complete-profile.php)

• ✅ Success: Add ?success=profile_saved parameter and show message "ثبت نام شما با موفقیت انجام شد!" before redirecting to set-password page
• Display success message at top of page when redirected back with success parameter
• Use auto-redirect after 2 seconds

3. Password Login (templates/auth.php - password step)

• ❌ Errors: Already handled correctly with ma_error class
• ✅ Success: Add brief "ورود موفق، در حال هدایت..." message before redirect

4. Set Password (templates/set-password.php)

• ✅ Success: Add success message "رمز عبور شما با موفقیت ذخیره شد" for 2 seconds before final redirect
• ❌ Errors: Already handled correctly

5. Password Reset Flow (templates/auth.php - reset_password & new_password steps)

• ✅ Success after reset: Add "رمز عبور با موفقیت تغییر یافت" message before redirect
• Errors already handled

Implementation Details

Message Styling

Use existing CSS classes:

• .ma_success - for success messages (green background)
• .ma_error - for error messages (red background) - already in use
• .ma_info_message - for informational messages (blue background)

Auto-redirect Pattern

For success messages, use this pattern:

<?php if (isset($_GET['success']) && $_GET['success'] == 'some_action'): ?>
    <p class="ma_success">پیام موفقیت</p>
    <script>
    setTimeout(function() {
        window.location.href = '<?php echo $redirect_url; ?>';
    }, 2000);
    </script>
<?php endif; ?>

Backend Changes Required

File: mobile-auth.php

1. After OTP verification success (line ~255-272):

   • For existing users: Redirect with &success=otp_verified
   • For new users: Keep current behavior (redirect to complete-profile)

2. After save_profile success (line ~348):

   • Add &success=profile_saved to the redirect URL before going to set-password

3. After set_password success (line ~396-400):

   • Add &success=password_set to final redirect URL

4. After login_password success (line ~442-450):

   • Add &success=login to redirect URL

5. After reset_password success (line ~530-533):

   • Add &success=password_reset to redirect URL

Template Changes Required

Update each template to show success messages with auto-redirect:

1. templates/auth.php:

   • Add success message handling for verify step
   • Add success message handling for password step
   • Add success message handling for new_password step

2. templates/complete-profile.php:

   • Add success message display at the top when ?success=profile_saved

3. templates/set-password.php:

   • Add success message display when action completes

Testing Checklist

• New user registration flow shows all success messages
• Existing user OTP login shows success message
• Password login shows success on valid credentials
• Password reset flow shows success message
• All error messages still work correctly
• Auto-redirects work after 2 seconds
• Messages display correctly on mobile devices
• RTL (Persian) text displays correctly

Files to Modify

1. mobile-auth.php - Add success parameters to redirects
2. templates/auth.php - Add success message displays
3. templates/complete-profile.php - Add success message display
4. templates/set-password.php - Add success message display

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.