Add "Aliases" page

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Added
+
+- Added "Aliases" page.
+
 ## [1.19.0] - 2023-03-30
 
 ### Added

src/api/users.ts

@@ -354,8 +354,13 @@ export async function createIdentityProof(
   }
 }
 
-export async function getAliases(profileId: string): Promise<Profile[]> {
-  const url = `${BACKEND_URL}/api/v1/accounts/${profileId}/aliases`
+export interface Aliases {
+  declared: Profile[],
+  verified: Profile[],
+}
+
+export async function getAliases(profileId: string): Promise<Aliases> {
+  const url = `${BACKEND_URL}/api/v1/accounts/${profileId}/aliases/all`
   const response = await http(url)
   const data = await response.json()
   if (response.status !== 200) {

src/router/index.ts

@@ -8,6 +8,7 @@ import ImportFollows from "@/views/ImportFollows.vue"
 import LandingPage from "@/views/LandingPage.vue"
 import MoveFollowers from "@/views/MoveFollowers.vue"
 import NotificationList from "@/views/NotificationList.vue"
+import ProfileAliases from "@/views/ProfileAliases.vue"
 import ProfileDirectory from "@/views/ProfileDirectory.vue"
 import ProfileView from "@/views/Profile.vue"
 import ProfileForm from "@/views/ProfileForm.vue"
@@ -142,6 +143,12 @@ const routes: Array<RouteRecordRaw> = [
     component: ProfileForm,
     meta: { onlyAuthenticated: true },
   },
+  {
+    path: "/settings/aliases",
+    name: "settings-aliases",
+    component: ProfileAliases,
+    meta: { onlyAuthenticated: true },
+  },
   {
     path: "/settings/move-followers",
     name: "move-followers",

src/views/Profile.vue

@@ -351,7 +351,8 @@ onMounted(async () => {
     )
   }
   if (profile.identity_proofs.length > 0) {
-    aliases = await getAliases(profile.id)
+    const { verified } = await getAliases(profile.id)
+    aliases = verified
   }
   await switchTab("posts")
   isLoading = false

src/views/ProfileAliases.vue

@@ -0,0 +1,73 @@
+<template>
+  <sidebar-layout>
+    <template #content>
+      <h1>Aliases</h1>
+      <section v-if="aliases.declared.length > 0">
+        <h2>Not verified</h2>
+        <router-link
+          v-for="profile in aliases.declared"
+          :key="profile.id"
+          :to="{ name: 'profile-by-acct', params: { acct: profile.acct } }"
+        >
+          <profile-list-item :profile="profile"></profile-list-item>
+        </router-link>
+      </section>
+      <section v-if="aliases.verified.length > 0">
+        <h2>Verified</h2>
+        <router-link
+          v-for="profile in aliases.verified"
+          :key="profile.id"
+          :to="{ name: 'profile-by-acct', params: { acct: profile.acct } }"
+        >
+          <profile-list-item :profile="profile"></profile-list-item>
+        </router-link>
+      </section>
+      <div class="not-found" v-if="isEmpty() && !isLoading">
+        No aliases found
+      </div>
+      <loader v-if="isLoading"></loader>
+    </template>
+  </sidebar-layout>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "vue"
+import { $, $ref } from "vue/macros"
+
+import { getAliases, Aliases } from "@/api/users"
+import SidebarLayout from "@/components/SidebarLayout.vue"
+import Loader from "@/components/Loader.vue"
+import ProfileListItem from "@/components/ProfileListItem.vue"
+import { useCurrentUser } from "@/store/user"
+
+const { ensureCurrentUser } = $(useCurrentUser())
+
+let aliases = $ref<Aliases>({ declared: [], verified: [] })
+let isLoading = $ref(false)
+
+onMounted(async () => {
+  isLoading = true
+  aliases = await getAliases(ensureCurrentUser().id)
+  isLoading = false
+})
+
+function isEmpty(): boolean {
+  return aliases.declared.length === 0 && aliases.verified.length === 0
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+
+section {
+  margin-bottom: $block-outer-padding;
+}
+
+.profile {
+  margin-bottom: $block-outer-padding;
+}
+
+.loader {
+  margin: $block-outer-padding auto;
+}
+</style>

src/views/Settings.vue

@@ -34,6 +34,12 @@
           </div>
         </form>
       </section>
+      <section>
+        <h2>Aliases</h2>
+        <router-link class="btn" :to="{ name: 'settings-aliases' }">
+          Manage aliases
+        </router-link>
+      </section>
       <section>
         <h2>Export</h2>
         <table class="export">