website-v2/templates/users/profile.html

{% extends "users/profile_base.html" %}

{% load static i18n %}

{% block content %}
  <div class="container">
    <div class="md:flex md:space-x-6 mt-6">
      <div class="md:w-1/2 space-y-3">
        <div class="rounded bg-white dark:bg-charcoal p-4">
          <h3>{% trans "Update Profile" %}</h3>

          <form method="POST" action="." class="space-y-3">
            {% csrf_token %}
            {% for field in profile_form.visible_fields %}
              <div>
                {% include "includes/_form_input.html" with form=profile_form field=field %}
              </div>
            {% endfor %}
            <div class="mb-4">
              <button name="update_profile" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">
                Update Profile
              </button>
            </div>
          </form>
        </div>

        <div class="rounded bg-white dark:bg-charcoal p-4">
          <h3>{% trans "Update Preferences" %}</h3>
          <form method="POST" action="." class="space-y-3">
            {% csrf_token %}
            <h5 class="font-bold mt-4">Notify me via email when:</h5>
            {{ profile_preferences_form.errors }}
            {% for field in profile_preferences_form.visible_fields %}
              <div>
                {% include "includes/_form_input.html" with form=profile_preferences_form field=field %}
              </div>
            {% endfor %}
            <div class="mt-4">
              <button name="update_preferences" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">
                Update Preferences
              </button>
            </div>
          </form>
        </div>
      </div>

      <div class="md:w-1/2 space-y-3">

        <div class="rounded bg-white dark:bg-charcoal p-4">
          <h3>{% trans "Update Profile Photo" %}</h3>
          {% if can_update_image %}
            {% if user.github_username %}
              <form method="POST" action="." class="space-y-3">
                {% csrf_token %}
                <button name="update_github_photo" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">Use
                  My GitHub Photo
                </button>
              </form>
            {% endif %}

            <form method="POST" enctype="multipart/form-data" action="." class="space-y-3">
              {% csrf_token %}
              {% for field in profile_photo_form.visible_fields %}
                <div>
                  {% include "includes/_form_input.html" with form=profile_photo_form field=field %}
                </div>
              {% endfor %}
              <div class="mt-4">
                <button name="update_photo" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">Upload
                  Profile Photo
                </button>
              </div>
            </form>
          {% else %}
            <div>Please contact an administrator to update your profile photo.</div>
          {% endif %}
        </div>

        <div class="rounded bg-white dark:bg-charcoal p-4">
          <h3>{% trans "Set Password" %}</h3>
          <form method="POST" action="." class="password_set space-y-3">
            {% csrf_token %}
            {% for field in change_password_form.visible_fields %}
              <div>
                {% include "includes/_form_input.html" with form=change_password_form field=field %}
              </div>
            {% endfor %}
            <div class="mt-4">
              <button name="change_password" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">Set
                Password
              </button>
            </div>
          </form>
        </div>

        <div class="rounded bg-white dark:bg-charcoal p-4">
          <h3>{% trans "Account Connections" %}</h3>
          <div class="mt-4">
            <a href="{% url 'socialaccount_connections' %}"><button class="py-2 px-3 text-sm text-white rounded bg-orange">{% trans 'Manage Account Connections' %}</button></a>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}