Feat/account page redesign #1724
Conversation
arifulhoque7
added
needs: dev review
WalkthroughAdds a new account UI with templates, styles, and JS entry; updates build tooling to include an account bundle and Tailwind changes; and adjusts enqueued assets and a couple backend helpers for the account pages. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
templates/dashboard/billing-address.php (1)
15-209: Restore billing field names to prevent JS breakageAll of the new
name/idattributes usewpuf_biiling_*(double “ii”). Core scripts and existing CSS target the long‑standingwpuf_billing_*selectors to drive country→state population and validation. With the typo, those listeners never fire, so changing country no longer refreshes the state list and downstream integrations reading$_POST['wpuf_billing_*']will miss the updates. Please revert to the original spelling throughout (POST handling + markup) to keep the data flow intact.- $add_line_1 = isset( $_POST['wpuf_biiling_add_line_1'] ) ? sanitize_text_field( wp_unslash( $_POST['wpuf_biiling_add_line_1'] ) ) : ''; + $add_line_1 = isset( $_POST['wpuf_billing_add_line_1'] ) ? sanitize_text_field( wp_unslash( $_POST['wpuf_billing_add_line_1'] ) ) : ''; ... - 'name' => 'wpuf_biiling_country', - 'id' => 'wpuf_biiling_country', - 'class' => 'wpuf_biiling_country wpuf-w-full wpuf-rounded-md wpuf-border-gray-300 focus:wpuf-border-primary focus:wpuf-ring-primary', + 'name' => 'wpuf_billing_country', + 'id' => 'wpuf_billing_country', + 'class' => 'wpuf_billing_country wpuf-w-full wpuf-rounded-md wpuf-border-gray-300 focus:wpuf-border-primary focus:wpuf-ring-primary', ... - name="wpuf_biiling_add_line_1" - id="wpuf_biiling_add_line_1" + name="wpuf_billing_add_line_1" + id="wpuf_billing_add_line_1"(Apply the same rename for every
wpuf_biiling_*occurrence.)
🧹 Nitpick comments (11)
includes/Fields/Form_Field_Image.php (1)
81-81: Escape for JS context and cast numeric args.Use esc_js for the name and cast count/max_size to int to avoid JS-context escaping issues and ensure numbers, not strings.
Apply:
- var uploader = new WPUF_Uploader('wpuf-<?php echo esc_attr( $unique_id ); ?>-pickfiles', 'wpuf-<?php echo esc_attr( $unique_id ); ?>-upload-container', <?php echo esc_attr( isset( $field_settings['count'] ) ? $field_settings['count'] : 1 ); ?>, '<?php echo esc_attr( $field_settings['name'] ); ?>', 'jpg,jpeg,gif,png,bmp,webp', <?php echo esc_attr( isset( $field_settings['max_size'] ) ? $field_settings['max_size'] : 1024 ); ?>); + <?php + $count = isset( $field_settings['count'] ) ? (int) $field_settings['count'] : 1; + $max_size = isset( $field_settings['max_size'] ) ? (int) $field_settings['max_size'] : 1024; + ?> + var uploader = new WPUF_Uploader( + 'wpuf-<?php echo esc_attr( $unique_id ); ?>-pickfiles', + 'wpuf-<?php echo esc_attr( $unique_id ); ?>-upload-container', + <?php echo $count; ?>, + '<?php echo esc_js( $field_settings['name'] ); ?>', + 'jpg,jpeg,gif,png,bmp,webp', + <?php echo $max_size; ?> + );templates/dashboard/edit-profile.php (2)
91-94: Add password visibility toggle behavior (icons have no handler).Icons exist but no JS binds to .wpuf-password-toggle on this page. Either enqueue account.js with a small listener or add a few lines here:
$(function(){ // ...existing code... + $('.wpuf-password-field').on('click', '.wpuf-password-toggle', function(){ + const input = $(this).siblings('input[type="password"], input[type="text"]').first(); + if (!input.length) return; + input.attr('type', input.attr('type') === 'password' ? 'text' : 'password'); + }); });Also applies to: 112-114, 132-134
83-91: Use semantic autocomplete hints.Use autocomplete="current-password" for current and "new-password" for new/confirm to help browsers/managers.
- autocomplete="off" + autocomplete="current-password"- autocomplete="off" + autocomplete="new-password"Also applies to: 103-111, 123-131
vite.config.mjs (1)
8-8: Ensure the new 'account' entry is actually used.Currently account.js only imports CSS and isn’t enqueued. Either:
- enqueue it on account/editprofile pages, or
- drop this entry to avoid dead assets (CSS is already enqueued via PHP).
assets/js/account.js (1)
1-2: Consider hosting small account UI behaviors here.Add password-visibility toggle and enqueue this file on account/editprofile pages; otherwise this entry is redundant. Example:
document.addEventListener('click', (e) => { const btn = e.target.closest('.wpuf-password-toggle'); if (!btn) return; const input = btn.parentElement.querySelector('input'); if (input) input.type = input.type === 'password' ? 'text' : 'password'; });includes/Frontend.php (1)
183-186: Enqueue JS for account interactions (optional) and verify CSS path.
- If you add behaviors to assets/js/account.js, enqueue it here:
if ( wpuf_has_shortcode( 'wpuf_account' ) || wpuf_has_shortcode( 'wpuf_editprofile' ) ) { wp_enqueue_style( 'wpuf-account', WPUF_ASSET_URI . '/css/frontend/account.css', [], WPUF_VERSION ); + wp_enqueue_script( 'wpuf-account', WPUF_ASSET_URI . '/js/account.min.js', [ 'jquery' ], WPUF_VERSION, true ); }
- Please confirm the built CSS lives at css/frontend/account.css in releases to avoid 404s.
tailwind.config.js (1)
13-17: Remove duplicate content path.'./templates/**/*.php' appears twice. Keep one to reduce noise.
templates/dashboard/dashboard.php (2)
28-50: Use strict comparison and pre-increment.Small correctness/style fixes:
- if ( 'off' == wpuf_get_option( 'show_subscriptions', 'wpuf_my_account', 'on' ) ) { + if ( 'off' === wpuf_get_option( 'show_subscriptions', 'wpuf_my_account', 'on' ) ) { - if ( $total_tabs == $count ) { + if ( $total_tabs === $count ) { - $count++; + ++$count;
8-16: Tidy multi‑line printf indentation to satisfy PHPCS.Move closing parenthesis to its own line and normalize indentation:
- printf( - wp_kses_post( - __( 'Hello %1$s, (not %1$s? <a href="%2$s" class="wpuf-text-blue-600 hover:wpuf-underline">Sign out</a>)', 'wp-user-frontend' ) ), + printf( + wp_kses_post( + __( 'Hello %1$s, (not %1$s? <a href="%2$s" class="wpuf-text-blue-600 hover:wpuf-underline">Sign out</a>)', 'wp-user-frontend' ) + ), '<strong>' . esc_html( $current_user->display_name ) . '</strong>', esc_url( wp_logout_url( get_permalink() ) ) - ); + );- printf( - wp_kses_post( - __( 'From your account dashboard you can view your dashboard, manage your %s', 'wp-user-frontend' ) ), - wp_kses( $links, [ 'a' => [ 'href' => [], 'class' => [] ] ] ) - ); + printf( + wp_kses_post( + __( 'From your account dashboard you can view your dashboard, manage your %s', 'wp-user-frontend' ) + ), + wp_kses( $links, [ 'a' => [ 'href' => [], 'class' => [] ] ] ) + );Also applies to: 52-60
templates/dashboard/posts.php (2)
205-214: Assemble and escape the “Pay Now” URL correctly.Line 210 builds the
hrefby echoing the base URL withesc_attr()and then appending a raw query string, leaving&characters unencoded. Please compose the link withadd_query_arg()and escape it withesc_url()so the final HTML attribute is valid:- <a href="<?php echo esc_attr( trailingslashit( get_permalink( wpuf_get_option( 'payment_page', - 'wpuf_payment' ) ) ) ); ?>?action=wpuf_pay&type=post&post_id=<?php echo esc_attr( $post->ID ); ?>"><?php esc_html_e( 'Pay Now', 'wp-user-frontend' ); ?></a> + <?php + $payment_url = add_query_arg( + [ + 'action' => 'wpuf_pay', + 'type' => 'post', + 'post_id' => $post->ID, + ], + trailingslashit( get_permalink( wpuf_get_option( 'payment_page', 'wpuf_payment' ) ) ) + ); + ?> + <a href="<?php echo esc_url( $payment_url ); ?>"><?php esc_html_e( 'Pay Now', 'wp-user-frontend' ); ?></a>
236-241: Escape the delete URL for HTML output.Line 240 wraps
wp_nonce_url()inesc_url_raw(), but that helper is meant for storage and doesn’t encode entities. For safe HTML output (especially to encode the ampersands), please swap toesc_url():- <a href="<?php echo esc_url_raw( wp_nonce_url( $del_url, 'wpuf_del' ) ); ?>" class="wpuf-block wpuf-px-4 wpuf-py-2 wpuf-text-sm wpuf-text-red-600 hover:wpuf-bg-red-50 wpuf-no-underline" onclick="return confirm('<?php echo esc_attr( $message ); ?>');" role="menuitem"> + <a href="<?php echo esc_url( wp_nonce_url( $del_url, 'wpuf_del' ) ); ?>" class="wpuf-block wpuf-px-4 wpuf-py-2 wpuf-text-sm wpuf-text-red-600 hover:wpuf-bg-red-50 wpuf-no-underline" onclick="return confirm('<?php echo esc_attr( $message ); ?>');" role="menuitem">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
assets/js/account.min.jsis excluded by!**/*.min.js
📒 Files selected for processing (15)
Gruntfile.js(3 hunks)assets/js/account.js(1 hunks)includes/Fields/Form_Field_Image.php(1 hunks)includes/Frontend.php(1 hunks)package.json(1 hunks)src/css/frontend/account.css(1 hunks)tailwind.config.js(1 hunks)templates/account.php(1 hunks)templates/dashboard/billing-address.php(2 hunks)templates/dashboard/dashboard.php(1 hunks)templates/dashboard/edit-profile.php(1 hunks)templates/dashboard/posts.php(1 hunks)templates/dashboard/subscription.php(1 hunks)vite.config.mjs(1 hunks)wpuf-functions.php(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (6)
includes/Frontend.php (1)
wpuf-functions.php (1)
wpuf_has_shortcode(1554-1576)
templates/dashboard/subscription.php (1)
wpuf-functions.php (3)
wpuf_get_date(1759-1781)wpuf_date2mysql(1793-1800)wpuf_is_checkbox_or_toggle_on(5599-5601)
templates/account.php (1)
wpuf-functions.php (1)
wpuf_get_option(1535-1543)
templates/dashboard/posts.php (1)
wpuf-functions.php (3)
wpuf_get_option(1535-1543)wpuf_show_post_status(30-50)wpuf_is_post_editable(4569-4602)
templates/dashboard/billing-address.php (2)
wpuf-functions.php (2)
wpuf_map_address_fields(4478-4487)wpuf_select(3671-3769)includes/Data/Country_State.php (2)
getStates(294-316)countries(265-275)
templates/dashboard/dashboard.php (1)
wpuf-functions.php (2)
wpuf_get_account_sections(2207-2235)wpuf_get_option(1535-1543)
🪛 GitHub Check: Run PHPCS inspection
templates/account.php
[warning] 41-41:
Loose comparisons are not allowed. Expected: "==="; Found: "=="
[warning] 40-40:
Loose comparisons are not allowed. Expected: "==="; Found: "=="
templates/dashboard/billing-address.php
[warning] 112-112:
When a multi-item array uses associative keys, each value should start on a new line.
[warning] 75-75:
When a multi-item array uses associative keys, each value should start on a new line.
templates/dashboard/dashboard.php
[failure] 57-57:
Multi-line function call not indented correctly; expected 12 spaces but found 13
[warning] 57-57:
Found precision alignment of 1 spaces.
[warning] 56-56:
When a multi-item array uses associative keys, each value should start on a new line.
[failure] 55-55:
Closing parenthesis of a multi-line function call must be on a line by itself
[failure] 55-55:
Multi-line function call not indented correctly; expected 16 spaces but found 20
[warning] 49-49:
Stand-alone post-increment statement found. Use pre-increment instead: ++$count.
[warning] 43-43:
Loose comparisons are not allowed. Expected: "==="; Found: "=="
[warning] 28-28:
Loose comparisons are not allowed. Expected: "==="; Found: "=="
[failure] 26-26:
Overriding WordPress globals is prohibited. Found assignment to $tabs
[failure] 14-14:
Multi-line function call not indented correctly; expected 12 spaces but found 13
[warning] 14-14:
Found precision alignment of 1 spaces.
[failure] 11-11:
Closing parenthesis of a multi-line function call must be on a line by itself
[failure] 11-11:
Multi-line function call not indented correctly; expected 16 spaces but found 20
🔇 Additional comments (1)
wpuf-functions.php (1)
33-33: Status color tweak looks good.Consistent with the new palette; no behavioral change.
| function check_pass_strength() { | ||
| var pass1 = $("#pass1").val(), | ||
| pass2 = $("#pass2").val(), | ||
| strength; | ||
|
|
||
| if ( typeof pass2 === undefined ) { | ||
| pass2 = pass1; | ||
| } | ||
|
|
||
| var pwsL10n = { | ||
| empty: "Strength indicator", | ||
| short: "Very weak", | ||
| bad: "Weak", | ||
| good: "Medium", | ||
| strong: "Strong", | ||
| mismatch: "Mismatch" | ||
| }; | ||
|
|
||
| $("#pass-strength-result").removeClass('short bad good strong'); | ||
| if (!pass1) { | ||
| $("#pass-strength-result").html(pwsL10n.empty); | ||
| return; | ||
| } | ||
|
|
||
| strength = wp.passwordStrength.meter(pass1, wp.passwordStrength.userInputBlacklist(), pass2); | ||
|
|
||
| switch (strength) { | ||
| case 2: | ||
| $("#pass-strength-result").addClass('bad').html(pwsL10n.bad); | ||
| break; | ||
| case 3: | ||
| $("#pass-strength-result").addClass('good').html(pwsL10n.good); | ||
| break; | ||
| case 4: | ||
| $("#pass-strength-result").addClass('strong').html(pwsL10n.strong); | ||
| break; | ||
| case 5: | ||
| $("#pass-strength-result").addClass('short').html(pwsL10n.mismatch); | ||
| break; | ||
| default: | ||
| $("#pass-strength-result").addClass('short').html(pwsL10n['short']); | ||
| } | ||
| } |
There was a problem hiding this comment.
Fix typeof bug and localize strength strings.
- typeof needs quotes; current check never triggers.
- Strength labels should be translatable.
Apply:
- if ( typeof pass2 === undefined ) {
+ if ( typeof pass2 === "undefined" ) {
pass2 = pass1;
}
- var pwsL10n = {
- empty: "Strength indicator",
- short: "Very weak",
- bad: "Weak",
- good: "Medium",
- strong: "Strong",
- mismatch: "Mismatch"
- };
+ var pwsL10n = {
+ empty: "<?php echo esc_js( __( 'Strength indicator', 'wp-user-frontend' ) ); ?>",
+ short: "<?php echo esc_js( __( 'Very weak', 'wp-user-frontend' ) ); ?>",
+ bad: "<?php echo esc_js( __( 'Weak', 'wp-user-frontend' ) ); ?>",
+ good: "<?php echo esc_js( __( 'Medium', 'wp-user-frontend' ) ); ?>",
+ strong: "<?php echo esc_js( __( 'Strong', 'wp-user-frontend' ) ); ?>",
+ mismatch: "<?php echo esc_js( __( 'Mismatch', 'wp-user-frontend' ) ); ?>"
+ };📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function check_pass_strength() { | |
| var pass1 = $("#pass1").val(), | |
| pass2 = $("#pass2").val(), | |
| strength; | |
| if ( typeof pass2 === undefined ) { | |
| pass2 = pass1; | |
| } | |
| var pwsL10n = { | |
| empty: "Strength indicator", | |
| short: "Very weak", | |
| bad: "Weak", | |
| good: "Medium", | |
| strong: "Strong", | |
| mismatch: "Mismatch" | |
| }; | |
| $("#pass-strength-result").removeClass('short bad good strong'); | |
| if (!pass1) { | |
| $("#pass-strength-result").html(pwsL10n.empty); | |
| return; | |
| } | |
| strength = wp.passwordStrength.meter(pass1, wp.passwordStrength.userInputBlacklist(), pass2); | |
| switch (strength) { | |
| case 2: | |
| $("#pass-strength-result").addClass('bad').html(pwsL10n.bad); | |
| break; | |
| case 3: | |
| $("#pass-strength-result").addClass('good').html(pwsL10n.good); | |
| break; | |
| case 4: | |
| $("#pass-strength-result").addClass('strong').html(pwsL10n.strong); | |
| break; | |
| case 5: | |
| $("#pass-strength-result").addClass('short').html(pwsL10n.mismatch); | |
| break; | |
| default: | |
| $("#pass-strength-result").addClass('short').html(pwsL10n['short']); | |
| } | |
| } | |
| function check_pass_strength() { | |
| var pass1 = $("#pass1").val(), | |
| pass2 = $("#pass2").val(), | |
| strength; | |
| if ( typeof pass2 === "undefined" ) { | |
| pass2 = pass1; | |
| } | |
| var pwsL10n = { | |
| empty: "<?php echo esc_js( __( 'Strength indicator', 'wp-user-frontend' ) ); ?>", | |
| short: "<?php echo esc_js( __( 'Very weak', 'wp-user-frontend' ) ); ?>", | |
| bad: "<?php echo esc_js( __( 'Weak', 'wp-user-frontend' ) ); ?>", | |
| good: "<?php echo esc_js( __( 'Medium', 'wp-user-frontend' ) ); ?>", | |
| strong: "<?php echo esc_js( __( 'Strong', 'wp-user-frontend' ) ); ?>", | |
| mismatch: "<?php echo esc_js( __( 'Mismatch', 'wp-user-frontend' ) ); ?>" | |
| }; | |
| $("#pass-strength-result").removeClass('short bad good strong'); | |
| if (!pass1) { | |
| $("#pass-strength-result").html(pwsL10n.empty); | |
| return; | |
| } | |
| strength = wp.passwordStrength.meter(pass1, wp.passwordStrength.userInputBlacklist(), pass2); | |
| switch (strength) { | |
| case 2: | |
| $("#pass-strength-result").addClass('bad').html(pwsL10n.bad); | |
| break; | |
| case 3: | |
| $("#pass-strength-result").addClass('good').html(pwsL10n.good); | |
| break; | |
| case 4: | |
| $("#pass-strength-result").addClass('strong').html(pwsL10n.strong); | |
| break; | |
| case 5: | |
| $("#pass-strength-result").addClass('short').html(pwsL10n.mismatch); | |
| break; | |
| default: | |
| $("#pass-strength-result").addClass('short').html(pwsL10n['short']); | |
| } | |
| } |
| while ( $dashboard_query->have_posts() ) { | ||
| $dashboard_query->the_post(); | ||
| $show_link = !in_array( $post->post_status, ['draft', 'future', 'pending'] ); | ||
| $payment_status = get_post_meta( $post->ID, '_wpuf_payment_status', true ); | ||
| $is_featured = in_array( intval( $post->ID ), $stickies, true ) ? ' - ' . esc_html__( 'Featured', 'wp-user-frontend' ) . ucfirst( $post_type ) : ''; | ||
| $title = wp_trim_words( get_the_title(), 5 ) . $is_featured; | ||
| ?> |
There was a problem hiding this comment.
Fix sticky “Featured” label construction.
Line 151 currently appends esc_html__( 'Featured', ... ) directly to ucfirst( $post_type ), producing user-facing strings like “FeaturedPost” and exposing the raw slug instead of the translatable post-type label. Please switch to the singular label, and build the string with whitespace so locales can translate it cleanly. Example fix:
- $is_featured = in_array( intval( $post->ID ), $stickies, true ) ? ' - ' . esc_html__( 'Featured', 'wp-user-frontend' ) . ucfirst( $post_type ) : '';
+ $is_featured = in_array( (int) $post->ID, $stickies, true )
+ ? sprintf(
+ ' - %s %s',
+ esc_html__( 'Featured', 'wp-user-frontend' ),
+ esc_html( $post_type_obj->labels->singular_name )
+ )
+ : '';Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In templates/dashboard/posts.php around lines 146 to 152, the construction of
the sticky “Featured” label concatenates esc_html__( 'Featured', ... ) directly
to ucfirst($post_type) producing “FeaturedPost” and exposing the slug; replace
this by retrieving the post type’s singular, translatable label (e.g. via
get_post_type_object($post_type)->labels->singular_name), assemble the final
string with a separating space (or use sprintf/esc_html__ with a placeholder) so
locales can translate properly, and ensure the label is escaped with esc_html
before output.
|
Data in Edit profile is not being saved @arifulhoque7 vai |
|
Billing Address>> State selection dropdown style is being changed while country changed from default @arifulhoque7 vai |
2 participants
Close issue
What Changed:
1. New Tailwind CSS Integration
/src/css/frontend/account.css- comprehensive Tailwind component libraryaccountentry point[wpuf_account]or[wpuf_editprofile]shortcodes2. Modern Sidebar Navigation
3. Layout Architecture
4. Dashboard Section Redesign
/templates/dashboard/dashboard.phpwith modern card-based designbg-blue-50)5. Subscription Page Enhancements
6. Edit Profile Form Styling
border-gray-300)focus:ring-primary)7. Form Builder Integration
8. Posts Table Improvements
9. Color Scheme
#99A7B2(slate gray-blue)#7F8C96(darker slate)#E1E6EA(light gray)#2C3A41(dark slate)#6C7A85(medium gray)#CBD2D9(light gray)10. Technical Implementation
wpuf-prefix to avoid conflicts/assets/js/account.js→ imports CSS/assets/css/frontend/account.cssnpm run build:accountFrontend.php(lines 183-185)Summary by CodeRabbit
New Features
Bug Fixes
Style