cahnges to the user management
This commit is contained in:
@@ -87,82 +87,6 @@
|
||||
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 %}
|
||||
|
||||
@@ -183,45 +107,4 @@
|
||||
</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 %}
|
||||
@@ -5,8 +5,6 @@
|
||||
{% 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;
|
||||
@@ -22,7 +20,106 @@
|
||||
.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;}
|
||||
.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; }
|
||||
|
||||
/* Helper actions below main form */
|
||||
.auth-actions {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
font-size: 0.92rem;
|
||||
color: #547184;
|
||||
}
|
||||
.auth-actions-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0a5f8f;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.link-btn:hover {
|
||||
color: #0b4567;
|
||||
}
|
||||
|
||||
/* 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: 460px;
|
||||
width: 90%;
|
||||
box-shadow: 0 20px 44px rgba(14, 32, 48, 0.15);
|
||||
border: 1px solid #d4e0e9;
|
||||
text-align: left;
|
||||
}
|
||||
.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.2rem;
|
||||
}
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
.modal-btn-primary {
|
||||
background: #0a5f8f;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 0.65rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal-btn-secondary {
|
||||
background: #f1f5f9;
|
||||
color: #19445f;
|
||||
border: 1px solid #c4d5e2;
|
||||
border-radius: 999px;
|
||||
padding: 0.65rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.modal-btn-secondary:hover {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -44,5 +141,58 @@
|
||||
|
||||
<button class="auth-btn" type="submit">Konto aktivieren</button>
|
||||
</form>
|
||||
|
||||
<div class="auth-actions">
|
||||
<div class="auth-actions-row">
|
||||
<span>Keinen Code erhalten?</span>
|
||||
<form method="POST" action="{{ url_for('resend_token') }}" style="margin: 0;">
|
||||
<input type="hidden" name="username" value="{{ username }}">
|
||||
<button type="submit" class="link-btn">Code erneut senden</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="auth-actions-row">
|
||||
<span>Falsche E-Mail-Adresse?</span>
|
||||
<button type="button" class="link-btn" onclick="openEmailModal()">E-Mail ändern</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Modal: E-Mail-Adresse ändern -->
|
||||
<div id="emailModal" class="custom-modal-overlay">
|
||||
<div class="custom-modal">
|
||||
<h3>E-Mail-Adresse ändern</h3>
|
||||
<p>Geben Sie Ihre neue E-Mail-Adresse ein. Wir senden Ihnen umgehend einen neuen Bestätigungscode.</p>
|
||||
|
||||
<form method="POST" action="{{ url_for('change_email_and_resend') }}">
|
||||
<input type="hidden" name="username" value="{{ username }}">
|
||||
|
||||
<div class="field">
|
||||
<label for="new_email">Neue E-Mail-Adresse</label>
|
||||
<input id="new_email" name="new_email" type="email" placeholder="name@beispiel.de" required>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="submit" class="modal-btn-primary">Speichern & Code senden</button>
|
||||
<button type="button" onclick="closeEmailModal()" class="modal-btn-secondary">Abbrechen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openEmailModal() {
|
||||
document.getElementById('emailModal').classList.add('active');
|
||||
}
|
||||
|
||||
function closeEmailModal() {
|
||||
document.getElementById('emailModal').classList.remove('active');
|
||||
}
|
||||
|
||||
// Modal per Klick auf den Hintergrund schließen
|
||||
document.getElementById('emailModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeEmailModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user