Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

enhance: eye icon inside password field #1434

Merged
merged 3 commits into from
Feb 9, 2024
Merged

enhance: eye icon inside password field #1434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5692850
enhance: eye icon inside password field
sapayth Feb 6, 2024
0025920
add eye icon to various templates
sapayth Feb 6, 2024
282366b
Merge branch 'develop' into enhance/eye_icon_inside_password_field
sapayth Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions assets/css/frontend-forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1833,3 +1833,9 @@ body .wpuf-attachment-upload-filelist + .moxie-shim {
.iti--allow-dropdown input[type="text"] {
padding-left: 52px !important;
}
img.wpuf-eye {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) translateX(-6%);
}
3 changes: 3 additions & 0 deletions assets/images/eye-close.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/images/eye.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions assets/js/frontend-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1492,4 +1492,19 @@
// Set name attribute for google map search field
$(".wpuf-form-add #wpuf-map-add-location").attr("name", "find_address");
});

$(function($) {
// eye icon for password field
$(document).on('click', '.wpuf-eye', function () {
const input = $( this ).siblings( 'input' );

if ( input.attr("type") === "password" ) {
input.attr( "type", "text" );
$( this ).attr( "src", wpuf_frontend.asset_url + '/images/eye-close.svg' );
} else {
input.attr( "type", "password" );
$( this ).attr( "src", wpuf_frontend.asset_url + '/images/eye.svg' );
}
});
});
})(jQuery, window);
7 changes: 7 additions & 0 deletions assets/less/frontend-forms.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2121,3 +2121,10 @@ ul.wpuf-form{
.iti--allow-dropdown input[type="text"] {
padding-left: 52px !important;
}

img.wpuf-eye {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) translateX(-6%);
}
76 changes: 39 additions & 37 deletions includes/Frontend.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,44 +99,46 @@ public function enqueue_scripts() {
],
]
);

wp_localize_script(
'wpuf-frontend-form', 'wpuf_frontend', [
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'error_message' => __( 'Please fix the errors to proceed', 'wp-user-frontend' ),
'nonce' => wp_create_nonce( 'wpuf_nonce' ),
'word_limit' => __( 'Word limit reached', 'wp-user-frontend' ),
'cancelSubMsg' => __(
'Are you sure you want to cancel your current subscription ?', 'wp-user-frontend'
),
'delete_it' => __( 'Yes', 'wp-user-frontend' ),
'cancel_it' => __( 'No', 'wp-user-frontend' ),
'word_max_title' => __(
'Maximum word limit reached. Please shorten your texts.', 'wp-user-frontend'
),
'word_max_details' => __(
'This field supports a maximum of %number% words, and the limit is reached. Remove a few words to reach the acceptable limit of the field.',
'wp-user-frontend'
),
'word_min_title' => __( 'Minimum word required.', 'wp-user-frontend' ),
'word_min_details' => __(
'This field requires minimum %number% words. Please add some more text.', 'wp-user-frontend'
),
'char_max_title' => __(
'Maximum character limit reached. Please shorten your texts.', 'wp-user-frontend'
),
'char_max_details' => __(
'This field supports a maximum of %number% characters, and the limit is reached. Remove a few characters to reach the acceptable limit of the field.',
'wp-user-frontend'
),
'char_min_title' => __( 'Minimum character required.', 'wp-user-frontend' ),
'char_min_details' => __(
'This field requires minimum %number% characters. Please add some more character.',
'wp-user-frontend'
),
'protected_shortcodes' => wpuf_get_protected_shortcodes(),
'protected_shortcodes_message' => __( 'Using %shortcode% is restricted', 'wp-user-frontend' ),
]
'wpuf-frontend-form', 'wpuf_frontend', apply_filters(
'wpuf_frontend_object', [
'asset_url' => WPUF_ASSET_URI,
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'error_message' => __( 'Please fix the errors to proceed', 'wp-user-frontend' ),
'nonce' => wp_create_nonce( 'wpuf_nonce' ),
'word_limit' => __( 'Word limit reached', 'wp-user-frontend' ),
'cancelSubMsg' => __(
'Are you sure you want to cancel your current subscription ?', 'wp-user-frontend'
),
'delete_it' => __( 'Yes', 'wp-user-frontend' ),
'cancel_it' => __( 'No', 'wp-user-frontend' ),
'word_max_title' => __(
'Maximum word limit reached. Please shorten your texts.', 'wp-user-frontend'
),
'word_max_details' => __(
'This field supports a maximum of %number% words, and the limit is reached. Remove a few words to reach the acceptable limit of the field.',
'wp-user-frontend'
),
'word_min_title' => __( 'Minimum word required.', 'wp-user-frontend' ),
'word_min_details' => __(
'This field requires minimum %number% words. Please add some more text.', 'wp-user-frontend'
),
'char_max_title' => __(
'Maximum character limit reached. Please shorten your texts.', 'wp-user-frontend'
),
'char_max_details' => __(
'This field supports a maximum of %number% characters, and the limit is reached. Remove a few characters to reach the acceptable limit of the field.',
'wp-user-frontend'
),
'char_min_title' => __( 'Minimum character required.', 'wp-user-frontend' ),
'char_min_details' => __(
'This field requires minimum %number% characters. Please add some more character.',
'wp-user-frontend'
),
'protected_shortcodes' => wpuf_get_protected_shortcodes(),
'protected_shortcodes_message' => __( 'Using %shortcode% is restricted', 'wp-user-frontend' ),
]
)
);

