diora-web/templates/accounts/settings.html

{% extends "base.html" %}
{% block title %}Settings — diora{% endblock %}

{% block content %}
<div class="settings-container">
  <h1 class="settings-title">Settings</h1>

  {% if lastfm_error %}
    <div class="message message-error">{{ lastfm_error }}</div>
  {% endif %}

  <!-- Last.fm section -->
  <section class="settings-section">
    <h2>Last.fm</h2>
    {% if has_lastfm %}
      <div class="lastfm-connected">
        <p class="connected-status">
          Connected as <strong>{{ profile.lastfm_username }}</strong>
        </p>
        <form method="post" class="settings-form" id="scrobble-form">
          {% csrf_token %}
          <label class="checkbox-label">
            <input type="checkbox" name="lastfm_scrobble" id="lastfm_scrobble"
                   {% if profile.lastfm_scrobble %}checked{% endif %}
                   onchange="document.getElementById('scrobble-form').submit()">
            Scrobble tracks to Last.fm
          </label>
        </form>
        <form method="post" action="{% url 'lastfm_disconnect' %}" class="inline-form" style="margin-top: 1rem;">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger">Disconnect Last.fm</button>
        </form>
      </div>
    {% else %}
      <p class="lastfm-description">
        Connect your Last.fm account to automatically scrobble the tracks you listen to.
      </p>
      <a href="{% url 'lastfm_connect' %}" class="btn btn-lastfm">Connect Last.fm</a>
    {% endif %}
  </section>

  <!-- Background section -->
  <section class="settings-section">
    <h2>Background</h2>
    {% if request.user.profile.background_encrypted %}
      <p class="lastfm-description">Encrypted background is set. <span class="muted">(Preview not available — decrypted in browser on main page.)</span></p>
      <form method="post" action="{% url 'delete_background' %}" class="inline-form">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger">Remove background</button>
      </form>
      <p style="margin-top:12px;">Upload a new image to replace it:</p>
    {% elif request.user.profile.background_image_data %}
      <p>
        <img src="{{ request.user.profile.background_image_data }}" class="bg-preview" alt="Your background">
      </p>
      <form method="post" action="{% url 'delete_background' %}" class="inline-form">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger">Remove background</button>
      </form>
      <p style="margin-top:12px;">Upload a new image to replace it (will be stored encrypted):</p>
    {% else %}
      <p class="lastfm-description">Upload a custom background image (JPG, PNG or WebP, max 5 MB). Stored end-to-end encrypted.</p>
    {% endif %}
    <div style="margin-top:8px; display:flex; align-items:center; gap:10px;">
      <label class="btn" for="bg-upload-input">Choose file</label>
      <input type="file" id="bg-upload-input" accept=".jpg,.jpeg,.png,.webp" style="display:none;" onchange="uploadBackground(this)">
      <span id="bg-upload-status" style="font-size:0.85rem; color:#888;"></span>
    </div>
  </section>

  <!-- Account section -->
  <section class="settings-section">
    <h2>Account</h2>
    <p>Logged in as <strong>{{ request.user.username }}</strong></p>

    <details {% if password_form_open %}open{% endif %} style="margin-top:1rem;">
      <summary class="btn" style="display:inline-block;cursor:pointer;">Change password</summary>
      <form id="pw-change-form" method="post" action="{% url 'change_password' %}" style="margin-top:1rem; display:flex; flex-direction:column; gap:0.6rem; max-width:320px;">
        {% csrf_token %}
        {% for field in password_form %}
          <div>
            <label style="display:block; font-size:0.85rem; margin-bottom:2px;">{{ field.label }}</label>
            {{ field }}
            {% if field.errors %}
              <div class="message message-error" style="margin-top:4px; padding:4px 8px; font-size:0.8rem;">{{ field.errors|join:", " }}</div>
            {% endif %}
          </div>
        {% endfor %}
        {% if password_form.non_field_errors %}
          <div class="message message-error" style="padding:4px 8px; font-size:0.8rem;">{{ password_form.non_field_errors|join:", " }}</div>
        {% endif %}
        <div id="pw-change-status" style="font-size:0.85rem; color:#888;"></div>
        <div><button type="submit" class="btn">Save</button></div>
      </form>
    </details>

    <form method="post" action="{% url 'logout' %}" class="inline-form" style="margin-top:1rem;">
      {% csrf_token %}
      <button type="submit" class="btn">Logout</button>
    </form>
  </section>
</div>
{% endblock %}

{% block extra_js %}
<style>
  .bg-preview { max-width: 240px; max-height: 135px; object-fit: cover; border-radius: 4px; border: 1px solid #333; }
</style>
<script>
function getCsrfToken() {
  return document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1] || '';
}

// Minimal crypto helpers for settings page (duplicated from app.js — settings page doesn't load app.js)
function _bytesToBase64(buf) {
  const bytes = new Uint8Array(buf);
  let str = '';
  for (const b of bytes) str += String.fromCharCode(b);
  return btoa(str);
}
function _bytesToHex(buf) {
  return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join('');
}
function _base64ToBytes(b64) {
  const str = atob(b64);
  const buf = new Uint8Array(str.length);
  for (let i = 0; i < str.length; i++) buf[i] = str.charCodeAt(i);
  return buf;
}
async function _getOrCreateEncKey() {
  const userId = {{ request.user.id }};
  const storageKey = `diora_enc_key_${userId}`;
  const stored = localStorage.getItem(storageKey);
  if (stored) {
    try {
      const raw = _base64ToBytes(stored);
      return crypto.subtle.importKey('raw', raw, {name: 'AES-GCM'}, false, ['encrypt', 'decrypt']);
    } catch (e) {}
  }
  const key = await crypto.subtle.generateKey({name: 'AES-GCM', length: 256}, true, ['encrypt', 'decrypt']);
  const raw = await crypto.subtle.exportKey('raw', key);
  localStorage.setItem(storageKey, _bytesToBase64(raw));
  return key;
}

document.getElementById('pw-change-form')?.addEventListener('submit', function(e) {
  const ok = confirm('Nach dem Ändern des Passworts können alle hochgeladenen Bücher nicht mehr geöffnet werden und müssen erneut hochgeladen werden. Fortfahren?');
  if (!ok) e.preventDefault();
});

async function uploadBackground(input) {
  const file = input.files[0];
  if (!file) return;
  const status = document.getElementById('bg-upload-status');
  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
  if (!allowedTypes.includes(file.type)) {
    status.textContent = 'Only JPEG, PNG, or WebP images are allowed.';
    return;
  }
  if (file.size > 5 * 1024 * 1024) {
    status.textContent = 'Image must be 5 MB or smaller.';
    return;
  }
  status.textContent = 'Encrypting…';
  try {
    const key = await _getOrCreateEncKey();
    const buf = await file.arrayBuffer();
    const iv = crypto.getRandomValues(new Uint8Array(12));
    const ct = await crypto.subtle.encrypt({name: 'AES-GCM', iv}, key, buf);
    status.textContent = 'Uploading…';
    const res = await fetch('/accounts/background/upload/', {
      method: 'POST',
      headers: {'Content-Type': 'application/json', 'X-CSRFToken': getCsrfToken()},
      body: JSON.stringify({iv: _bytesToHex(iv), ciphertext: _bytesToBase64(ct), mime_type: file.type, file_size: file.size}),
    });
    const data = await res.json();
    if (data.ok) { location.reload(); }
    else { status.textContent = data.error || 'Upload failed'; }
  } catch (e) {
    status.textContent = 'Upload failed: ' + e.message;
  }
  input.value = '';
}
</script>
{% endblock %}