timetracking/httpdocs/assets/scripts/account.js

// assets/scripts/account.js

import { esc, createTranslator } from './utils.js';

const TOAST_DURATION = 3000;

const t = createTranslator('ACCOUNT');

document.addEventListener('DOMContentLoaded', () => {

  const toast = document.getElementById('account-toast');

  function showToast(msg, isError = false) {
    toast.textContent = msg;
    toast.classList.toggle('account-toast--error', isError);
    toast.classList.add('account-toast--visible');
    setTimeout(() => toast.classList.remove('account-toast--visible'), TOAST_DURATION);
  }

  async function patchJson(url, data) {
    const res = await fetch(url, {
      method:  'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify(data),
    });
    const json = await res.json();
    if (!res.ok) throw new Error(json.error ?? t('errorGeneric'));
    return json;
  }

  // ── Farbfeld: Picker <-> Hex-Input synchron + Live-Kontrast ───────────────

  const colorPicker = document.getElementById('account-color-picker');
  const colorHex    = document.getElementById('account-color');

  function applyHeaderContrast(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
    const isLight = brightness > 128;
    const root = document.documentElement;
    root.style.setProperty('--header-text',       isLight ? '#1a2a3a' : '#ffffff');
    root.style.setProperty('--header-text-muted', isLight ? 'rgba(26, 42, 58, 0.65)' : 'rgba(255, 255, 255, 0.75)');
    root.style.setProperty('--header-overlay',    isLight ? 'rgba(0, 0, 0, 0.08)'    : 'rgba(255, 255, 255, 0.18)');
  }

  if (colorPicker && colorHex) {
    colorPicker.addEventListener('input', () => {
      colorHex.value = colorPicker.value;
      applyHeaderContrast(colorPicker.value);
    });
    colorHex.addEventListener('input', () => {
      if (/^#[0-9a-fA-F]{6}$/.test(colorHex.value)) {
        colorPicker.value = colorHex.value;
        applyHeaderContrast(colorHex.value);
      }
    });
  }

  // ── Account-Formular ──────────────────────────────────────────────────────

  const btnAccountSave = document.getElementById('btn-account-save');
  if (btnAccountSave) {
    btnAccountSave.addEventListener('click', async () => {
      const payload = {
        name:             document.getElementById('account-name').value.trim(),
        trackingInterval: parseInt(document.getElementById('account-interval').value, 10),
      };

      if (colorHex) {
        const hex = colorHex.value.trim();
        if (hex && !/^#[0-9a-fA-F]{6}$/.test(hex)) {
          showToast(t('invalidHex'), true);
          return;
        }
        payload.primaryColor = hex || '';
      }

      const lexofficeKey = document.getElementById('account-lexoffice-key');
      if (lexofficeKey && !lexofficeKey.hidden) {
        const keyVal = lexofficeKey.value.trim();
        if (keyVal) payload.lexofficeApiKey = keyVal;
      }

      btnAccountSave.disabled = true;
      try {
        await patchJson('/api/account', payload);
        showToast(t('savedReloading'));
        setTimeout(() => window.location.reload(), 1200);
      } catch (e) {
        showToast(e.message, true);
      } finally {
        btnAccountSave.disabled = false;
      }
    });
  }

  // ── Besitzer des Accounts ─────────────────────────────────────────────────

  const superadminSelect = document.getElementById('superadmin-select');
  if (superadminSelect && !superadminSelect.disabled) {
    superadminSelect.dataset.original = superadminSelect.value;

    superadminSelect.addEventListener('change', async () => {
      const selectedName = superadminSelect.options[superadminSelect.selectedIndex].text;
      if (!confirm(t('ownerConfirm').replace('%name%', selectedName))) {
        superadminSelect.value = superadminSelect.dataset.original;
        return;
      }

      try {
        await patchJson('/api/account/superadmin', {
          userId: parseInt(superadminSelect.value, 10),
        });
        showToast(t('ownerChanged'));
        setTimeout(() => window.location.reload(), 1500);
      } catch (e) {
        showToast(e.message, true);
        superadminSelect.value = superadminSelect.dataset.original;
      }
    });
  }

  // ── Lexoffice-Key-Toggle ───────────────────────────────────────────────────

  const btnLexKeyChange = document.getElementById('btn-lexoffice-key-change');
  const lexKeyInput     = document.getElementById('account-lexoffice-key');
  const lexKeyStatus    = document.getElementById('lexoffice-key-status');
  if (btnLexKeyChange && lexKeyInput && lexKeyStatus) {
    btnLexKeyChange.addEventListener('click', (e) => {
      e.preventDefault();
      const showing = !lexKeyInput.hidden;
      lexKeyInput.hidden = showing;
      lexKeyStatus.querySelector('.account-form__key-mask').hidden = !showing;
      btnLexKeyChange.textContent = showing ? t('changeLabel') : t('cancelLabel');
      if (!showing) lexKeyInput.focus();
    });
  }

  // ── Passwort-Toggle ───────────────────────────────────────────────────────

  const btnPwToggle = document.getElementById('btn-pw-toggle');
  const pwSection   = document.getElementById('pw-section');
  if (btnPwToggle && pwSection) {
    btnPwToggle.addEventListener('click', (e) => {
      e.preventDefault();
      const open       = !pwSection.hidden;
      pwSection.hidden = open;
      btnPwToggle.textContent = open ? t('changeLabel') : t('cancelLabel');
    });
  }

  // ── Theme-Picker ──────────────────────────────────────────────────────────

  const themePicker = document.getElementById('theme-picker');
  if (themePicker) {
    themePicker.querySelectorAll('input[name="theme"]').forEach(radio => {
      radio.addEventListener('change', async () => {
        const theme = radio.value;
        try {
          await patchJson('/api/account/user', { theme });
          themePicker.querySelectorAll('.theme-option').forEach(opt => {
            opt.classList.toggle('theme-option--active', opt.dataset.theme === theme);
          });
          document.body.dataset.theme = theme;
          showToast(t('themeChanged'));
        } catch (e) {
          showToast(e.message, true);
        }
      });
    });
  }

  // ── Benutzer-Formular ─────────────────────────────────────────────────────

  const btnUserSave = document.getElementById('btn-user-save');
  if (btnUserSave) {
    btnUserSave.addEventListener('click', async () => {
      const data = {
        firstName: document.getElementById('user-firstname').value.trim(),
        lastName:  document.getElementById('user-lastname').value.trim(),
        email:     document.getElementById('user-email').value.trim(),
      };

      if (pwSection && !pwSection.hidden) {
        const pwNew    = document.getElementById('user-pw-new').value;
        const pwRepeat = document.getElementById('user-pw-repeat').value;
        if (pwNew !== pwRepeat) {
          showToast(t('passwordMismatch'), true);
          return;
        }
        data.currentPassword = document.getElementById('user-pw-current').value;
        data.newPassword     = pwNew;
      }

      btnUserSave.disabled = true;
      try {
        await patchJson('/api/account/user', data);
        showToast(t('saved'));
        if (pwSection) {
          pwSection.hidden = true;
          document.getElementById('btn-pw-toggle').textContent = t('changeLabel');
          ['user-pw-current', 'user-pw-new', 'user-pw-repeat'].forEach(id => {
            document.getElementById(id).value = '';
          });
        }
      } catch (e) {
        showToast(e.message, true);
      } finally {
        btnUserSave.disabled = false;
      }
    });
  }
});