Add functionality to tokens

Style more elements

server/templates/account.html

@@ -1,10 +1,32 @@
 {% extends "base.html" %}
+{% block nav %}
+<nav>
+    <a href="{{ url_for('auth.account', action='logout') }}" class="button">Your Profile</a>
+    <!-- This is a spacer -->
+    <span></span>
+    <a href="{{ url_for('auth.account', action='logout') }}" class="button secondary">Logout</a>
+</nav>
+{% endblock %}
 {% block content %}
-    <h2>Hello, {{ current_user.username }}!</h2>
-    <a href="{{ url_for('auth.logout') }}">Logout</a>
+    <div class="block">
+        <h2>Tokens</h2>
+        <p>These are your API tokens. Used to link the uploaded scores with your account.</p>
+        <table>
+            {% for token in token_list %}
+                <tr id="token-{{ token.id }}">
+                    <td><button onclick="deleteToken({{ token.id }})" class="button secondary"><i class="ph ph-trash"></i></button></td>
+                    <td><button onclick="viewToken({{ token.id }})" class="button primary"><i class="ph ph-eye"></i></button></td>
+                    <td class="hidden">{{ token.token }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+        <button onclick="addToken()" class="button primary">Create New Token</button>
+    </div>
 
-    <h2>Tokens</h2>
-    {% for token in token_list %}
-        <p>{{ token.token }}</p>
-    {% endfor %}
-{% endblock %}
+    <div class="block secondary">
+        <h2>Danger Zone</h2>
+        <p>These actions are irreversible. Be careful!</p>
+        <a href="{{ url_for('auth.account', action='delete') }}" class="button secondary">Delete Account</a>
+        <a href="{{ url_for('auth.account', action='password') }}" class="button secondary">Reset Password</a>
+    </div>
+{% endblock %}