new: usr: add Contact page with email sending behaviour #4

templates/Official/contact.html.twig

@@ -20,8 +20,117 @@
 
 {% block body %}
   <div class="txt">
-    <h2>Contact and user support</h2>
-    <h3>Under construction</h3>
-    <a href="mailto:langlasz@gmail.com">langlasz@gmail.com</a>
+    <h2 style="text-align: center;">Contact and user support</h2>
+
+    {% for message in app.flashes('contact_success') %}
+      <div class="auth-card auth-card--sent" style="margin: 20px auto; max-width: 600px;">
+        <div class="auth-sent-icon"><i class="far fa-envelope"></i></div>
+        <h3 style="color: #667eea; margin: 16px 0;">Message Sent!</h3>
+        <p class="auth-sent-note">{{ message }}</p>
+        <a href="{{ path('MineSeekerBundle_homepage') }}" class="auth-submit" style="text-decoration:none; margin-top:16px;">
+          Back to Home
+        </a>
+      </div>
+    {% else %}
+      <p style="text-align: center; color: #666; margin-bottom: 30px;">
+        Have a question, feedback, or need support? We'd love to hear from you!
+      </p>
+
+      <div class="auth-card" style="max-width: 600px; margin: 0 auto;">
+        {{ form_start(form, {attr: {class: 'auth-form'}}) }}
+
+        <div class="auth-field">
+          <label for="{{ form.name.vars.id }}" class="auth-label">Name *</label>
+          <div class="auth-input-wrap">
+            <i class="fas fa-user auth-input-icon"></i>
+            {{ form_widget(form.name, {
+              attr: {
+                class: 'auth-input' ~ (not form.name.vars.valid ? ' auth-input--error' : ''),
+                placeholder: 'Your name',
+                autofocus: true,
+              }
+            }) }}
+          </div>
+          {% if not form.name.vars.valid %}
+            {% for error in form.name.vars.errors %}
+              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
+            {% endfor %}
+          {% endif %}
+        </div>
+
+        <div class="auth-field">
+          <label for="{{ form.email.vars.id }}" class="auth-label">Email *</label>
+          <div class="auth-input-wrap">
+            <i class="fas fa-envelope auth-input-icon"></i>
+            {{ form_widget(form.email, {
+              attr: {
+                class: 'auth-input' ~ (not form.email.vars.valid ? ' auth-input--error' : ''),
+                placeholder: 'your.email@example.com',
+              }
+            }) }}
+          </div>
+          {% if not form.email.vars.valid %}
+            {% for error in form.email.vars.errors %}
+              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
+            {% endfor %}
+          {% endif %}
+        </div>
+
+        <div class="auth-field">
+          <label for="{{ form.content.vars.id }}" class="auth-label">Message *</label>
+          <div class="auth-input-wrap">
+            <i class="fas fa-comment-dots auth-input-icon" style="top: 16px;"></i>
+            {{ form_widget(form.content, {
+              attr: {
+                class: 'auth-input' ~ (not form.content.vars.valid ? ' auth-input--error' : ''),
+                placeholder: 'Tell us what\'s on your mind...',
+                rows: 6,
+                style: 'min-height: 150px; resize: vertical;'
+              }
+            }) }}
+          </div>
+          {% if not form.content.vars.valid %}
+            {% for error in form.content.vars.errors %}
+              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
+            {% endfor %}
+          {% endif %}
+        </div>
+
+        <div class="auth-field">
+          <label class="auth-checkbox-label" style="display: flex; align-items: flex-start; cursor: pointer; user-select: none;">
+            {{ form_widget(form.consent, {
+              attr: {
+                class: 'auth-checkbox',
+                style: 'margin-right: 10px; margin-top: 3px;'
+              }
+            }) }}
+            <span style="flex: 1; font-size: 14px; line-height: 1.5; color: #666;">
+              I have read the <a href="{{ path('MineSeekerBundle_privacy') }}" target="_blank" style="color: #667eea; text-decoration: none;">Privacy and Data Processing Policy</a> and I consent to the processing of my data. *
+            </span>
+          </label>
+          {% if not form.consent.vars.valid %}
+            {% for error in form.consent.vars.errors %}
+              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
+            {% endfor %}
+          {% endif %}
+        </div>
+
+        <button type="submit" class="auth-submit">
+          <i class="fas fa-paper-plane"></i> Send Message
+        </button>
+
+        {{ form_end(form) }}
+      </div>
+    {% endfor %}
+  </div>
+{% endblock %}
+
+{% block javascripts %}
+  {{ parent() }}
+  <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
+  {{ vite_entry_script_tags('contact') }}
+  <div id="contact-form-wrapper"
+       data-site-key="{{ recaptcha_site_key }}"
+       data-recaptcha-field-id="{{ form.recaptcha.vars.id }}">
   </div>
 {% endblock %}