as per title I am experiencing a problem when editing a from required for website registration. As we all know, WordPress requires the username field during the registration phase and what I am trying to do is to pre-fill this field with a string generated automatically by a php function.
Below is the original theme code:
<?php if (theme_settings()->showFacebookAuth() || theme_settings()->showGoogleAuth()) : ?>
<div class="mytheme-access__socials">
<?php if (theme_settings()->showFacebookAuth()) : ?>
<a
class="mytheme-access__social-button mytheme-access__social-button--f"
href="<?php echo esc_url(theme_action_url('mytheme/socialAuth/facebook')); ?>"
>
<i class="fab fa-facebook"></i>
<span><?php echo esc_html(theme_string('continue_with_facebook')); ?></span>
</a>
<?php endif; ?>
<?php if (theme_settings()->showGoogleAuth()) : ?>
<a
class="mytheme-access__social-button mytheme-access__social-button--g"
href="<?php echo esc_url(theme_action_url('mytheme/socialAuth/google')); ?>"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
<path fill="#4285F4"
d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/>
<path fill="#34A853"
d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/>
<path fill="#FBBC05"
d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/>
<path fill="#EA4335"
d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/>
</g>
</svg>
<span><?php echo esc_html(theme_string('continue_with_google')); ?></span>
</a>
<?php endif; ?>
</div>
<div class="mytheme-access__or">
<div class="mytheme-access__or-inner">
<?php echo esc_html(theme_string('or')); ?>
</div>
</div>
<?php endif; ?>
<theme-register
td-nonce="<?php echo esc_attr(wp_create_nonce('mytheme_register')); ?>"
request-url="<?php echo esc_url(theme_action_url('mytheme/user/register')); ?>"
redirect-url="<?php echo esc_url(\Tangibledesign\Framework\Widgets\General\PanelWidget::getUrl(\Tangibledesign\Framework\Widgets\General\PanelWidget::ACTION_LIST)); ?>"
:accept-policy="<?php echo esc_attr(!empty(theme_settings()->getPolicyLabel()) ? 'true' : 'false'); ?>"
:is-admin="<?php echo esc_attr(is_user_logged_in() && current_user_can('manage_options') ? 'true' : 'false'); ?>"
:phone-required="<?php echo esc_attr(theme_settings()->isPhoneRequired() ? 'true' : 'false'); ?>"
close-text="<?php echo esc_attr(theme_string('close')); ?>"
:login-min-length="<?php echo esc_attr(theme_settings()->getLoginMinLength()); ?>"
<?php if (theme_settings()->reCaptchaEnabled()) : ?>
:re-captcha="true"
re-captcha-key="<?php echo esc_attr(theme_settings()->getReCaptchaSiteKey()); ?>"
<?php endif; ?>
>
<div slot-scope="registerForm">
<form @submit.prevent="registerForm.onRegister" class="mytheme-access__form">
<div class="mytheme-access__field">
<input
name="name"
@input="registerForm.setName($event.target.value)"
:value="registerForm.name"
type="text"
class="mytheme-access__field__input"
placeholder="<?php echo esc_attr(theme_string('username')); ?>*"
required
>
<template>
<div v-if="registerForm.showErrors">
<div
v-if="!registerForm.errors.name.required"
class="mytheme-error"
>
<?php echo esc_html(theme_string('field_is_required')); ?>
</div>
<div
v-if="!registerForm.errors.name.minLength"
class="mytheme-error"
>
<?php echo sprintf(esc_html(theme_string('login_min_letters')), theme_settings()->getLoginMinLength()); ?>
</div>
</div>
</template>
</div>
<div class="mytheme-access__field">
<input
name="email"
@input="registerForm.setMail($event.target.value)"
:value="registerForm.email"
type="text"
class="mytheme-access__field__input"
placeholder="<?php echo esc_attr(theme_string('email')); ?>*"
required
>
<template>
<div v-if="registerForm.showErrors">
<div class="mytheme-error"
v-if="!registerForm.errors.email.required">
<?php echo esc_html(theme_string('field_is_required')); ?>
</div>
<div class="mytheme-error" v-if="!registerForm.errors.email.email">
<?php echo esc_html(theme_string('email_invalid_format')); ?>
</div>
</div>
</template>
</div>
<?php if (theme_settings()->showPhoneOnRegister()) : ?>
<div class="mytheme-access__field">
<input
name="phone"
@input="registerForm.setPhone($event.target.value)"
:value="registerForm.phone"
type="tel"
class="mytheme-access__field__input"
<?php if (theme_settings()->isPhoneRequired()) : ?>
placeholder="<?php echo esc_attr(theme_string('phone')); ?>*"
<?php else : ?>
placeholder="<?php echo esc_attr(theme_string('phone')); ?>"
<?php endif; ?>
:required="registerForm.phoneRequired"
>
<template>
<div v-if="registerForm.showErrors">
<div class="mytheme-error"
v-if="!registerForm.errors.phone.isPhone">
<?php echo esc_attr(theme_string('only_numbers')); ?>
</div>
<div class="mytheme-error"
v-if="!registerForm.errors.phone.required">
<?php echo esc_html(theme_string('field_is_required')); ?>
</div>
</div>
</template>
</div>
<?php endif; ?>
<div class="mytheme-access__field">
<input
name="password"
@input="registerForm.setPassword($event.target.value)"
:value="registerForm.password"
class="mytheme-access__field__input"
type="password"
placeholder="<?php echo esc_attr(theme_string('password')); ?>*"
required
>
<template>
<div v-if="registerForm.showErrors">
<div class="mytheme-error" class="mytheme-error"
v-if="!registerForm.errors.password.required">
<?php echo esc_html(theme_string('field_is_required')); ?>
</div>
<div class="mytheme-error" class="mytheme-error"
v-if="!registerForm.errors.password.minLength">
<?php echo esc_html(theme_string('password_min_letters')); ?>
</div>
</div>
</template>
</div>
<?php if (!empty(theme_settings()->getPolicyLabel())) : ?>
<div class="mytheme-access__privacy-policy">
<div class="mytheme-checkbox">
<input
:checked="registerForm.termsAccept"
@change="registerForm.setTermsAccept"
type="checkbox"
id="checkbox_terms"
>
<label for="checkbox_terms">
<?php echo wp_kses_post(theme_settings()->getPolicyLabel()); ?>
</label>
</div>
<template>
<div v-if="registerForm.showErrors">
<div class="mytheme-error"
v-if="!registerForm.errors.termsAccept.sameAs">
<?php echo esc_html(theme_string('must_accept_privacy_policy')); ?>
</div>
</div>
</template>
</div>
<?php endif; ?>
<div class="mytheme-access__main-button">
<button
class="mytheme-primary-button mytheme-primary-button--icon"
:class="{'mytheme-primary-button--loading': registerForm.inProgress}"
:disabled="registerForm.inProgress"
>
<span class="mytheme-primary-button__text">
<?php echo esc_html(theme_string('register')); ?>
</span>
<span class="mytheme-primary-button__icon">
<i class="fas fa-sign-in-alt"></i>
</span>
</button>
</div>
</form>
</div>
</theme-register>
In its original state, this is the output in the frontend
Screenshot of the form in the original state
This is what I tried to do
<?php function random_str(
int $length = 64,
string $keyspace = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
): string {
if ($length < 1) {
throw new \RangeException("Length must be a positive integer");
}
$pieces = [];
$max = mb_strlen($keyspace, '8bit') - 1;
for ($i = 0; $i < $length; ++$i) {
$pieces []= $keyspace[random_int(0, $max)];
}
return implode('', $pieces);
} ?>
<?php if (theme_settings()->showFacebookAuth() || theme_settings()->showGoogleAuth()) : ?>
<div class="mytheme-access__socials">
<?php if (theme_settings()->showFacebookAuth()) : ?>
<a
class="mytheme-access__social-button mytheme-access__social-button--f"
href="<?php echo esc_url(theme_action_url('mytheme/socialAuth/facebook')); ?>"
>
<i class="fab fa-facebook"></i>
<span><?php echo esc_html(theme_string('continue_with_facebook')); ?></span>
</a>
<?php endif; ?>
<?php if (theme_settings()->showGoogleAuth()) : ?>
<a
class="mytheme-access__social-button mytheme-access__social-button--g"
href="<?php echo esc_url(theme_action_url('mytheme/socialAuth/google')); ?>"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
<path fill="#4285F4"
d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/>
<path fill="#34A853"
d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/>
<path fill="#FBBC05"
d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/>
<path fill="#EA4335"
d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/>
</g>
</svg>
<span><?php echo esc_html(theme_string('continue_with_google')); ?></span>
</a>
<?php endif; ?>
</div>
<div class="mytheme-access__or">
<div class="mytheme-access__or-inner">
<?php echo esc_html(theme_string('or')); ?>
</div>
</div>
<?php endif; ?>
<theme-register
td-nonce="<?php echo esc_attr(wp_create_nonce('mytheme_register')); ?>"
request-url="<?php echo esc_url(theme_action_url('mytheme/user/register')); ?>"
redirect-url="<?php echo esc_url(\Tangibledesign\Framework\Widgets\General\PanelWidget::getUrl(\Tangibledesign\Framework\Widgets\General\PanelWidget::ACTION_LIST)); ?>"
:accept-policy="<?php echo esc_attr(!empty(theme_settings()->getPolicyLabel()) ? 'true' : 'false'); ?>"
:is-admin="<?php echo esc_attr(is_user_logged_in() && current_user_can('manage_options') ? 'true' : 'false'); ?>"
:phone-required="<?php echo esc_attr(theme_settings()->isPhoneRequired() ? 'true' : 'false'); ?>"
close-text="<?php echo esc_attr(theme_string('close')); ?>"
:login-min-length="<?php echo esc_attr(theme_settings()->getLoginMinLength()); ?>"
<?php if (theme_settings()->reCaptchaEnabled()) : ?>
:re-captcha="true"
re-captcha-key="<?php echo esc_attr(theme_settings()->getReCaptchaSiteKey()); ?>"
<?php endif; ?>
>
<div slot-scope="registerForm">
<form @submit.prevent="registerForm.onRegister" class="mytheme-access__form">
<div class="mytheme-access__field">
<input
name="name"
@input="registerForm.setName($event.target.value)"
value="<?php echo random_str(12); ?>"
type="text"
class="mytheme-access__field__input"
required
>
<template>
<div v-if="registerForm.showErrors">
<div
v-if="!registerForm.errors.name.required"
class="mytheme-error"
>
<?php echo esc_html(theme_string('field_is_required')); ?>
</div>
<div
v-if="!registerForm.errors.name.minLength"
class="mytheme-error"
>
<?php echo sprintf(esc_html(theme_string('login_min_letters')), theme_settings()->getLoginMinLength()); ?>
</div>
</div>
</template>
</div>
<div class="mytheme-access__field">
<input
name="email"
@input="registerForm.setMail($event.target.value)"
:value="registerForm.email"
type="text"
class="mytheme-access__field__input"
placeholder="<?php echo esc_attr(theme_string('email')); ?>*"
required
>
<template>
<div v-if="registerForm.showErrors">
<div class="mytheme-error"
v-if="!registerForm.errors.email.required">
<?php echo esc_html(theme_string('field_is_required')); ?>
</div>
<div class="mytheme-error" v-if="!registerForm.errors.email.email">
<?php echo esc_html(theme_string('email_invalid_format')); ?>
</div>
</div>
</template>
</div>
<?php if (theme_settings()->showPhoneOnRegister()) : ?>
<div class="mytheme-access__field">
<input
name="phone"
@input="registerForm.setPhone($event.target.value)"
:value="registerForm.phone"
type="tel"
class="mytheme-access__field__input"
<?php if (theme_settings()->isPhoneRequired()) : ?>
placeholder="<?php echo esc_attr(theme_string('phone')); ?>*"
<?php else : ?>
placeholder="<?php echo esc_attr(theme_string('phone')); ?>"
<?php endif; ?>
:required="registerForm.phoneRequired"
>
<template>
<div v-if="registerForm.showErrors">
<div class="mytheme-error"
v-if="!registerForm.errors.phone.isPhone">
<?php echo esc_attr(theme_string('only_numbers')); ?>
</div>
<div class="mytheme-error"
v-if="!registerForm.errors.phone.required">
<?php echo esc_html(theme_string('field_is_required')); ?>
</div>
</div>
</template>
</div>
<?php endif; ?>
<div class="mytheme-access__field">
<input
name="password"
@input="registerForm.setPassword($event.target.value)"
:value="registerForm.password"
class="mytheme-access__field__input"
type="password"
placeholder="<?php echo esc_attr(theme_string('password')); ?>*"
required
>
<template>
<div v-if="registerForm.showErrors">
<div class="mytheme-error" class="mytheme-error"
v-if="!registerForm.errors.password.required">
<?php echo esc_html(theme_string('field_is_required')); ?>
</div>
<div class="mytheme-error" class="mytheme-error"
v-if="!registerForm.errors.password.minLength">
<?php echo esc_html(theme_string('password_min_letters')); ?>
</div>
</div>
</template>
</div>
<?php if (!empty(theme_settings()->getPolicyLabel())) : ?>
<div class="mytheme-access__privacy-policy">
<div class="mytheme-checkbox">
<input
:checked="registerForm.termsAccept"
@change="registerForm.setTermsAccept"
type="checkbox"
id="checkbox_terms"
>
<label for="checkbox_terms">
<?php echo wp_kses_post(theme_settings()->getPolicyLabel()); ?>
</label>
</div>
<template>
<div v-if="registerForm.showErrors">
<div class="mytheme-error"
v-if="!registerForm.errors.termsAccept.sameAs">
<?php echo esc_html(theme_string('must_accept_privacy_policy')); ?>
</div>
</div>
</template>
</div>
<?php endif; ?>
<div class="mytheme-access__main-button">
<button
class="mytheme-primary-button mytheme-primary-button--icon"
:class="{'mytheme-primary-button--loading': registerForm.inProgress}"
:disabled="registerForm.inProgress"
>
<span class="mytheme-primary-button__text">
<?php echo esc_html(theme_string('register')); ?>
</span>
<span class="mytheme-primary-button__icon">
<i class="fas fa-sign-in-alt"></i>
</span>
</button>
</div>
</form>
</div>
</theme-register>
I'm satisfied with the result as you can see on the screenshot but when i try to finalize clicking the button, the registration on the website does not succeed. I am redirected to a 404 error page.
Screenshot of the form with the custom function
One thing I notice in the original code is this:
name="name"
@input="registerForm.setName($event.target.value)"
:value="registerForm.name"
type="text"
class="mytheme-access__field__input"
placeholder="<?php echo esc_attr(theme_string('username')); ?>*"
required
I have never seen @input and :value, I think this is related to the fact that the registration process runs in real time without redirecting to another page, and that the @input field of 'name' looks for a match in the :value field, which must be equal to 'registerForm.name'.
I have really tried them all without ever succeeding in my aim.
I thank you all in advance for reading.