Add identity verification page

src/api/users.ts

@@ -265,10 +265,11 @@ export async function sendSignedUpdate(
 
 export async function getIdentityClaim(
   authToken: string,
-  walletAddress: string,
+  proofType: "ethereum" | "minisign",
+  signer: string,
 ): Promise<{ did: string, claim: string }> {
   const url = `${BACKEND_URL}/api/v1/accounts/identity_proof`
-  const queryParams = { proof_type: "ethereum", signer: walletAddress }
+  const queryParams = { proof_type: proofType, signer }
   const response = await http(url, { authToken, queryParams })
   const data = await response.json()
   return data
@@ -284,7 +285,7 @@ export async function createIdentityProof(
     method: "POST",
     json: {
       did: did,
-      signature: signature.replace(/0x/, ""),
+      signature: signature.replace(/^0x/, ""),
     },
     authToken,
   })

src/composables/ethereum-address-verification.ts

@@ -13,7 +13,11 @@ async function verifyEthereumAddress(): Promise<User | null> {
   }
   const walletAddress = await signer.getAddress()
   const authToken = ensureAuthToken()
-  const { did, claim } = await getIdentityClaim(authToken, walletAddress)
+  const { did, claim } = await getIdentityClaim(
+    authToken,
+    "ethereum",
+    walletAddress,
+  )
   const signature = await getWalletSignature(signer, claim)
   const user = await createIdentityProof(
     authToken,

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
 
 import AboutPage from "@/views/About.vue"
 import HomeTimeline from "@/views/HomeTimeline.vue"
+import IdentityProof from "@/views/IdentityProof.vue"
 import LandingPage from "../views/LandingPage.vue"
 import NotificationList from "../views/NotificationList.vue"
 import ProfileDirectory from "../views/ProfileDirectory.vue"
@@ -119,6 +120,12 @@ const routes: Array<RouteRecordRaw> = [
     component: ProfileForm,
     meta: { onlyAuthenticated: true },
   },
+  {
+    path: "/settings/identity-proof",
+    name: "identity-proof",
+    component: IdentityProof,
+    meta: { onlyAuthenticated: true },
+  },
   {
     path: "/subscriptions/settings",
     name: "subscriptions-settings",

src/views/IdentityProof.vue

@@ -0,0 +1,87 @@
+<template>
+  <sidebar-layout>
+    <template #content>
+      <h1>Link minisign key</h1>
+      <form class="identity-proof">
+        <input
+          type="text"
+          id="key"
+          placeholder="Public key (minisign -G)"
+          v-model="key"
+        >
+        <code v-if="identityClaim" class="message">
+          {{ identityClaim }}
+        </code>
+        <input
+          type="text"
+          id="signature"
+          placeholder="Signature (minisign -Sm data.txt)"
+          v-model="signature"
+          v-if="did"
+        >
+        <button
+          type="submit"
+          class="btn"
+          :disabled="!canSubmit()"
+          @click.prevent="submit()"
+        >
+          Submit
+        </button>
+      </form>
+    </template>
+  </sidebar-layout>
+</template>
+
+<script setup lang="ts">
+import { $, $ref } from "vue/macros"
+import { useRouter } from "vue-router"
+
+import { createIdentityProof, getIdentityClaim } from "@/api/users"
+import SidebarLayout from "@/components/SidebarLayout.vue"
+import { useCurrentUser } from "@/store/user"
+
+const router = useRouter()
+const { ensureAuthToken, currentUser } = $(useCurrentUser())
+
+const key = $ref("")
+const signature = $ref("")
+let did = $ref<string | null>(null)
+let identityClaim = $ref<string | null>(null)
+
+function canSubmit(): boolean {
+  return (did === null && key.length > 0) || (did !== null && signature.length > 0)
+}
+
+async function submit() {
+  if (currentUser === null) {
+    return
+  }
+  const authToken = ensureAuthToken()
+  if (did === null && key.length > 0) {
+    const data = await getIdentityClaim(authToken, "minisign", key)
+    did = data.did
+    identityClaim = data.claim
+  } else if (did !== null && signature.length > 0) {
+    await createIdentityProof(
+      authToken,
+      did,
+      signature,
+    )
+    router.push({ name: "profile", params: { profileId: currentUser.id } })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+
+.identity-proof {
+  display: flex;
+  flex-direction: column;
+  gap: $block-inner-padding;
+}
+
+.message {
+  word-wrap: break-word;
+}
+</style>

src/views/Profile.vue

@@ -52,6 +52,14 @@
                   Link ethereum address
                 </button>
               </li>
+              <li v-if="isCurrentUser()">
+                <router-link
+                  title="Link minisign key"
+                  :to="{ name: 'identity-proof' }"
+                >
+                  Link minisign key
+                </router-link>
+              </li>
               <li v-if="canVerifyEthereumAddress()">
                 <button
                   title="Send signed update"