website-v2/templates/users/profile.html

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

{% load static i18n widget_tweaks %}

{% block content %}
  <style>
    .profile-delete {
      display: inline;
      padding: 0.5rem 1rem;
      border: 2px solid #f00;
      background-color: #fff;
      border-radius: 0.3rem;
      color: #f00;
      font-size: 0.9rem;
    }
    .profile-delete:hover {
      background-color: #fff;
      color: #f00;
    }
    .profile-cancel {
      display: inline;
      padding: 0.5rem 1rem;
      border: 2px solid #f00;
      border-radius: 0.3rem;
      background-color: #f00;
      color: #fff;
      font-size: 0.9rem;
    }
    .profile-cancel:hover {
      color: #f00;
    }
  </style>
  <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 border-b border-slate py-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 py-3">
              {% csrf_token %}
              {% for field in profile_photo_form.visible_fields %}
                <div>
                  {% if field.errors %}
                    {% for error in field.errors %}
                      <div class="py-1 px-3 text-white bg-red-600">{{ error }}</div>
                    {% endfor %}
                  {% endif %}

                  {% if user.image %}
                    <img src="{{ user.image.url }}" alt="user" class="ml-4 inline -mt-1 rounded bg-white dark:bg-slate w-[30px] mr-2" />
                  {% endif %}

                  {% render_field field class='text-sm text-grey-500 !border-0 file:mr-5 file:py-2 file:px-6 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-white file:text-slate hover:file:cursor-pointer hover:file:bg-orange hover:file:text-white' %}
                </div>
              {% endfor %}
              <div class="mt-4">
                <button name="update_photo" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">Save</button>
              </div>
            </form>
          {% else %}
            <div>Please contact an administrator to update your profile photo.</div>
          {% endif %}
        </div>

        {% if not social_accounts %}
          <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>
        {% else %}
          <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>
        {% endif %}

        {% include 'libraries/profile_commit_email_addresses.html' %}

        <div class="rounded bg-white dark:bg-charcoal p-4">
          <h3>{% trans 'Delete Account' %}</h3>
          {% if user.delete_permanently_at %}
            <p>
              {% blocktrans with at=request.user.delete_permanently_at|date:'N j, Y, P e' trimmed %}Your account is scheduled for deletion at {{ at }}
              {% endblocktrans %}
            </p>
            <p>
              <button class="profile-cancel"><a href="{% url 'profile-cancel-delete' %}">Cancel Deletion</a></button>
            </p>
            <p>
              <button class="profile-delete"><a href="{% url 'profile-delete-immediately' %}">Delete Now</a></button>
            </p>
          {% else %}
            <a href="{% url 'profile-delete' %}">{% trans 'Delete account' %}</a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  {% include "modal.html" %}

  <script>
    document.body.addEventListener('htmx:configRequest', function(event) {
      /* only set CSRF token if config-sessionid cookie exists.
      we don't really need this check while this functionality is limited to this
      page, but I'm adding it anyway in case we move this in the future so we don't
      overlook it. */
      const hasSessionId = document.cookie.split(';').some(function(cookie) {
        return cookie.trim().startsWith('config-sessionid=');
      });
      if (hasSessionId) {
        event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
      }
    });
  </script>
{% endblock %}