wp_localize_script(
Expand Down
16 changes: 13 additions & 3 deletions templates/dashboard/edit-profile.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
global $current_user;
ob_start();

$eye_icon_src = file_exists( WPUF_ROOT . '/assets/images/eye.svg' ) ? WPUF_ASSET_URI . '/images/eye.svg' : '';
?>

<form class="wpuf-form wpuf-update-profile-form" action="" method="post">
Expand Down Expand Up @@ -44,7 +45,10 @@
<label for="current_password"><?php esc_html_e( 'Current Password', 'wp-user-frontend' ); ?></label>
</div>
<div class="wpuf-fields" >
<input type="password" class="input-text" name="current_password" id="current_password" size="16" value="" autocomplete="off" />
<div class="wpuf-fields-inline" style="position: relative;">
<input type="password" class="input-text" name="current_password" id="current_password" size="16" value="" autocomplete="off" />
<img class="wpuf-eye" src="<?php echo esc_url( $eye_icon_src ); ?>" alt="">
</div>
</div>
<span class="wpuf-help"><?php esc_html_e( 'Leave this field empty to keep your password unchanged.', 'wp-user-frontend' ); ?></span>
</li>
Expand All @@ -55,7 +59,10 @@
<label for="pass1"><?php esc_html_e( 'New Password', 'wp-user-frontend' ); ?></label>
</div>
<div class="wpuf-fields" >
<input type="password" class="input-text" name="pass1" id="pass1" size="16" value="" autocomplete="off" />
<div class="wpuf-fields-inline" style="position: relative;">
<input type="password" class="input-text" name="pass1" id="pass1" size="16" value="" autocomplete="off" />
<img class="wpuf-eye" src="<?php echo esc_url( $eye_icon_src ); ?>" alt="">
</div>
</div>
</li>
<div class="clear"></div>
Expand All @@ -65,7 +72,10 @@
<label for="pass2"><?php esc_html_e( 'Confirm New Password', 'wp-user-frontend' ); ?></label>
</div>
<div class="wpuf-fields" >
<input type="password" class="input-text" name="pass2" id="pass2" size="16" value="" autocomplete="off" />
<div class="wpuf-fields-inline" style="position: relative;">
<input type="password" class="input-text" name="pass2" id="pass2" size="16" value="" autocomplete="off" />
<img class="wpuf-eye" src="<?php echo esc_url( $eye_icon_src ); ?>" alt="">
</div>
</div>

<span style="display: block; margin-top:20px" class="pass-strength-result" id="pass-strength-result"><?php esc_html_e( 'Strength indicator', 'wp-user-frontend' ); ?></span>
Expand Down
7 changes: 5 additions & 2 deletions templates/registration-form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@

<?php wpuf()->frontend->registration->show_errors(); ?>
<?php wpuf()->frontend->registration->show_messages(); ?>
<?php $eye_icon_src = file_exists( WPUF_ROOT . '/assets/images/eye.svg' ) ? WPUF_ASSET_URI . '/images/eye.svg' : ''; ?>

<form name="registrationform" class="wpuf-registration-form" id="registrationform" action="<?php echo esc_attr( $action_url ); ?>" method="post">

Expand Down Expand Up @@ -59,15 +60,17 @@

<li>
<div class="wpuf-label"><?php esc_html_e( 'Password', 'wp-user-frontend' ); ?> <span class="required">*</span></div>
<div class="wpuf-fields">
<div class="wpuf-fields-inline" style="position: relative; width: fit-content">
<input type="password" name="pwd1" id="wpuf-user_pass1" class="input" value="" size="40" />
<img class="wpuf-eye" src="<?php echo esc_url( $eye_icon_src ); ?>" alt="">
</div>
</li>

<li>
<div class="wpuf-label"><?php esc_html_e( 'Confirm Password', 'wp-user-frontend' ); ?> <span class="required">*</span></div>
<div class="wpuf-fields">
<div class="wpuf-fields-inline" style="position: relative; width: fit-content">
<input type="password" name="pwd2" id="wpuf-user_pass2" class="input" value="" size="40" />
<img class="wpuf-eye" src="<?php echo esc_url( $eye_icon_src ); ?>" alt="">
</div>
</li>

Expand Down
12 changes: 10 additions & 2 deletions templates/reset-pass-form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,25 @@
<?php
wpuf()->frontend->simple_login->show_errors();
wpuf()->frontend->simple_login->show_messages();

$eye_icon_src = file_exists( WPUF_ROOT . '/assets/images/eye.svg' ) ? WPUF_ASSET_URI . '/images/eye.svg' : '';
?>

<form name="resetpasswordform" id="resetpasswordform" action="" method="post">
<p>
<label for="wpuf-pass1"><?php esc_html_e( 'New password', 'wp-user-frontend' ); ?></label>
<input name="pass1" id="wpuf-pass1" class="input" size="20" value="" type="password" autocomplete="off" />
<div class="wpuf-fields-inline" style="position: relative; width: fit-content">
<input name="pass1" id="wpuf-pass1" class="input" size="20" value="" type="password" autocomplete="off" />
<img class="wpuf-eye" src="<?php echo esc_url( $eye_icon_src ); ?>" alt="">
</div>
</p>

<p>
<label for="wpuf-pass2"><?php esc_html_e( 'Confirm new password', 'wp-user-frontend' ); ?></label>
<input name="pass2" id="wpuf-pass2" class="input" size="20" value="" type="password" autocomplete="off" />
<div class="wpuf-fields-inline" style="position: relative; width: fit-content">
<input name="pass2" id="wpuf-pass2" class="input" size="20" value="" type="password" autocomplete="off" />
<img class="wpuf-eye" src="<?php echo esc_url( $eye_icon_src ); ?>" alt="">
</div>
</p>

<?php do_action( 'resetpassword_form' ); ?>
Expand Down
Loading