user profile page rework

user/templates/panel.html

@@ -1,27 +1,68 @@
 {% extends "base.html" %}
-{% load i18n %}
+{% load i18n get_language_code %}
 
 {% block content %}
-<div class="row mb-3">
-  <div class="col">
-    <h3>{{ subtitle }}</h3>
-  </div>
-  <div class="col text-center">
-    {{ user.email }}
-  </div>
-</div>
 
-<div class="row">
-  <div class="col">
-    <a class="nav-link fw-bold" href="{% url 'api:tokens' %}">
-      {% translate 'Admin your Tokens' %}
-    </a>
-  </div>
-  <div class="col">
-    <a class="nav-link fw-bold" href="{% url 'user:settings' %}">
-      {% translate 'Download a settings file' %}
-    </a>
-  </div>
-</div>
+  <div class="row mb-5">
+   <div class="col d-flex align-items-center">
 
-{% endblock %}
+    <i class="bi bi-person-circle fs-2 me-3"></i>
+    <h3 class="mb-0">{{ user.email }}</h3>
+  </div>
+
+    {# The language picker is mostly here to fill up some space on user settings #}
+    <div class="col text-end">
+      <div class="dropdown">
+        <form action="{% url 'set_language' %}" method="post">
+          {% csrf_token %}
+          <button class="btn btn-tertiary border dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+            {% get_current_language as LANGUAGE_CODE %}
+            {% get_language_info_list for LANGUAGES as languages %}
+            {{ LANGUAGE_CODE|get_language_code:languages }}
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
+            {% for lang in languages %}
+              <li>
+                <button class="dropdown-item" type="submit" name="language" value="{{ lang.code }}">{{ lang.name }}</button>
+              </li>
+            {% endfor %}
+          </ul>
+        </form>
+      </div>
+    </div>
+  </div>
+
+<div class="row mb-4">
+  <div class="col-md-6">
+    <div class="card h-100 shadow-sm border-0">
+      <div class="card-body d-flex flex-column">
+        <h5 class="card-title mb-3">
+          <i class="bi bi-key me-2"></i> {% translate 'Token Management' %}
+        </h5>
+        <p class="card-text flex-grow-1">{% translate 'Manage your personal tokens for using Devicehub.' %}</p>
+        <div class="text-end">
+          <a href="{% url 'api:tokens' %}" class="btn btn-outline-dark btn-sm d-inline-flex align-items-center">
+            <span class="me-2">{% translate 'Go' %}</span>
+            <i class="bi bi-arrow-right"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="card h-100 shadow-sm border-0">
+      <div class="card-body d-flex flex-column">
+        <h5 class="card-title mb-3">
+          <i class="bi bi-gear me-2"></i> {% translate 'Settings File' %}
+        </h5>
+        <p class="card-text flex-grow-1">{% translate 'Download a settings file for your account.' %}</p>
+        <div class="text-end">
+          <a href="{% url 'user:settings' %}" class="btn btn-outline-dark btn-sm d-inline-flex align-items-center">
+            <span class="me-2">{% translate 'Go' %}</span>
+            <i class="bi bi-arrow-right"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>{% endblock %}