Add ids to tags; use pygments to color JSON

templates/accounts/login.html

@@ -3,15 +3,15 @@
     Login
 {% endblock title %}
 {% block content %}
-    <h4>Login</h4>
+    <h4 id="page-title">Login</h4>
     {% if form.errors %}
-        <ul>
+        <ul id="error-list">
             {% for field, errors in form.errors.items %}
                 {% for error in errors %}<li>{{ error }}</li>{% endfor %}
             {% endfor %}
         </ul>
     {% endif %}
-    <form method="post">
+    <form id="login-form" method="post">
         {% csrf_token %}
         <label for="{{ form.username.id_for_label }}">Username</label>
         <input type="text"
@@ -24,10 +24,10 @@
                name="password"
                id="{{ form.password.id_for_label }}"
                required>
-        <button type="submit">Login</button>
+        <button id="login-button" type="submit">Login</button>
     </form>
     <p>
-        Don't have an account? <a href="{% url 'accounts:signup' %}">Sign up here</a>
+        Don't have an account? <a id="signup-link" href="{% url 'accounts:signup' %}">Sign up here</a>
     </p>
     <style>
     .form-control {

templates/accounts/profile.html

@@ -3,9 +3,11 @@
     {{ user.username }}
 {% endblock title %}
 {% block content %}
-    <h2>{{ user.username }}</h2>
-    <p>Joined {{ user.date_joined|date:"F d, Y" }}</p>
-    <table>
+    <h2 id="username">{{ user.username }}</h2>
+    <p>
+        Joined <time id="date-joined">{{ user.date_joined|date:"F d, Y" }}</time>
+    </p>
+    <table id="user-info-table">
         <tr>
             <td>
                 <strong>Date Joined:</strong>
@@ -25,12 +27,12 @@
             <td>{{ user.email|default:"Not provided" }}</td>
         </tr>
     </table>
-    <a href="{% url 'accounts:logout' %}">Logout</a>
+    <a id="logout-link" href="{% url 'accounts:logout' %}">Logout</a>
     <h2>Will get notifications for these subscriptions:</h2>
-    <h3>Games</h3>
-    <ul>
+    <h3 id="games-subscriptions-header">Games</h3>
+    <ul id="games-subscriptions-list">
         {% for item in games_with_inheritance %}
-            <li>
+            <li id="game-subscription-{{ item.game.id }}">
                 <a href="{% url 'twitch:game_detail' item.game.id %}">{{ item.game.display_name }}</a>
                 {% if item.is_inherited %}
                     <span style="font-size: 0.85em; color: #666; font-style: italic;">(inherited from {{ item.inherited_from }})</span>
@@ -40,10 +42,10 @@
             <li>You have no game subscriptions yet.</li>
         {% endfor %}
     </ul>
-    <h3>Organizations</h3>
-    <ul>
+    <h3 id="org-subscriptions-header">Organizations</h3>
+    <ul id="org-subscriptions-list">
         {% for subscription in org_subscriptions %}
-            <li>
+            <li id="org-subscription-{{ subscription.organization_id }}">
                 <a href="{% url 'twitch:organization_detail' subscription.organization_id %}">{{ subscription.organization.name }}</a>
             </li>
         {% empty %}

templates/accounts/signup.html

@@ -3,15 +3,15 @@
     Sign Up
 {% endblock title %}
 {% block content %}
-    <h4>Sign Up</h4>
+    <h4 id="page-title">Sign Up</h4>
     {% if form.errors %}
-        <ul>
+        <ul id="error-list">
             {% for field, errors in form.errors.items %}
                 {% for error in errors %}<li>{{ error }}</li>{% endfor %}
             {% endfor %}
         </ul>
     {% endif %}
-    <form method="post">
+    <form id="signup-form" method="post">
         {% csrf_token %}
         <label for="{{ form.username.id_for_label }}">Username</label>
         <input type="text"
@@ -19,22 +19,22 @@
                id="{{ form.username.id_for_label }}"
                value="{{ form.username.value|default:'' }}"
                required>
-        {% if form.username.help_text %}{{ form.username.help_text }}{% endif %}
+        {% if form.username.help_text %}<small id="username-help">{{ form.username.help_text }}</small>{% endif %}
         <label for="{{ form.password1.id_for_label }}">Password</label>
         <input type="password"
                name="password1"
                id="{{ form.password1.id_for_label }}"
                required>
-        {% if form.password1.help_text %}{{ form.password1.help_text }}{% endif %}
+        {% if form.password1.help_text %}<small id="password1-help">{{ form.password1.help_text }}</small>{% endif %}
         <label for="{{ form.password2.id_for_label }}">Confirm Password</label>
         <input type="password"
                name="password2"
                id="{{ form.password2.id_for_label }}"
                required>
-        {% if form.password2.help_text %}{{ form.password2.help_text }}{% endif %}
-        <button type="submit">Sign Up</button>
+        {% if form.password2.help_text %}<small id="password2-help">{{ form.password2.help_text }}</small>{% endif %}
+        <button id="signup-button" type="submit">Sign Up</button>
     </form>
     <p>
-        Already have an account? <a href="{% url 'accounts:login' %}">Login here</a>
+        Already have an account? <a id="login-link" href="{% url 'accounts:login' %}">Login here</a>
     </p>
 {% endblock content %}