maher
212 lines
11 KiB
Twig
Executable File
212 lines
11 KiB
Twig
Executable File
<!DOCTYPE html>
|
|
{% trans_default_domain 'sign-up' %}
|
|
|
|
<html lang="{{ app.request.locale }}" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
|
|
<title>Téléchargeur de vidéos YouTube</title>
|
|
<!-- jQuery -->
|
|
<script src="{{ asset('assets/vendor/jquery@4.0.0/jquery.min.js') }}"></script>
|
|
<!-- Font Awesome pour les icônes -->
|
|
<link rel="stylesheet" href="{{ asset('assets/vendor/font-awesome@6.7.2/css/all.min.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('assets/css/frontend.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap@5.3.8/css/bootstrap.min.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('assets/vendor/country-select-js@2.1.0/build/css/countrySelect.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('assets/vendor/intl-tel-input@28.1.0/dist/css/intlTelInput.min.css') }}">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="main-container">
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-sm-2 offset-sm-3">
|
|
<a href="{{ path('change_language', {'lang':'fr'}) }}">🇫🇷 Français</a>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<a href="{{ path('change_language', {'lang':'en'}) }}">🇬🇧 English (UK)</a>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<a href="{{ path('change_language', {'lang':'ar'}) }}"> 🇸🇦 العربية</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- create a new account -->
|
|
|
|
{{ form_start(form, {'attr': {'class': 'register-form outer-top-xs'}}) }}
|
|
|
|
{% set formErrors = form.vars.errors.form.getErrors(true) %}
|
|
|
|
{% if formErrors|length %}
|
|
<div class="alert alert-danger">
|
|
<ul>
|
|
{% for key,error in formErrors %}
|
|
<li><strong>{{ error.message }}</strong></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h3 class="checkout-subtitle">{{ 'your_personal_information'|trans }}</h3>
|
|
<div class="row mt-3">
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="form-group">
|
|
<label class="info-title">{{ form_label(form.gender) }} <span>*</span></label>
|
|
{{ form_widget(form.gender, {'attr': {'class': 'form-control'}}) }}
|
|
<span class="help-block">{{ form_errors(form.gender) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="form-group">
|
|
<label class="info-title">{{ form_label(form.pseudo) }}</label>
|
|
{{ form_widget(form.pseudo, {'attr': {'class': 'form-control'}}) }}
|
|
<span class="help-block">{{ form_errors(form.pseudo) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="form-group">
|
|
<label class="info-title">{{ form_label(form.birthdate) }} <span>*</span></label>
|
|
{{ form_widget(form.birthdate, {'attr': {'placeholder': 'dd/mm/yyyy'}}) }}
|
|
<span class="help-block">{{ form_errors(form.birthdate) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="form-group">
|
|
<label class="info-title">{{ form_label(form.phoneNumber) }} <span>*</span></label>
|
|
{{ form_widget(form.phoneNumber, {'attr': {'class': 'form-control'}}) }}
|
|
<span class="help-block">{{ form_errors(form.phoneNumber) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-3">
|
|
<div class="form-group">
|
|
<label class="info-title">{{ form_label(form.country) }}<span>*</span></label>
|
|
<span class="help-block">{{ form_errors(form.country) }}</span>
|
|
</div>
|
|
{{ form_widget(form.country, {'attr': {'class': 'form-control'}}) }}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<h3 class="checkout-subtitle mt-5">{{ 'your_login_information'|trans }}</h3>
|
|
|
|
<div class="form-group mt-3">
|
|
<label class="info-title">{{ form_label(form.email) }} <span>*</span></label>
|
|
{{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
|
|
<span class="help-block">{{ form_errors(form.email) }}</span>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-6 col-sm-6">
|
|
|
|
<div class="form-group">
|
|
<label class="info-title">{{ form_label(form.password.first) }} <span>*</span></label>
|
|
{{ form_widget(form.password.first, {'attr': {'class': 'form-control'}}) }}
|
|
<span class="help-block">{{ form_errors(form.password.first) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="form-group">
|
|
<label class="info-title">{{ form_label(form.password.second) }} <span>*</span></label>
|
|
{{ form_widget(form.password.second, {'attr': {'class': 'form-control'}}) }}
|
|
<span class="help-block">{{ form_errors(form.password.second) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="form-group">
|
|
{{ form_widget(form.cgu, {'attr': {'class': 'form-check-input'}}) }}
|
|
<label class="form-check-label">{{ form_label(form.cgu) }}</label>
|
|
</div>
|
|
|
|
{{ form_row(form.save) }}
|
|
|
|
{{ form_end(form) }}
|
|
|
|
|
|
</div><!-- /.row -->
|
|
</div>
|
|
|
|
<script src="{{ asset('assets/vendor/bootstrap@5.3.8/js/bootstrap.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/country-select-js@2.1.0/build/js/countrySelect.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/intl-tel-input@28.1.0/dist/js/intlTelInput.min.js') }}"></script>
|
|
|
|
<script>
|
|
|
|
// 1. Récupérer la locale du navigateur (ex: "fr-FR", "en-US")
|
|
let browserLocale = navigator.language || navigator.userLanguage;
|
|
|
|
// 2. Extraire le code pays (les 2 dernières lettres après le tiret)
|
|
// On passe en minuscule car country-select-js attend du minuscule (ex: "fr")
|
|
let defaultCountryCode = "tn"; // Une valeur de secours (fallback) au cas où
|
|
|
|
if (browserLocale && browserLocale.includes('-')) {
|
|
defaultCountryCode = browserLocale.split('-')[1].toLowerCase();
|
|
}
|
|
|
|
|
|
$("#user_registration_country").countrySelect({
|
|
defaultCountry: defaultCountryCode,
|
|
preferredCountries: ['tn','fr'],
|
|
excludeCountries: ["il"],
|
|
nationalMode: false,
|
|
formatOnDisplay: true,
|
|
separateDialCode: true,
|
|
autoHideDialCode: true,
|
|
});
|
|
|
|
var phoneInputID = document.querySelector("#user_registration_phoneNumber");
|
|
|
|
// 1. Initialisation
|
|
var iti = intlTelInput(phoneInputID, {
|
|
nationalMode: false,
|
|
formatOnDisplay: true,
|
|
separateDialCode: true, // L'indicatif est masqué du champ de saisie
|
|
autoHideDialCode: true,
|
|
autoPlaceholder: "aggressive",
|
|
initialCountry: defaultCountryCode,
|
|
placeholderNumberType: "MOBILE",
|
|
preferredCountries: ['tn', 'fr'],
|
|
excludeCountries: ["il"],
|
|
loadUtils: () =>
|
|
import("{{ asset('assets/vendor/intl-tel-input@28.1.0/dist/js/utils.js') }}")
|
|
.then((module) => {
|
|
|
|
window.intlTelInputUtils = module;
|
|
|
|
return module;
|
|
}),
|
|
});
|
|
|
|
// attendre le chargement
|
|
iti.promise.then(() => {
|
|
$(phoneInputID).on("countrychange", function(event) {
|
|
|
|
// Get the selected country data to know which country is selected.
|
|
var selectedCountryData = iti.getSelectedCountryData();
|
|
|
|
// Get an example number for the selected country to use as placeholder.
|
|
var newPlaceholder = intlTelInputUtils.getExampleNumber(selectedCountryData.iso2, true, intlTelInputUtils.numberFormat.INTERNATIONAL);
|
|
|
|
// Reset the phone number input.
|
|
iti.setNumber("");
|
|
|
|
// Convert placeholder as exploitable mask by replacing all 1-9 numbers with 0s
|
|
var mask = newPlaceholder.replace(/[1-9]/g, "0");
|
|
|
|
// Apply the new mask for the input
|
|
$(this).mask(mask);
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|