Merge pull request #416 from scidsg/407-fix-templates

Update templates to use url_for()
scidsg · Jul 17, 2024 · fdad178 · fdad178
2 parents ed20c8f + be5648f
commit fdad178
Show file tree

Hide file tree

Showing 13 changed files with 307 additions and 278 deletions.
diff --git a/hushline/static/js/directory.js b/hushline/static/js/directory.js
@@ -102,7 +102,7 @@ document.addEventListener('DOMContentLoaded', function () {
                     <div class="badgeContainer">${badgeContainer}</div>
                     ${bioHighlighted ? `<p class="bio">${bioHighlighted}</p>` : ''}
                     <div class="user-actions">
-                        <a href="/submit_message/${user.primary_username}">Send a Message</a>
+                        <a href="${pathPrefix}/submit_message/${user.primary_username}">Send a Message</a>
                         ${isSessionUser ? `<a href="#" class="report-link" data-username="${user.primary_username}" data-display-name="${user.display_name || user.primary_username}" data-bio="${user.bio ?? "No bio"}">Report Account</a>` : ``}
                     </div>
                 `;

diff --git a/hushline/templates/base.html b/hushline/templates/base.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="theme-color" content="#7D25C1">
@@ -14,24 +15,30 @@
     <meta name="twitter:description" content="A lightweight, secure, and anonymous tip line platform.">
     <meta name="twitter:image" content="https://hushline.app/design-system/images/social/social.png">
     <title>{% block title %}{% endblock %} - Hushline</title>
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='img/favicon/apple-touch-icon.png') }}">
-    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/favicon-16x16.png') }}" sizes="16x16">
-    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/favicon-32x32.png') }}" sizes="32x32">
-    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/android-chrome-192x192.png') }}" sizes="192x192">
-    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/android-chrome-512x512.png') }}" sizes="512x512">
+    <link rel="apple-touch-icon" sizes="180x180"
+        href="{{ url_for('static', filename='img/favicon/apple-touch-icon.png') }}">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/favicon-16x16.png') }}"
+        sizes="16x16">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/favicon-32x32.png') }}"
+        sizes="32x32">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/android-chrome-192x192.png') }}"
+        sizes="192x192">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/android-chrome-512x512.png') }}"
+        sizes="512x512">
     <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon/favicon.ico') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 </head>
+
 <body>
 
     {% with messages = get_flashed_messages() %}
-      {% if messages %}
-        <div class="flash-messages">
-          {% for message in messages %}
-            <div class="flash-message">{{ message }}</div>
-          {% endfor %}
-        </div>
-      {% endif %}
+    {% if messages %}
+    <div class="flash-messages">
+        {% for message in messages %}
+        <div class="flash-message">{{ message }}</div>
+        {% endfor %}
+    </div>
+    {% endif %}
     {% endwith %}
 
     <header>
@@ -42,21 +49,23 @@ <h1>🤫 Hush Line</h1>
                 <a class="mobileNav btnIcon" aria-label="Navigation menu">Menu</a>
                 <ul>
                     <li><a href="{{ url_for('directory') }}">Directory</a></li>
-                    {% if 'user_id' in session and (('2fa_required' not in session or not session['2fa_required']) or ('2fa_verified' in session and session['2fa_verified'])) %}
-                        <li><a href="{{ url_for('inbox', username=session.username) }}">Inbox</a></li>
-                        <li><a href="{{ url_for('submit_message', username=session.username) }}">Submit Message</a></li>
-                        <li class="dropdown">
-                            <a href="#" class="dropbtn">@{{ session['username'] }} <img class="dropdown-icon" src="{{ url_for('static', filename='img/app/dropdown.png') }}" alt="Dropdown"></a>
-                            <div class="dropdown-content">
-                                <ul>
-                                    <li><a href="{{ url_for('settings.index') }}">Settings</a></li>
-                                    <li><a href="{{ url_for('logout') }}">Logout</a></li>
-                                </ul>
-                            </div>
-                        </li>
+                    {% if 'user_id' in session and (('2fa_required' not in session or not session['2fa_required']) or
+                    ('2fa_verified' in session and session['2fa_verified'])) %}
+                    <li><a href="{{ url_for('inbox', username=session.username) }}">Inbox</a></li>
+                    <li><a href="{{ url_for('submit_message', username=session.username) }}">Submit Message</a></li>
+                    <li class="dropdown">
+                        <a href="#" class="dropbtn">@{{ session['username'] }} <img class="dropdown-icon"
+                                src="{{ url_for('static', filename='img/app/dropdown.png') }}" alt="Dropdown"></a>
+                        <div class="dropdown-content">
+                            <ul>
+                                <li><a href="{{ url_for('settings.index') }}">Settings</a></li>
+                                <li><a href="{{ url_for('logout') }}">Logout</a></li>
+                            </ul>
+                        </div>
+                    </li>
                     {% else %}
-                        <li><a href="{{ url_for('login') }}">Login</a></li>
-                        <li><a href="{{ url_for('register') }}">Register</a></li>
+                    <li><a href="{{ url_for('login') }}">Login</a></li>
+                    <li><a href="{{ url_for('register') }}">Register</a></li>
                     {% endif %}
                 </ul>
                 <a class="btn" href="https://opencollective.com/scidsg/"><span class="emoji">❤️</span> Donate</a>
@@ -76,13 +85,16 @@ <h1>🤫 Hush Line</h1>
 
     <footer>
         <p>
-            <a href="https://github.com/scidsg/hushline/blob/main/docs/PRIVACY.md" target="_blank" rel="noopener noreferrer">Privacy Policy</a> |
-            <a href="https://github.com/scidsg/hushline/blob/main/docs/TERMS.md" target="_blank" rel="noopener noreferrer">Terms of Service</a>
+            <a href="https://github.com/scidsg/hushline/blob/main/docs/PRIVACY.md" target="_blank"
+                rel="noopener noreferrer">Privacy Policy</a> |
+            <a href="https://github.com/scidsg/hushline/blob/main/docs/TERMS.md" target="_blank"
+                rel="noopener noreferrer">Terms of Service</a>
         </p>
     </footer>
     {% block scripts %}
     {% endblock %}
     <script src="{{ url_for('static', filename='js/nav.js') }}"></script>
 
 </body>
-</html>
+
+</html>
diff --git a/hushline/templates/confirm_disable_2fa.html b/hushline/templates/confirm_disable_2fa.html
@@ -2,10 +2,10 @@
 {% block title %}Settings{% endblock %}
 
 {% block content %}
-    <h2>Disable Two-Factor Authentication</h2>
-    <p>Are you sure you want to disable 2FA?</p>
-    <form method="POST" action="{{ url_for('settings.disable_2fa') }}">
-        <button type="submit">Yes, Disable 2FA</button>
-    </form>
-    <a href="{{ url_for('settings.index') }}">Cancel</a>
-{% endblock %}
+<h2>Disable Two-Factor Authentication</h2>
+<p>Are you sure you want to disable 2FA?</p>
+<form method="POST" action="{{ url_for('settings.disable_2fa') }}">
+    <button type="submit">Yes, Disable 2FA</button>
+</form>
+<a href="{{ url_for('settings.index') }}">Cancel</a>
+{% endblock %}
diff --git a/hushline/templates/directory.html b/hushline/templates/directory.html
@@ -3,15 +3,15 @@
 {% block content %}
 <h2>User Directory</h2>
 {% if not logged_in %}
-    <p class="helper">👋 Welcome to Hush Line! Find users who've opted into being listed below.</p>
+<p class="helper">👋 Welcome to Hush Line! Find users who've opted into being listed below.</p>
 {% endif %}
 <div class="directory-tabs">
     <ul class="tab-list">
         <li>
-          <button class="tab active" data-tab="verified" type="button">Verified</button>
+            <button class="tab active" data-tab="verified" type="button">Verified</button>
         </li>
         <li>
-          <button class="tab" data-tab="all"type="button">All</button>
+            <button class="tab" data-tab="all" type="button">All</button>
         </li>
     </ul>
 </div>
@@ -21,73 +21,80 @@ <h2>User Directory</h2>
 </div>
 <div id="verified" class="tab-content active">
     {% if not logged_in %}
-        <p class="meta dirMeta">⭐️ Verified accounts are offered to journalists, businesses, and other public figures and have manually verified their identities with a member of our staff. <a href="https://github.com/scidsg/hushline/blob/main/docs/3-managed-service.md#verified-accounts" target="_blank" rel="noopener noreferrer">Learn more about our verification process</a>.</p>
+    <p class="meta dirMeta">⭐️ Verified accounts are offered to journalists, businesses, and other public figures and
+        have manually verified their identities with a member of our staff. <a
+            href="https://github.com/scidsg/hushline/blob/main/docs/3-managed-service.md#verified-accounts"
+            target="_blank" rel="noopener noreferrer">Learn more about our verification process</a>.</p>
     {% endif %}
     <div class="user-list">
         {% for user in users %}
-            {% if user.is_verified and user.show_in_directory %}
-                <div class="user">
-                    <h3>{{ user.display_name or user.primary_username }}</h3>
-                    {% if user.primary_username %}
-                        <p class="meta">@{{ user.primary_username }}</p>
-                    {% endif %}
-                    {% if user.is_admin %}
-                    <div class="badgeContainer">
-                        <p class="badge">⚙️ Admin</p>
-                    </div>
-                    {% endif %}
-                    {% if user.bio %}
-                        <p class="bio">{{ user.bio }}</p>
-                    {% endif %}
-                    <div class="user-actions">
-                        <a href="/submit_message/{{ user.primary_username }}">Send a Message</a>
-                        {% if logged_in %}
-                            <a href="#" class="report-link" data-username="{{ user.primary_username }}" data-display-name="{{ user.display_name or user.primary_username }}" data-bio="{{ user.bio }}">Report Account</a>
-                        {% endif %}
-                    </div>
-                </div>
+        {% if user.is_verified and user.show_in_directory %}
+        <div class="user">
+            <h3>{{ user.display_name or user.primary_username }}</h3>
+            {% if user.primary_username %}
+            <p class="meta">@{{ user.primary_username }}</p>
             {% endif %}
+            {% if user.is_admin %}
+            <div class="badgeContainer">
+                <p class="badge">⚙️ Admin</p>
+            </div>
+            {% endif %}
+            {% if user.bio %}
+            <p class="bio">{{ user.bio }}</p>
+            {% endif %}
+            <div class="user-actions">
+                <a href="{{ url_for('submit_message', username=user.primary_username) }}">Send a Message</a>
+                {% if logged_in %}
+                <a href="#" class="report-link" data-username="{{ user.primary_username }}"
+                    data-display-name="{{ user.display_name or user.primary_username }}"
+                    data-bio="{{ user.bio }}">Report Account</a>
+                {% endif %}
+            </div>
+        </div>
+        {% endif %}
         {% else %}
-            <p class="empty-message"><span class="emoji-message">🙈</span><br>Nothing to see here...</p>
+        <p class="empty-message"><span class="emoji-message">🙈</span><br>Nothing to see here...</p>
         {% endfor %}
     </div>
 </div>
 <div id="all" class="tab-content">
     <div class="user-list">
         {% for user in users %}
-            {% if user.show_in_directory %}
-                <div class="user">
-                    <h3>{{ user.display_name or user.primary_username }}</h3>
-                    {% if user.primary_username %}
-                        <p class="meta">@{{ user.primary_username }}</p>
-                    {% endif %}
-                    {% if user.is_verified or user.is_admin %}
-                    <div class="badgeContainer">
-                        {% if user.is_verified %}
-                        <p class="badge">⭐️ Verified</p>
-                        {% endif %}
-                        {% if user.is_admin %}
-                        <p class="badge">⚙️ Admin</p>
-                        {% endif %}
-                    </div>
-                    {% endif %}
-                    {% if user.bio %}
-                        <p class="bio">{{ user.bio }}</p>
-                    {% endif %}
-                    <div class="user-actions">
-                        <a href="/submit_message/{{ user.primary_username }}">Send a Message</a>
-                        {% if logged_in %}
-                            <a href="#" class="report-link" data-username="{{ user.primary_username }}" data-display-name="{{ user.display_name or user.primary_username }}" data-bio="{{ user.bio }}">Report Account</a>
-                        {% endif %}
-                    </div>
-                </div>
+        {% if user.show_in_directory %}
+        <div class="user">
+            <h3>{{ user.display_name or user.primary_username }}</h3>
+            {% if user.primary_username %}
+            <p class="meta">@{{ user.primary_username }}</p>
+            {% endif %}
+            {% if user.is_verified or user.is_admin %}
+            <div class="badgeContainer">
+                {% if user.is_verified %}
+                <p class="badge">⭐️ Verified</p>
+                {% endif %}
+                {% if user.is_admin %}
+                <p class="badge">⚙️ Admin</p>
+                {% endif %}
+            </div>
             {% endif %}
+            {% if user.bio %}
+            <p class="bio">{{ user.bio }}</p>
+            {% endif %}
+            <div class="user-actions">
+                <a href="{{ url_for('submit_message', username=user.primary_username) }}">Send a Message</a>
+                {% if logged_in %}
+                <a href="#" class="report-link" data-username="{{ user.primary_username }}"
+                    data-display-name="{{ user.display_name or user.primary_username }}"
+                    data-bio="{{ user.bio }}">Report Account</a>
+                {% endif %}
+            </div>
+        </div>
+        {% endif %}
         {% else %}
-            <p class="empty-message"><span class="emoji-message">🙈</span><br>Nothing to see here...</p>
+        <p class="empty-message"><span class="emoji-message">🙈</span><br>Nothing to see here...</p>
         {% endfor %}
     </div>
 </div>
 {% endblock %}
 {% block scripts %}
 <script src="{{ url_for('static', filename='js/directory.js') }}"></script>
-{% endblock %}
+{% endblock %}
diff --git a/hushline/templates/inbox.html b/hushline/templates/inbox.html
@@ -2,35 +2,36 @@
 {% block title %}Inbox{% endblock %}
 
 {% block content %}
-    {% if messages %}
-        <h2>Inbox for {{ user.display_name or user.primary_username }}</h2>
-        {% for message in messages %}
-            <div class="message{% if 'BEGIN PGP MESSAGE' in message.content %} encrypted{% endif %}" data-encrypted-content="{{ message.content }}">
-                {% if not is_secondary %}
-                    {% if message.secondary_user_id %}
-                        {% set sender_info = secondary_usernames[message.secondary_user_id] %}
-                        <p class="message-label">📥 {{ sender_info.display_name or sender_info.username }}</p>
-                    {% elif secondary_usernames|length > 0 %}
-                        <p class="message-label">📥 {{ user.display_name or user.primary_username }}</p>
-                    {% endif %}
-                {% endif %}
-                <p class="decrypted-content">{{ message.content }}</p>
-                <div class="mailvelope-decryption-container" id="decryption-container-{{ message.id }}"></div>
-                <form action="{{ url_for('delete_message', message_id=message.id) }}" method="POST">
-                    <button type="submit" class="btn btn-danger" id="deleteMessageButton">Delete</button>
-                </form>
-            </div>
-        {% endfor %}
-    {% else %}
-        <div class="emptyState">
-            <img class="empty" src="{{ url_for('static', filename='img/app/empty.png') }}" alt="Empty Inbox">
-            <h1>Nothing to see here...</h1>
-            <p>No messages yet.</p>
-        </div>
+{% if messages %}
+<h2>Inbox for {{ user.display_name or user.primary_username }}</h2>
+{% for message in messages %}
+<div class="message{% if 'BEGIN PGP MESSAGE' in message.content %} encrypted{% endif %}"
+    data-encrypted-content="{{ message.content }}">
+    {% if not is_secondary %}
+    {% if message.secondary_user_id %}
+    {% set sender_info = secondary_usernames[message.secondary_user_id] %}
+    <p class="message-label">📥 {{ sender_info.display_name or sender_info.username }}</p>
+    {% elif secondary_usernames|length > 0 %}
+    <p class="message-label">📥 {{ user.display_name or user.primary_username }}</p>
     {% endif %}
+    {% endif %}
+    <p class="decrypted-content">{{ message.content }}</p>
+    <div class="mailvelope-decryption-container" id="decryption-container-{{ message.id }}"></div>
+    <form action="{{ url_for('delete_message', message_id=message.id) }}" method="POST">
+        <button type="submit" class="btn btn-danger" id="deleteMessageButton">Delete</button>
+    </form>
+</div>
+{% endfor %}
+{% else %}
+<div class="emptyState">
+    <img class="empty" src="{{ url_for('static', filename='img/app/empty.png') }}" alt="Empty Inbox">
+    <h1>Nothing to see here...</h1>
+    <p>No messages yet.</p>
+</div>
+{% endif %}
 {% endblock %}
 
 {% block scripts %}
 <script src="{{ url_for('static', filename='js/mailvelope.js') }}"></script>
 <script src="{{ url_for('static', filename='js/inbox.js') }}"></script>
-{% endblock %}
+{% endblock %}
diff --git a/hushline/templates/login.html b/hushline/templates/login.html
@@ -2,18 +2,18 @@
 {% block title %}Login{% endblock %}
 
 {% block content %}
-    <h2>Login</h2>
-    <form method="POST" action="/login">
-        {{ form.hidden_tag() }}
-        <div>
-            {{ form.username.label(for="username") }}
-            {{ form.username(id="username", required=True) }}
-        </div>
-        <div>
-            {{ form.password.label(for="password") }}
-            {{ form.password(id="password", required=True) }}
-        </div>
-        <button type="submit">Login</button>
-    </form>
-    <p>Don't have an account? <a href="/register">Register here</a></p>
-{% endblock %}
+<h2>Login</h2>
+<form method="POST" action="{{ url_for('login') }}">
+    {{ form.hidden_tag() }}
+    <div>
+        {{ form.username.label(for="username") }}
+        {{ form.username(id="username", required=True) }}
+    </div>
+    <div>
+        {{ form.password.label(for="password") }}
+        {{ form.password(id="password", required=True) }}
+    </div>
+    <button type="submit">Login</button>
+</form>
+<p>Don't have an account? <a href="{{ url_for('register') }}">Register here</a></p>
+{% endblock %}
diff --git a/hushline/templates/rate_limit_exceeded.html b/hushline/templates/rate_limit_exceeded.html
@@ -5,7 +5,7 @@
     <img class="empty" src="{{ url_for('static', filename='img/app/rate-limit.png') }}" alt="Rate Limit Exceeded">
     <h2>Rate Limit Exceeded</h2>
     <p>Light pierces shadows,<br>
-    Brave voice sparks hope's resurgence,<br>
-    New dawn from truth's stand.</p>
+        Brave voice sparks hope's resurgence,<br>
+        New dawn from truth's stand.</p>
 </div>
-{% endblock %}
+{% endblock %}