first commit
This commit is contained in:
maher
@@ -0,0 +1,211 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user