From 89296804be6110a189291eebea4626a718454ce1 Mon Sep 17 00:00:00 2001 From: Zan <62830223+Zan1456@users.noreply.github.com> Date: Mon, 19 Jan 2026 21:47:12 +0100 Subject: [PATCH] Profile page rework --- global/language.js | 1 + global/navigation.css | 4 +- i18n/de.json | 39 +- i18n/en.json | 39 +- i18n/hu.json | 39 +- icons/profile.svg | 2 +- icons/settings.svg | 5 +- profile/profile.css | 862 ++++++++++++++++++++++++------------------ profile/profile.js | 657 ++++++++++++++++++++++---------- 9 files changed, 1087 insertions(+), 561 deletions(-) diff --git a/global/language.js b/global/language.js index c699db1..2bf4ff2 100644 --- a/global/language.js +++ b/global/language.js @@ -186,5 +186,6 @@ { code: "en", name: "English" }, { code: "de", name: "Deutsch" }, ], + init: initializeLanguage, }; })(); diff --git a/global/navigation.css b/global/navigation.css index 83ab823..30e3ef1 100644 --- a/global/navigation.css +++ b/global/navigation.css @@ -197,7 +197,7 @@ } .dropdown-item:hover img { - filter: none; + filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(2000%) hue-rotate(90deg) brightness(90%) contrast(95%); } @keyframes dropdownShow { @@ -418,7 +418,7 @@ } .mobile-dropdown-item:hover img { - filter: none; + filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(2000%) hue-rotate(90deg) brightness(90%) contrast(95%); } body { diff --git a/i18n/de.json b/i18n/de.json index bd48576..5532d8d 100644 --- a/i18n/de.json +++ b/i18n/de.json @@ -278,10 +278,23 @@ "school": "Schule", "student_id": "Schüler-ID", "settings_title": "Profileinstellungen", + "tab_my_data": "Meine Daten", "tab_settings": "Einstellungen", "tab_password": "Passwort ändern", "tab_security": "Sicherheitseinstellungen", "tab_contacts": "Kontakte", + "loading_data": "Daten werden geladen...", + "loading_error": "Fehler beim Laden der Daten.", + "my_data_title": "Meine persönlichen Daten", + "personal_data": "Persönliche Daten", + "contact_data": "Kontaktdaten", + "address_data": "Adressdaten", + "bank_account_data": "Bankverbindung", + "student_card_data": "Schülerausweis Daten", + "default_address": "Standard", + "password_change_unavailable": "Die Passwortänderungsfunktion ist derzeit nicht verfügbar.", + "security_settings_info": "Um Sicherheitseinstellungen zu verwalten, klicken Sie auf die Schaltfläche unten:", + "open_security_settings": "Sicherheitseinstellungen öffnen", "two_factor_description": "Um die Zwei-Faktor-Authentifizierung zu verwenden, installieren Sie eine zeitbasierte Einmalpasswort-App (TOTP):", "android": "Android", "iphone": "iPhone", @@ -315,7 +328,31 @@ "passwords_not_match": "Die neuen Passwörter stimmen nicht überein!", "password_too_short": "Das neue Passwort muss mindestens 8 Zeichen lang sein!", "password_changed": "Passwort erfolgreich geändert!", - "password_change_error": "Fehler beim Ändern des Passworts. Bitte versuchen Sie es später erneut." + "password_change_error": "Fehler beim Ändern des Passworts. Bitte versuchen Sie es später erneut.", + "field_familyName": "Familienname", + "field_firstName": "Vorname", + "field_birthFamilyName": "Geburts-Familienname", + "field_birthFirstName": "Geburts-Vorname", + "field_motherFamilyName": "Geburts-Familienname der Mutter", + "field_motherFirstName": "Geburts-Vorname der Mutter", + "field_birthDate": "Geburtsdatum", + "field_birthPlace": "Geburtsort", + "field_birthCountry": "Geburtsland", + "field_motherTongue": "Muttersprache", + "field_citizenship": "Staatsangehörigkeit", + "field_classTeacher": "Klassenlehrer", + "field_className": "Klasse", + "field_classroom": "Klassenzimmer", + "field_username": "Benutzername", + "field_phone": "Telefonnummer", + "field_email": "Benachrichtigungs-E-Mail-Adresse", + "field_accountNumber": "Bankkontonummer", + "field_bankName": "Bankname", + "field_accountOwner": "Kontoinhaber", + "field_cardNumber": "Kartennummer", + "field_taxId": "Steuer-ID", + "field_studentCardNumber": "Studentenausweisnummer", + "field_socialSecurityNumber": "Sozialversicherungsnummer" }, "login": { "title": "Anmelden", diff --git a/i18n/en.json b/i18n/en.json index 49a1602..3f90fc3 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -278,10 +278,23 @@ "school": "School", "student_id": "Student ID", "settings_title": "Profile settings", + "tab_my_data": "My Data", "tab_settings": "Settings", "tab_password": "Change password", "tab_security": "Security settings", "tab_contacts": "Contact information", + "loading_data": "Loading data...", + "loading_error": "An error occurred while loading the data.", + "my_data_title": "My Personal Data", + "personal_data": "Personal Information", + "contact_data": "Contact Information", + "address_data": "Address Data", + "bank_account_data": "Bank Account Data", + "student_card_data": "Student Card Data", + "default_address": "Default", + "password_change_unavailable": "The password change function is currently unavailable.", + "security_settings_info": "To manage security settings, click the button below:", + "open_security_settings": "Open Security Settings", "two_factor_description": "To use two-factor authentication, install a time-based one-time password (TOTP) application:", "android": "Android", "iphone": "iPhone", @@ -315,7 +328,31 @@ "passwords_not_match": "New passwords do not match!", "password_too_short": "New password must be at least 8 characters long!", "password_changed": "Password changed successfully!", - "password_change_error": "An error occurred while changing password. Please try again later." + "password_change_error": "An error occurred while changing password. Please try again later.", + "field_familyName": "Family name", + "field_firstName": "First name", + "field_birthFamilyName": "Birth family name", + "field_birthFirstName": "Birth first name", + "field_motherFamilyName": "Mother's birth family name", + "field_motherFirstName": "Mother's birth first name", + "field_birthDate": "Date of birth", + "field_birthPlace": "Place of birth", + "field_birthCountry": "Country of birth", + "field_motherTongue": "Mother tongue", + "field_citizenship": "Citizenship", + "field_classTeacher": "Class teacher", + "field_className": "Class", + "field_classroom": "Classroom", + "field_username": "Username", + "field_phone": "Phone number", + "field_email": "Notification email address", + "field_accountNumber": "Bank account number", + "field_bankName": "Bank name", + "field_accountOwner": "Account owner's name", + "field_cardNumber": "Card number", + "field_taxId": "Tax ID", + "field_studentCardNumber": "Student card number", + "field_socialSecurityNumber": "Social security number" }, "login": { "title": "Login", diff --git a/i18n/hu.json b/i18n/hu.json index dead2dc..c1fbc8d 100644 --- a/i18n/hu.json +++ b/i18n/hu.json @@ -280,10 +280,23 @@ "school": "Iskola", "student_id": "Diák azonosító", "settings_title": "Profil beállítások", + "tab_my_data": "Adataim", "tab_settings": "Beállítások", "tab_password": "Jelszó módosítása", "tab_security": "Biztonsági beállítások", "tab_contacts": "Elérhetőségek", + "loading_data": "Adatok betöltése...", + "loading_error": "Hiba történt az adatok betöltése során.", + "my_data_title": "Személyes adataim", + "personal_data": "Személyes adatok", + "contact_data": "Elérhetőségi adatok", + "address_data": "Lakcím adatok", + "bank_account_data": "Bankszámla adatok", + "student_card_data": "Tanulói igazolvány adatok", + "default_address": "Alapértelmezett", + "password_change_unavailable": "A jelszó módosítás funkció jelenleg nem érhető el.", + "security_settings_info": "A biztonsági beállítások kezeléséhez kattints az alábbi gombra:", + "open_security_settings": "Biztonsági beállítások megnyitása", "two_factor_description": "A kétfaktoros hitelesítés használatához telepítsen egy időalapú, egyszer használatos jelszó (TOTP) alkalmazást:", "android": "Android", "iphone": "iPhone", @@ -317,7 +330,31 @@ "passwords_not_match": "Az új jelszavak nem egyeznek!", "password_too_short": "Az új jelszónak legalább 8 karakter hosszúnak kell lennie!", "password_changed": "Jelszó sikeresen módosítva!", - "password_change_error": "Hiba történt a jelszó módosítása során. Kérjük, próbálja újra később." + "password_change_error": "Hiba történt a jelszó módosítása során. Kérjük, próbálja újra később.", + "field_familyName": "Családi név", + "field_firstName": "Utónév", + "field_birthFamilyName": "Születési családi név", + "field_birthFirstName": "Születési utónév", + "field_motherFamilyName": "Anyja születési családi neve", + "field_motherFirstName": "Anyja születési utóneve", + "field_birthDate": "Születési idő", + "field_birthPlace": "Születési hely", + "field_birthCountry": "Születési ország", + "field_motherTongue": "Anyanyelv", + "field_citizenship": "Állampolgárság", + "field_classTeacher": "Osztályfőnök", + "field_className": "Osztály", + "field_classroom": "Terem", + "field_username": "Felhasználónév", + "field_phone": "Telefonszám", + "field_email": "Értesítési e-mail cím", + "field_accountNumber": "Bankszámlaszám", + "field_bankName": "Számlavezető bank", + "field_accountOwner": "Bankszámla tulajdonos neve", + "field_cardNumber": "Igazolvány száma", + "field_taxId": "Adóazonosító jel", + "field_studentCardNumber": "Diákigazolvány szám", + "field_socialSecurityNumber": "TAJ-szám" }, "login": { "title": "Bejelentkezés", diff --git a/icons/profile.svg b/icons/profile.svg index 976d879..b39a763 100644 --- a/icons/profile.svg +++ b/icons/profile.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/icons/settings.svg b/icons/settings.svg index 0ac44cf..e5cb2ca 100644 --- a/icons/settings.svg +++ b/icons/settings.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + \ No newline at end of file diff --git a/profile/profile.css b/profile/profile.css index 9690a6e..11afd2a 100644 --- a/profile/profile.css +++ b/profile/profile.css @@ -1,6 +1,5 @@ @import url('../global/theme.css'); - .main-header, .main-menu, .main-sidebar, @@ -11,11 +10,17 @@ .navbar, .sidebar-container, #sidepanel_tabs, -.sidepanel-wrapper { +.sidepanel-wrapper, +.main-footer2, +.lakatimg, +.modalContainer, +.modalOuter, +#ProfilTab, +#KretaProgressBar { display: none !important; + visibility: hidden !important; } - body { margin: 0; padding: 0; @@ -26,6 +31,11 @@ body { font-size: 16px; } +h2 { + background-color: var(--card-card) !important; + border-bottom: none !important; +} + .page-wrapper { background-color: var(--background) !important; min-height: 100vh; @@ -50,271 +60,295 @@ body { padding: 0; } -.content-container { - max-width: 1200px; +.profile-container { + max-width: 1400px; margin: 0 auto; - padding: clamp(1rem, 3vw, 2rem); - background-color: var(--background) !important; + padding: 2rem; } +.profile-wrapper { + display: grid; + grid-template-columns: 280px 1fr; + gap: 2rem; + min-height: calc(100vh - 200px); +} -.firka-header { - padding: clamp(1rem, 3vw, 2rem); +.profile-sidebar { + position: sticky; + top: 2rem; + height: fit-content; +} + +.profile-tabs { + background: var(--card-card); + border-radius: 16px; + padding: 1rem; + box-shadow: 0px 1px 2px 0px var(--accent-shadow); +} + +.profile-tab { + width: 100%; display: flex; align-items: center; - gap: 1rem; - background-color: var(--background); + gap: 0.75rem; + padding: 1rem; + border: none; + background: transparent; + color: var(--text-secondary); + font-family: 'Montserrat', sans-serif; + font-size: 14px; + font-weight: 500; + cursor: pointer; + border-radius: 12px; + transition: all 0.2s ease; + text-align: left; +} + +.profile-tab:hover { + background: var(--button-secondaryFill); + color: var(--text-primary); +} + +.profile-tab.active { + background: var(--accent-accent); + color: white; +} + +.profile-tab svg { + flex-shrink: 0; +} + +.profile-content { + background: var(--card-card); + border-radius: 16px; + padding: 2rem; + box-shadow: 0px 1px 2px 0px var(--accent-shadow); + min-height: 500px; +} + +.tab-content { + display: none; +} + +.tab-content.active { + display: block; +} + +.tab-header { + margin-bottom: 2rem; + padding-bottom: 1rem; + border-bottom: 2px solid var(--accent-15); +} + +.tab-header h2 { + margin: 0; + color: var(--text-primary); + font-size: 28px; + font-weight: 600; +} + +.data-section { + margin-bottom: 2.5rem; +} + +.data-section:last-child { + margin-bottom: 0; +} + +.data-section h3 { + color: var(--text-primary); + font-size: 20px; + font-weight: 600; + margin: 0 0 1.5rem 0; + padding-bottom: 0.75rem; border-bottom: 1px solid var(--accent-15); } -.back-button { +.data-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1.5rem; +} + +.data-item { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.data-item label { + color: var(--text-secondary); + font-size: 13px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.data-item span { + color: var(--text-primary); + font-size: 15px; + font-weight: 500; + padding: 0.75rem; + background: var(--button-secondaryFill); + border-radius: 8px; + word-break: break-word; +} + +.address-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.address-item { + padding: 1.25rem; + background: var(--button-secondaryFill); + border-radius: 12px; + border-left: 4px solid var(--accent-15); + transition: all 0.2s ease; +} + +.address-item:hover { + transform: translateX(4px); + box-shadow: 0px 2px 8px 0px var(--accent-shadow); +} + +.address-item.default { + border-left-color: var(--accent-accent); + background: var(--accent-15); +} + +.address-type { display: flex; align-items: center; - gap: 0.5rem; - background: var(--card-card); - border: none; - border-radius: 12px; - padding: 12px 16px; + gap: 0.75rem; + margin-bottom: 0.5rem; +} + +.address-type strong { color: var(--text-primary); - font-family: 'Montserrat', sans-serif; - font-weight: 500; - font-size: 14px; - cursor: pointer; - transition: all 0.2s ease; - text-decoration: none; - box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow); -} - -.back-button:hover { - background: var(--button-secondaryFill); - transform: translateY(-1px); - box-shadow: 0px 2px var(--shadow-blur, 4px) 0px var(--accent-shadow); -} - -.back-button svg { - width: 16px; - height: 16px; - fill: var(--text-primary); -} - -.page-title { - color: var(--text-primary); - font-size: 24px; + font-size: 15px; font-weight: 600; +} + +.badge { + display: inline-block; + padding: 0.25rem 0.75rem; + background: var(--accent-accent); + color: white; + font-size: 11px; + font-weight: 600; + border-radius: 12px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.address-details { + color: var(--text-secondary); + font-size: 14px; + line-height: 1.5; +} + +.loading-spinner { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 4rem 2rem; + gap: 1.5rem; +} + +.spinner { + width: 48px; + height: 48px; + border: 4px solid var(--accent-15); + border-top-color: var(--accent-accent); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.loading-spinner p { + color: var(--text-secondary); + font-size: 16px; margin: 0; } - -.k-content { - background-color: var(--background) !important; -} - -.k-content h4 { - color: var(--text-primary) !important; - font-family: 'Montserrat', sans-serif !important; - font-size: 28px !important; - font-weight: 600 !important; - margin: 0 0 2rem 0 !important; +.info-message { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; + padding: 3rem 2rem; text-align: center; } - -.k-tabstrip-wrapper { - background: var(--card-card) !important; - border-radius: 24px !important; - overflow: hidden; - box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow); - border: none !important; -} - -.k-tabstrip { - background: var(--card-card) !important; - border: none !important; -} - -.k-tabstrip-items { - background: var(--card-card) !important; - border: none !important; - border-radius: 24px 24px 0 0 !important; - padding: 0 20px !important; -} - -.k-tabstrip-items .k-item { - background: transparent !important; - border: none !important; - margin: 0 !important; - border-radius: 0 !important; -} - -.k-tabstrip-items .k-item .k-link { - color: var(--text-secondary) !important; - font-family: 'Montserrat', sans-serif !important; - font-weight: 500 !important; - font-size: 14px !important; - padding: 16px 20px !important; - border: none !important; - background: transparent !important; - border-radius: 0 !important; - transition: all 0.2s ease !important; -} - -.k-tabstrip-items .k-item.k-state-active .k-link { - color: var(--accent-accent) !important; - font-weight: 600 !important; - border-bottom: 2px solid var(--accent-accent) !important; -} - -.k-tabstrip-items .k-item:hover .k-link { - color: var(--text-primary) !important; -} - - -.k-tabstrip .k-content { - background: var(--card-card) !important; - border: none !important; - padding: 20px !important; - border-radius: 0 0 24px 24px !important; -} - - -form { - background: transparent !important; -} - -.container-fluid.details { - background: transparent !important; - margin-bottom: 2rem; -} - -.row { - margin-bottom: 1rem; - align-items: center; -} - -.windowInputLabel { - color: var(--text-primary) !important; - font-family: 'Montserrat', sans-serif !important; - font-weight: 500 !important; - font-size: 14px !important; - margin: 0 !important; -} - - -input[type="text"], -input[type="password"], -input[type="email"], -select, -textarea { - background: var(--button-secondaryFill) !important; - border: 1px solid var(--accent-15) !important; - border-radius: 12px !important; - padding: 12px 16px !important; - color: var(--text-primary) !important; - font-family: 'Montserrat', sans-serif !important; - font-size: 14px !important; - transition: all 0.2s ease !important; -} - -input[type="text"]:focus, -input[type="password"]:focus, -input[type="email"]:focus, -select:focus, -textarea:focus { - outline: none !important; - border-color: var(--accent-accent) !important; - box-shadow: 0 0 0 3px var(--accent-15) !important; -} - -.k-checkbox { - appearance: none; - width: 20px !important; - height: 20px !important; - border: 2px solid var(--accent-15) !important; - border-radius: 4px !important; - background: var(--button-secondaryFill) !important; - cursor: pointer !important; - position: relative !important; - transition: all 0.2s ease !important; -} - -.k-checkbox:checked { - background: var(--accent-accent) !important; - border-color: var(--accent-accent) !important; -} - -.k-checkbox:checked::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); +.info-message svg { color: white; - font-size: 12px; - font-weight: bold; } -.k-checkbox-label { - margin-left: 8px !important; - color: var(--text-primary) !important; - font-family: 'Montserrat', sans-serif !important; - cursor: pointer !important; +.info-message p { + color: var(--text-secondary); + font-size: 16px; + line-height: 1.6; + margin: 0; + max-width: 600px; } -.k-button, -button { - background: var(--accent-accent) !important; - border: none !important; - border-radius: 12px !important; - padding: 12px 24px !important; - color: white !important; - font-family: 'Montserrat', sans-serif !important; - font-weight: 600 !important; - font-size: 14px !important; - cursor: pointer !important; - transition: all 0.2s ease !important; - box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow) !important; +.error-message { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; + padding: 4rem 2rem; + text-align: center; } -.k-button:hover, -button:hover { - background: var(--accent-secondary) !important; - transform: translateY(-1px) !important; - box-shadow: 0px 2px var(--shadow-blur, 4px) 0px var(--accent-shadow) !important; +.error-message svg { + color: #e74c3c; } -.k-button:active, -button:active { - transform: translateY(0) !important; +.error-message p { + color: var(--text-secondary); + font-size: 16px; + margin: 0; } - -@media (max-width: 768px) { - .content-container { - padding: 1rem; - } - - .firka-header { - padding: 1rem; - } - - .page-title { - font-size: 20px; - } - - .k-content h4 { - font-size: 24px !important; - } - - .k-tabstrip-items { - padding: 0 10px !important; - } - - .k-tabstrip-items .k-item .k-link { - padding: 12px 16px !important; - font-size: 13px !important; - } +.security-btn { + display: inline-flex; + align-items: center; + gap: 0.75rem; + padding: 1rem 2rem; + background: var(--accent-accent); + color: white; + border: none; + border-radius: 12px; + font-family: 'Montserrat', sans-serif; + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0px 2px 4px 0px var(--accent-shadow); } +.security-btn:hover { + background: var(--accent-secondary); + transform: translateY(-2px); + box-shadow: 0px 4px 8px 0px var(--accent-shadow); +} + +.security-btn:active { + transform: translateY(0); +} + +.security-btn svg { + flex-shrink: 0; +} @keyframes fadeIn { from { @@ -327,159 +361,267 @@ button:active { } } -.k-tabstrip-wrapper { +.profile-wrapper { + animation: fadeIn 0.4s ease forwards; +} + +.data-section { animation: fadeIn 0.5s ease forwards; } - -.k-widget, -.k-header { - background: var(--card-card) !important; - color: var(--text-primary) !important; - border: none !important; +.data-section:nth-child(2) { + animation-delay: 0.1s; } -.k-state-default { - background: transparent !important; - border: none !important; +.data-section:nth-child(3) { + animation-delay: 0.2s; } -.k-state-active { - background: transparent !important; +.data-section:nth-child(4) { + animation-delay: 0.3s; } +@media (max-width: 1024px) { + .profile-wrapper { + grid-template-columns: 1fr; + gap: 1.5rem; + } -.k-overlay, -.k-window, -.k-notification { - display: none !important; + .profile-sidebar { + position: static; + } + + .profile-tabs { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.5rem; + padding: 0.5rem; + } + + .profile-tab { + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + gap: 0.5rem; + padding: 1rem 0.5rem; + font-size: 13px; + min-height: 75px; + } + + .profile-tab svg { + width: 22px; + height: 22px; + } + + .profile-tab span { + line-height: 1.2; + word-break: break-word; + hyphens: auto; + } + + .data-grid { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + } } +@media (max-width: 768px) { + .profile-container { + padding: 0.75rem; + } -.main-content .content-content { - display: block !important; + .profile-wrapper { + gap: 0.75rem; + } + + .profile-content { + padding: 1rem; + } + + .data-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .tab-header h2 { + font-size: 22px; + } + + .data-section h3 { + font-size: 17px; + } + + .profile-tabs { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.375rem; + padding: 0.375rem; + } + + .profile-tab { + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + gap: 0.375rem; + padding: 0.625rem 0.25rem; + font-size: 11px; + min-height: 55px; + } + + .profile-tab svg { + width: 18px; + height: 18px; + } + + .profile-tab span { + line-height: 1.1; + word-break: break-word; + hyphens: auto; + } + + .address-item { + padding: 1rem; + } + + .security-btn { + width: 100%; + justify-content: center; + } + + .info-message, + .error-message, + .loading-spinner { + padding: 2rem 1rem; + } } +@media (max-width: 480px) { + .profile-container { + padding: 0.5rem; + } -div[style*="display:flex;justify-content:space-between"] { - display: flex !important; - justify-content: space-between !important; - align-items: center !important; - margin-top: 2rem !important; - padding-top: 2rem !important; - border-top: 1px solid var(--accent-15) !important; + .profile-wrapper { + gap: 0.5rem; + } + + .profile-content { + padding: 0.875rem; + border-radius: 12px; + } + + .tab-header { + margin-bottom: 1.25rem; + } + + .tab-header h2 { + font-size: 18px; + } + + .data-section h3 { + font-size: 15px; + margin-bottom: 1rem; + } + + .data-item label { + font-size: 11px; + } + + .data-item span { + font-size: 13px; + padding: 0.5rem; + } + + .profile-tabs { + padding: 0.25rem; + gap: 0.25rem; + border-radius: 10px; + } + + .profile-tab { + padding: 0.5rem 0.25rem; + min-height: 50px; + font-size: 10px; + border-radius: 8px; + } + + .profile-tab svg { + width: 16px; + height: 16px; + } + + .profile-tab span { + font-size: 10px; + } + + .data-section { + margin-bottom: 1.75rem; + } + + .address-item { + padding: 0.75rem; + } + + .badge { + font-size: 9px; + padding: 0.2rem 0.5rem; + } } - -div[style*="display:flex;justify-content:space-between"] label { - color: var(--text-secondary) !important; - font-size: 12px !important; - font-style: italic !important; - margin: 0 !important; +@media (prefers-color-scheme: dark) { + .error-message svg { + color: #ff6b6b; + } } -.hidden-contact-info { - display: none !important; - visibility: hidden !important; +@media print { + .profile-sidebar, + .security-btn, + .kreta-header, + .mobile-header, + .mobile-bottom-nav { + display: none !important; + } + + .profile-wrapper { + grid-template-columns: 1fr; + } + + .profile-content { + box-shadow: none; + border: 1px solid #ddd; + } + + .tab-content { + display: block !important; + } + + .data-section { + page-break-inside: avoid; + } } -.hidden-tab { - display: none !important; +.profile-tab:focus, +.security-btn:focus { + outline: 2px solid var(--accent-accent); + outline-offset: 2px; } -#ProfilTab-3 { - padding: 20px; - background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); - min-height: 500px; +.profile-tab:focus:not(:focus-visible), +.security-btn:focus:not(:focus-visible) { + outline: none; } -#ProfilTab-3 .container-fluid { - background: white; - border-radius: 12px; - padding: 30px; - margin-top: 20px; +html { + scroll-behavior: smooth; } -#ProfilTab-3 h4 { - color: #2c3e50; - font-weight: 600; - margin-bottom: 25px; - padding-bottom: 10px; - border-bottom: 3px solid #3498db; - display: inline-block; -} - -#ProfilTab-3 .row { - margin-bottom: 20px; - padding: 15px; - background: #f8f9fa; - border-radius: 8px; - border-left: 4px solid #3498db; - transition: all 0.3s ease; -} - -#ProfilTab-3 .row:hover { - background: #e3f2fd; - transform: translateX(5px); - box-shadow: 0 2px 10px rgba(52, 152, 219, 0.2); -} - -#ProfilTab-3 .windowInputLabel { - color: #34495e; - font-weight: 500; - font-size: 14px; -} - -#ProfilTab-3 .k-button { - background: linear-gradient(135deg, #3498db, #2980b9); - border: none; - border-radius: 6px; - padding: 10px 20px; +::selection { + background: var(--accent-accent); color: white; - font-weight: 500; - transition: all 0.3s ease; } -#ProfilTab-3 .k-button:hover { - background: linear-gradient(135deg, #2980b9, #1f5f8b); - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4); +::-moz-selection { + background: var(--accent-accent); + color: white; } - -#ProfilTab-3 .k-input { - border: 2px solid #e0e6ed; - border-radius: 6px; - padding: 10px; - transition: border-color 0.3s ease; -} - -#ProfilTab-3 .k-input:focus { - border-color: #3498db; - box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); -} - -#ProfilTab-3 .alert { - border-radius: 8px; - border: none; - padding: 15px; - margin: 15px 0; -} - -#ProfilTab-3 .alert-info { - background: linear-gradient(135deg, #e3f2fd, #bbdefb); - color: #1565c0; -} - -#ProfilTab-3 .alert-success { - background: linear-gradient(135deg, #e8f5e8, #c8e6c9); - color: #2e7d32; -} - -#ProfilTab-3 .alert-warning { - background: linear-gradient(135deg, #fff3e0, #ffcc02); - color: #ef6c00; -} - -.details .row { - border-bottom: none !important; -} \ No newline at end of file diff --git a/profile/profile.js b/profile/profile.js index b976e42..3ddfd18 100644 --- a/profile/profile.js +++ b/profile/profile.js @@ -1,228 +1,497 @@ (function() { 'use strict'; - - function hideLoadingScreen() { - const loadingElement = document.getElementById('KretaProgressBar'); - if (loadingElement) { - loadingElement.style.display = 'none !important'; - loadingElement.style.visibility = 'hidden'; - loadingElement.style.opacity = '0'; - loadingElement.remove(); - } - + const TABS = { + MY_DATA: 'my-data', + PASSWORD: 'password', + SECURITY: 'security' + }; - const loadingElements = document.querySelectorAll('[class*="loading"], [id*="loading"], [class*="Loading"], [id*="Loading"]'); - loadingElements.forEach(el => { - el.style.display = 'none !important'; - el.style.visibility = 'hidden'; - el.style.opacity = '0'; - }); + let currentTab = TABS.MY_DATA; + let profileData = null; + let addressData = null; + + function getApiUrls(subdomain) { + return { + PROFILE_DATA: `https://${subdomain}.e-kreta.hu/Adminisztracio/Profil/SajatAdatlapPopUp`, + ADDRESS_DATA: `https://${subdomain}.e-kreta.hu/api/ProfilApi/GetElerhetosegCimGrid?sort=&page=1&pageSize=100&group=&filter=&data=%7B%7D&_=` + }; } - - function addBackButton() { + function hideOriginalElements() { + const elementsToHide = [ + '#KretaProgressBar', + '.main-header', + '.main-menu', + '.main-sidebar', + '.content-header', + '.favoriteIconContainer', + '#frissitesDatumDiv', + '#layout_navigationBar', + '.navbar', + '.sidebar-container', + '#sidepanel_tabs', + '.sidepanel-wrapper', + '.main-footer2', + '.lakatimg', + '.modalContainer', + '.modalOuter', + '#ProfilTab' + ]; - if (document.getElementById('firka-back-button')) { - return; - } - - - const backButton = document.createElement('button'); - backButton.id = 'firka-back-button'; - backButton.textContent = '← Vissza'; - backButton.style.cssText = ` - position: static; - margin: 20px; - z-index: 100; - background-color: var(--card-background, #ffffff); - color: var(--text-primary, #333333); - border: 1px solid var(--border-color, #e0e0e0); - border-radius: 8px; - padding: 10px 16px; - font-family: 'Montserrat', sans-serif; - font-size: 14px; - font-weight: 500; - cursor: pointer; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - transition: all 0.2s ease; - display: inline-flex; - align-items: center; - gap: 8px; - width: auto; - `; - - - backButton.addEventListener('mouseenter', function() { - this.style.backgroundColor = 'var(--card-hover, #f5f5f5)'; - this.style.transform = 'translateY(-1px)'; - this.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)'; + elementsToHide.forEach(selector => { + const elements = document.querySelectorAll(selector); + elements.forEach(el => { + el.style.display = 'none'; + el.style.visibility = 'hidden'; + }); }); - - backButton.addEventListener('mouseleave', function() { - this.style.backgroundColor = 'var(--card-background, #ffffff)'; - this.style.transform = 'translateY(0)'; - this.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)'; + + document.body.innerHTML = ''; + } + + async function createNavbar() { + const header = await createTemplate.header(); + const headerContainer = document.createElement('div'); + headerContainer.innerHTML = header; + document.body.appendChild(headerContainer); + + setupUserDropdown(); + setupSettingsButton(); + } + + function setupUserDropdown() { + const userBtn = document.querySelector('.user-dropdown-btn'); + const userDropdown = document.querySelector('.user-dropdown'); + + userBtn?.addEventListener('click', (e) => { + e.stopPropagation(); + userDropdown?.classList.toggle('show'); + userBtn?.classList.toggle('open'); }); - - backButton.addEventListener('click', function() { - window.history.back(); + const mobileUserBtn = document.querySelector('#mobileUserBtn'); + const mobileUserDropdown = document.querySelector('#mobileUserDropdown'); + + mobileUserBtn?.addEventListener('click', (e) => { + e.stopPropagation(); + mobileUserDropdown?.classList.toggle('show'); + mobileUserBtn?.classList.toggle('active'); }); - - document.body.insertBefore(backButton, document.body.firstChild); + document.addEventListener('click', (e) => { + if (!userBtn?.contains(e.target) && !userDropdown?.contains(e.target)) { + userDropdown?.classList.remove('show'); + userBtn?.classList.remove('open'); + } - } - - - function hideMainFooter2() { - const footer2 = document.querySelector('.main-footer2'); - if (footer2) { - footer2.style.display = 'none'; - } - } - - - function hideLakatImg() { - const lakatImg = document.querySelector('.lakatimg'); - if (lakatImg) { - lakatImg.style.display = 'none'; - } - } - - - function hideCustomUserSettingsTab() { - - const firstTab = document.querySelector('#ProfilTab .k-tabstrip-items li[aria-controls="ProfilTab-1"]'); - if (firstTab) { - firstTab.classList.add('hidden-tab'); - } - - - const tabLinks = document.querySelectorAll('#ProfilTab .k-tabstrip-items .k-link'); - tabLinks.forEach(link => { - if (link.textContent && link.textContent.includes('Egyedi felhasználó beállítások')) { - const parentTab = link.closest('li'); - if (parentTab) { - parentTab.classList.add('hidden-tab'); - } + if (!mobileUserBtn?.contains(e.target) && !mobileUserDropdown?.contains(e.target)) { + mobileUserDropdown?.classList.remove('show'); + mobileUserBtn?.classList.remove('active'); } }); - - const contentPanel = document.querySelector('#ProfilTab-1'); - if (contentPanel) { - contentPanel.classList.add('hidden-tab'); + const mobileDropdownItems = document.querySelectorAll('.mobile-dropdown-item'); + mobileDropdownItems.forEach(item => { + item.addEventListener('click', () => { + mobileUserDropdown?.classList.remove('show'); + mobileUserBtn?.classList.remove('active'); + }); + }); + } + + function setupSettingsButton() { + document.getElementById('settingsBtn')?.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + const url = chrome.runtime.getURL('settings/index.html'); + window.open(url, '_blank', 'width=400,height=600'); + }); + + document.getElementById('mobileSettingsBtn')?.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + const url = chrome.runtime.getURL('settings/index.html'); + window.open(url, '_blank', 'width=400,height=600'); + }); + } + + function createProfilePage() { + const t = window.LanguageManager?.t || ((key) => key); + + const container = document.createElement('div'); + container.className = 'profile-container'; + container.innerHTML = ` +
+
+
+ + + +
+
+ +
+
+ +
+ +
+
+

${t('profile.tab_password')}

+
+
+ + + +

${t('profile.password_change_unavailable')}

+
+
+ +
+
+

${t('profile.tab_security')}

+
+
+

${t('profile.security_settings_info')}

+ +
+
+
+
+ `; + + document.body.appendChild(container); + } + + async function fetchProfileData() { + try { + const subdomain = await storageManager.get('schoolSubdomain', ''); + if (!subdomain) { + console.error('Nincs beállítva az iskola alcím'); + return null; + } + + const apiUrls = getApiUrls(subdomain); + const response = await fetch(apiUrls.PROFILE_DATA); + const html = await response.text(); + return parseProfileHTML(html); + } catch (error) { + console.error('Hiba a profil adatok lekérésekor:', error); + return null; } } - - function hideAdditionalContactInfo() { + async function fetchAddressData() { + try { + const subdomain = await storageManager.get('schoolSubdomain', ''); + if (!subdomain) { + console.error('Nincs beállítva az iskola alcím'); + return null; + } - function hideElementsWithText(text) { - const elements = document.querySelectorAll('h4'); - elements.forEach(h4 => { - if (h4.textContent && h4.textContent.includes(text)) { - // Hide the parent row - let parent = h4.closest('.row'); - if (parent) { - parent.classList.add('hidden-contact-info'); + const apiUrls = getApiUrls(subdomain); + const timestamp = new Date().getTime(); + const response = await fetch(apiUrls.ADDRESS_DATA + timestamp); + const data = await response.json(); + return data; + } catch (error) { + console.error('Hiba a cím adatok lekérésekor:', error); + return null; + } + } + + function parseProfileHTML(html) { + const parser = new DOMParser(); + const doc = parser.parseFromString(html, 'text/html'); + + const data = { + personal: {}, + contact: {}, + bankAccount: {}, + studentCard: {} + }; + + const personalFields = [ + { id: 'AlapAdat_CsaladiNev', key: 'familyName' }, + { id: 'AlapAdat_Utonev', key: 'firstName' }, + { id: 'AlapAdat_SzuletesiCsaladNev', key: 'birthFamilyName' }, + { id: 'AlapAdat_SzuletesiUtonev', key: 'birthFirstName' }, + { id: 'AlapAdat_AnyjaCsaladiNeve', key: 'motherFamilyName' }, + { id: 'AlapAdat_AnyjaUtonev', key: 'motherFirstName' }, + { id: 'AlapAdat_SzuletesiIdo_SDATE', key: 'birthDate' }, + { id: 'AlapAdat_SzuletesiHely', key: 'birthPlace' }, + { id: 'AlapAdat_SzuletesiOrszag', key: 'birthCountry' }, + { id: 'AlapAdat_Anyanyelv', key: 'motherTongue' }, + { id: 'AlapAdat_Allampolgarsag', key: 'citizenship' }, + { id: 'AlapAdat_OsztalyfonokNev', key: 'classTeacher' }, + { id: 'AlapAdat_OsztalyNev', key: 'className' }, + { id: 'AlapAdat_TeremNev', key: 'classroom' }, + { id: 'AlapAdat_BelepesiNev', key: 'username' } + ]; + + personalFields.forEach(field => { + const label = doc.querySelector(`label[displayfor="${field.id}"]`); + if (label) { + data.personal[field.key] = { + key: field.key, + value: label.textContent.trim() + }; + } + }); + + const phoneInput = doc.querySelector('#Elerhetosegek_ErtesitesiTelefon_TelefonSzam'); + const emailInput = doc.querySelector('#Elerhetosegek_ErtesitesiEmail_EmailCim'); + + if (phoneInput) { + data.contact.phone = { + key: 'phone', + value: phoneInput.value || '' + }; + } + + if (emailInput) { + data.contact.email = { + key: 'email', + value: emailInput.value || '' + }; + } + + const bankFields = [ + { id: 'BankszamlaSzam', key: 'accountNumber' }, + { id: 'SzamlavezetoBank', key: 'bankName' }, + { id: 'BankszamlaTulajdonosNeve', key: 'accountOwner' } + ]; + + bankFields.forEach(field => { + const input = doc.querySelector(`#${field.id}`); + if (input) { + data.bankAccount[field.key] = { + key: field.key, + value: input.value || '' + }; + } + }); + + const cardFields = [ + { id: 'TanuloIgazolvany_Igazolvanyszam', key: 'cardNumber' }, + { id: 'TanuloIgazolvany_AdoazonositoJel', key: 'taxId' }, + { id: 'TanuloIgazolvany_DiakigazolvanySzam', key: 'studentCardNumber' }, + { id: 'TanuloIgazolvany_TajSzam', key: 'socialSecurityNumber' } + ]; + + cardFields.forEach(field => { + const label = doc.querySelector(`label[displayfor="${field.id}"]`); + if (label) { + data.studentCard[field.key] = { + key: field.key, + value: label.textContent.trim() + }; + } + }); + + return data; + } + + function renderProfileData() { + const t = window.LanguageManager?.t || ((key) => key); + const container = document.getElementById(`tab-${TABS.MY_DATA}`); + + if (!profileData && !addressData) { + container.innerHTML = ` +
+ + + +

${t('profile.loading_error')}

+
+ `; + return; + } + + let html = `

${t('profile.my_data_title')}

`; + + if (profileData && profileData.personal && Object.keys(profileData.personal).length > 0) { + html += `

${t('profile.personal_data')}

`; + + Object.values(profileData.personal).forEach(field => { + if (field.value && field.value !== 'XY') { + html += ` +
+ + ${field.value} +
+ `; + } + }); + + html += '
'; + } + + if (profileData && profileData.contact && Object.keys(profileData.contact).length > 0) { + html += `

${t('profile.contact_data')}

`; + + Object.values(profileData.contact).forEach(field => { + if (field.value) { + html += ` +
+ + ${field.value} +
+ `; + } + }); + + html += '
'; + } + + if (addressData && addressData.Data && addressData.Data.length > 0) { + html += `

${t('profile.address_data')}

`; + + addressData.Data.forEach(address => { + const fullAddress = `${address.Irsz} ${address.Varos}, ${address.Kozterulet} ${address.KozteruletJellegeNev || ''} ${address.HazSzam}${address.Emelet ? ' ' + address.Emelet : ''}${address.Ajto ? ' ' + address.Ajto : ''}`; + const isDefault = address.Alapertelmezett_BOOL; + + html += ` +
+
+ ${address.CimTipus_DNAME} + ${isDefault ? `${t('profile.default_address')}` : ''} +
+
${fullAddress}
+
+ `; + }); + + html += '
'; + } + + if (profileData && profileData.bankAccount && Object.keys(profileData.bankAccount).length > 0) { + const hasData = Object.values(profileData.bankAccount).some(field => field.value); + + if (hasData) { + html += `

${t('profile.bank_account_data')}

`; + + Object.values(profileData.bankAccount).forEach(field => { + if (field.value) { + html += ` +
+ + ${field.value} +
+ `; } - } + }); + + html += '
'; + } + } + + if (profileData && profileData.studentCard && Object.keys(profileData.studentCard).length > 0) { + const hasData = Object.values(profileData.studentCard).some(field => field.value && field.value !== 'XY'); + + if (hasData) { + html += `

${t('profile.student_card_data')}

`; + + Object.values(profileData.studentCard).forEach(field => { + if (field.value && field.value !== 'XY') { + html += ` +
+ + ${field.value} +
+ `; + } + }); + + html += '
'; + } + } + + container.innerHTML = html; + } + + function setupTabSwitching() { + const tabs = document.querySelectorAll('.profile-tab'); + const tabContents = document.querySelectorAll('.tab-content'); + + tabs.forEach(tab => { + tab.addEventListener('click', () => { + const tabId = tab.getAttribute('data-tab'); + + tabs.forEach(t => t.classList.remove('active')); + tab.classList.add('active'); + + tabContents.forEach(tc => tc.classList.remove('active')); + document.getElementById(`tab-${tabId}`).classList.add('active'); + + currentTab = tabId; + }); + }); + } + + async function setupSecurityRedirect() { + const btn = document.getElementById('security-redirect-btn'); + if (btn) { + btn.addEventListener('click', async () => { + const subdomain = await storageManager.get('schoolSubdomain', ''); + const url = `https://idp.e-kreta.hu/security?returnUrl=https%3A%2F%2F${subdomain}.e-kreta.hu%2FAdminisztracio%2FProfil`; + window.location.href = url; }); } - - - hideElementsWithText('TOVÁBBI E-MAIL ELÉRHETŐSÉGEK'); - hideElementsWithText('TOVÁBBI TELEFONSZÁMOK'); - - - const rows = document.querySelectorAll('.row'); - rows.forEach(row => { - const h4Elements = row.querySelectorAll('h4'); - h4Elements.forEach(h4 => { - if (h4.textContent && - (h4.textContent.includes('TOVÁBBI E-MAIL ELÉRHETŐSÉGEK') || - h4.textContent.includes('TOVÁBBI TELEFONSZÁMOK'))) { - row.classList.add('hidden-contact-info'); - } - }); - }); } - - function init() { - hideLoadingScreen(); - addBackButton(); - hideAdditionalContactInfo(); - hideCustomUserSettingsTab(); - hideMainFooter2(); - hideLakatImg(); - + async function init() { + try { + hideOriginalElements(); - const observer = new MutationObserver(() => { - hideAdditionalContactInfo(); - hideCustomUserSettingsTab(); - hideMainFooter2(); - hideLakatImg(); - }); - - observer.observe(document.body, { - childList: true, - subtree: true - }); + if (typeof window.LanguageManager !== 'undefined' && window.LanguageManager.init) { + await window.LanguageManager.init(); + } + + await createNavbar(); + createProfilePage(); + setupTabSwitching(); + setupSecurityRedirect(); + + [profileData, addressData] = await Promise.all([ + fetchProfileData(), + fetchAddressData() + ]); + + renderProfileData(); + } catch (error) { + console.error('Hiba az inicializálás során:', error); + } } - if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } - - window.addEventListener('load', init); - - - setTimeout(hideLoadingScreen, 1000); - - - let attempts = 0; - const maxAttempts = 20; - const aggressiveHide = setInterval(() => { - attempts++; - hideLoadingScreen(); - - if (attempts >= maxAttempts) { - clearInterval(aggressiveHide); - } - }, 500); - - - if (typeof MutationObserver !== 'undefined') { - const observer = new MutationObserver((mutations) => { - mutations.forEach((mutation) => { - mutation.addedNodes.forEach((node) => { - if (node.nodeType === 1) { - if (node.id === 'KretaProgressBar' || - node.className && (node.className.includes('loading') || node.className.includes('Loading'))) { - node.style.display = 'none !important'; - node.style.visibility = 'hidden'; - node.style.opacity = '0'; - if (node.parentNode) { - node.parentNode.removeChild(node); - } - } - } - }); - }); - }); - - observer.observe(document.body, { - childList: true, - subtree: true - }); - } - -})(); \ No newline at end of file +})();