defter 0.8.5

Self-hosted Zotero sync and file storage server, with metadata in SQLite and attachments in S3.
{% extends "base.html" %}

{% block title %}{{ t.connect_account }}{% endblock %}

{% block content %}
<div class="mx-auto max-w-md rounded-lg border bg-card p-6 space-y-4">
  <h1 class="text-xl font-semibold tracking-tight">{{ t.connect_account }}</h1>
  <p class="text-sm text-muted-foreground">{{ t.connect_why }}</p>
  <p class="text-sm text-muted-foreground">
    {{ t.connect_how }}
    <a href="https://www.zotero.org/settings/keys/new" target="_blank" rel="noopener noreferrer" class="underline">{{ t.connect_key_page }}</a>
  </p>
  <form method="post" action="/ui/account" class="space-y-3">
    <label class="block space-y-1">
      <span class="text-sm font-medium">{{ t.zotero_key }}</span>
      <input type="password" name="key" required autocomplete="off" spellcheck="false"
             class="w-full rounded-md border bg-background px-3 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring">
    </label>
    {%- if let Some(error) = error %}
    <p role="alert" class="text-sm text-destructive">{{ error }}</p>
    {%- endif %}
    <button type="submit" class="w-full rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring">{{ t.connect }}</button>
  </form>
  <p class="text-sm text-muted-foreground">{{ t.connect_kept }}</p>
</div>
{% endblock %}