122 lines
4.4 KiB
Twig
122 lines
4.4 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Profile
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
{{ block('nav', 'internal/libs/nav.html.twig') }}
|
|
|
|
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
|
|
{{ block('topnav', 'internal/libs/top-nav.html.twig') }}
|
|
<form name='form' method='post' enctype='multipart/form-data' onsubmit='return saveSignatureBlock()'>
|
|
|
|
{{ form_errors(form) }}
|
|
<div class='container'>
|
|
<div class='row'>
|
|
<div class='col text-center' id='profile-image'>
|
|
<input type='hidden' name='id' value='{{ currentUser.id }}'/>
|
|
<input type='hidden' name='{{ field_name(form.signature) }}' id='signature'/>
|
|
<img class='profile-image' src='{% if currentUser.imageName %}{{ user_image_path }}/{{ currentUser.imageName }}{% endif %}'/>
|
|
|
|
{{ form_row(form.imageName) }}
|
|
</div>
|
|
<div class='col'>
|
|
<div class='input-group input-group-outline mb-3 is-filled'>
|
|
<label for='profile_form_name' class='form-label'>Name</label>
|
|
<input type='text' name='{{ field_name(form.name) }}' id='profile_form_name' class='form-control' value='{{ currentUser.name }}'/>
|
|
</div>
|
|
|
|
<div class='input-group input-group-outline mb-3 is-filled'>
|
|
<label for='profile_form_email' class='form-label'>Email</label>
|
|
<input type='email' name='{{ field_name(form.email) }}' id='profile_form_email' class='form-control' value='{{ currentUser.email }}'/>
|
|
</div>
|
|
|
|
<div class='input-group input-group-outline mb-3 {% if currentUser.personalPhone %}is-filled{% endif %}'>
|
|
<label for='profile_form_phone' class='form-label'>Phone</label>
|
|
<input type='tel' name='{{ field_name(form.personalPhone) }}' id='profile_form_phone' class='form-control' value='{{ currentUser.personalPhone }}'/>
|
|
</div>
|
|
|
|
<div class='input-group input-group-outline mb-3 {% if currentUser.workPhone %}is-filled{% endif %}'>
|
|
<label for='profile_form_workPhone' class='form-label'>Work Phone</label>
|
|
<input type='tel' name='{{ field_name(form.workPhone) }}' id='profile_form_workPhone' class='form-control' value='{{ currentUser.workPhone }}'/>
|
|
</div>
|
|
|
|
<div class='input-group input-group-outline mb-3'>
|
|
<label for='profile_form_password' class='form-label'>Password</label>
|
|
<input type='password' name='{{ field_name(form.password.first) }}' id='profile_form_password' class='form-control' autocomplete='new-password'/>
|
|
</div>
|
|
|
|
<div class='input-group input-group-outline mb-3'>
|
|
<label for='profile_form_confirmPassword' class='form-label'>Confirm Password</label>
|
|
<input type='password' name='{{ field_name(form.password.second) }}' id='profile_form_confirmPassword' class='form-control' autocomplete='new-password'/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row'>
|
|
<div class='col'>
|
|
<div class='input-group input-group-outline mb-3'>
|
|
Saved Signature:
|
|
<button id='clearSignature'>Clear Signature</button><br/>
|
|
<canvas id='signature_pad'></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row'>
|
|
<div class='col text-center'>
|
|
<div class='input-group input-group-outline mb-3'>
|
|
{{ form_row(form.submit) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ form_end(form) }}
|
|
</main>
|
|
{% endblock %}
|
|
|
|
{% block page_js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/signature_pad@5.0.4/dist/signature_pad.umd.min.js"></script>
|
|
<script type='text/javascript'>
|
|
window.onload = createSignatureBlock;
|
|
var canvas = document.getElementById('signature_pad');
|
|
var pad = null;
|
|
var signatureData = JSON.parse('{{ signature|raw }}');
|
|
function createSignatureBlock() {
|
|
pad = new SignaturePad(canvas);
|
|
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
canvas.width = canvas.offsetWidth * ratio;
|
|
canvas.height = canvas.offsetHeight * ratio;
|
|
canvas.getContext("2d").scale(ratio, ratio);
|
|
{% if signaturePresent %}pad.fromData(signatureData);{% endif %}
|
|
|
|
document.getElementById('clearSignature').addEventListener('click', clearSignatureBlock);
|
|
}
|
|
|
|
function clearSignatureBlock(e) {
|
|
e.preventDefault();
|
|
pad.clear();
|
|
}
|
|
|
|
function saveSignatureBlock() {
|
|
document.getElementById('signature').value = JSON.stringify(pad.toData());
|
|
|
|
return true;
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block page_css %}
|
|
<style rel='stylesheet'>
|
|
.profile-image {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
#signature_pad {
|
|
width: 100%;
|
|
height: 300px;
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
{% endblock %}
|