client: refactor linking and routing

Print all links through new uri.js component
Refactor the router to use more predictable parsing
Fix linking to entities with weird names (that contain slashes, + etc.)

24 files changed, 54 insertions, 54 deletions

diff --git a/client/html/comment.tpl b/client/html/comment.tpl
index 04469c9..6bea704 100644
--- a/client/html/comment.tpl
+++ b/client/html/comment.tpl
@@ -1,7 +1,7 @@
 <div class='comment-container'>
     <div class='avatar'>
         <% if (ctx.user && ctx.user.name && ctx.canViewUsers) { %>
-            <a href='/user/<%- encodeURIComponent(ctx.user.name) %>'>
+            <a href='<%- ctx.formatClientLink('user', ctx.user.name) %>'>
         <% } %>
 
         <%= ctx.makeThumbnail(ctx.user ? ctx.user.avatarUrl : null) %>
@@ -23,7 +23,7 @@
             <nav class='readonly'><%
                 %><strong><span class='nickname'><%
                     %><% if (ctx.user && ctx.user.name && ctx.canViewUsers) { %><%
-                        %><a href='/user/<%- encodeURIComponent(ctx.user.name) %>'><%
+                        %><a href='<%- ctx.formatClientLink('user', ctx.user.name) %>'><%
                     %><% } %><%
 
                     %><%- ctx.user ? ctx.user.name : 'Deleted user' %><%
diff --git a/client/html/comments_page.tpl b/client/html/comments_page.tpl
index 4f956d4..b117bf9 100644
--- a/client/html/comments_page.tpl
+++ b/client/html/comments_page.tpl
@@ -4,7 +4,7 @@
             --><li><!--
                 --><div class='post-thumbnail'><!--
                     --><% if (ctx.canViewPosts) { %><!--
-                        --><a href='/post/<%- encodeURIComponent(post.id) %>'><!--
+                        --><a href='<%- ctx.formatClientLink('post', post.id) %>'><!--
                     --><% } %><!--
                         --><%= ctx.makeThumbnail(post.thumbnailUrl) %><!--
                     --><% if (ctx.canViewPosts) { %><!--
diff --git a/client/html/help.tpl b/client/html/help.tpl
index 5e80725..995ab0b 100644
--- a/client/html/help.tpl
+++ b/client/html/help.tpl
@@ -1,11 +1,11 @@
 <div class='content-wrapper' id='help'>
     <nav class='buttons primary'><!--
         --><ul><!--
-            --><li data-name='about'><a href='/help/about'>About</a></li><!--
-            --><li data-name='keyboard'><a href='/help/keyboard'>Keyboard</a></li><!--
-            --><li data-name='search'><a href='/help/search'>Search syntax</a></li><!--
-            --><li data-name='comments'><a href='/help/comments'>Comments</a></li><!--
-            --><li data-name='tos'><a href='/help/tos'>Terms of service</a></li><!--
+            --><li data-name='about'><a href='<%- ctx.formatClientLink('help', 'about') %>'>About</a></li><!--
+            --><li data-name='keyboard'><a href='<%- ctx.formatClientLink('help', 'keyboard') %>'>Keyboard</a></li><!--
+            --><li data-name='search'><a href='<%- ctx.formatClientLink('help', 'search') %>'>Search syntax</a></li><!--
+            --><li data-name='comments'><a href='<%- ctx.formatClientLink('help', 'comments') %>'>Comments</a></li><!--
+            --><li data-name='tos'><a href='<%- ctx.formatClientLink('help', 'tos') %>'>Terms of service</a></li><!--
         --></ul><!--
     --></nav>
 
diff --git a/client/html/help_search.tpl b/client/html/help_search.tpl
index 8c22d73..7073789 100644
--- a/client/html/help_search.tpl
+++ b/client/html/help_search.tpl
@@ -1,9 +1,9 @@
 <nav class='buttons secondary'><!--
     --><ul><!--
-        --><li data-name='default'><a href='/help/search'>General</a></li><!--
-        --><li data-name='posts'><a href='/help/search/posts'>Posts</a></li><!--
-        --><li data-name='users'><a href='/help/search/users'>Users</a></li><!--
-        --><li data-name='tags'><a href='/help/search/tags'>Tags</a></li><!--
+        --><li data-name='default'><a href='<%- ctx.formatClientLink('help', 'search') %>'>General</a></li><!--
+        --><li data-name='posts'><a href='<%- ctx.formatClientLink('help', 'search', 'posts') %>'>Posts</a></li><!--
+        --><li data-name='users'><a href='<%- ctx.formatClientLink('help', 'search', 'users') %>'>Users</a></li><!--
+        --><li data-name='tags'><a href='<%- ctx.formatClientLink('help', 'search', 'tags') %>'>Tags</a></li><!--
     --></ul><!--
 --></nav>
 
diff --git a/client/html/home.tpl b/client/html/home.tpl
index f1d9b1c..1e51b12 100644
--- a/client/html/home.tpl
+++ b/client/html/home.tpl
@@ -8,7 +8,7 @@
             <%= ctx.makeTextInput({name: 'search-text', placeholder: 'enter some tags'}) %>
             <input type='submit' value='Search'/>
             <span class=sep>or</span>
-            <a href='/posts'>browse all posts</a>
+            <a href='<%- ctx.formatClientLink('posts') %>'>browse all posts</a>
         </form>
     <% } %>
     <div class='post-info-container'></div>
