admin
96043efe46
Passkey-Login wie in ausgaben-next/werte-next: auf der Login-Seite "Mit Passkey anmelden", Verwaltung der eigenen Passkeys unter /einstellungen (Button oben rechts). Das Passwort bleibt als Alternative bestehen. - lib/webauthn.ts, lib/passkeys.ts sowie API-Routen unter /api/passkey - proxy.ts: /api/passkey/authenticate ohne Session erreichbar - Styles als eigene CSS-Klassen in globals.css (kein Tailwind in diesem Projekt), passend zum vorhandenen login-*/app-*-Schema - Tabelle tabletten_passkeys in der DB medizin: app-spezifischer Name, damit sich Apps desselben Stacks nicht gegenseitig Passkeys anzeigen oder loeschen - RP-Konfiguration ueber TABLETTEN_RP_*, da sich die .env auf dem Server mit anderen Apps teilt, die RP_ID/RP_ORIGIN bereits belegen Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
467 lines
9.2 KiB
CSS
467 lines
9.2 KiB
CSS
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
main {
|
|
width: 90%;
|
|
margin: 20px auto;
|
|
background-color: #eeeeee;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* ---- Toolbar ---- */
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 6px 14px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
.btn-add { background: #4caf50; color: white; }
|
|
.btn-add:hover { background: #388e3c; }
|
|
.btn-refresh { background: #2196f3; color: white; }
|
|
.btn-refresh:hover { background: #1565c0; }
|
|
.btn-delete { background: #e53935; color: white; }
|
|
.btn-delete:hover { background: #b71c1c; }
|
|
.btn-icon { background: none; border: none; cursor: pointer; font-size: 16px; padding: 0; }
|
|
|
|
/* ---- Table ---- */
|
|
.table-container {
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.main-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
}
|
|
.main-table th,
|
|
.main-table td {
|
|
border: 1px solid #ccc;
|
|
padding: 6px 10px;
|
|
text-align: left;
|
|
}
|
|
.main-table th {
|
|
background: #d0d0d0;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
text-align: center;
|
|
}
|
|
.main-table th:hover { background: #bbb; }
|
|
.main-table tbody tr:nth-child(even) { background: #f7f7f7; }
|
|
|
|
.sortable-header { white-space: nowrap; }
|
|
.cell-center { text-align: center; }
|
|
.action-cell { white-space: nowrap; }
|
|
.col-tab { font-weight: bold; font-size: 115%; }
|
|
.col-pday { width: 40px; text-align: center; }
|
|
.col-date { width: 110px; white-space: nowrap; text-align: center; }
|
|
|
|
/* ---- Warn highlighting (mirrors original) ---- */
|
|
.row-warn { background: #fabebe !important; }
|
|
.cell-warn { background: #ff8033 !important; color: white; font-weight: bold; }
|
|
.row-abgesetzt { color: #aaa; }
|
|
|
|
/* ---- Error ---- */
|
|
.error-msg { color: red; font-weight: bold; }
|
|
|
|
/* ---- Modal ---- */
|
|
.modal-overlay {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0,0,0,0.45);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 100;
|
|
}
|
|
.modal {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 28px 32px;
|
|
min-width: 380px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.25);
|
|
}
|
|
.modal h2 { margin: 0 0 8px; font-size: 1.2rem; }
|
|
.modal label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 13px;
|
|
gap: 4px;
|
|
}
|
|
.modal input {
|
|
padding: 6px 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
.modal input:disabled { background: #eee; color: #777; }
|
|
.modal-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
|
|
|
|
/* ---- App Layout ---- */
|
|
.app-wrapper {
|
|
min-height: 100vh;
|
|
padding: 32px 16px;
|
|
}
|
|
|
|
.app-container {
|
|
max-width: 1264px;
|
|
margin: 0 auto;
|
|
border: 2px solid black;
|
|
border-radius: 12px;
|
|
background-color: #d1d5db;
|
|
padding: 24px;
|
|
}
|
|
|
|
.app-title {
|
|
font-size: 2.25rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.app-inner {
|
|
width: 97%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.app-logout-bar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.btn-settings {
|
|
padding: 8px 16px;
|
|
background-color: #85B7D7;
|
|
color: black;
|
|
font-size: 0.875rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
text-decoration: none;
|
|
}
|
|
.btn-settings:hover { background-color: #6a9fc5; }
|
|
|
|
.btn-logout {
|
|
padding: 8px 16px;
|
|
background-color: #dc2626;
|
|
color: white;
|
|
font-size: 0.875rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
cursor: pointer;
|
|
}
|
|
.btn-logout:hover { background-color: #b91c1c; }
|
|
|
|
.app-main {
|
|
width: 96%;
|
|
border: 2px solid black;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
background-color: #FFFFDD;
|
|
}
|
|
|
|
.app-footer {
|
|
margin-top: 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
color: #4b5563;
|
|
padding: 0 16px;
|
|
}
|
|
.app-footer a:hover { text-decoration: underline; }
|
|
|
|
/* ---- Login Page ---- */
|
|
.login-wrapper {
|
|
min-height: 100vh;
|
|
background-color: white;
|
|
padding: 16px;
|
|
}
|
|
|
|
.login-outer {
|
|
max-width: 72rem;
|
|
margin: 0 auto;
|
|
border: 2px solid black;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
background-color: #FFFFDD;
|
|
}
|
|
|
|
.login-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.login-page-title {
|
|
font-size: 1.875rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.login-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 40px 0;
|
|
}
|
|
|
|
.login-card {
|
|
width: 100%;
|
|
max-width: 24rem;
|
|
background: white;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
padding: 32px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.login-card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #111827;
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.login-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.login-label {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.login-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 2px solid #9ca3af;
|
|
border-radius: 8px;
|
|
background: white;
|
|
color: #111827;
|
|
font-size: 0.875rem;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
.login-input:focus { border-color: #3b82f6; }
|
|
.login-input:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
|
|
.login-error {
|
|
background-color: #fef2f2;
|
|
border: 1px solid #fca5a5;
|
|
color: #b91c1c;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.login-submit {
|
|
width: 100%;
|
|
padding: 8px 16px;
|
|
background-color: #85B7D7;
|
|
color: black;
|
|
font-weight: 500;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
}
|
|
.login-submit:hover:not(:disabled) { background-color: #6a9fc5; }
|
|
.login-submit:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
.login-password-wrapper {
|
|
position: relative;
|
|
}
|
|
.login-input-password {
|
|
padding-right: 40px;
|
|
}
|
|
.login-eye-btn {
|
|
position: absolute;
|
|
top: 0; bottom: 0; right: 0;
|
|
padding: 0 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #6b7280;
|
|
}
|
|
.login-eye-btn:hover { color: #1f2937; }
|
|
|
|
.login-footer {
|
|
margin-top: 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
color: #4b5563;
|
|
padding: 0 16px;
|
|
}
|
|
.login-footer a { color: #2563eb; }
|
|
.login-footer a:hover { text-decoration: underline; }
|
|
|
|
/* ---------- Passkeys / Anmeldung per Passkey ---------- */
|
|
|
|
.login-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin: 20px 0;
|
|
color: #9ca3af;
|
|
font-size: 0.75rem;
|
|
}
|
|
.login-divider::before,
|
|
.login-divider::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: #e5e7eb;
|
|
}
|
|
|
|
.login-passkey-btn {
|
|
width: 100%;
|
|
padding: 8px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
background: none;
|
|
color: #111827;
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
border: 2px solid #9ca3af;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.login-passkey-btn:hover:not(:disabled) { border-color: #3b82f6; }
|
|
.login-passkey-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
.login-error-passkey { margin-top: 16px; }
|
|
|
|
.settings-title {
|
|
margin: 0 0 16px;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
.settings-back { margin-top: 20px; font-size: 0.875rem; }
|
|
|
|
.passkeys { max-width: 28rem; }
|
|
.passkeys-title {
|
|
margin: 0 0 4px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
.passkeys-hint {
|
|
margin: 0 0 12px;
|
|
font-size: 0.75rem;
|
|
color: #6b7280;
|
|
}
|
|
.passkeys-empty {
|
|
margin: 0 0 12px;
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.passkeys-list {
|
|
list-style: none;
|
|
margin: 0 0 16px;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.passkeys-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 8px 12px;
|
|
background: white;
|
|
border: 2px solid #d1d5db;
|
|
border-radius: 8px;
|
|
}
|
|
.passkeys-item-info { min-width: 0; }
|
|
.passkeys-item-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.passkeys-item-meta { font-size: 0.75rem; color: #6b7280; }
|
|
.passkeys-remove {
|
|
flex-shrink: 0;
|
|
padding: 4px 8px;
|
|
background: none;
|
|
border: none;
|
|
color: #dc2626;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
}
|
|
.passkeys-remove:hover { color: #991b1b; }
|
|
|
|
.passkeys-add {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
}
|
|
.passkeys-add-field { flex: 1; }
|
|
.passkeys-add-label {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
.passkeys-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: white;
|
|
border: 2px solid #9ca3af;
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
}
|
|
.passkeys-input:focus { border-color: #3b82f6; outline: none; }
|
|
.passkeys-add-btn {
|
|
flex-shrink: 0;
|
|
padding: 8px 16px;
|
|
background-color: #85B7D7;
|
|
color: black;
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.passkeys-add-btn:hover:not(:disabled) { background-color: #6a9fc5; }
|
|
.passkeys-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
.passkeys-error { margin-top: 12px; }
|