Update design of user profile section

netbox/templates/users/api_tokens.html

@@ -3,7 +3,7 @@
 
 {% block title %}API Tokens{% endblock %}
 
-{% block usercontent %}
+{% block content %}
     <div class="row">
         <div class="col col-md-12">
             {% for token in tokens %}
@@ -51,10 +51,12 @@
             {% empty %}
                 <p>You do not have any API tokens.</p>
             {% endfor %}
-            <a href="{% url 'user:token_add' %}" class="btn btn-sm btn-primary my-3">
+            <div class="text-end">
+              <a href="{% url 'user:token_add' %}" class="btn btn-sm btn-primary my-3">
                 <span class="mdi mdi-plus-thick" aria-hidden="true"></span>
                 Add a Token
-            </a>
+              </a>
+            </div>
         </div>
     </div>
 {% endblock %}

netbox/templates/users/base.html

@@ -1,21 +1,26 @@
 {% extends 'base/layout.html' %}
 
-{% block title %}{% endblock %}
+{% block tabs %}
+  <ul class="nav nav-tabs px-3">
+    <li role="presentation" class="nav-item">
+      <a class="nav-link{% if active_tab == 'profile' %} active{% endif %}" href="{% url 'user:profile' %}">Profile</a>
+    </li>
+    <li role="presentation" class="nav-item">
+      <a class="nav-link{% if active_tab == 'preferences' %} active{% endif %}" href="{% url 'user:preferences' %}">Preferences</a>
+    </li>
+    {% if not request.user.ldap_username %}
+      <li role="presentation" class="nav-item">
+        <a class="nav-link{% if active_tab == 'password' %} active{% endif %}" href="{% url 'user:change_password' %}">Password</a>
+      </li>
+    {% endif %}
+    <li role="presentation" class="nav-item">
+      <a class="nav-link{% if active_tab == 'api-tokens' %} active{% endif %}" href="{% url 'user:token_list' %}">API Tokens</a>
+    </li>
+  </ul>
+{% endblock %}
 
-{% block content %}
-<div class="row">
-    <div class="col-sm-3 col-md-2 border-end">
-        <nav class="nav nav-pills nav-justified flex-column">
-            <a class="nav-item nav-link text-start{% if active_tab == 'profile' %} active{% endif %}" href="{% url 'user:profile' %}">Profile</a>
-            <a class="nav-link nav-item text-start{% if active_tab == 'preferences' %} active{% endif %}" href="{% url 'user:preferences' %}">Preferences</a>
-            {% if not request.user.ldap_username %}
-            <a class="nav-link nav-item text-start{% if active_tab == 'change-password' %} active{% endif %}" href="{% url 'user:change_password' %}">Change Password</a>
-            {% endif %}
-            <a class="nav-link nav-item text-start{% if active_tab == 'api-tokens' %} active{% endif %}" href="{% url 'user:token_list' %}">API Tokens</a>
-        </nav>
-    </div>
-	<div class="col-sm-9 col-md-10 px-4">
-        {% block usercontent %}{% endblock %}
-	</div>
-</div>
+{% block content-wrapper %}
+  <div class="tab-content">
+    {% block content %}{% endblock %}
+  </div>
 {% endblock %}

netbox/templates/users/change_password.html → netbox/templates/users/password.html

@@ -3,10 +3,8 @@
 
 {% block title %}Change Password{% endblock %}
 
-{% render_errors form %}
-
-{% block usercontent %}
-    <form action="." method="post" class="form form-horizontal col-md-10 col-md-offset-1">
+{% block content %}
+    <form action="." method="post" class="form form-horizontal col-md-8 offset-md-2">
         {% csrf_token %}
         <div class="field-group">
             <h5 class="text-center">Password</h5>

netbox/templates/users/preferences.html

@@ -3,7 +3,7 @@
 
 {% block title %}User Preferences{% endblock %}
 
-{% block usercontent %}
+{% block content %}
 <form method="post" action="" id="preferences-update">
     {% csrf_token %}
     <div class="field-group mb-3">

netbox/templates/users/profile.html

@@ -3,35 +3,40 @@
 
 {% block title %}User Profile{% endblock %}
 
-{% block usercontent %}
-    <small class="text-muted">User Login</small>
-    <h5>{{ request.user.username }}</h5>
-    <small class="text-muted">Full Name</small>
-    <h5>
-    {% if request.user.first_name and request.user.last_name %}
-    {{ request.user.first_name }} {{ request.user.last_name }}
-    {% elif request.user.first_name and not request.user.last_name %}
-    {{ request.user.first_name }}
-    {% elif request.user.last_name and not request.user.first_name %}
-    {{ request.user.last_name }}
-    {% else %}
-    <span class="text-muted">None</span>
-    {% endif %}
-    </h5>
-    <small class="text-muted">Email</small>
-    <h5>{{ request.user.email }}</h5>
-    <small class="text-muted">Registered</small>
-    <h5>{{ request.user.date_joined|annotated_date }}</h5>
-    <small class="text-muted">Groups</small>
-    <h5>
-        {% if request.user.groups.all %}
-            {% for group in request.user.groups.all %}
-                <span class="badge bg-secondary">{{ group }}</span>
-            {% endfor %}
+{% block content %}
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <span class="text-muted">User Login</span>
+      <h5 class="mb-3">{{ request.user.username }}</h5>
+
+      <span class="text-muted">Full Name</span>
+      <h5 class="mb-3">
+        {% if request.user.first_name and request.user.last_name %}
+          {{ request.user.first_name }} {{ request.user.last_name }}
+        {% elif request.user.first_name and not request.user.last_name %}
+          {{ request.user.first_name }}
         {% else %}
-            <span class="text-muted">None</span>
+          {{ request.user.last_name|placeholder }}
         {% endif %}
-    </h5>
-    <small class="text-muted">Admin Access</small>
-    <h5>{{ request.user.is_staff|yesno|capfirst }}</h5>
+      </h5>
+
+      <span class="text-muted">Email</span>
+      <h5 class="mb-3">{{ request.user.email|placeholder }}</h5>
+
+      <span class="text-muted">Registered</span>
+      <h5 class="mb-3">{{ request.user.date_joined|annotated_date }}</h5>
+
+      <span class="text-muted">Groups</span>
+      <h5 class="mb-3">
+        {% for group in request.user.groups.all %}
+          <span class="badge bg-secondary">{{ group }}</span>
+        {% empty %}
+          <span class="text-muted">None</span>
+        {% endfor %}
+      </h5>
+
+      <span class="text-muted">Admin Access</span>
+      <h5 class="mb-3">{{ request.user.is_staff|yesno|capfirst }}</h5>
+    </div>
+  </div>
 {% endblock %}

netbox/users/views.py

@@ -153,7 +153,7 @@ class UserConfigView(LoginRequiredMixin, View):
 
 
 class ChangePasswordView(LoginRequiredMixin, View):
-    template_name = 'users/change_password.html'
+    template_name = 'users/password.html'
 
     def get(self, request):
         # LDAP users cannot change their password here
@@ -165,7 +165,7 @@ class ChangePasswordView(LoginRequiredMixin, View):
 
         return render(request, self.template_name, {
             'form': form,
-            'active_tab': 'change_password',
+            'active_tab': 'password',
         })
 
     def post(self, request):
@@ -194,7 +194,7 @@ class TokenListView(LoginRequiredMixin, View):
 
         return render(request, 'users/api_tokens.html', {
             'tokens': tokens,
-            'active_tab': 'api_tokens',
+            'active_tab': 'api-tokens',
         })