diff --git a/client/html/home_footer.tpl b/client/html/home_footer.tpl
index 9ab9cd0..8f9cb10 100644
--- a/client/html/home_footer.tpl
+++ b/client/html/home_footer.tpl
@@ -2,6 +2,6 @@
     <li><%- ctx.postCount %> posts</li><span class='sep'>
     </span><li><%= ctx.makeFileSize(ctx.diskUsage) %></li><span class='sep'>
     </span><li>Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%- ctx.version %></a> from <%= ctx.makeRelativeTime(ctx.buildDate) %></li><span class='sep'>
-    </span><% if (ctx.canListSnapshots) { %><li><a href='/history'>History</a></li><span class='sep'>
+    </span><% if (ctx.canListSnapshots) { %><li><a href='<%- ctx.formatClientLink('history') %>'>History</a></li><span class='sep'>
     </span><% } %>
 </ul>
diff --git a/client/html/login.tpl b/client/html/login.tpl
index cc2a680..8ccc439 100644
--- a/client/html/login.tpl
+++ b/client/html/login.tpl
@@ -31,7 +31,7 @@
         <div class='buttons'>
             <input type='submit' value='Log in'/>
             <% if (ctx.canSendMails) { %>
-                <a class='append' href='/password-reset'>Forgot the password?</a>
+                <a class='append' href='<%- ctx.formatClientLink('password-reset') %>'>Forgot the password?</a>
             <% } %>
         </div>
     </form>
diff --git a/client/html/not_found.tpl b/client/html/not_found.tpl
index 15a7dfe..53bcdcd 100644
--- a/client/html/not_found.tpl
+++ b/client/html/not_found.tpl
@@ -1,5 +1,5 @@
 <div class='not-found'>
     <h1>Not found</h1>
     <p><%- ctx.path %> is not a valid URL.</p>
-    <p><a href='/'>Back to main page</a></p>
+    <p><a href='<%- ctx.formatClientLink() %>'>Back to main page</a></p>
 </div>
diff --git a/client/html/post_detail.tpl b/client/html/post_detail.tpl
index 5e04ab2..65ff786 100644
--- a/client/html/post_detail.tpl
+++ b/client/html/post_detail.tpl
@@ -2,9 +2,9 @@
     <h1>Post #<%- ctx.post.id %></h1>
     <nav class='buttons'><!--
         --><ul><!--
-            --><li><a href='/post/<%- ctx.post.id %>'><i class='fa fa-reply'></i> Main view</a></li><!--
+            --><li><a href='<%- ctx.formatClientLink('post', ctx.post.id) %>'><i class='fa fa-reply'></i> Main view</a></li><!--
             --><% if (ctx.canMerge) { %><!--
-                --><li data-name='merge'><a href='/post/<%- ctx.post.id %>/merge'>Merge with&hellip;</a></li><!--
+                --><li data-name='merge'><a href='<%- ctx.formatClientLink('post', ctx.post.id, 'merge') %>'>Merge with&hellip;</a></li><!--
             --><% } %><!--
         --></ul><!--
     --></nav>
diff --git a/client/html/post_readonly_sidebar.tpl b/client/html/post_readonly_sidebar.tpl
index 32dafd6..f29c8b6 100644
--- a/client/html/post_readonly_sidebar.tpl
+++ b/client/html/post_readonly_sidebar.tpl
@@ -67,14 +67,14 @@
                 --><% for (let tag of ctx.post.tags) { %><!--
                     --><li><!--
                         --><% if (ctx.canViewTags) { %><!--
-                        --><a href='/tag/<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
+                        --><a href='<%- ctx.formatClientLink('tag', tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
                             --><i class='fa fa-tag'></i><!--
                         --><% } %><!--
                         --><% if (ctx.canViewTags) { %><!--
                             --></a><!--
                         --><% } %><!--
                         --><% if (ctx.canListPosts) { %><!--
-                            --><a href='/posts/query=<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
+                            --><a href='<%- ctx.formatClientLink('posts', {query: tag}) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
                         --><% } %><!--
                             --><%- tag %>&#32;<!--
                         --><% if (ctx.canListPosts) { %><!--
diff --git a/client/html/posts_header.tpl b/client/html/posts_header.tpl
index e34f061..54c9ab1 100644
--- a/client/html/posts_header.tpl
+++ b/client/html/posts_header.tpl
@@ -8,7 +8,7 @@
         %><input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/><%
         %><input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/><%
         %><wbr/><%
-        %><a class='mousetrap button append' href='/help/search/posts'>Syntax help</a><%
+        %><a class='mousetrap button append' href='<%- ctx.formatClientLink('help', 'search', 'posts') %>'>Syntax help</a><%
         %><% if (ctx.canMassTag) { %><%
             %><wbr/><%
             %><span class='masstag'><%
diff --git a/client/html/posts_page.tpl b/client/html/posts_page.tpl
index e6e5612..9c9f7ef 100644
--- a/client/html/posts_page.tpl
+++ b/client/html/posts_page.tpl
@@ -5,7 +5,7 @@
                 <li>
                     <a class='thumbnail-wrapper <%= post.tags.length > 0 ? "tags" : "no-tags" %>'
                             title='@<%- post.id %> (<%- post.type %>)&#10;&#10;Tags: <%- post.tags.map(tag => '#' + tag).join(' ') || 'none' %>'
-                            href='<%= ctx.canViewPosts ? ctx.getPostUrl(post.id, ctx.parameters) : "" %>'>
+                            href='<%= ctx.canViewPosts ? ctx.getPostUrl(post.id, ctx.parameters) : '' %>'>
                         <%= ctx.makeThumbnail(post.thumbnailUrl) %>
                         <span class='type' data-type='<%- post.type %>'>
                             <%- post.type %>
diff --git a/client/html/settings.tpl b/client/html/settings.tpl
index 258b941..6d65d01 100644
--- a/client/html/settings.tpl
+++ b/client/html/settings.tpl
@@ -5,7 +5,7 @@
         <ul class='input'>
             <li>
                 <%= ctx.makeCheckbox({
-                    text: "Enable keyboard shortcuts <a class='append icon' href='/help/keyboard'><i class='fa fa-question-circle-o'></i></a>",
+                    text: "Enable keyboard shortcuts <a class='append icon' href='" + ctx.formatClientLink('help', 'keyboard') + "'><i class='fa fa-question-circle-o'></i></a>",
                     name: 'keyboard-shortcuts',
                     checked: ctx.browsingSettings.keyboardShortcuts,
                 }) %>
diff --git a/client/html/tag.tpl b/client/html/tag.tpl
index 52f754d..497790e 100644
--- a/client/html/tag.tpl
+++ b/client/html/tag.tpl
@@ -2,15 +2,15 @@
     <h1><%- ctx.tag.names[0] %></h1>
     <nav class='buttons'><!--
         --><ul><!--
-            --><li data-name='summary'><a href='/tag/<%- encodeURIComponent(ctx.tag.names[0]) %>'>Summary</a></li><!--
+            --><li data-name='summary'><a href='<%- ctx.formatClientLink('tag', ctx.tag.names[0]) %>'>Summary</a></li><!--
             --><% if (ctx.canEditAnything) { %><!--
-                --><li data-name='edit'><a href='/tag/<%- encodeURIComponent(ctx.tag.names[0]) %>/edit'>Edit</a></li><!--
+                --><li data-name='edit'><a href='<%- ctx.formatClientLink('tag', ctx.tag.names[0], 'edit') %>'>Edit</a></li><!--
             --><% } %><!--
             --><% if (ctx.canMerge) { %><!--
-                --><li data-name='merge'><a href='/tag/<%- encodeURIComponent(ctx.tag.names[0]) %>/merge'>Merge with&hellip;</a></li><!--
+                --><li data-name='merge'><a href='<%- ctx.formatClientLink('tag', ctx.tag.names[0], 'merge') %>'>Merge with&hellip;</a></li><!--
             --><% } %><!--
             --><% if (ctx.canDelete) { %><!--
-                --><li data-name='delete'><a href='/tag/<%- encodeURIComponent(ctx.tag.names[0]) %>/delete'>Delete</a></li><!--
+                --><li data-name='delete'><a href='<%- ctx.formatClientLink('tag', ctx.tag.names[0], 'delete') %>'>Delete</a></li><!--
             --><% } %><!--
         --></ul><!--
     --></nav>
diff --git a/client/html/tag_category_row.tpl b/client/html/tag_category_row.tpl
index 3ec199c..dcc8c16 100644
--- a/client/html/tag_category_row.tpl
+++ b/client/html/tag_category_row.tpl
@@ -19,7 +19,7 @@
     </td>
     <td class='usages'>
         <% if (ctx.tagCategory.name) { %>
-            <a href='/tags/query=category:<%- encodeURIComponent(ctx.tagCategory.name) %>'>
+            <a href='<%- ctx.formatClientLink('tags', {query: 'category:' + ctx.tagCategory.name}) %>'>
                 <%- ctx.tagCategory.tagCount %>
             </a>
         <% } else { %>
diff --git a/client/html/tag_delete.tpl b/client/html/tag_delete.tpl
index 7dbfc1e..e7be8cf 100644
--- a/client/html/tag_delete.tpl
+++ b/client/html/tag_delete.tpl
@@ -1,6 +1,6 @@
 <div class='tag-delete'>
     <form>
-        <p>This tag has <a href='/posts/query=<%- encodeURIComponent(ctx.tag.names[0]) %>'><%- ctx.tag.postCount %> usage(s)</a>.</p>
+        <p>This tag has <a href='<%- ctx.formatClientLink('posts', {query: ctx.tag.names[0]}) %>'><%- ctx.tag.postCount %> usage(s)</a>.</p>
 
         <ul class='input'>
             <li>
diff --git a/client/html/tag_summary.tpl b/client/html/tag_summary.tpl
index 6938e34..0513d64 100644
--- a/client/html/tag_summary.tpl
+++ b/client/html/tag_summary.tpl
@@ -36,6 +36,6 @@
     <section class='description'>
         <hr/>
         <%= ctx.makeMarkdown(ctx.tag.description || 'This tag has no description yet.') %>
-        <p>This tag has <a href='/posts/query=<%- encodeURIComponent(ctx.tag.names[0]) %>'><%- ctx.tag.postCount %> usage(s)</a>.</p>
+        <p>This tag has <a href='<%- ctx.formatClientLink('posts', {query: ctx.tag.names[0]}) %>'><%- ctx.tag.postCount %> usage(s)</a>.</p>
     </section>
 </div>
diff --git a/client/html/tags_header.tpl b/client/html/tags_header.tpl
index ed64127..59c5bcb 100644
--- a/client/html/tags_header.tpl
+++ b/client/html/tags_header.tpl
@@ -8,9 +8,9 @@
 
         <div class='buttons'>
             <input type='submit' value='Search'/>
-            <a class='button append' href='/help/search/tags'>Syntax help</a>
+            <a class='button append' href='<%- ctx.formatClientLink('help', 'search', 'tags') %>'>Syntax help</a>
             <% if (ctx.canEditTagCategories) { %>
-                <a class='append' href='/tag-categories'>Tag categories</a>
+                <a class='append' href='<%- ctx.formatClientLink('tag-categories') %>'>Tag categories</a>
             <% } %>
         </div>
     </form>
diff --git a/client/html/tags_page.tpl b/client/html/tags_page.tpl
index d66b342..f27f49e 100644
--- a/client/html/tags_page.tpl
+++ b/client/html/tags_page.tpl
@@ -4,37 +4,37 @@
             <thead>
                 <th class='names'>
                     <% if (ctx.query == 'sort:name' || !ctx.query) { %>
-                        <a href='/tags/query=-sort:name'>Tag name(s)</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: '-sort:name'}) %>'>Tag name(s)</a>
                     <% } else { %>
-                        <a href='/tags/query=sort:name'>Tag name(s)</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: 'sort:name'}) %>'>Tag name(s)</a>
                     <% } %>
                 </th>
                 <th class='implications'>
                     <% if (ctx.query == 'sort:implication-count') { %>
-                        <a href='/tags/query=-sort:implication-count'>Implications</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: '-sort:implication-count'}) %>'>Implications</a>
                     <% } else { %>
-                        <a href='/tags/query=sort:implication-count'>Implications</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: 'sort:implication-count'}) %>'>Implications</a>
                     <% } %>
                 </th>
                 <th class='suggestions'>
                     <% if (ctx.query == 'sort:suggestion-count') { %>
-                        <a href='/tags/query=-sort:suggestion-count'>Suggestions</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: '-sort:suggestion-count'}) %>'>Suggestions</a>
                     <% } else { %>
-                        <a href='/tags/query=sort:suggestion-count'>Suggestions</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: 'sort:suggestion-count'}) %>'>Suggestions</a>
                     <% } %>
                 </th>
                 <th class='usages'>
                     <% if (ctx.query == 'sort:usages') { %>
-                        <a href='/tags/query=-sort:usages'>Usages</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: '-sort:usages'}) %>'>Usages</a>
                     <% } else { %>
-                        <a href='/tags/query=sort:usages'>Usages</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: 'sort:usages'}) %>'>Usages</a>
                     <% } %>
                 </th>
                 <th class='creation-time'>
                     <% if (ctx.query == 'sort:creation-time') { %>
-                        <a href='/tags/query=-sort:creation-time'>Created on</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: '-sort:creation-time'}) %>'>Created on</a>
                     <% } else { %>
-                        <a href='/tags/query=sort:creation-time'>Created on</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: 'sort:creation-time'}) %>'>Created on</a>
                     <% } %>
                 </th>
             </thead>
