Support Forums - Classified Ads Script Osclass - Small feature request for Sign Up page - Support Forums

bobyrou · « **on:** April 04, 2024, 01:46:25 AM »

Hi,

Can I ask for a small feature, but important, for Sign Up page: basically the re-type password shouldn't exist, therefore helping the form to be more streamlined and easier to convince user to sign up a slight smaller sign up form. I use Gamma theme v 1.6, Osclass 8.2.1

Probably the best is to have the Password field and on right side an eye icon to show/hide password in case user wants to check if typed correct password. Nowadays all websites uses this, would be great if you can add it!

Many thanks

bobyrou · « **Reply #1 on:** April 04, 2024, 11:02:37 PM »

Finally sorted this, if anyone wishes to implement this, below is a screenshot how it looks like and the full code for user-register.php in gamma theme. I hope Osclasspoint implement this in the theme so we don't have to add custom codes anymore and loose it on each update.

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo gam_language_dir(); ?>" lang="<?php echo str_replace('_', '-', osc_current_user_locale()); ?>">
<head>
  <?php osc_current_web_theme_path('head.php'); ?>
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <script type="text/javascript" src="<?php echo osc_current_web_theme_js_url('jquery.validate.min.js'); ?>"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
.input-box {
    position: relative;
    display: inline-block;
}
#password-input {
    padding-right: 30px; /* Adjust this value as needed */
}
.toggle-password {
    position: absolute;
    top: 50%;
    right: 5px; /* Adjust this value as needed */
    transform: translateY(-50%);
    cursor: pointer;
}
</style>
</head>
<?php
  $type = (Params::getParam('move') == '' ? 'register' : Params::getParam('move'));
?>
<body id="body-user-register">
  <?php UserForm::js_validation(); ?>
  <?php osc_current_web_theme_path('header.php'); ?>
  <div class="logo-auth">
    <a href="<?php echo osc_base_url(); ?>" title="<?php echo osc_esc_html(__('Back to home page', 'gamma')); ?>"><?php echo gam_logo(); ?></a>
  </div>
  <div id="i-forms" class="content">
    <!-- LOGIN FORM -->
    <div id="login" class="box" <?php if($type <> 'login') { ?>style="display:none;"<?php } ?> data-type="login">
      <div class="wrap">
        <h1><?php _e('Login', 'gamma'); ?></h1>
        <div class="user_forms login">
          <div class="inner">
            <?php if(function_exists('fl_call_after_install') || function_exists('gc_login_button')) { ?>
              <div class="social">
                <?php if(function_exists('fl_call_after_install')) { ?>
                  <a class="facebook" href="<?php echo facebook_login_link(); ?>" title="<?php echo osc_esc_html(__('Connect with Facebook', 'gamma')); ?>">
                    <i class="fab fa-facebook-square"></i>
                    <span><?php _e('Continue with Facebook', 'gamma'); ?></span>
                  </a>
                <?php } ?>
                <?php if(function_exists('ggl_login_link')) { ?>
                  <a class="google" href="<?php echo ggl_login_link(); ?>" title="<?php echo osc_esc_html(__('Connect with Google', 'gamma')); ?>">
                    <i class="fab fa-google"></i>
                    <span><?php _e('Continue with Google', 'gamma'); ?></span>
                  </a>
                <?php } ?>
              </div>
            <?php } ?>
            <form action="<?php echo osc_base_url(true); ?>" method="post" >
              <input type="hidden" name="page" value="login" />
              <input type="hidden" name="action" value="login_post" />
              
              <?php osc_run_hook('user_pre_login_form'); ?>
              <fieldset>
                <label for="email"><span><?php _e('E-mail', 'gamma'); ?></span></label> <span class="input-box"><?php UserForm::email_login_text(); ?></span>
                <label for="password"><span><?php _e('Password', 'gamma'); ?></span></label> <span class="input-box"><?php UserForm::password_login_text(); ?></span>
                <div class="login-line">
                  <div class="input-box-check">
                    <?php UserForm::rememberme_login_checkbox();?>
                    <label for="remember"><?php _e('Remember me', 'gamma'); ?></label>
                  </div>
                </div>
                <div class="user-reg-hook"><?php osc_run_hook('user_login_form'); ?></div>
                <?php gam_show_recaptcha('login'); ?>
                <button type="submit" class="mbBg2"><?php _e('Log in', 'gamma');?></button>
              </fieldset>
            </form>
          </div>
        </div>
        <div class="swap">
          <a href="#" class="signup" data-type="register"><?php _e('Sign up', 'gamma'); ?></a>
          <a href="#" class="recover" data-type="recover"><?php _e('Forgot password', 'gamma'); ?></a>
        </div>
      </div>
    </div>
    <!-- REGISTER FORM -->
