From 90847e7cb684249ef8e97d42d6835ef465908199 Mon Sep 17 00:00:00 2001 From: Dustin Loring Date: Sun, 15 Dec 2024 16:30:10 -0500 Subject: [PATCH 1/2] Update ConnectionsTab.tsx checks to make sure the entered username and token is correct before accepting it. Let you disconnect also. --- .../settings/connections/ConnectionsTab.tsx | 123 +++++++++++++++--- 1 file changed, 104 insertions(+), 19 deletions(-) diff --git a/app/components/settings/connections/ConnectionsTab.tsx b/app/components/settings/connections/ConnectionsTab.tsx index 4fe43d96e..760436712 100644 --- a/app/components/settings/connections/ConnectionsTab.tsx +++ b/app/components/settings/connections/ConnectionsTab.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { toast } from 'react-toastify'; import Cookies from 'js-cookie'; import { logStore } from '~/lib/stores/logs'; @@ -6,16 +6,76 @@ import { logStore } from '~/lib/stores/logs'; export default function ConnectionsTab() { const [githubUsername, setGithubUsername] = useState(Cookies.get('githubUsername') || ''); const [githubToken, setGithubToken] = useState(Cookies.get('githubToken') || ''); + const [isConnected, setIsConnected] = useState(false); + const [isVerifying, setIsVerifying] = useState(false); - const handleSaveConnection = () => { - Cookies.set('githubUsername', githubUsername); - Cookies.set('githubToken', githubToken); - logStore.logSystem('GitHub connection settings updated', { - username: githubUsername, - hasToken: !!githubToken, - }); - toast.success('GitHub credentials saved successfully!'); - Cookies.set('git:github.com', JSON.stringify({ username: githubToken, password: 'x-oauth-basic' })); + useEffect(() => { + // Check if credentials exist and verify them + if (githubUsername && githubToken) { + verifyGitHubCredentials(); + } + }, []); + + const verifyGitHubCredentials = async () => { + setIsVerifying(true); + try { + const response = await fetch('https://api.github.com/user', { + headers: { + Authorization: `Bearer ${githubToken}`, + }, + }); + + if (response.ok) { + const data = await response.json(); + if (data.login === githubUsername) { + setIsConnected(true); + return true; + } + } + setIsConnected(false); + return false; + } catch (error) { + console.error('Error verifying GitHub credentials:', error); + setIsConnected(false); + return false; + } finally { + setIsVerifying(false); + } + }; + + const handleSaveConnection = async () => { + if (!githubUsername || !githubToken) { + toast.error('Please provide both GitHub username and token'); + return; + } + + setIsVerifying(true); + const isValid = await verifyGitHubCredentials(); + + if (isValid) { + Cookies.set('githubUsername', githubUsername); + Cookies.set('githubToken', githubToken); + logStore.logSystem('GitHub connection settings updated', { + username: githubUsername, + hasToken: !!githubToken, + }); + toast.success('GitHub credentials verified and saved successfully!'); + Cookies.set('git:github.com', JSON.stringify({ username: githubToken, password: 'x-oauth-basic' })); + setIsConnected(true); + } else { + toast.error('Invalid GitHub credentials. Please check your username and token.'); + } + }; + + const handleDisconnect = () => { + Cookies.remove('githubUsername'); + Cookies.remove('githubToken'); + Cookies.remove('git:github.com'); + setGithubUsername(''); + setGithubToken(''); + setIsConnected(false); + logStore.logSystem('GitHub connection removed'); + toast.success('GitHub connection removed successfully!'); }; return ( @@ -28,7 +88,8 @@ export default function ConnectionsTab() { type="text" value={githubUsername} onChange={(e) => setGithubUsername(e.target.value)} - className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor" + disabled={isVerifying} + className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor disabled:opacity-50" />
@@ -37,17 +98,41 @@ export default function ConnectionsTab() { type="password" value={githubToken} onChange={(e) => setGithubToken(e.target.value)} - className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor" + disabled={isVerifying} + className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor disabled:opacity-50" />
-
- +
+ {!isConnected ? ( + + ) : ( + + )} + {isConnected && ( + +
+ Connected to GitHub + + )}
); From 21bfcfcec4f4e3ad486f09bbe6b18744dcd1e0fa Mon Sep 17 00:00:00 2001 From: Dustin Loring Date: Sun, 15 Dec 2024 16:34:08 -0500 Subject: [PATCH 2/2] quick fix --- app/components/settings/connections/ConnectionsTab.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/components/settings/connections/ConnectionsTab.tsx b/app/components/settings/connections/ConnectionsTab.tsx index 760436712..fb0dadf7c 100644 --- a/app/components/settings/connections/ConnectionsTab.tsx +++ b/app/components/settings/connections/ConnectionsTab.tsx @@ -3,6 +3,12 @@ import { toast } from 'react-toastify'; import Cookies from 'js-cookie'; import { logStore } from '~/lib/stores/logs'; +interface GitHubUserResponse { + login: string; + id: number; + [key: string]: any; // for other properties we don't explicitly need +} + export default function ConnectionsTab() { const [githubUsername, setGithubUsername] = useState(Cookies.get('githubUsername') || ''); const [githubToken, setGithubToken] = useState(Cookies.get('githubToken') || ''); @@ -26,7 +32,7 @@ export default function ConnectionsTab() { }); if (response.ok) { - const data = await response.json(); + const data = (await response.json()) as GitHubUserResponse; if (data.login === githubUsername) { setIsConnected(true); return true;