🍣 implementing finder login

src/common/crypto.ts

@@ -1,3 +1,6 @@
+import { getExtensionSettingsAsync } from "./settings"
+import { setSetting } from "./useSettings"
+
 export async function generateKeys() {
     const keys = await window.crypto.subtle.generateKey(
         {
@@ -53,4 +56,33 @@ export async function sign(data: string, privateKey: string) {
         await importPrivateKey(privateKey),
         Buffer.from(data)
     )).toString('base64')
+}
+
+export async function loginAndSetNickname() {
+    const settings = await getExtensionSettingsAsync()
+
+    let nickname;
+    while (true)
+    {
+        nickname = prompt("Pick a nickname")
+        if (nickname) break
+        if (nickname === null) return
+        alert("Invalid nickname")
+    }
+
+    if (!settings.privateKey || !settings.publicKey)
+        await generateKeys().then((keys) => {
+            setSetting('publicKey', keys.publicKey)
+            setSetting('privateKey', keys.privateKey)
+        })
+    
+    const url = new URL('https://finder.madiator.com/api/v1/profile')
+    url.searchParams.set('data', JSON.stringify({ nickname }))
+    url.searchParams.set('keys', JSON.stringify({
+        signature: await sign(url.searchParams.toString(), settings.privateKey!),
+        publicKey: settings.publicKey
+    }))
+    const respond = await fetch(url.href, { method: "POST" })
+    if (respond.ok) alert(`Your nickname has been set to ${nickname}`)
+    else alert((await respond.json()).message)
 }

src/popup/popup.sass

@@ -7,10 +7,17 @@
     grid-auto-flow: row
     gap: 1.5em
 
-.container > section
+.container section
     display: grid
     grid-auto-flow: row
     gap: 1em
 
 button
-    cursor: pointer
+    cursor: pointer
+
+.container .options
+    display: flex
+    gap: .25em
+    white-space: nowrap
+    flex-wrap: wrap
+    justify-content: center

src/popup/popup.tsx

@@ -1,6 +1,7 @@
 import { h, render } from 'preact'
 import { useState } from 'preact/hooks'
 import ButtonRadio, { SelectionOption } from '../common/components/ButtonRadio'
+import { loginAndSetNickname } from '../common/crypto'
 import { getTargetPlatfromSettingsEntiries, getYtUrlResolversSettingsEntiries, TargetPlatformName, YTUrlResolverName } from '../common/settings'
 import { setSetting, useLbrySettings } from '../common/useSettings'
 import { LbryPathnameCache } from '../common/yt/urlCache'
@@ -15,7 +16,7 @@ const ytUrlResolverOptions: SelectionOption[] = getYtUrlResolversSettingsEntirie
   .map(([value, { name: display }]) => ({ value, display }))
 
 function WatchOnLbryPopup() {
-  const { redirect, targetPlatform, urlResolver } = useLbrySettings()
+  const { redirect, targetPlatform, urlResolver, privateKey, publicKey } = useLbrySettings()
   let [clearingCache, updateClearingCache] = useState(() => false)
 
   return <div className='container'>
@@ -42,6 +43,40 @@ function WatchOnLbryPopup() {
         <button type='button' className='btn1 button is-primary'>{clearingCache ? 'Clearing Cache...' : 'Clear Cache'}</button>
       </a>
     </section>
+    <section>
+      <label className='radio-label'>Madiator Finder:</label>
+      <a href='https://finder.madiator.com/leaderboard' target='_blank'>
+        <button type='button' className='btn1 button is-primary'>Leaderboard</button>
+      </a>
+    </section>
+    <section>
+      <label className='radio-label'>Madiator Finder Profile:</label>
+      {(!privateKey || !publicKey) ?
+        <span class="options">
+          <a onClick={() => loginAndSetNickname()} target='_blank'>
+            <button type='button' className='btn1 button is-primary'>Login and join the Leaderboard</button>
+          </a>
+          <a onClick={() => loginAndSetNickname()} target='_blank'>
+            <button type='button' className='btn1 button is-primary'>Import Account</button>
+          </a>
+        </span>
+        :
+        <span class="options">
+          <a onClick={() => loginAndSetNickname()} target='_blank'>
+            <button type='button' className='btn1 button is-primary'>Update Nickname</button>
+          </a>
+          <a onClick={() => loginAndSetNickname()} target='_blank'>
+            <button type='button' className='btn1 button is-primary'>Export Account</button>
+          </a>
+          <a onClick={() => loginAndSetNickname()} target='_blank'>
+            <button type='button' className='btn1 button is-primary'>Logout</button>
+          </a>
+          <a onClick={() => loginAndSetNickname()} target='_blank'>
+            <button type='button' className='btn1 button is-primary'>Purge Account</button>
+          </a>
+        </span>
+      }
+    </section>
     <section>
       <label className='radio-label'>Other useful tools:</label>
       <a href='/tools/YTtoLBRY.html' target='_blank'>

src/scripts/storageSetup.ts

@@ -17,12 +17,6 @@ async function initSettings() {
     chrome.storage.local.set(changeSet)
   }
 
-  if (!settings.privateKey || !settings.publicKey)
-    await generateKeys().then((keys) => {
-      setSetting('publicKey', keys.publicKey)
-      setSetting('privateKey', keys.privateKey)
-    })
-
   chrome.browserAction.setBadgeText({ text: settings.redirect ? 'ON' : 'OFF' })
 }