refactor: migrate the frontend from AngularJS to Vue 3

This commit is contained in:
tdurieux
2026-09-09 13:19:53 +02:00
parent dc0ef022fb
commit 4a18f94631
65 changed files with 6164 additions and 8425 deletions
+27 -91
View File
@@ -1,68 +1,39 @@
<nav
class="navbar navbar-expand-lg"
ng-class="{'navbar-dark': isDarkMode}"
>
<nav class="navbar navbar-expand-lg" :class="{&#x27;navbar-dark&#x27;: isDarkMode}">
<a class="navbar-brand" href="/">Anonymous <em>GitHub</em></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item" ng-if="!user">
<a class="nav-link" ng-class="{'active': path == '/'}" href="/">
<li class="nav-item" v-if="!user">
<a class="nav-link" href="/" :class="{&#x27;active&#x27;: path == &#x27;/&#x27;}">
Home
</a>
</li>
<li class="nav-item" ng-if="user">
<a
class="nav-link"
ng-class="{'active': path == '/dashboard'}"
href="/dashboard"
>
<li class="nav-item" v-if="user">
<a class="nav-link" href="/dashboard" :class="{&#x27;active&#x27;: path == &#x27;/dashboard&#x27;}">
<i class="fas fa-th-large d-lg-none mr-1"></i>
My work
</a>
</li>
<li class="nav-item" ng-if="user">
<a
class="nav-link"
ng-class="{'active':path == '/anonymize' || path == '/pull-request-anonymize'}"
href="/anonymize"
>
<li class="nav-item" v-if="user">
<a class="nav-link" href="/anonymize" :class="{&#x27;active&#x27;:path == &#x27;/anonymize&#x27; || path == &#x27;/pull-request-anonymize&#x27;}">
<i class="fas fa-user-secret d-lg-none mr-1"></i>
Anonymize
</a>
</li>
<li class="nav-item" ng-if="user">
<a
class="nav-link"
ng-class="{'active':path == '/conferences'}"
href="/conferences"
>
<li class="nav-item" v-if="user">
<a class="nav-link" href="/conferences" :class="{&#x27;active&#x27;:path == &#x27;/conferences&#x27;}">
<i class="fas fa-chalkboard-teacher d-lg-none mr-1"></i>
Conferences
</a>
</li>
<li class="nav-item">
<a class="nav-link" ng-class="{'active':path == '/faq'}" href="/faq"
><i class="fas fa-question-circle d-lg-none mr-1"></i>FAQ</a
>
<a class="nav-link" href="/faq" :class="{&#x27;active&#x27;:path == &#x27;/faq&#x27;}"><i class="fas fa-question-circle d-lg-none mr-1"></i>FAQ</a>
</li>
<li class="nav-item" ng-if="user && user.isAdmin">
<a
class="nav-link"
ng-class="{'active':path.indexOf('/admin') === 0}"
href="/admin/"
>
<li class="nav-item" v-if="user &amp;&amp; user?.isAdmin">
<a class="nav-link" href="/admin/" :class="{&#x27;active&#x27;:path?.indexOf(&#x27;/admin&#x27;) === 0}">
<i class="fas fa-cog d-lg-none mr-1"></i>
Admin
</a>
@@ -70,71 +41,40 @@
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a
class="nav-link nav-icon"
target="_blank"
href="https://github.com/tdurieux/anonymous_github/"
title="Anonymous GitHub source code"
aria-label="Anonymous GitHub source code on GitHub"
rel="noopener"
data-offset="30"
><i class="fab fa-github" aria-hidden="true"></i
></a>
<a class="nav-link nav-icon" target="_blank" href="https://github.com/tdurieux/anonymous_github/" title="Anonymous GitHub source code" aria-label="Anonymous GitHub source code on GitHub" rel="noopener" data-offset="30"><i class="fab fa-github" aria-hidden="true"></i></a>
</li>
<!-- "Report a bug" is about this service. Reviewers who land on an
anonymized repository often think it is about the paper, so the
label names the service and the tooltip says who to contact. -->
<li class="nav-item d-none d-lg-block">
<a
class="nav-link"
target="_blank"
rel="noopener"
href="https://github.com/tdurieux/anonymous_github/issues/new?template=issue_report.yml"
title="Report a problem with the Anonymous GitHub service. Questions about an anonymized repository or paper go to its authors."
data-offset="30"
><i class="fas fa-bug d-lg-none mr-1" aria-hidden="true"></i>Report a bug
<a class="nav-link" target="_blank" rel="noopener" href="https://github.com/tdurieux/anonymous_github/issues/new?template=issue_report.yml" title="Report a problem with the Anonymous GitHub service. Questions about an anonymized repository or paper go to its authors." data-offset="30"><i class="fas fa-bug d-lg-none mr-1" aria-hidden="true"></i>Report a bug
</a>
</li>
<li class="nav-item" ng-if="!isDarkMode">
<a class="nav-link nav-icon" href="#" ng-click="darkMode(true);" title="Switch to dark mode" aria-label="Switch to dark mode" role="button">
<li class="nav-item" v-if="!isDarkMode">
<a class="nav-link nav-icon" href="#" title="Switch to dark mode" aria-label="Switch to dark mode" role="button" @click.prevent="darkMode(true);">
<i class="fas fa-moon" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item" ng-if="isDarkMode">
<a class="nav-link nav-icon" href="#" ng-click="darkMode(false);" title="Switch to light mode" aria-label="Switch to light mode" role="button">
<li class="nav-item" v-if="isDarkMode">
<a class="nav-link nav-icon" href="#" title="Switch to light mode" aria-label="Switch to light mode" role="button" @click.prevent="darkMode(false);">
<i class="fas fa-sun" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item" ng-if="!user">
<a class="nav-link btn-signin" target="_self" href="/github/login" data-offset="30"
><i class="fab fa-github mr-1"></i>
<li class="nav-item" v-if="!user">
<a class="nav-link btn-signin" target="_self" href="/github/login" data-offset="30"><i class="fab fa-github mr-1"></i>
Sign in
</a>
</li>
<li class="nav-item dropdown user-chip-wrap" ng-if="user">
<a
class="nav-link user-chip dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<img
ng-src="{{user.photo}}"
ng-if="user.photo"
width="22"
height="22"
class="rounded-circle"
/>
<span class="user-chip-name">{{user.username}}</span>
<li class="nav-item dropdown user-chip-wrap" v-if="user">
<a class="nav-link user-chip dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img width="22" height="22" class="rounded-circle" v-if="user?.photo" :src="safeUrl((user?.photo))">
<span class="user-chip-name">{{ user?.username }}</span>
</a>
<div class="dropdown-menu dropdown-menu-right user-menu" aria-labelledby="navbarDropdownMenuLink">
<h6 class="dropdown-header">Signed in as @{{user.username}}</h6>
<h6 class="dropdown-header">Signed in as @{{ user?.username }}</h6>
<a class="dropdown-item" href="/profile">
<i class="fas fa-sliders-h" aria-hidden="true"></i>
<span>Settings<small>Defaults, quotas, account</small></span>
@@ -162,8 +102,4 @@
</ul>
</div>
</nav>
<div
class="navbar shadow generalMessage"
ng-bind-html="generalMessage"
ng-if="generalMessage"
></div>
<div class="navbar shadow generalMessage" v-if="generalMessage" v-html="sanitize(generalMessage)"></div>