indiekit-endpoint-activitypub/views/activitypub-migrate.njk

{% extends "document.njk" %}

{% from "heading/macro.njk" import heading with context %}
{% from "input/macro.njk" import input with context %}
{% from "button/macro.njk" import button with context %}
{% from "checkboxes/macro.njk" import checkboxes with context %}
{% from "notification-banner/macro.njk" import notificationBanner with context %}
{% from "prose/macro.njk" import prose with context %}

{% block content %}
  {% if result %}
    {{ notificationBanner({ type: result.type, text: result.text }) }}
  {% endif %}

  {{ prose({ text: __("activitypub.migrate.intro") }) }}

  {# Step 1 — Actor alias #}
  {{ heading({ text: __("activitypub.migrate.step1Title"), level: 2 }) }}
  {{ prose({ text: __("activitypub.migrate.step1Desc") }) }}

  {% if currentAlias %}
    <p>
      <strong>{{ __("activitypub.migrate.aliasCurrent") }}:</strong>
      <a href="{{ currentAlias }}">{{ currentAlias }}</a>
    </p>
  {% else %}
    <p><em>{{ __("activitypub.migrate.aliasNone") }}</em></p>
  {% endif %}

  <form method="post" novalidate>
    <input type="hidden" name="action" value="alias">
    {{ input({
      name: "aliasUrl",
      label: __("activitypub.migrate.aliasLabel"),
      hint: __("activitypub.migrate.aliasHint"),
      value: currentAlias,
      type: "url"
    }) }}
    {{ button({ text: __("activitypub.migrate.aliasSave") }) }}
  </form>

  <hr>

  {# Step 2 — Import CSV #}
  {{ heading({ text: __("activitypub.migrate.step2Title"), level: 2 }) }}
  {{ prose({ text: __("activitypub.migrate.step2Desc") }) }}

  <div x-data="csvImport('{{ mountPath }}')">

    {{ checkboxes({
      name: "importTypes",
      fieldset: {
        legend: __("activitypub.migrate.importLegend")
      },
      items: [
        {
          label: __("activitypub.migrate.importFollowing"),
          value: "following",
          hint: __("activitypub.migrate.importFollowingHint")
        },
        {
          label: __("activitypub.migrate.importFollowers"),
          value: "followers",
          hint: __("activitypub.migrate.importFollowersHint")
        }
      ],
      values: ["following"]
    }) }}

    <div class="field">
      <label class="label" for="csvFile">{{ __("activitypub.migrate.fileLabel") }}</label>
      <p class="hint">{{ __("activitypub.migrate.fileHint") }}</p>
      <input class="input" type="file" id="csvFile" accept=".csv,.txt"
             @change="readFile($event)">
      <template x-if="fileName">
        <p class="hint" style="margin-top: 0.5em">
          <strong x-text="fileName"></strong> — <span x-text="handles.length + ' accounts found'"></span>
        </p>
      </template>
      <template x-if="fileError">
        <p class="hint" style="margin-top: 0.5em; color: var(--color-error, #d4351c)" x-text="fileError"></p>
      </template>
    </div>

    <button class="button" type="button"
            :disabled="importing || handles.length === 0"
            @click="startImport()">
      <span x-show="!importing">{{ __("activitypub.migrate.importButton") }}</span>
      <span x-show="importing" x-text="statusText"></span>
    </button>

    {# Result notification #}
    <template x-if="resultType">
      <div :class="'notification-banner notification-banner--' + resultType"
           role="alert" style="margin-top: 1em">
        <p x-text="resultText"></p>
        <template x-if="resultErrors.length > 0">
          <details style="margin-top: 0.5em">
            <summary>{{ __("activitypub.migrate.failedListSummary") }} (<span x-text="resultErrors.length"></span>)</summary>
            <ul style="margin-top: 0.5em; font-size: 0.875em">
              <template x-for="err in resultErrors" :key="err">
                <li x-text="err"></li>
              </template>
            </ul>
          </details>
        </template>
      </div>
    </template>
  </div>

  <hr>

  {# Step 3 — Instructions #}
  {{ heading({ text: __("activitypub.migrate.step3Title"), level: 2 }) }}
  {{ prose({ text: __("activitypub.migrate.step3Desc") }) }}

  <script>
  function csvImport(mountPath) {
    return {
      handles: [],
      fileName: '',
      lineCount: 0,
      fileError: '',
      importing: false,
      statusText: '',
      resultType: '',
      resultText: '',
      resultErrors: [],

      /**
       * Parse CSV client-side — extract handles (first column) only.
       * This keeps the JSON payload small (handles only, no raw CSV),
       * avoiding Express's default 100KB body parser limit.
       */
      readFile(event) {
        var self = this;
        self.handles = [];
        self.fileName = '';
        self.lineCount = 0;
        self.fileError = '';
        self.resultType = '';
        self.resultText = '';
        self.resultErrors = [];

        var file = event.target.files[0];
        if (!file) return;

        if (file.size > 5 * 1024 * 1024) {
          self.fileError = 'File too large (max 5 MB)';
          event.target.value = '';
          return;
        }

        var reader = new FileReader();
        reader.onload = function(e) {
          var text = e.target.result;
          var lines = text.split('\n').filter(function(l) { return l.trim(); });
          self.fileName = file.name;
          self.lineCount = lines.length;

          // Extract handles: skip header, take first CSV column, keep only valid handles
          var parsed = [];
          for (var i = 1; i < lines.length; i++) {
            var handle = lines[i].split(',')[0].trim();
            if (handle && handle.indexOf('@') !== -1) {
              parsed.push(handle);
            }
          }
          self.handles = parsed;
        };
        reader.onerror = function() {
          self.fileError = 'Could not read file';
        };
        reader.readAsText(file);
      },

      async startImport() {
        var self = this;
        self.importing = true;
        self.resultType = '';
        self.resultText = '';
        self.resultErrors = [];
        self.statusText = 'Importing\u2026';

        // Collect checked import types
        var checkboxes = document.querySelectorAll('input[name="importTypes"]:checked');
        var importTypes = [];
        for (var i = 0; i < checkboxes.length; i++) {
          importTypes.push(checkboxes[i].value);
        }

        if (importTypes.length === 0) {
          self.importing = false;
          self.resultType = 'error';
          self.resultText = 'Please select at least one import type.';
          return;
        }

        if (self.handles.length === 0) {
          self.importing = false;
          self.resultType = 'error';
          self.resultText = 'No valid handles found in the CSV file.';
          return;
        }

        try {
          var res = await fetch(mountPath + '/admin/migrate/import', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              handles: self.handles,
              importTypes: importTypes
            })
          });

          if (!res.ok) {
            var errBody = await res.text();
            throw new Error('Server error (' + res.status + '): ' + errBody);
          }

          var data = await res.json();
          self.resultType = data.type;
          self.resultText = 'Imported ' + (data.followingImported || 0) + ' following, '
            + (data.followersImported || 0) + ' followers'
            + (data.failed > 0 ? ' (' + data.failed + ' failed)' : '') + '.';
          self.resultErrors = data.errors || [];
        } catch (err) {
          self.resultType = 'error';
          self.resultText = err.message;
        }

        self.importing = false;
        self.statusText = '';
      }
    };
  }
  </script>
{% endblock %}