ejabberd

{% extends "base_min.html" %}
{% block form_class %}container col-md-8 col-md-offset-2 col-sm-8 cold-sm-offset-2 col-lg-6 col-lg-offset-3 my-3 mt-md-5{% endblock %}
{% block title %}{% trans "Registration Success" %} | {{site_name}}{% endblock %}
{% block h1 %}{{site_name}}{% endblock %}
{% block content %}
        <h2 class="card-title h5">{% trans "Congratulations!" %}</h2>

        <p>{% blocktrans %}You have created an account on <strong>{{ site_name }}</strong>.{% endblocktrans %}</p>

        <p>{% trans "To start chatting, you need to enter your new account credentials into your chosen XMPP software." %}</p>

        {% if webchat_url %}
        <div class="bd-callout bd-callout-info col-12">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-9">
                        <svg class="svg-inline--fa fa-lightbulb fa-w-11 text-warning" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lightbulb" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg=""><path fill="currentColor" d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg> {% trans "<strong>No suitable software installed right now?</strong> You can also log in to your account through our online web chat!" %}
                    </div>
                    <div class="col text-end mt-3 mt-md-0">
                        <a class="btn btn-primary" href="{{ webchat_url }}" target="_blank" noopener>{% trans "Log in via web" %}</a>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {% if app %}
        <p>{% blocktrans with app_name=app.name %}You can now set up {{ app_name }} and connect it to your new account.{% endblocktrans %}</p>

        <h2 class="h5 alert alert-info p-2">{% blocktrans with app_name=app.name %}Step 1: Download and install {{ app_name }}{% endblocktrans %}</h2>

        <p>{% if app.download.text %}{{ app.download.text }}{% else %}{% blocktrans with app_name=app.name %}Download and install {{ app_name }} below:{% endblocktrans %}{% endif %}</p>

        <div class="ms-5 mb-3">
            {% for item in app.download.buttons %}
            {% if item.image %}
            <a href="{{ item.url }}" {%if item.target %}target="{{ item.target }}"{% endif %} rel="noopener">
                <img src="{{ item.image }}" {% if item.alttext %}alt="{{ item.alttext }}"{% endif %}>
            </a>
            {% endif %}
            {%if item.text %}
            <a href="{{item.url}}" {% if item.target %}target="{{ item.target }}"{% endif %} rel="noopener">
                <button class="btn btn-primary">
                    {{ item.text }}
                </button>
            </a>
            {% endif %}
            {% endfor %}
        </div>

        <h2 class="h5 alert alert-info p-2">{% blocktrans with app_name=app.name %}Step 2: Connect {{ app_name }} to your new account{% endblocktrans %}</h2>

        <p>{% if app.setup.text %}{{ app.setup.text }}{% else %}{% blocktrans with app_name=app.name %}Launch {{ app_name }} and sign in using your account credentials.{% endblocktrans %}{% endif %}</p>
        {% endif %}

        <p>{% trans "As a final reminder, your account details are shown below:" %}</p>

        <form class="account-details col-12 mx-auto">
            <div class="input-group">
                <label for="user" class="col-md-4 col-form-label fw-bold">{% trans "Chat address (JID)" %}:</label>
                <div class="col-md-8 col-12">
                    <input type="text" class="form-control-plaintext" readonly value="{{ username }}@{{ domain }}">
                </div>
            </div>
            {% if password %}
            <div class="input-group">
                <label for="password" class="col-md-4 col-12 col-form-label fw-bold">{% trans "Password" %}:</label>
                <div class="col-md-8 col-12">
                    <div class="input-group">
                        <input type="password" readonly disabled aria-label="{% trans "Password" %}" class="form-control" value="{{ password }}">
                        <div class="input-group-append">
                            <button id="toggle-pw-button" class="btn btn-outline-secondary rounded-start-0" type="button"
                                data-text-show="{% trans "Show" %}" data-text-hide="{% trans "Hide" %}">{% trans "Show" %}</button>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </form>

        {% if password %}
        <p class="mt-3">{% trans "Your password is stored encrypted on the server and will not be accessible after you close this page. Keep it safe and never share it with anyone." %}</p>
        {% endif %}
{% endblock %}