templates/friend.html

{% extends 'base.html' %}

{% block title %}
User | Devnoms
{% endblock %}

{% block style %}
<style>
  * {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
  }
  
  :root {
    font-size: 62.5%;
  }
  
  body {
    background-color: #131518;
    font-family: sans-serif;
    color: aliceblue;
  }
  
  .container {
    max-width: 500px;
    margin: auto;
    position: relative;
    top: 30px;
    height: 90vh;
    background-color: #282a2d;
    border: 2px solid rgb(255, 132, 0);
    text-align: center;
    border-radius: 8px;
    box-shadow: 4px 4px 10px -4px #9339f5;
    overflow-y: hidden;
  }
  
  @media screen and (max-width: 550px) {
    .container {
      top: 0px;
      max-width: 550px;
      height: 100vh;
    }
  }
  
  a {
    display: inline-block;
    padding: 1.3rem 2rem;
    border-radius: 5px;
    border: 2px solid #131518;
    text-decoration: none;
    color: aliceblue;
    cursor: pointer;
  }
  .sbtn {
    padding: 1.3rem 2rem;
    color: #fff;
    background: #9339f5;
    border: none;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    font-size: 1.6rem;
  }
  .sbtn:hover {
    transition-duration: 0.2s;
    background: #6421eb;
  }
  .cbtn{
    padding: 0%;
  }
  .row {
    display: flex;
    justify-content: center;
  }
  
  .is_friend .dbtn {
    margin-right: 1em;
  }
  .is_friend .cbtn {
    margin-left: 1em;
  }
  .message {
    width: 80%;
    margin: 140px auto;
    color: #f53939;
    font-size: 2rem;
  }
  
  .message:hover {
    transition-duration: 0.2s;
    color: #f57d7d;
  }
  
  .info {
    font-size: 2rem;
    margin: 10rem 0rem 5rem 0rem;
    line-height: 4rem;
  }
</style>
{% endblock %}

{% block content %}
<div class="container">
  {% if messages %}
    <div class="message">
      {% for message in messages %}
        {{ message }}
      {% endfor %}
    </div>
  {% else %}
    <div class="info">
      <p class="username">Username: {{ user_details.username }}</p>
      <p class="email">Email: {{ user_details.email }}</p>
    </div>
  {% endif %}
  {% if user_details.send_request %}
    <div class="send_request">
      <form method="post" action="{% url 'add_friend' %}" onsubmit="showLoader(this)">
        {% csrf_token %}
        <input hidden type="text" name="username" value="{{ user_details.username }}" />
        <button class="sbtn" type="submit" id="action-btn">
          <span id="btn-text">Send Request</span>
          <span class="loader hidden" id="loader"></span>
        </button>
      </form>
    </div>
  {% elif user_details.not_accepted %}
    <div class="delete_request">
      <form method="post" action="{% url 'delete_friend' %}" onsubmit="showLoader(this)">
        {% csrf_token %}
        <input hidden type="text" name="username" value="{{ user_details.username }}" />
        <input hidden type="text" name="requestDelete" value="True" />
        <button class="sbtn" type="submit" id="action-btn">
          <span id="btn-text">Delete Your Request</span>
          <span class="loader hidden" id="loader"></span>
        </button>
      </form>
    </div>
  {% elif user_details.me_not_accepted %}
    <div class="accept_request">
      <form method="post" action="{% url 'accept_request' %}" onsubmit="showLoader(this)">
        {% csrf_token %}
        <input hidden type="text" name="username" value="{{ user_details.username }}" />
        <button class="sbtn" type="submit" id="action-btn">
          <span id="btn-text">Accept Request</span>
          <span class="loader hidden" id="loader"></span>
        </button>
      </form>
    </div>
  {% else %}
    {% if user_details.is_friend %}
      <div class="row is_friend">
        <form method="post" action="{% url 'delete_friend' %}" onsubmit="showLoader(this)">
          {% csrf_token %}
          <input hidden type="text" name="username" value="{{ user_details.username }}" />
          <input hidden type="text" name="requestDelete" value="False" />
          <button class="sbtn" type="submit" id="action-btn">
            <span id="btn-text">Remove Friend</span>
            <span class="loader hidden" id="loader"></span>
          </button>
        </form>
        <button class="sbtn cbtn">
          <a href="{% url 'chat' username=user_details.username %}" class="btn btn-primary" onclick="overlayLoader(event)">Chat</a>
        </button>
      </div>
    {% endif %}
  {% endif %}
</div>

<script>
    function showLoader(form) {
    const button = form.querySelector('button');
    const loader = button.querySelector('.loader');
    const buttonText = button.querySelector('span:first-child');

    // Show the loader and disable the button
    loader.classList.remove('hidden');
    buttonText.style.display = 'none';
    button.disabled = true;
    loader.innerHTML = '<div class="spinner"></div>';
    // Allow form submission
    return true;
  }
  window.addEventListener('pageshow', () => {
    const actionButton = document.getElementById('action-btn')
    const btnText = document.getElementById('btn-text')
    const loader = document.getElementById('loader')

    // Reset the button and loader states
    actionButton.disabled = false
    btnText.style.display = 'inline'
    loader.classList.add('hidden')
  })
  if (window.history.replaceState) {
    window.history.replaceState(null, null, window.location.href)
  }
</script>
{% endblock %}