Add field to edit API key on profile

web/lib/firebase/users.ts

@@ -55,6 +55,13 @@ export async function updateUser(userId: string, update: Partial<User>) {
   await updateDoc(doc(db, 'users', userId), { ...update })
 }
 
+export async function updatePrivateUser(
+  userId: string,
+  update: Partial<PrivateUser>
+) {
+  await updateDoc(doc(db, 'private-users', userId), { ...update })
+}
+
 export function listenForUser(
   userId: string,
   setUser: (user: User | null) => void

web/pages/profile.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { RefreshIcon } from '@heroicons/react/outline'
 import Router from 'next/router'
 
 import { AddFundsButton } from 'web/components/add-funds-button'
@@ -13,7 +14,7 @@ import { uploadImage } from 'web/lib/firebase/storage'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { User } from 'common/user'
-import { updateUser } from 'web/lib/firebase/users'
+import { updateUser, updatePrivateUser } from 'web/lib/firebase/users'
 import { defaultBannerUrl } from 'web/components/user-page'
 import { SiteLink } from 'web/components/site-link'
 import Textarea from 'react-expanding-textarea'
@@ -63,6 +64,7 @@ export default function ProfilePage() {
   const [avatarLoading, setAvatarLoading] = useState(false)
   const [name, setName] = useState(user?.name || '')
   const [username, setUsername] = useState(user?.username || '')
+  const [apiKey, setApiKey] = useState(privateUser?.apiKey || '')
 
   useEffect(() => {
     if (user) {
@@ -72,6 +74,12 @@ export default function ProfilePage() {
     }
   }, [user])
 
+  useEffect(() => {
+    if (privateUser) {
+      setApiKey(privateUser.apiKey || '')
+    }
+  }, [privateUser])
+
   const updateDisplayName = async () => {
     const newName = cleanDisplayName(name)
 
@@ -103,6 +111,17 @@ export default function ProfilePage() {
     }
   }
 
+  const updateApiKey = async (e: React.MouseEvent) => {
+    const newApiKey = crypto.randomUUID()
+    if (user?.id != null) {
+      setApiKey(newApiKey)
+      await updatePrivateUser(user.id, { apiKey: newApiKey }).catch(() => {
+        setApiKey(privateUser?.apiKey || '')
+      })
+    }
+    e.preventDefault()
+  }
+
   const fileHandler = async (event: any) => {
     const file = event.target.files[0]
 
@@ -155,7 +174,6 @@ export default function ProfilePage() {
 
           <div>
             <label className="label">Display name</label>
-
             <input
               type="text"
               placeholder="Display name"
@@ -168,7 +186,6 @@ export default function ProfilePage() {
 
           <div>
             <label className="label">Username</label>
-
             <input
               type="text"
               placeholder="Username"
@@ -179,6 +196,25 @@ export default function ProfilePage() {
             />
           </div>
 
+          <div>
+            <label className="label">API key</label>
+            <div className="input-group w-full">
+              <input
+                type="text"
+                placeholder="Click refresh to generate key"
+                className="input input-bordered w-full"
+                value={apiKey}
+                readOnly
+              />
+              <button
+                className="btn btn-primary btn-square p-2"
+                onClick={updateApiKey}
+              >
+                <RefreshIcon />
+              </button>
+            </div>
+          </div>
+
           {user && (
             <>
               {/* TODO: Allow users with M$ 2000 of assets to set custom banners */}