<div id="register" class="box" <?php if($type <> 'register') { ?>style="display:none;"<?php } ?> data-type="register">
  <div class="wrap">
    <h1>Sign up</h1>
    <h3>Sign up on our website now!</h3><br><br>
    <div class="user_forms register">
      <div class="inner">
        <form name="register" id="register" action="<?php echo osc_base_url(true); ?>" method="post">
          <input type="hidden" name="page" value="register" />
          <input type="hidden" name="action" value="register_post" />
          <?php osc_run_hook('user_pre_register_form'); ?>
          <fieldset>
            <ul id="error_list"></ul>
            <label for="name"><span><?php _e('Name', 'gamma'); ?></span><span class="req">*</span></label> <span class="input-box"><?php UserForm::name_text(); ?></span>
            <label for="password"><span><?php _e('Password', 'gamma'); ?></span><span class="req">*</span></label> 
	<div class="input-box">
    <input type="password" id="password-input" name="password-input">
    <i class="fas fa-eye-slash toggle-password" id="toggle-password-icon" onclick="togglePassword()"></i>
</div>
	<label for="email"><span><?php _e('E-mail', 'gamma'); ?></span><span class="req">*</span></label>
            <span class="input-box"><?php UserForm::email_text(); ?></span>
            <label for="phone"><?php _e('Mobile Phone', 'gamma'); ?></label>
            <span class="input-box last"><?php UserForm::mobile_text(osc_user()); ?></span>
            <div class="user-reg-hook"><?php osc_run_hook('user_register_form'); ?></div>
            <?php gam_show_recaptcha('register'); ?>
            <button type="submit" class="mbBg2"><?php _e('Create account', 'gamma'); ?></button>
          </fieldset>
        </form>
      </div>
    </div>
    <div class="swap">
      <a href="#" class="login" data-type="login"><?php _e('Login', 'gamma'); ?></a>
      <a href="#" class="recover" data-type="recover"><?php _e('Forgot password', 'gamma'); ?></a>
    </div>
  </div>
</div>
<script>
function togglePassword() {
    var passwordField = document.getElementById('password-input');
    var icon = document.getElementById('toggle-password-icon');
    if (passwordField.type === "password") {
        passwordField.type = "text";
        icon.classList.remove("fa-eye-slash");
        icon.classList.add("fa-eye");
    } else {
        passwordField.type = "password";
        icon.classList.remove("fa-eye");
        icon.classList.add("fa-eye-slash");
    }
}
</script>
    <!-- FORGOT PASSWORD FORM -->
    <div id="forgot" class="box" <?php if($type <> 'recover') { ?>style="display:none;"<?php } ?> data-type="recover">
      <div class="wrap">
        <h1><?php _e('Forgot password', 'gamma'); ?></h1>
        <div class="user_forms recover">
          <div class="inner">          
            <form action="<?php echo osc_base_url(true) ; ?>" method="post" >
              <input type="hidden" name="page" value="login" />
              <input type="hidden" name="action" value="recover_post" />
              <fieldset>
                <label for="email"><?php _e('E-mail', 'gamma') ; ?></label> 
                <span class="input-box"><?php UserForm::email_text(); ?></span>
                <?php gam_show_recaptcha('recover_password'); ?>
                <button type="submit" class="mbBg2"><?php _e('Send a new password', 'gamma') ; ?></button>
              </fieldset>
            </form>
          </div>
        </div>
        <div class="swap">
          <a href="#" class="login" data-type="login"><?php _e('Login', 'gamma'); ?></a>
          <a href="#" class="signup" data-type="register"><?php _e('Sign up', 'gamma'); ?></a>
        </div>
      </div>
    </div>
  </div>
  <?php osc_current_web_theme_path('footer.php'); ?>
</body>
</html>

bobyrou · « **Reply #2 on:** April 05, 2024, 12:22:08 AM »

Actually, after testing one more issue persist -see screenshot. If I fill the sign up form and submit I get error message saying the password field is empty - which is basically referring to the re-type password field that was removed as no longer needed due to being replaced by the toggle fish-eye show/hide icon.

Looks like these two files oc-includes\osclass\controller\login.php and oc-includes\osclass\UserActions.php are causing these validation checks? If anyone knows how to remove this validation check for the re-type password field as this is no longer used on sign up form as its now replaced with toggle fish-eye show/hide icon. Many thanks

MB Themes · « **Reply #3 on:** April 05, 2024, 03:12:52 PM »

It exists on most of websites.
Especially in world of mobiles, where you can easily typo, it's feature that should be kept in forms.

bobyrou · « **Reply #4 on:** April 05, 2024, 11:47:32 PM »

Quote from: MB Themes on April 05, 2024, 03:12:52 PM

It exists on most of websites.
Especially in world of mobiles, where you can easily typo, it's feature that should be kept in forms.

Okay I understand. But if the re-type password has been replaced with show/hide toggle icon, how can it work?

Small feature request for Sign Up page

bobyrou

Small feature request for Sign Up page

bobyrou

Re: Small feature request for Sign Up page

bobyrou

Re: Small feature request for Sign Up page

MB Themes

Re: Small feature request for Sign Up page

bobyrou

Re: Small feature request for Sign Up page