245 lines
11 KiB
HTML
245 lines
11 KiB
HTML
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
|
{% load i18n crispy_forms_tags %}
|
|
{% load widget_tweaks %}
|
|
|
|
{% block title %}{% trans "Create Account" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
/* KAAUH Teal Style Variables */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-teal-light: #e6f7f8;
|
|
}
|
|
|
|
.kaauh-teal-header {
|
|
background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
|
|
}
|
|
|
|
.btn-kaauh-teal {
|
|
background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
|
|
border: none;
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-kaauh-teal:hover {
|
|
background: linear-gradient(135deg, var(--kaauh-teal-dark) 0%, var(--kaauh-teal) 100%);
|
|
color: white;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 99, 110, 0.3);
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--kaauh-teal);
|
|
box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
|
|
}
|
|
|
|
.text-kaauh-teal {
|
|
color: var(--kaauh-teal) !important;
|
|
}
|
|
|
|
.text-kaauh-teal:hover {
|
|
color: var(--kaauh-teal-dark) !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 col-lg-8">
|
|
<div class="card shadow">
|
|
<div class="card-header kaauh-teal-header text-white p-3">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-user-plus me-2"></i>
|
|
{% trans "Create Account" %}
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<form method="post" novalidate>
|
|
{% csrf_token %}
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.first_name.id_for_label }}" class="form-label">
|
|
{% trans "First Name" %} <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.first_name }}
|
|
{% if form.first_name.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.first_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.middle_name.id_for_label }}" class="form-label">
|
|
{% trans "Middle Name" %}
|
|
</label>
|
|
{{ form.middle_name }}
|
|
{% if form.middle_name.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.middle_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.last_name.id_for_label }}" class="form-label">
|
|
{% trans "Last Name" %} <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.last_name }}
|
|
{% if form.last_name.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.last_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
|
|
<div class="col-md-8 mb-3">
|
|
<label for="{{ form.email.id_for_label }}" class="form-label">
|
|
{% trans "Email Address" %} <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.email }}
|
|
{% if form.email.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.email.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="{{ form.phone.id_for_label }}" class="form-label">
|
|
{% trans "Phone Number" %} <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.phone }}
|
|
{% if form.phone.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.phone.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.gpa.id_for_label }}" class="form-label">
|
|
{% trans "GPA" %} <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.gpa|add_class:"form-control" }}
|
|
{% if form.gpa.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.gpa.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.national_id.id_for_label }}" class="form-label">
|
|
{% trans "National Id Or Iqama" %} <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.national_id }}
|
|
{% if form.national_id.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.national_id.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.nationality.id_for_label }}" class="form-label">
|
|
{% trans "Nationality" %} <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.nationality }}
|
|
{% if form.nationality.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.nationality.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.gender.id_for_label }}" class="form-label">
|
|
{% trans "Gender" %} <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.gender }}
|
|
{% if form.gender.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.gender.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.password.id_for_label }}" class="form-label">
|
|
{% trans "Password" %} <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.password }}
|
|
{% if form.password.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.password.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.confirm_password.id_for_label }}" class="form-label">
|
|
{% trans "Confirm Password" %} <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.confirm_password }}
|
|
{% if form.confirm_password.errors %}
|
|
<div class="text-danger small">
|
|
{{ form.confirm_password.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if form.non_field_errors %}
|
|
<div class="alert alert-danger">
|
|
{% for error in form.non_field_errors %}
|
|
{{ error }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="d-grid mt-4">
|
|
<button type="submit" class="btn btn-kaauh-teal p-3">
|
|
<i class="fas fa-user-plus me-2"></i>
|
|
{% trans "Create Account" %}
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
<div class="card-footer text-center">
|
|
<small class="text-muted">
|
|
{% trans "Already have an account?" %}
|
|
<a href="{% url 'account_login' %}?next={% url 'application_submit_form' job.form_template.slug %}" class="text-decoration-none text-kaauh-teal">
|
|
{% trans "Login here" %}
|
|
</a>
|
|
</small>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|