Refactor school year button and enhance JavaScript bindings
All checks were successful
Build & Push / Build & Push image (push) Successful in 44s

- Updated the button for adding a new school year to have an ID for easier access.
- Changed the way IS_SUPERADMIN is defined to use JSON for better compatibility.
- Added event bindings for canceling and saving edits for schools in the JavaScript code.
- Introduced a new document for Google SSO instructions.
This commit is contained in:
2026-03-03 20:33:49 +01:00
parent 28c05edb0b
commit 55cd055645
8 changed files with 336 additions and 27 deletions

View File

@@ -27,6 +27,25 @@
.logo h1 { font-size: 1.4rem; color: var(--gray-900, #1f2937); font-weight: 700; }
.logo p { color: var(--gray-500, #6b7280); font-size: 0.85rem; margin-top: 0.25rem; }
.btn-google {
display: flex; align-items: center; justify-content: center; gap: 0.75rem;
width: 100%; padding: 0.8rem 1rem;
background: white; color: #1f2937;
border: 1px solid #d1d5db; border-radius: 8px;
font-size: 0.95rem; font-weight: 500;
text-decoration: none; transition: background 0.15s, box-shadow 0.15s;
margin-bottom: 0.75rem;
}
.btn-google:hover { background: #f9fafb; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.btn-google svg { flex-shrink: 0; }
.sso-divider {
display: flex; align-items: center; gap: 0.75rem;
margin: 0.5rem 0 0.75rem; color: #9ca3af; font-size: 0.8rem;
}
.sso-divider::before, .sso-divider::after {
content: ''; flex: 1; height: 1px; background: #e5e7eb;
}
.btn-microsoft {
width: 100%;
padding: 0.85rem;
@@ -278,17 +297,39 @@
</svg>
Inloggen met Microsoft
</a>
<p style="text-align:center; color:#6b7280; font-size:0.8rem;">
Log in met uw school Microsoft account
</p>
{% else %}
{% endif %}
{% if entra_configured and google_configured %}
<div class="sso-divider">of</div>
{% endif %}
{% if google_configured %}
<a href="/auth/google" class="btn-google">
<svg width="20" height="20" viewBox="0 0 48 48">
<path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
<path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
<path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
<path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
<path fill="none" d="M0 0h48v48H0z"/>
</svg>
Inloggen met Google
</a>
{% endif %}
{% if not entra_configured and not google_configured %}
<div class="not-configured">
<strong>Microsoft login niet geconfigureerd</strong><br><br>
Stel <code>MICROSOFT_CLIENT_ID</code> en <code>MICROSOFT_CLIENT_SECRET</code>
in de <code>.env</code> in om Entra login te activeren.
<strong>SSO login niet geconfigureerd</strong><br><br>
Stel <code>MICROSOFT_CLIENT_ID</code> of <code>GOOGLE_CLIENT_ID</code>
in de <code>.env</code> in om SSO login te activeren.
</div>
{% endif %}
{% if entra_configured or google_configured %}
<p style="text-align:center; color:#6b7280; font-size:0.8rem; margin-top:0.25rem;">
Log in met uw school account
</p>
{% endif %}
<!-- Superadmin fallback — zichtbaar maar discreet -->
<div class="superadmin-toggle">
<button id="btnToggleSuperadmin">Platformbeheerder</button>