From 12df3fe9551bcab5d8d7f0ee2c47b1a891fe09b6 Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Mon, 3 Apr 2023 21:32:56 +0000
Subject: [PATCH] Add "Aliases" page

---
 CHANGELOG.md                 |  4 ++
 src/api/users.ts             |  9 ++++-
 src/router/index.ts          |  7 ++++
 src/views/Profile.vue        |  3 +-
 src/views/ProfileAliases.vue | 73 ++++++++++++++++++++++++++++++++++++
 src/views/Settings.vue       |  6 +++
 6 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 src/views/ProfileAliases.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 945879f..4f0963a 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/api/users.ts b/src/api/users.ts
index b2a57e9..fd3c1b7 100644
--- a/src/api/users.ts
+++ b/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) {
diff --git a/src/router/index.ts b/src/router/index.ts
index fd01d61..7d0645b 100644
--- a/src/router/index.ts
+++ b/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",
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 790fbf5..2263c00 100644
--- a/src/views/Profile.vue
+++ b/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
diff --git a/src/views/ProfileAliases.vue b/src/views/ProfileAliases.vue
new file mode 100644
index 0000000..7afd5b3
--- /dev/null
+++ b/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>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 268e46a..263447d 100644
--- a/src/views/Settings.vue
+++ b/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">