php – Integrate otp in my custom singup form
Question
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It only takes a minute to sign up.
Anybody can ask a question
Anybody can answer
The best answers are voted up and rise to the top
Asked
Viewed
5 times
so i have a custom signup page in wordpress who has 4 fileds , username , email , phone , password , i want when the user submit the form a popup or another page appear to ask him for the code that he received on his phone using firebase sms otp , i searched on google for plugins but all of them are using the default signup page of admin dashboard , how i do to integrate it manually this is my signup form code :
enter code here
<?php
/* @var VehicaWidgetsGeneralLoginGeneralWidget $vehicaCurrentWidget */
global $vehicaCurrentWidget;
$vehicaPolicyLabel="";
if ($vehicaCurrentWidget && method_exists($vehicaCurrentWidget, 'hasPolicyLabel') && $vehicaCurrentWidget->hasPolicyLabel()) {
$vehicaPolicyLabel = $vehicaCurrentWidget->getPolicyLabel();
}
if (!empty(vehicaApp('policy_label'))) {
$vehicaPolicyLabel = vehicaApp('policy_label');
}
?>
<vehica-register
vehica-nonce="<?php echo esc_attr(wp_create_nonce('vehica_register')); ?>"
request-url="<?php echo esc_url(admin_url('admin-post.php?action=vehica_register')); ?>"
panel-page="<?php echo esc_url(VehicaWidgetsGeneralPanelGeneralWidget::getCarListPageUrl()); ?>"
:accept-policy="<?php echo esc_attr(!empty($vehicaPolicyLabel) ? '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(vehicaApp('settings_config')->getPanelPhoneNumber() === 'required' ? 'true' : 'false'); ?>"
<?php if (vehicaApp('recaptcha')) : ?>
:re-captcha="true"
re-captcha-key="<?php echo esc_attr(vehicaApp('settings_config')->getRecaptchaSite()); ?>"
<?php endif; ?>
>
<div slot-scope="registerForm">
<form @submit.prevent="registerForm.onRegister">
<template v-if="registerForm.message && registerForm.message !== ''">
<div>
{{ registerForm.message }}
</div>
</template>
<?php if (vehicaApp('show_social_auth')) : ?>
<div class="vehica-social-login">
<div class="vehica-social-login__label">
<?php echo esc_html(vehicaApp('sing_in_with_string')); ?><span>:</span>
</div>
<?php if (vehicaApp('show_google_auth')) : ?>
<a
class="vehica-social-login__button vehica-social-login__button--google"
href="<?php echo esc_url(admin_url('admin-post.php?action=vehica/socialAuth/google')); ?>"
>
<img src="<?php echo esc_url(get_template_directory_uri() . '/assets/img/g.png'); ?>">
<span><?php echo esc_html(vehicaApp('google_string')); ?></span>
</a>
<?php endif; ?>
<?php if (vehicaApp('show_facebook_auth')) : ?>
<a class="vehica-social-login__button vehica-social-login__button--facebook"
href="<?php echo esc_url(admin_url('admin-post.php?action=vehica/socialAuth/facebook')); ?>">
<i class="fab fa-facebook-f"></i>
<span><?php echo esc_html(vehicaApp('facebook_string')); ?></span>
</a>
<?php endif; ?>
</div>
<div class="vehica-social-login-or"><?php echo esc_html(vehicaApp('or_string')); ?></div>
<?php endif; ?>
<template>
<div v-if="registerForm.showErrors">
<div v-if="!registerForm.errors.termsAccept.sameAs" class="vehica-register-login-notice">
<?php echo esc_html(vehicaApp('must_accept_privacy_policy_string')); ?>
</div>
</div>
</template>
<div class="vehica-fields">
<div
class="vehica-field"
:class="{'vehica-field--validation-required': registerForm.showNameError}"
>
<input
id="<?php echo esc_attr(VehicaManagersRegisterManager::NAME); ?>"
name="<?php echo esc_attr(VehicaManagersRegisterManager::NAME); ?>"
@input="registerForm.setName($event.target.value)"
:value="registerForm.name"
type="text"
placeholder="<?php echo esc_attr(vehicaApp('username_string')); ?>*"
required
>
<template>
<div
v-if="registerForm.showErrors"
class="vehica-field--validation-required__tip"
>
<div
v-if="!registerForm.errors.name.required"
class="vehica-field--validation-required__tip__text"
>
<?php echo esc_html(vehicaApp('field_is_required_string')); ?>
</div>
<div
v-if="!registerForm.errors.name.minLength"
class="vehica-field--validation-required__tip__text"
>
<?php echo esc_html(vehicaApp('login_min_letters_string')); ?>
</div>
</div>
</template>
</div>
<div
class="vehica-field"
:class="{'vehica-field--validation-required': registerForm.showEmailError}"
>
<input
id="<?php echo esc_attr(VehicaManagersRegisterManager::EMAIL); ?>"
name="<?php echo esc_attr(VehicaManagersRegisterManager::EMAIL); ?>"
@input="registerForm.setMail($event.target.value)"
:value="registerForm.email"
type="text"
placeholder="<?php echo esc_attr(vehicaApp('email_string')); ?>*"
required
>
<template>
<div
v-if="registerForm.showErrors"
class="vehica-field--validation-required__tip"
>
<div
v-if="!registerForm.errors.email.required"
class="vehica-field--validation-required__tip__text"
>
<?php echo esc_html(vehicaApp('field_is_required_string')); ?>
</div>
<div
v-if="!registerForm.errors.email.email"
class="vehica-field--validation-required__tip__text"
>
<?php echo esc_html(vehicaApp('email_invalid_format_string')); ?>
</div>
</div>
</template>
</div>
<?php if (VehicaWidgetsGeneralLoginGeneralWidget::showPhoneNumberField()) : ?>
<div
class="vehica-field"
:class="{'vehica-field--validation-required': registerForm.showPhoneError}"
>
<input
id="<?php echo esc_attr(VehicaManagersRegisterManager::PHONE); ?>"
name="<?php echo esc_attr(VehicaManagersRegisterManager::PHONE); ?>"
@input="registerForm.setPhone($event.target.value)"
:value="registerForm.phone"
type="text"
<?php if (vehicaApp('settings_config')->getPanelPhoneNumber() === 'required') : ?>
placeholder="<?php echo esc_attr(vehicaApp('phone_string')); ?>*"
required
<?php else : ?>
placeholder="<?php echo esc_attr(vehicaApp('phone_string')); ?>"
<?php endif; ?>
>
<template>
<div
v-if="registerForm.showErrors"
class="vehica-field--validation-required__tip"
>
<div
v-if="!registerForm.errors.phone.isPhone"
class="vehica-field--validation-required__tip__text"
>
<?php echo esc_attr(vehicaApp('only_numbers_string')); ?>
</div>
<?php if (vehicaApp('settings_config')->getPanelPhoneNumber() === 'required') : ?>
<div
v-if="!registerForm.errors.phone.required"
class="vehica-field--validation-required__tip__text"
>
<?php echo esc_html(vehicaApp('field_is_required_string')); ?>
</div>
<?php endif; ?>
</div>
</template>
</div>
<?php endif; ?>
<div
class="vehica-field"
:class="{'vehica-field--validation-required': registerForm.showPasswordError}"
>
<input
id="vehica-register-<?php echo esc_attr(VehicaManagersRegisterManager::PASSWORD); ?>"
name="<?php echo esc_attr(VehicaManagersRegisterManager::PASSWORD); ?>"
@input="registerForm.setPassword($event.target.value)"
:value="registerForm.password"
type="password"
placeholder="<?php echo esc_attr(vehicaApp('password_string')); ?>*"
required
>
<template>
<div
v-if="registerForm.showErrors"
class="vehica-field--validation-required__tip"
>
<div
v-if="!registerForm.errors.password.required"
class="vehica-field--validation-required__tip__text"
>
<?php echo esc_html(vehicaApp('field_is_required_string')); ?>
</div>
<div
v-if="!registerForm.errors.password.minLength"
class="vehica-field--validation-required__tip__text"
>
<?php echo esc_html(vehicaApp('password_min_letters_string')); ?>
</div>
</div>
</template>
</div>
</div>
<?php if (vehicaApp('show_user_roles')) : ?>
<div class="vehica-register__select-user-role">
<div class="vehica-register__user-role">
<div class="vehica-radio">
<input
id="role_private"
type="radio"
value="private"
name="<?php echo esc_attr(VehicaManagersRegisterManager::ROLE); ?>"
@change.prevent="registerForm.setRole('private')"
:checked="registerForm.role === 'private'"
>
<label for="role_private">
<?php echo esc_html(vehicaApp('private_role_string')) ?>
</label>
</div>
</div>
<div class="vehica-register__user-role">
<div class="vehica-radio">
<input
id="role_business"
type="radio"
value="business"
name="<?php echo esc_attr(VehicaManagersRegisterManager::ROLE); ?>"
@change.prevent="registerForm.setRole('business')"
:checked="registerForm.role === 'business'"
>
<label for="role_business">
<?php echo esc_html(vehicaApp('business_role_string')) ?>
</label>
</div>
</div>
</div>
<?php endif; ?>
<?php if (!empty($vehicaPolicyLabel)) : ?>
<div class="vehica-register__terms">
<div class="vehica-checkbox">
<input
:checked="registerForm.termsAccept"
@change="registerForm.setTermsAccept"
type="checkbox"
id="checkbox_terms"
>
<label for="checkbox_terms">
<?php echo wp_kses_post($vehicaPolicyLabel); ?>
</label>
</div>
</div>
<?php endif; ?>
<button
class="vehica-button vehica-button--register vehica-button--with-progress-animation"
:class="{'vehica-button--with-progress-animation--active': registerForm.inProgress}"
:disabled="registerForm.inProgress"
>
<template>
<svg
v-if="registerForm.inProgress"
width="120"
height="30"
viewBox="0 0 120 30"
xmlns="http://www.w3.org/2000/svg"
fill="#fff"
>
<circle cx="15" cy="15" r="15">
<animate attributeName="r" from="15" to="15"
begin="0s" dur="0.8s"
values="15;9;15" calcMode="linear"
repeatCount="indefinite"/>
<animate attributeName="fill-opacity" from="1" to="1"
begin="0s" dur="0.8s"
values="1;.5;1" calcMode="linear"
repeatCount="indefinite"/>
</circle>
<circle cx="60" cy="15" r="9" fill-opacity="0.3">
<animate attributeName="r" from="9" to="9"
begin="0s" dur="0.8s"
values="9;15;9" calcMode="linear"
repeatCount="indefinite"/>
<animate attributeName="fill-opacity" from="0.5" to="0.5"
begin="0s" dur="0.8s"
values=".5;1;.5" calcMode="linear"
repeatCount="indefinite"/>
</circle>
<circle cx="105" cy="15" r="15">
<animate attributeName="r" from="15" to="15"
begin="0s" dur="0.8s"
values="15;9;15" calcMode="linear"
repeatCount="indefinite"/>
<animate attributeName="fill-opacity" from="1" to="1"
begin="0s" dur="0.8s"
values="1;.5;1" calcMode="linear"
repeatCount="indefinite"/>
</circle>
</svg>
</template>
<span><?php echo esc_html(vehicaApp('register_string')); ?></span>
</button>
</form>
</div>
asked 17 mins ago
Iskander Azlef is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
lang-php
WordPress Development Stack Exchange works best with JavaScript enabled
0
1 year
2021-11-02T07:22:14-05:00
2021-11-02T07:22:14-05:00 0 Answers
0 views
0
Leave an answer