From 5fb32ab6f44abd3ff7994b42a69e6899435fa099 Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Tue, 6 May 2025 09:37:51 -0400
Subject: [PATCH 01/11] basic sharing

---
 src/api/devices.ts                            | 18 +++++++
 src/components/material/Icon.tsx              |  2 +-
 .../dashboard/activities/SettingsActivity.tsx | 48 ++++++++++++++++++-
 3 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/src/api/devices.ts b/src/api/devices.ts
index 95be84fa5..da8913526 100644
--- a/src/api/devices.ts
+++ b/src/api/devices.ts
@@ -74,6 +74,24 @@ export const unpairDevice = async (dongleId: string) =>
     method: 'POST',
   })
 
+export const shareDevice = async (dongleId: string, email: string) =>
+  fetcher<{ success: number }>(`/v1/devices/${dongleId}/add_user`, {
+    method: 'POST',
+    body: JSON.stringify({ email: email }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+
+export const unshareDevice = async (dongleId: string, email: string) =>
+  fetcher<{ success: number }>(`/v1/devices/${dongleId}/del_user`, {
+    method: 'POST',
+    body: JSON.stringify({ email: email }),
+  })
+
+export const getDeviceUsers = async (dongleId: string): Promise<{ email: string; permission: string }[]> =>
+  fetcher<{ email: string; permission: string }[]>(`/v1/devices/${dongleId}/users`)
+
 const validatePairToken = (
   input: string,
 ): {
diff --git a/src/components/material/Icon.tsx b/src/components/material/Icon.tsx
index dd0968bb7..42c35c3b7 100644
--- a/src/components/material/Icon.tsx
+++ b/src/components/material/Icon.tsx
@@ -8,7 +8,7 @@ export const Icons = [
   'add', 'arrow_back', 'camera', 'check', 'chevron_right', 'clear', 'close', 'delete', 'description', 'directions_car', 'download', 'error',
   'file_copy', 'flag', 'info', 'keyboard_arrow_down', 'keyboard_arrow_up', 'local_fire_department', 'logout', 'menu', 'my_location',
   'open_in_new', 'payments', 'person', 'progress_activity', 'satellite_alt', 'search', 'settings', 'upload', 'videocam', 'refresh',
-  'login', 'person_off', 'autorenew', 'close_small', 'pause', 'play_arrow', 'clear_all',
+  'login', 'person_off', 'autorenew', 'close_small', 'pause', 'play_arrow', 'clear_all', 'share'
 ] as const
 
 export type IconName = (typeof Icons)[number]
diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index ec046fc86..577001dad 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -3,7 +3,7 @@ import type { Accessor, VoidComponent, Setter, ParentComponent, Resource, JSXEle
 import { useLocation } from '@solidjs/router'
 import clsx from 'clsx'
 
-import { getDevice, unpairDevice } from '~/api/devices'
+import { getDevice, getDeviceUsers, shareDevice, unpairDevice } from '~/api/devices'
 import {
   cancelSubscription,
   getStripeCheckout,
@@ -22,6 +22,7 @@ import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
 import { createQuery } from '~/utils/createQuery'
 import { getDeviceName } from '~/utils/device'
+import TextField from '~/components/material/TextField'
 
 const useAction = <T,>(action: () => Promise<T>): [() => void, Resource<T>] => {
   const [source, setSource] = createSignal(false)
@@ -401,15 +402,58 @@ const PrimeManage: VoidComponent<{ dongleId: string }> = (props) => {
 
 const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Device> }> = (props) => {
   const [deviceName] = createResource(props.device, getDeviceName)
-
+  const [deviceUsers, { refetch: refetchDeviceUsers }] = createResource(props.dongleId, getDeviceUsers)
+  const [shareEmail, setShareEmail] = createSignal('')
   const [unpair, unpairData] = useAction(async () => {
     const { success } = await unpairDevice(props.dongleId)
     if (success) window.location.href = window.location.origin
   })
+  const share = async () => {
+    console.log(shareEmail())
+    const { success } = await shareDevice(props.dongleId, shareEmail())
+    //update deviceUsers
+    if (success) refetchDeviceUsers()
+    clearShareEmail()
+  }
+
+  const updateShareEmail = () => {
+    const emailBox = document.getElementById('email-box') as HTMLInputElement
+    setShareEmail(emailBox.value)
+  }
+
+  const clearShareEmail = () => {
+    const emailBox = document.getElementById('email-box') as HTMLInputElement
+    emailBox.value = ''
+    setShareEmail('')
+  }
 
   return (
     <div class="flex flex-col gap-4">
       <h2 class="text-lg">{deviceName()}</h2>
+      <div>
+        shared with:
+        <For each={deviceUsers()} fallback={<div>loading</div>}>
+          {(user, _index) => (
+            <Show when={user.permission !== 'owner'}>
+              <div>{user.email}</div>
+            </Show>
+          )}
+        </For>
+        <div class="flex">
+          <TextField
+            placeholder="email"
+            id="email-box"
+            value={shareEmail()}
+            onKeyPress={(_i) => {
+              updateShareEmail()
+            }}
+          />
+          <Button color="secondary" leading={<Icon name="share" />} onClick={share}>
+            Share
+          </Button>
+        </div>
+      </div>
+
       <Show when={unpairData.error}>
         <div class="flex gap-2 rounded-sm bg-surface-container-high p-2 text-sm text-on-surface">
           <Icon class="text-error" name="error" size="20" />

From 2120eb2b3d02db08a969890e79f4b66265b9e5ee Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Tue, 6 May 2025 15:57:53 -0400
Subject: [PATCH 02/11] add unsharing && ui fixes

---
 src/api/devices.ts                            |  3 +++
 .../dashboard/activities/SettingsActivity.tsx | 21 ++++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/api/devices.ts b/src/api/devices.ts
index da8913526..7fc0f9312 100644
--- a/src/api/devices.ts
+++ b/src/api/devices.ts
@@ -87,6 +87,9 @@ export const unshareDevice = async (dongleId: string, email: string) =>
   fetcher<{ success: number }>(`/v1/devices/${dongleId}/del_user`, {
     method: 'POST',
     body: JSON.stringify({ email: email }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
   })
 
 export const getDeviceUsers = async (dongleId: string): Promise<{ email: string; permission: string }[]> =>
diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index 577001dad..e6aa43f6c 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -3,7 +3,7 @@ import type { Accessor, VoidComponent, Setter, ParentComponent, Resource, JSXEle
 import { useLocation } from '@solidjs/router'
 import clsx from 'clsx'
 
-import { getDevice, getDeviceUsers, shareDevice, unpairDevice } from '~/api/devices'
+import { getDevice, getDeviceUsers, shareDevice, unpairDevice, unshareDevice } from '~/api/devices'
 import {
   cancelSubscription,
   getStripeCheckout,
@@ -409,6 +409,7 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
     if (success) window.location.href = window.location.origin
   })
   const share = async () => {
+    updateShareEmail()
     console.log(shareEmail())
     const { success } = await shareDevice(props.dongleId, shareEmail())
     //update deviceUsers
@@ -427,19 +428,29 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
     setShareEmail('')
   }
 
+  const unshare = async (email: string) => {
+    const { success } = await unshareDevice(props.dongleId, email)
+    if (success) refetchDeviceUsers()
+  }
+
   return (
     <div class="flex flex-col gap-4">
       <h2 class="text-lg">{deviceName()}</h2>
-      <div>
-        shared with:
+      <div class="flex flex-col gap-2">
+        <h3 class='text-md'>{((deviceUsers() || []).length - 1) > 0 ? "shared with:" : "share device"}</h3>
         <For each={deviceUsers()} fallback={<div>loading</div>}>
           {(user, _index) => (
             <Show when={user.permission !== 'owner'}>
-              <div>{user.email}</div>
+              <div class="flex items-center gap-2">
+                <div>{user.email}</div>
+                <Button color="error" leading={<Icon name="delete" />} onClick={() => unshare(user.email)}>
+                  Remove
+                </Button>
+              </div>
             </Show>
           )}
         </For>
-        <div class="flex">
+        <div class="flex items-center gap-2">
           <TextField
             placeholder="email"
             id="email-box"

From 41efea89458bf73cde9c942a558e2f7a2463b92a Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Tue, 6 May 2025 16:03:00 -0400
Subject: [PATCH 03/11] only show if owner

---
 src/pages/dashboard/activities/SettingsActivity.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index e6aa43f6c..b0b1643d2 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -436,6 +436,7 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
   return (
     <div class="flex flex-col gap-4">
       <h2 class="text-lg">{deviceName()}</h2>
+      <Show when={props.device()?.is_owner}>
       <div class="flex flex-col gap-2">
         <h3 class='text-md'>{((deviceUsers() || []).length - 1) > 0 ? "shared with:" : "share device"}</h3>
         <For each={deviceUsers()} fallback={<div>loading</div>}>
@@ -464,6 +465,7 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
           </Button>
         </div>
       </div>
+      </Show>
 
       <Show when={unpairData.error}>
         <div class="flex gap-2 rounded-sm bg-surface-container-high p-2 text-sm text-on-surface">

From a30d59cb07b154f8b7c71db8082ff50a32bde7e7 Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Tue, 6 May 2025 16:08:30 -0400
Subject: [PATCH 04/11] fix indentation

---
 .../dashboard/activities/SettingsActivity.tsx | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index b0b1643d2..105533a98 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -437,34 +437,34 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
     <div class="flex flex-col gap-4">
       <h2 class="text-lg">{deviceName()}</h2>
       <Show when={props.device()?.is_owner}>
-      <div class="flex flex-col gap-2">
-        <h3 class='text-md'>{((deviceUsers() || []).length - 1) > 0 ? "shared with:" : "share device"}</h3>
-        <For each={deviceUsers()} fallback={<div>loading</div>}>
-          {(user, _index) => (
-            <Show when={user.permission !== 'owner'}>
-              <div class="flex items-center gap-2">
-                <div>{user.email}</div>
-                <Button color="error" leading={<Icon name="delete" />} onClick={() => unshare(user.email)}>
-                  Remove
-                </Button>
-              </div>
-            </Show>
-          )}
-        </For>
-        <div class="flex items-center gap-2">
-          <TextField
-            placeholder="email"
-            id="email-box"
-            value={shareEmail()}
-            onKeyPress={(_i) => {
-              updateShareEmail()
-            }}
-          />
-          <Button color="secondary" leading={<Icon name="share" />} onClick={share}>
-            Share
-          </Button>
+        <div class="flex flex-col gap-2">
+          <h3 class="text-md">{(deviceUsers() || []).length - 1 > 0 ? 'shared with:' : 'share device'}</h3>
+          <For each={deviceUsers()} fallback={<div>loading</div>}>
+            {(user, _index) => (
+              <Show when={user.permission !== 'owner'}>
+                <div class="flex items-center gap-2">
+                  <div>{user.email}</div>
+                  <Button color="error" leading={<Icon name="delete" />} onClick={() => unshare(user.email)}>
+                    Remove
+                  </Button>
+                </div>
+              </Show>
+            )}
+          </For>
+          <div class="flex items-center gap-2">
+            <TextField
+              placeholder="email"
+              id="email-box"
+              value={shareEmail()}
+              onKeyPress={(_i) => {
+                updateShareEmail()
+              }}
+            />
+            <Button color="secondary" leading={<Icon name="share" />} onClick={share}>
+              Share
+            </Button>
+          </div>
         </div>
-      </div>
       </Show>
 
       <Show when={unpairData.error}>

From ebc78a300c85fe21c3db476879953b9dc5816f2e Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Tue, 6 May 2025 19:15:57 -0400
Subject: [PATCH 05/11] loading states

---
 .../dashboard/activities/SettingsActivity.tsx   | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index 105533a98..9dbe1ff4f 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -408,14 +408,12 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
     const { success } = await unpairDevice(props.dongleId)
     if (success) window.location.href = window.location.origin
   })
-  const share = async () => {
+  const [share, shareData] = useAction(async () => {
     updateShareEmail()
-    console.log(shareEmail())
     const { success } = await shareDevice(props.dongleId, shareEmail())
-    //update deviceUsers
     if (success) refetchDeviceUsers()
     clearShareEmail()
-  }
+  })
 
   const updateShareEmail = () => {
     const emailBox = document.getElementById('email-box') as HTMLInputElement
@@ -428,9 +426,13 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
     setShareEmail('')
   }
 
+  const [unshareLoading, setUnshareLoading] = createSignal(false)
+
   const unshare = async (email: string) => {
+    setUnshareLoading(true)
     const { success } = await unshareDevice(props.dongleId, email)
     if (success) refetchDeviceUsers()
+    setUnshareLoading(false)
   }
 
   return (
@@ -444,7 +446,7 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
               <Show when={user.permission !== 'owner'}>
                 <div class="flex items-center gap-2">
                   <div>{user.email}</div>
-                  <Button color="error" leading={<Icon name="delete" />} onClick={() => unshare(user.email)}>
+                  <Button color="error" leading={<Icon name="delete" />} onClick={() => unshare(user.email)} loading={unshareLoading()}>
                     Remove
                   </Button>
                 </div>
@@ -456,11 +458,8 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
               placeholder="email"
               id="email-box"
               value={shareEmail()}
-              onKeyPress={(_i) => {
-                updateShareEmail()
-              }}
             />
-            <Button color="secondary" leading={<Icon name="share" />} onClick={share}>
+            <Button color="secondary" leading={<Icon name="share" />} onClick={share} loading={shareData.loading}>
               Share
             </Button>
           </div>

From 54bdeb53d24d50cbb239e672339cc0b39a440365 Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Tue, 6 May 2025 19:17:58 -0400
Subject: [PATCH 06/11] reduce line count

---
 src/pages/dashboard/activities/SettingsActivity.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index 9dbe1ff4f..232482554 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -454,11 +454,7 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
             )}
           </For>
           <div class="flex items-center gap-2">
-            <TextField
-              placeholder="email"
-              id="email-box"
-              value={shareEmail()}
-            />
+            <TextField placeholder="email" id="email-box" value={shareEmail()} />
             <Button color="secondary" leading={<Icon name="share" />} onClick={share} loading={shareData.loading}>
               Share
             </Button>

From 9f4e25b6e4e598e16e37b3b832f86ee01367964a Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Wed, 7 May 2025 10:27:26 -0400
Subject: [PATCH 07/11] func names match API, textfield onInput fixes, design
 updates

---
 src/api/devices.ts                            |  4 +-
 src/components/material/TextField.tsx         | 19 ++++-----
 .../dashboard/activities/SettingsActivity.tsx | 41 ++++++++-----------
 3 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/src/api/devices.ts b/src/api/devices.ts
index 7fc0f9312..8729c7c27 100644
--- a/src/api/devices.ts
+++ b/src/api/devices.ts
@@ -74,7 +74,7 @@ export const unpairDevice = async (dongleId: string) =>
     method: 'POST',
   })
 
-export const shareDevice = async (dongleId: string, email: string) =>
+export const grantDeviceReadPermission = async (dongleId: string, email: string) =>
   fetcher<{ success: number }>(`/v1/devices/${dongleId}/add_user`, {
     method: 'POST',
     body: JSON.stringify({ email: email }),
@@ -83,7 +83,7 @@ export const shareDevice = async (dongleId: string, email: string) =>
     },
   })
 
-export const unshareDevice = async (dongleId: string, email: string) =>
+export const removeDeviceReadPermission = async (dongleId: string, email: string) =>
   fetcher<{ success: number }>(`/v1/devices/${dongleId}/del_user`, {
     method: 'POST',
     body: JSON.stringify({ email: email }),
diff --git a/src/components/material/TextField.tsx b/src/components/material/TextField.tsx
index aac5c4b6b..71361bee2 100644
--- a/src/components/material/TextField.tsx
+++ b/src/components/material/TextField.tsx
@@ -1,4 +1,4 @@
-import { Show, createEffect, createSignal, splitProps, type Component, type JSX } from 'solid-js'
+import { Show, createSignal, splitProps, type Component, type JSX } from 'solid-js'
 import clsx from 'clsx'
 
 type TextFieldProps = {
@@ -7,7 +7,8 @@ type TextFieldProps = {
   helperText?: string
   error?: string
   value?: string
-} & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'class'>
+  onInput?: (value: string) => void
+} & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'class' | 'onInput'>
 
 const stateColors = {
   base: {
@@ -40,14 +41,8 @@ const TextField: Component<TextFieldProps> = (props) => {
 
   const [focused, setFocused] = createSignal(false)
   const [hovered, setHovered] = createSignal(false)
-  const [inputValue, setInputValue] = createSignal(props.value || '')
 
-  // Keep local value in sync with prop value
-  createEffect(() => {
-    if (props.value) setInputValue(props.value)
-  })
-
-  const labelFloating = () => focused() || inputValue()?.length > 0
+  const labelFloating = () => focused() || (props.value?.length || 0) > 0
 
   const getStateStyle = () => {
     const state = { ...stateColors.base }
@@ -100,8 +95,10 @@ const TextField: Component<TextFieldProps> = (props) => {
               getStateStyle().input,
               props.label && labelFloating() && 'pt-6 pb-2',
             )}
-            value={inputValue()}
-            onInput={(e) => setInputValue(e.target.value)}
+            value={props.value}
+            onInput={(e) => {
+              if (props.onInput) props.onInput(e.target.value)
+            }}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
           />
diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index 232482554..d7b38c60c 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -3,7 +3,7 @@ import type { Accessor, VoidComponent, Setter, ParentComponent, Resource, JSXEle
 import { useLocation } from '@solidjs/router'
 import clsx from 'clsx'
 
-import { getDevice, getDeviceUsers, shareDevice, unpairDevice, unshareDevice } from '~/api/devices'
+import { getDevice, getDeviceUsers, grantDeviceReadPermission, unpairDevice, removeDeviceReadPermission } from '~/api/devices'
 import {
   cancelSubscription,
   getStripeCheckout,
@@ -409,28 +409,16 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
     if (success) window.location.href = window.location.origin
   })
   const [share, shareData] = useAction(async () => {
-    updateShareEmail()
-    const { success } = await shareDevice(props.dongleId, shareEmail())
+    const { success } = await grantDeviceReadPermission(props.dongleId, shareEmail())
     if (success) refetchDeviceUsers()
-    clearShareEmail()
-  })
-
-  const updateShareEmail = () => {
-    const emailBox = document.getElementById('email-box') as HTMLInputElement
-    setShareEmail(emailBox.value)
-  }
-
-  const clearShareEmail = () => {
-    const emailBox = document.getElementById('email-box') as HTMLInputElement
-    emailBox.value = ''
     setShareEmail('')
-  }
+  })
 
   const [unshareLoading, setUnshareLoading] = createSignal(false)
 
   const unshare = async (email: string) => {
     setUnshareLoading(true)
-    const { success } = await unshareDevice(props.dongleId, email)
+    const { success } = await removeDeviceReadPermission(props.dongleId, email)
     if (success) refetchDeviceUsers()
     setUnshareLoading(false)
   }
@@ -444,19 +432,26 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
           <For each={deviceUsers()} fallback={<div>loading</div>}>
             {(user, _index) => (
               <Show when={user.permission !== 'owner'}>
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-2 justify-between">
                   <div>{user.email}</div>
-                  <Button color="error" leading={<Icon name="delete" />} onClick={() => unshare(user.email)} loading={unshareLoading()}>
-                    Remove
+                  <Button color="error" onClick={() => unshare(user.email)} loading={unshareLoading()}>
+                    <Icon name="delete" />
                   </Button>
                 </div>
               </Show>
             )}
           </For>
-          <div class="flex items-center gap-2">
-            <TextField placeholder="email" id="email-box" value={shareEmail()} />
-            <Button color="secondary" leading={<Icon name="share" />} onClick={share} loading={shareData.loading}>
-              Share
+          <div class="flex items-center gap-2 justify-between">
+            <TextField
+              label="email"
+              id="email-box"
+              value={shareEmail()}
+              onInput={(val: string) => {
+                setShareEmail(val)
+              }}
+            />
+            <Button color="secondary" onClick={share} loading={shareData.loading}>
+              <Icon name="share" />
             </Button>
           </div>
         </div>

From 575993bf670c275a493a64a8d854a0de15ed98f3 Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Thu, 8 May 2025 16:47:53 -0400
Subject: [PATCH 08/11] use native textfield onInput + design changes

---
 src/components/material/TextField.tsx               | 6 +-----
 src/pages/dashboard/activities/SettingsActivity.tsx | 5 ++---
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/material/TextField.tsx b/src/components/material/TextField.tsx
index 71361bee2..611b95364 100644
--- a/src/components/material/TextField.tsx
+++ b/src/components/material/TextField.tsx
@@ -7,8 +7,7 @@ type TextFieldProps = {
   helperText?: string
   error?: string
   value?: string
-  onInput?: (value: string) => void
-} & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'class' | 'onInput'>
+} & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'class'>
 
 const stateColors = {
   base: {
@@ -96,9 +95,6 @@ const TextField: Component<TextFieldProps> = (props) => {
               props.label && labelFloating() && 'pt-6 pb-2',
             )}
             value={props.value}
-            onInput={(e) => {
-              if (props.onInput) props.onInput(e.target.value)
-            }}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
           />
diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index d7b38c60c..3ec2c8b20 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -446,9 +446,8 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
               label="email"
               id="email-box"
               value={shareEmail()}
-              onInput={(val: string) => {
-                setShareEmail(val)
-              }}
+              class="w-full"
+              onInput={(e) => setShareEmail(e.currentTarget.value)}
             />
             <Button color="secondary" onClick={share} loading={shareData.loading}>
               <Icon name="share" />

From ffade1c3324d1f0d30d33a098ea4cef5d5200359 Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Thu, 8 May 2025 19:38:45 -0400
Subject: [PATCH 09/11] revert textfield, use form

---
 src/components/material/TextField.tsx         | 13 +++++--
 .../dashboard/activities/SettingsActivity.tsx | 38 +++++++++++--------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/material/TextField.tsx b/src/components/material/TextField.tsx
index 611b95364..aac5c4b6b 100644
--- a/src/components/material/TextField.tsx
+++ b/src/components/material/TextField.tsx
@@ -1,4 +1,4 @@
-import { Show, createSignal, splitProps, type Component, type JSX } from 'solid-js'
+import { Show, createEffect, createSignal, splitProps, type Component, type JSX } from 'solid-js'
 import clsx from 'clsx'
 
 type TextFieldProps = {
@@ -40,8 +40,14 @@ const TextField: Component<TextFieldProps> = (props) => {
 
   const [focused, setFocused] = createSignal(false)
   const [hovered, setHovered] = createSignal(false)
+  const [inputValue, setInputValue] = createSignal(props.value || '')
 
-  const labelFloating = () => focused() || (props.value?.length || 0) > 0
+  // Keep local value in sync with prop value
+  createEffect(() => {
+    if (props.value) setInputValue(props.value)
+  })
+
+  const labelFloating = () => focused() || inputValue()?.length > 0
 
   const getStateStyle = () => {
     const state = { ...stateColors.base }
@@ -94,7 +100,8 @@ const TextField: Component<TextFieldProps> = (props) => {
               getStateStyle().input,
               props.label && labelFloating() && 'pt-6 pb-2',
             )}
-            value={props.value}
+            value={inputValue()}
+            onInput={(e) => setInputValue(e.target.value)}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
           />
diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index 3ec2c8b20..a2015f4d2 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -1,6 +1,6 @@
 import { createResource, Match, Show, Suspense, Switch, children, createMemo, For, createSignal, createEffect } from 'solid-js'
 import type { Accessor, VoidComponent, Setter, ParentComponent, Resource, JSXElement } from 'solid-js'
-import { useLocation } from '@solidjs/router'
+import { action, useLocation, useSubmission } from '@solidjs/router'
 import clsx from 'clsx'
 
 import { getDevice, getDeviceUsers, grantDeviceReadPermission, unpairDevice, removeDeviceReadPermission } from '~/api/devices'
@@ -403,17 +403,22 @@ const PrimeManage: VoidComponent<{ dongleId: string }> = (props) => {
 const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Device> }> = (props) => {
   const [deviceName] = createResource(props.device, getDeviceName)
   const [deviceUsers, { refetch: refetchDeviceUsers }] = createResource(props.dongleId, getDeviceUsers)
-  const [shareEmail, setShareEmail] = createSignal('')
   const [unpair, unpairData] = useAction(async () => {
     const { success } = await unpairDevice(props.dongleId)
     if (success) window.location.href = window.location.origin
   })
-  const [share, shareData] = useAction(async () => {
-    const { success } = await grantDeviceReadPermission(props.dongleId, shareEmail())
-    if (success) refetchDeviceUsers()
-    setShareEmail('')
+
+  const share = action(async (formData: FormData) => {
+    const email = formData.get('email') as string
+    const { success } = await grantDeviceReadPermission(props.dongleId, email)
+    if (success) {
+      refetchDeviceUsers()
+      formRef?.reset()
+    }
   })
 
+  const shareState = useSubmission(share)
+
   const [unshareLoading, setUnshareLoading] = createSignal(false)
 
   const unshare = async (email: string) => {
@@ -423,6 +428,8 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
     setUnshareLoading(false)
   }
 
+  let formRef: HTMLFormElement | undefined
+
   return (
     <div class="flex flex-col gap-4">
       <h2 class="text-lg">{deviceName()}</h2>
@@ -441,18 +448,17 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
               </Show>
             )}
           </For>
-          <div class="flex items-center gap-2 justify-between">
-            <TextField
-              label="email"
-              id="email-box"
-              value={shareEmail()}
-              class="w-full"
-              onInput={(e) => setShareEmail(e.currentTarget.value)}
-            />
-            <Button color="secondary" onClick={share} loading={shareData.loading}>
+          <form
+            action={share}
+            class="flex items-center gap-2 justify-between"
+            method="post"
+            ref={formRef}
+          >
+            <TextField label="email" id="email-box" name="email" class="w-full" />
+            <Button color="secondary" type="submit" loading={shareState.pending}>
               <Icon name="share" />
             </Button>
-          </div>
+          </form>
         </div>
       </Show>
 

From 842e19adf861791e4cd18b888603a4dfe97a4ab4 Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Thu, 8 May 2025 19:39:28 -0400
Subject: [PATCH 10/11] fix formatting

---
 src/pages/dashboard/activities/SettingsActivity.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index a2015f4d2..d8aef2d2b 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -448,12 +448,7 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
               </Show>
             )}
           </For>
-          <form
-            action={share}
-            class="flex items-center gap-2 justify-between"
-            method="post"
-            ref={formRef}
-          >
+          <form action={share} class="flex items-center gap-2 justify-between" method="post" ref={formRef}>
             <TextField label="email" id="email-box" name="email" class="w-full" />
             <Button color="secondary" type="submit" loading={shareState.pending}>
               <Icon name="share" />

From b703d0ce89d3f622617dcdd864f6d9771e539058 Mon Sep 17 00:00:00 2001
From: paytondev <81662879+paytontech@users.noreply.github.com>
Date: Fri, 9 May 2025 09:13:59 -0400
Subject: [PATCH 11/11] move from action to reduce bundle size

importing action from solidjs-router brought bundle size up by a little over 1kb, exceeding max bundle size limit. moved to a classic event handler
---
 .../dashboard/activities/SettingsActivity.tsx | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index d8aef2d2b..9989905da 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -1,6 +1,6 @@
 import { createResource, Match, Show, Suspense, Switch, children, createMemo, For, createSignal, createEffect } from 'solid-js'
-import type { Accessor, VoidComponent, Setter, ParentComponent, Resource, JSXElement } from 'solid-js'
-import { action, useLocation, useSubmission } from '@solidjs/router'
+import type { Accessor, VoidComponent, Setter, ParentComponent, Resource, JSXElement, JSX } from 'solid-js'
+import { useLocation } from '@solidjs/router'
 import clsx from 'clsx'
 
 import { getDevice, getDeviceUsers, grantDeviceReadPermission, unpairDevice, removeDeviceReadPermission } from '~/api/devices'
@@ -407,17 +407,20 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
     const { success } = await unpairDevice(props.dongleId)
     if (success) window.location.href = window.location.origin
   })
-
-  const share = action(async (formData: FormData) => {
+  const [shareLoading, setShareLoading] = createSignal(false)
+  const share: JSX.EventHandler<HTMLFormElement, SubmitEvent> = async (event) => {
+    event.preventDefault()
+    setShareLoading(true)
+    const formData = new FormData(event.target as HTMLFormElement)
+    console.log(formData)
     const email = formData.get('email') as string
     const { success } = await grantDeviceReadPermission(props.dongleId, email)
+    setShareLoading(false)
     if (success) {
       refetchDeviceUsers()
       formRef?.reset()
     }
-  })
-
-  const shareState = useSubmission(share)
+  }
 
   const [unshareLoading, setUnshareLoading] = createSignal(false)
 
@@ -448,9 +451,9 @@ const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Dev
               </Show>
             )}
           </For>
-          <form action={share} class="flex items-center gap-2 justify-between" method="post" ref={formRef}>
+          <form onSubmit={share} class="flex items-center gap-2 justify-between" method="post" ref={formRef}>
             <TextField label="email" id="email-box" name="email" class="w-full" />
-            <Button color="secondary" type="submit" loading={shareState.pending}>
+            <Button color="secondary" type="submit" loading={shareLoading()}>
               <Icon name="share" />
             </Button>
           </form>