devicehub-teal/ereuse_devicehub/templates/ereuse_devicehub/user_profile.html

{% extends "ereuse_devicehub/base_site.html" %}

{% block page_title %}Your Profile{% endblock %}

{% block main %}

<div class="pagetitle">
  <h1>Profile</h1>
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item">Users</li>
      <li class="breadcrumb-item active">Profile</li>
    </ol>
  </nav>
</div><!-- End Page Title -->

<section class="section profile">
  <div class="row">
    <div class="col-xl-4">

      <div class="card">
        <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
          <i class="bi bi-person-circle" style="font-size: 76px;"></i>
          <h2>{{ current_user.get_full_name }}</h2>
        </div>
      </div>

    </div>

    <div class="col-xl-8"><!-- TODO (hidden until is implemented )-->

      <div class="card">
        <div class="card-body pt-3">
          <!-- Bordered Tabs -->
          <ul class="nav nav-tabs nav-tabs-bordered">

            <li class="nav-item">
              <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">Overview</button>
            </li>

            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Edit Profile</button>
            </li>

            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Change Password</button>
            </li>

          </ul>
          <div class="tab-content pt-2">

            <div class="tab-pane fade show active profile-overview" id="profile-overview">
              <h5 class="card-title">Profile Details</h5>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">Account user</div>
                <div class="col-lg-9 col-md-8">{{ current_user.email or ''}}</div>
              </div>

              {% for u in current_user.individuals %}

              <div class="row">
                <div class="col-lg-3 col-md-4 label ">Full Name</div>
                <div class="col-lg-9 col-md-8">{{ u.get_full_name or ''}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">Country</div>
                <div class="col-lg-9 col-md-8">{{ u.country or ''}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">Phone</div>
                <div class="col-lg-9 col-md-8">{{ u.telephone or ''}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">Email</div>
                <div class="col-lg-9 col-md-8">{{ u.email or ''}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">Created</div>
                <div class="col-lg-9 col-md-8">{{ u.created.strftime('%H:%M %d-%m-%Y') or ''}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">Last login</div>
                <div class="col-lg-9 col-md-8">
                    {% for s in sessions %}
                    {{ s }}<br />
                    {% endfor %}
                </div>
              </div>

              {% if u.active_org %}
              <div class="row">
                <div class="col-lg-3 col-md-4 label">Company name</div>
                <div class="col-lg-9 col-md-8">{{ u.active_org.name  or ''}}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">Company country</div>
                <div class="col-lg-9 col-md-8">{{ u.active_org.country or '' }}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">Company Phone</div>
                <div class="col-lg-9 col-md-8">{{ u.active_org.telephone or '' }}</div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">Company Email</div>
                <div class="col-lg-9 col-md-8">{{ u.active_org.email or '' }}</div>
              </div>

              {% endif %}
              {% endfor %}

            </div>

            <div class="tab-pane fade profile-edit pt-3" id="profile-edit">

              <!-- Profile Edit Form -->
              <form action="{{ url_for('core.user-profile') }}" method="post">
              {% for  f in profile_form %}
                {% if f == profile_form.csrf_token %}
                  {{ f }}
                {% else %}
                <div class="row mb-3">
                  <label class="col-md-4 col-lg-3 col-form-label">{{ f.label }}</label>
                  <div class="col-md-8 col-lg-9">
                    {{ f }}
                    {% if f.errors %}
                    <p class="text-danger">
                      {% for error in f.errors %}
                        {{ error }}<br/>
                      {% endfor %}
                    </p>
                    {% endif %}
                  </div>
                </div>
                {% endif %}
              {% endfor %}
                <div class="text-center">
                  <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
              </form><!-- End Profile Edit Form -->

            </div>

            <div class="tab-pane fade pt-3" id="profile-change-password">
              <!-- Change Password Form -->
              <form action="{{ url_for('core.set-password') }}" method="post">
              {% for  f in password_form %}
                {% if f == password_form.csrf_token %}
                  {{ f }}
                {% else %}
                <div class="row mb-3">
                  <label class="col-md-4 col-lg-3 col-form-label">{{ f.label }}</label>
                  <div class="col-md-8 col-lg-9">
                    {{ f }}
                    {% if f.errors %}
                    <p class="text-danger">
                      {% for error in f.errors %}
                        {{ error }}<br/>
                      {% endfor %}
                    </p>
                    {% endif %}
                  </div>
                </div>
                {% endif %}
              {% endfor %}
                <div class="text-center">
                  <button type="submit" class="btn btn-primary">Change Password</button>
                </div>
              </form><!-- End Change Password Form -->

            </div>

          </div><!-- End Bordered Tabs -->

        </div>
      </div>

    </div>
  </div>
</section>
{% endblock main %}