Skip to content

Commit

Permalink
enhance: eye icon inside password field
Browse files Browse the repository at this point in the history 
eye icon inside the password field.
image

fix #1334
  • Loading branch information
@sapayth
sapayth committed Feb 6, 2024
1 parent e43cc0c commit 5692850
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 40 deletions.
6 changes: 6 additions & 0 deletions assets/css/frontend-forms.css
View file
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: 5%;
top: 50%;
transform: translateY(-50%) translateX(-6%);
}
15 changes: 15 additions & 0 deletions assets/js/frontend-form.js
View file
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.pro_asset_url + '/images/eye-close.svg' );
} else {
input.attr( "type", "password" );
$( this ).attr( "src", wpuf_frontend.pro_asset_url + '/images/eye.svg' );
}
});
});
})(jQuery, window);
7 changes: 7 additions & 0 deletions assets/less/frontend-forms.less
View file
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: 5%;
top: 50%;
transform: translateY(-50%) translateX(-6%);
}
76 changes: 39 additions & 37 deletions includes/Frontend.php
View file
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
12 changes: 9 additions & 3 deletions templates/reset-pass-form.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,19 @@
?>
<div class="login" id="wpuf-login-form">

<?php Simple_Login::init()->show_errors(); ?>
<?php Simple_Login::init()->show_messages(); ?>
<?php
Simple_Login::init()->show_errors();
Simple_Login::init()->show_messages();
$eye_icon_src = file_exists( WPUF_PRO_ROOT . '/assets/images/eye.svg' ) ? WPUF_PRO_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 $eye_icon_src; ?>" alt="">
</div>
</p>

<p>
Expand Down

0 comments on commit 5692850

Please sign in to comment.