moviewyrm/bookwyrm/templates/ostatus/remote_follow.html

{% extends 'ostatus/template.html' %}
{% load i18n %}
{% load utilities %}

{% block heading %}
{% blocktrans with username=user.localname sitename=site.name %}Follow {{ username }} on the fediverse{% endblocktrans %}
{% endblock %}

{% block content %}
<div class="block card">
    <div class="card-content">
        <div class="media">
            <a href="{{ user.local_path }}" class="media-left">
                {% include 'snippets/avatar.html' with user=user large=True %}
            </a>
            <div class="media-content">
                <a href="{{ user.local_path }}" class="is-block mb-2">
                    <span class="title is-4 is-block">
                        {{ user.display_name }}
                        {% if user.manually_approves_followers %}
                        <span class="icon icon-lock is-size-7" title="{% trans 'Locked account' %}">
                            <span class="is-sr-only">{% trans "Locked account" %}</span>
                        </span>
                        {% endif %}
                    </span>
                    <span class="subtitle is-7 is-block">@{{ user|username }}</span>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="block">
    <p>{% blocktrans with username=user.display_name %}Follow {{ username }} from another Fediverse account like Bookwyrm, Mastodon, or Pleroma.{% endblocktrans %}</p>
</div>
<div class="card">
    <section class="card-content content">
        <form name="remote-follow" method="post" action="{% url 'remote-follow' %}">
            {% csrf_token %}
            <input type="hidden" name="user" value="{{ user.id }}">
            <label class="label" for="remote_user">{% trans 'User handle to follow from:' %}</label>
            <input class="input" type="text" name="remote_user" id="remote_user" placeholder="user@example.social">
            <button class="button mt-1 is-primary" type="submit">{% trans 'Follow!' %}</button>
        </form>
    </section>
</div>
{% endblock %}