diff --git a/client/html/user.tpl b/client/html/user.tpl
index 4e7d00a..28e34e6 100644
--- a/client/html/user.tpl
+++ b/client/html/user.tpl
@@ -2,12 +2,12 @@
     <h1><%- ctx.user.name %></h1>
     <nav class='buttons'><!--
         --><ul><!--
-            --><li data-name='summary'><a href='/user/<%- encodeURIComponent(ctx.user.name) %>'>Summary</a></li><!--
+            --><li data-name='summary'><a href='<%- ctx.formatClientLink('user', ctx.user.name) %>'>Summary</a></li><!--
             --><% if (ctx.canEditAnything) { %><!--
-                --><li data-name='edit'><a href='/user/<%- encodeURIComponent(ctx.user.name) %>/edit'>Account settings</a></li><!--
+                --><li data-name='edit'><a href='<%- ctx.formatClientLink('user', ctx.user.name, 'edit') %>'>Account settings</a></li><!--
             --><% } %><!--
             --><% if (ctx.canDelete) { %><!--
-                --><li data-name='delete'><a href='/user/<%- encodeURIComponent(ctx.user.name) %>/delete'>Account deletion</a></li><!--
+                --><li data-name='delete'><a href='<%- ctx.formatClientLink('user', ctx.user.name, 'delete') %>'>Account deletion</a></li><!--
             --><% } %><!--
         --></ul><!--
     --></nav>
