From 60181540e6cfd9cff708633b9b59902f0614a74c Mon Sep 17 00:00:00 2001
From: Pierre Jacquier <pierrejacquier39@gmail.com>
Date: Wed, 5 Jul 2023 06:42:48 -0400
Subject: [PATCH] Listen for Return in Settings page (#281)

Fixes #279
---
 src/components/settings/Settings.tsx  | 10 ++++++++++
 src/components/settings/TokenForm.tsx |  4 ++++
 2 files changed, 14 insertions(+)

diff --git a/src/components/settings/Settings.tsx b/src/components/settings/Settings.tsx
index 01b6135..a1e4f07 100644
--- a/src/components/settings/Settings.tsx
+++ b/src/components/settings/Settings.tsx
@@ -70,31 +70,39 @@ function KittycadHelper() {
 export function Settings() {
     const [githubUser, setGithubUser] = useState<User>()
     const [kittycadUser, setKittycadUser] = useState<KittycadUser>()
+    const [githubLoading, setGithubLoading] = useState(false)
+    const [kittycadLoading, setKittycadLoading] = useState(false)
     const [firstInitDone, setFirstInitDone] = useState(false)
 
     async function fetchGithubUser() {
         try {
+            setGithubLoading(true)
             const response = await chrome.runtime.sendMessage({
                 id: MessageIds.GetGithubUser,
             })
             if ('error' in response) throw response.error
             setGithubUser(response as User)
+            setGithubLoading(false)
         } catch (e) {
             console.error(e)
             setGithubUser(undefined)
+            setGithubLoading(false)
         }
     }
 
     async function fetchKittycadUser() {
         try {
+            setKittycadLoading(true)
             const response = await chrome.runtime.sendMessage({
                 id: MessageIds.GetKittycadUser,
             })
             if ('error' in response) throw response.error
             setKittycadUser(response as KittycadUser)
+            setKittycadLoading(false)
         } catch (e) {
             console.error(e)
             setKittycadUser(undefined)
+            setKittycadLoading(false)
         }
     }
 
@@ -140,6 +148,7 @@ export function Settings() {
                             ) : (
                                 <TokenForm
                                     service="GitHub"
+                                    loading={githubLoading}
                                     onToken={async (token: string) => {
                                         await onToken(
                                             MessageIds.SaveGithubToken,
@@ -174,6 +183,7 @@ export function Settings() {
                             ) : (
                                 <TokenForm
                                     service="KittyCAD"
+                                    loading={kittycadLoading}
                                     onToken={async (token: string) => {
                                         await onToken(
                                             MessageIds.SaveKittycadToken,
diff --git a/src/components/settings/TokenForm.tsx b/src/components/settings/TokenForm.tsx
index 0716554..ea4781c 100644
--- a/src/components/settings/TokenForm.tsx
+++ b/src/components/settings/TokenForm.tsx
@@ -3,11 +3,13 @@ import { useState, PropsWithChildren } from 'react'
 
 export type TokenFormProps = {
     service: string
+    loading: boolean
     onToken: (token: string) => void
 }
 
 export function TokenForm({
     service,
+    loading,
     onToken,
     children,
 }: PropsWithChildren<TokenFormProps>) {
@@ -20,7 +22,9 @@ export function TokenForm({
                 <TextInput
                     alt="Text input for token"
                     value={token}
+                    loading={loading}
                     onChange={e => setToken(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && onToken(token)}
                 />
                 {children}
             </FormControl>