Skip to content

Commit

Permalink
Merge pull request #1434 from sapayth/enhance/eye_icon_inside_passwor…
Browse files Browse the repository at this point in the history 
…d_field

enhance: eye icon inside password field
  • Loading branch information
@sapayth
sapayth authored Feb 9, 2024
2 parents c8c6f7e + 282366b commit 3bd9fd8
Show file tree
Hide file tree
Showing 9 changed files with 101 additions and 44 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: 0;
top: 50%;
transform: translateY(-50%) translateX(-6%);
}
3 changes: 3 additions & 0 deletions assets/images/eye-close.svg
View file
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
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
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
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
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
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
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
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

0 comments on commit 3bd9fd8

Please sign in to comment.