diff --git a/client/html/user_registration.tpl b/client/html/user_registration.tpl
index e0e0f81..a6d291f 100644
--- a/client/html/user_registration.tpl
+++ b/client/html/user_registration.tpl
@@ -51,6 +51,6 @@
             <li><i class='fa fa-star-half-o'></i> vote up/down on posts and comments</li>
         </ul>
         <hr/>
-        <p>By creating an account, you are agreeing to the <a href='/help/tos'>Terms of Service</a>.</p>
+        <p>By creating an account, you are agreeing to the <a href='<%- ctx.formatClientLink('help', 'tos') %>'>Terms of Service</a>.</p>
     </div>
 </div>
diff --git a/client/html/user_summary.tpl b/client/html/user_summary.tpl
index b2d40ac..1a33a57 100644
--- a/client/html/user_summary.tpl
+++ b/client/html/user_summary.tpl
@@ -10,9 +10,9 @@
         <nav>
             <p><strong>Quick links</strong></p>
             <ul>
-                <li><a href='/posts/query=submit:<%- encodeURIComponent(ctx.user.name) %>'><%- ctx.user.uploadedPostCount %> uploads</a></li>
-                <li><a href='/posts/query=fav:<%- encodeURIComponent(ctx.user.name) %>'><%- ctx.user.favoritePostCount %> favorites</a></li>
-                <li><a href='/posts/query=comment:<%- encodeURIComponent(ctx.user.name) %>'><%- ctx.user.commentCount %> comments</a></li>
+                <li><a href='<%- ctx.formatClientLink('posts', {query: 'submit:' + ctx.user.name}) %>'><%- ctx.user.uploadedPostCount %> uploads</a></li>
+                <li><a href='<%- ctx.formatClientLink('posts', {query: 'fav:' + ctx.user.name}) %>'><%- ctx.user.favoritePostCount %> favorites</a></li>
+                <li><a href='<%- ctx.formatClientLink('posts', {query: 'comment:' + ctx.user.name}) %>'><%- ctx.user.commentCount %> comments</a></li>
             </ul>
         </nav>
 
