Show unread posts since last visit Show new replies to your posts
Pages: [1]
*

bobyrou

  • ****
  • 107 posts
Small feature request for Sign Up page
« 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

« Last Edit: April 05, 2024, 01:31:23 AM by bobyrou »
Logged
*

bobyrou

  • ****
  • 107 posts
Re: Small feature request for Sign Up page
« 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>
Logged
*

bobyrou

  • ****
  • 107 posts
Re: Small feature request for Sign Up page
« 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



« Last Edit: April 05, 2024, 01:29:09 AM by bobyrou »
Logged
*

MB Themes

Re: Small feature request for Sign Up page
« 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.
Logged
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots
*

bobyrou

  • ****
  • 107 posts
Re: Small feature request for Sign Up page
« 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?
Logged
Pages: [1]