implementation of the email systrem and the verification for the user account

2026-08-25 01:27:53 +02:00
parent ffe730cc50
commit 3236a283aa
7 changed files with 365 additions and 108 deletions
@@ -87,6 +87,82 @@
    color: #0a5f8f;
    font-weight: 700;
  }
+
+  /* Custom Modal Overlay Styles */
+  .custom-modal-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(14, 32, 48, 0.5);
+    backdrop-filter: blur(3px);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .custom-modal-overlay.active {
+    display: flex;
+  }
+
+  .custom-modal {
+    background: #ffffff;
+    padding: 2rem;
+    border-radius: 16px;
+    max-width: 440px;
+    width: 90%;
+    box-shadow: 0 20px 44px rgba(14, 32, 48, 0.15);
+    border: 1px solid #d4e0e9;
+    text-align: center;
+  }
+
+  .custom-modal h3 {
+    color: #0f344d;
+    font-size: 1.4rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .custom-modal p {
+    color: #547184;
+    font-size: 0.95rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .modal-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .modal-btn-primary {
+    background: #0a5f8f;
+    color: #ffffff;
+    border: none;
+    border-radius: 999px;
+    padding: 0.65rem;
+    font-weight: 700;
+    cursor: pointer;
+    text-decoration: none;
+    display: block;
+  }
+
+  .modal-btn-secondary {
+    background: #f1f5f9;
+    color: #19445f;
+    border: 1px solid #c4d5e2;
+    border-radius: 999px;
+    padding: 0.65rem;
+    font-weight: 700;
+    cursor: pointer;
+    text-decoration: none;
+    display: block;
+  }
+
+  .modal-btn-secondary:hover {
+    background: #e2e8f0;
+  }
 </style>
 {% endblock %}

@@ -107,4 +183,45 @@
  </form>
  <p class="auth-meta">Noch kein Konto? <a href="{{ url_for('register') }}">Jetzt registrieren</a></p>
 </section>
+
+<!-- Custom Verification Warning Modal -->
+<div id="verifyModal" class="custom-modal-overlay">
+  <div class="custom-modal">
+    <h3>Konto nicht verifiziert</h3>
+    <p id="modalMessage">Ihr Konto wurde noch nicht aktiviert. Bitte geben Sie Ihren Bestätigungscode ein oder fordern Sie einen neuen an.</p>
+    <div class="modal-actions">
+      <a id="goToVerifyBtn" href="{{ url_for('verify_account') }}" class="modal-btn-primary">Code eingeben</a>
+      <a href="#" id="changeEmailLink" class="modal-btn-secondary">E-Mail-Adresse ändern / Hilfe</a>
+      <button type="button" onclick="closeModal()" class="modal-btn-secondary" style="border: none; background: transparent; color: #64748b;">Abbrechen</button>
+    </div>
+  </div>
+</div>
+
+<script>
+  function showVerificationModal(username) {
+    const modal = document.getElementById('verifyModal');
+    const verifyBtn = document.getElementById('goToVerifyBtn');
+    if (username) {
+      verifyBtn.href = "{{ url_for('verify_account') }}?username=" + encodeURIComponent(username);
+    }
+    modal.classList.add('active');
+  }
+
+  function closeModal() {
+    const modal = document.getElementById('verifyModal');
+    modal.classList.remove('active');
+  }
+
+  // Example hook: If your backend flashes or passes an unverified flag, 
+  // you can automatically trigger it, or trigger it via a failed JSON login response.
+  {% with messages = get_flashed_messages(with_categories=true) %}
+    {% for category, message in messages %}
+      {% if "verif" in message|lower %}
+        document.addEventListener("DOMContentLoaded", function() {
+          showVerificationModal("{{ request.form.get('username', '') }}");
+        });
+      {% endif %}
+    {% endfor %}
+  {% endwith %}
+</script>
 {% endblock %}
@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+
+{% block title %}Konto verifizieren{% endblock %}
+
+{% block head %}
+{{ super() }}
+<style>
+    /* Add the same .auth-wrap and related CSS from register.html here, 
+       or move them to a shared base.css file to keep templates clean */
+    .auth-wrap {
+        max-width: 560px;
+        margin: 2rem auto;
+        padding: 2rem;
+        border-radius: 18px;
+        border: 1px solid #d4e0e9;
+        background: #ffffff;
+        box-shadow: 0 20px 44px rgba(14, 32, 48, 0.08);
+    }
+    .auth-wrap h1 { font-size: 2rem; color: #0f344d; margin-bottom: 0.4rem; }
+    .auth-wrap p { margin-bottom: 1.3rem; }
+    .field { margin-bottom: 0.9rem; }
+    .field label { display: block; margin-bottom: 0.35rem; font-weight: 700; color: #19445f; }
+    .field input { width: 100%; padding: 0.68rem 0.78rem; border-radius: 10px; border: 1px solid #c4d5e2; font-size: 1rem; color: #12384f; }
+    .field input:focus { outline: none; border-color: #2f79a7; box-shadow: 0 0 0 3px rgba(58, 133, 180, 0.2); }
+    .auth-btn { width: 100%; border: none; border-radius: 999px; padding: 0.72rem; font-size: 1rem; font-weight: 700; color: #ffffff; background: linear-gradient(120deg, #0a5f8f 0%, #0b4567 100%); cursor: pointer; margin-top: 1rem;}
+</style>
+{% endblock %}
+
+{% block content %}
+<section class="auth-wrap">
+    <h1>E-Mail bestätigen</h1>
+    <p>Wir haben Ihnen einen Bestätigungscode per E-Mail gesendet. Bitte geben Sie diesen ein, um Ihr Konto zu aktivieren.</p>
+    
+    <form method="POST" action="{{ url_for('verify_account') }}">
+        <div class="field">
+            <label for="username">Benutzername</label>
+            <input id="username" name="username" type="text" value="{{ username }}" required {% if username %}readonly{% endif %}>
+        </div>
+        
+        <div class="field">
+            <label for="token">Bestätigungscode</label>
+            <input id="token" name="token" type="text" placeholder="z.B. A1B2C3" autocomplete="off" required autofocus>
+        </div>
+
+        <button class="auth-btn" type="submit">Konto aktivieren</button>
+    </form>
+</section>
+{% endblock %}