216 lines
13 KiB
Twig
216 lines
13 KiB
Twig
{% extends "layout_public.html.twig" %}
|
|
|
|
{% import "macro_functions.html.twig" as mf %}
|
|
|
|
{% block meta_title %}{{ 'Register'|trans }}{% endblock %}
|
|
{% block meta_description %}{{ 'Create an account to order services, manage billing, and track support requests online.'|trans }}{% endblock %}
|
|
|
|
{% set company = guest.system_company %}
|
|
|
|
{% if settings.theme == 'dark' %}
|
|
{% set logo_url = company.logo_url_dark %}
|
|
{% else %}
|
|
{% set logo_url = company.logo_url %}
|
|
{% endif %}
|
|
|
|
{% block body_class %}page-signup{% endblock %}
|
|
{% block body %}
|
|
<div class="container h-100">
|
|
<div class="row h-75 justify-content-center align-items-center">
|
|
<div class="col-md-6 col-lg-4">
|
|
{% if settings.login_page_show_logo %}
|
|
<div class="d-flex justify-content-center">
|
|
<a href="{{ settings.login_page_logo_url|default('/') }}" target="_blank">
|
|
<img class="my-4" height="50px" src="{{ logo_url }}" alt="{{ company.name }}"/>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="text-center m-4">{{ 'Create a new account'|trans }}</h5>
|
|
<form method="post" action="{{ 'client/create'|api_url(role: 'guest') }}" class="auth" {{ fb_api_form({redirect: '/'|url}) }}>
|
|
{% set r = guest.client_required %}
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" for="first-name">{{ 'First Name'|trans }}</label>
|
|
<input class="form-control" id="first-name" type="text" name="first_name"
|
|
value="{{ request.first_name }}" required="required"/>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" for="last_name">{{ 'Last Name'|trans }}</label>
|
|
<input class="form-control" id="last_name" type="text" name="last_name"
|
|
value="{{ request.last_name }}"{% if 'last_name' in r %} required="required"{% endif %}/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label" for="reg-email">{{ 'Email Address'|trans }}</label>
|
|
<input class="form-control" id="reg-email" type="email" name="email"
|
|
value="{{ request.email }}" required="required"/>
|
|
</div>
|
|
|
|
{% if 'company' in r %}
|
|
<div class="mb-3">
|
|
<label class="form-label" for="company">{{ 'Company'|trans }}</label>
|
|
<input class="form-control" id="company" type="text" name="company"
|
|
value="{{ request.company }}" required="required"/>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if 'birthday' in r %}
|
|
<div class="mb-3">
|
|
<label class="form-label" for="birthday">{{ 'Birthday'|trans }}</label>
|
|
<input class="form-control" id="birthday" type="date" name="birthday" value=""/>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if 'gender' in r %}
|
|
<div class="mb-3">
|
|
<label class="form-label" for="gender">{{ 'Gender'|trans }}</label>
|
|
<select class="form-select" id="gender" name="gender">
|
|
<option value="male">{{ 'Male'|trans }}</option>
|
|
<option value="female">{{ 'Female'|trans }}</option>
|
|
<option value="nonbinary">{{ 'Non-binary'|trans }}</option>
|
|
<option value="other">{{ 'Other'|trans }}</option>
|
|
</select>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if 'address_1' in r %}
|
|
<div class="mb-3">
|
|
<label class="form-label" for="address_1">{{ 'Address'|trans }}</label>
|
|
<input class="form-control" id="address_1" type="text" name="address_1"
|
|
value="{{ request.address_1 }}"/>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if 'address_2' in r %}
|
|
<div class="mb-3">
|
|
<label class="form-label" for="address_2">{{ 'Address 2'|trans }}</label>
|
|
<input class="form-control" id="address_2" type="text" name="address_2"
|
|
value="{{ request.address_2 }}"/>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if 'city' in r %}
|
|
<div class="mb-3">
|
|
<label class="form-label" for="city">{{ 'City'|trans }}</label>
|
|
<input class="form-control" id="city" type="text" name="city"
|
|
value="{{ request.city }}"/>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if 'country' in r %}
|
|
<div class="mb-3">
|
|
<label class="form-label" for="country">{{ 'Country'|trans }}</label>
|
|
<select class="form-select" id="country" name="country" required="required">
|
|
<option value="">{{ '-- Select Country --'|trans }}</option>
|
|
{% for val,label in guest.system_countries %}
|
|
<option value="{{ val }}" label="{{ label|e }}" {% if request.country|default(guest.system_default_country) == val %}selected{% endif %}>{{ label|e }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if 'state' in r %}
|
|
<div class="mb-3">
|
|
<label class="form-label" for="state">{{ 'State'|trans }}</label>
|
|
<input class="form-control" id="state" type="text" name="state"
|
|
value="{{ request.state }}"/>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if 'postcode' in r %}
|
|
<div class="mb-3">
|
|
<label class="form-label" for="postcode">{{ 'Zip/Postal Code'|trans }}</label>
|
|
<input class="form-control" id="postcode" type="text" name="postcode"
|
|
value="{{ request.postcode }}"/>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if 'phone' in r %}
|
|
<div class="mb-3">
|
|
<label class="form-label" for="phone">{{ 'Phone Number'|trans }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">+</span>
|
|
<input class="form-control fb-phone-country-code" id="phone_cc" type="text" name="phone_cc" value="{{ request.phone_cc }}" inputmode="numeric" maxlength="3" pattern="[0-9]{1,3}" autocomplete="tel-country-code"/>
|
|
<input class="form-control" id="phone" type="text" name="phone" value="{{ request.phone }}"/>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% set custom_fields = guest.client_custom_fields %}
|
|
{% for field_name, field in custom_fields %}
|
|
{% if field.active %}
|
|
<div class="mb-3">
|
|
<label class="form-label"
|
|
for="{{ field_name }}">{{ field.title is not empty ? field.title : field_name|capitalize }}</label>
|
|
<input class="form-control" id="{{ field_name }}" type="text"
|
|
name="{{ field_name }}" value="{{ request.(field_name) }}"
|
|
{% if field.required %}required="required"{% endif %} />
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% set honeypot = antispam_honeypot() %}
|
|
{% if honeypot.enabled %}
|
|
{% set honeypot_field = honeypot.field %}
|
|
<div class="visually-hidden" aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;">
|
|
<label class="form-label" for="{{ honeypot_field }}">{{ honeypot_field }}</label>
|
|
<input class="form-control" id="{{ honeypot_field }}" type="text" name="{{ honeypot_field }}" value="" tabindex="-1" autocomplete="new-password" inputmode="none" />
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label" for="reg-password">{{ 'Password'|trans }}</label>
|
|
<input class="form-control" id="reg-password" type="password" name="password" value=""
|
|
required="required"/>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label" for="password-confirm">{{ 'Password Confirm'|trans }}</label>
|
|
<input class="form-control" id="password-confirm" type="password" name="password_confirm" value="" required="required"/>
|
|
</div>
|
|
|
|
{{ mf.recaptcha }}
|
|
|
|
{% if settings.signup_tos == 'explicit' %}
|
|
<div class="form-check mb-1">
|
|
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" required>
|
|
<label class="form-check-label" for="flexCheckDefault">
|
|
{# TODO: Make this translatable once support for placeholders is implemented #}
|
|
<span>I agree to the <a href="{{ 'tos'|url }}" target="_blank">{{ 'Terms of Service'|trans }}</a> and <a href="{{ 'privacy-policy'|url }}" target="_blank">{{ 'Privacy Policy'|trans }}</a>.</span>
|
|
</label>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="form-actions mb-3">
|
|
<button class="btn btn-primary w-100" type="submit">{{ 'Register'|trans }}</button>
|
|
</div>
|
|
|
|
{% if settings.signup_tos == 'implicit' %}
|
|
<div class="mb-1">
|
|
{# TODO: Make this translatable once support for placeholders is implemented #}
|
|
<span class="text-muted mb-1">By creating an account, you agree to our <a href="{{ 'tos'|url }}" target="_blank">{{ 'Terms of Service'|trans }}</a> and <a href="{{ 'privacy-policy'|url }}" target="_blank">{{ 'Privacy Policy'|trans }}</a>.</span>
|
|
</div>
|
|
{% endif %}
|
|
</form>
|
|
<div class="row">
|
|
<div class="col">
|
|
<a class="btn btn-outline-primary mb-2 w-100"
|
|
href="{{ 'login'|url }}">{{ 'Already a User?'|trans }}</a>
|
|
</div>
|
|
{% if settings.show_password_reset_link %}
|
|
<div class="col">
|
|
<a class="btn btn-outline-primary mb-2 w-100" href="{{ 'password-reset'|url }}">{{ 'Forgot password?'|trans }}</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|