@@ -20,8 +20,8 @@
             <nav>
                 <p><strong>Only visible to you</strong></p>
                 <ul>
-                    <li><a href='/posts/query=special:liked'><%- ctx.user.likedPostCount %> liked posts</a></li>
-                    <li><a href='/posts/query=special:disliked'><%- ctx.user.dislikedPostCount %> disliked posts</a></li>
+                    <li><a href='<%- ctx.formatClientLink('posts', {query: 'special:liked'}) %>'><%- ctx.user.likedPostCount %> liked posts</a></li>
+                    <li><a href='<%- ctx.formatClientLink('posts', {query: 'special:disliked'}) %>'><%- ctx.user.dislikedPostCount %> disliked posts</a></li>
                 </ul>
             </nav>
         <% } %>
diff --git a/client/html/users_header.tpl b/client/html/users_header.tpl
index 6cefe55..7faab8e 100644
--- a/client/html/users_header.tpl
+++ b/client/html/users_header.tpl
@@ -8,7 +8,7 @@
 
         <div class='buttons'>
             <input type='submit' value='Search'/>
-            <a class='append' href='/help/search/users'>Syntax help</a>
+            <a class='append' href='<%- ctx.formatClientLink('help', 'search', 'users') %>'>Syntax help</a>
         </div>
     </form>
 </div>
diff --git a/client/html/users_page.tpl b/client/html/users_page.tpl
index 61b07f8..6cb04d3 100644
--- a/client/html/users_page.tpl
+++ b/client/html/users_page.tpl
@@ -4,7 +4,7 @@
             --><li>
                 <div class='wrapper'>
                     <% if (ctx.canViewUsers) { %>
-                        <a class='image' href='/user/<%- encodeURIComponent(user.name) %>'>
+                        <a class='image' href='<%- ctx.formatClientLink('user', user.name) %>'>
                     <% } %>
                         <%= ctx.makeThumbnail(user.avatarUrl) %>
                     <% if (ctx.canViewUsers) { %>
@@ -12,7 +12,7 @@
                     <% } %>
                     <div class='details'>
                         <% if (ctx.canViewUsers) { %>
-                            <a href='/user/<%- encodeURIComponent(user.name) %>'>
+                            <a href='<%- ctx.formatClientLink('user', user.name) %>'>
                         <% } %>
                             <%- user.name %>
                         <% if (ctx.canViewUsers) { %>