forked from stackblitz-labs/bolt.diy
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from D-Byte/iAlsoWantGitLab
fix: merge my own set
- Loading branch information
Showing
21 changed files
with
1,367 additions
and
424 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
173 changes: 29 additions & 144 deletions
173
app/components/settings/connections/ConnectionsTab.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,151 +1,36 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| 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 | ||
| } | ||
| import React from 'react'; | ||
| import { ProviderCard } from '~/lib/git/components/ProviderCard'; | ||
| import { useGitProviders } from '~/lib/git/hooks/useGitProviders'; | ||
|
|
||
| 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); | ||
|
|
||
| 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()) as GitHubUserResponse; | ||
|
|
||
| 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!'); | ||
| }; | ||
| const { | ||
| providers, | ||
| credentials, | ||
| expandedProviders, | ||
| handleSaveConnection, | ||
| handleDisconnect, | ||
| updateProviderCredentials, | ||
| toggleProvider, | ||
| } = useGitProviders(); | ||
|
|
||
| return ( | ||
| <div className="p-4 mb-4 border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-3"> | ||
| <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">GitHub Connection</h3> | ||
| <div className="flex mb-4"> | ||
| <div className="flex-1 mr-2"> | ||
| <label className="block text-sm text-bolt-elements-textSecondary mb-1">GitHub Username:</label> | ||
| <input | ||
| type="text" | ||
| value={githubUsername} | ||
| onChange={(e) => setGithubUsername(e.target.value)} | ||
| 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" | ||
| /> | ||
| </div> | ||
| <div className="flex-1"> | ||
| <label className="block text-sm text-bolt-elements-textSecondary mb-1">Personal Access Token:</label> | ||
| <input | ||
| type="password" | ||
| value={githubToken} | ||
| onChange={(e) => setGithubToken(e.target.value)} | ||
| 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" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="flex mb-4 items-center"> | ||
| {!isConnected ? ( | ||
| <button | ||
| onClick={handleSaveConnection} | ||
| disabled={isVerifying || !githubUsername || !githubToken} | ||
| className="bg-bolt-elements-button-primary-background rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-button-primary-text disabled:opacity-50 disabled:cursor-not-allowed flex items-center" | ||
| > | ||
| {isVerifying ? ( | ||
| <> | ||
| <div className="i-ph:spinner animate-spin mr-2" /> | ||
| Verifying... | ||
| </> | ||
| ) : ( | ||
| 'Connect' | ||
| )} | ||
| </button> | ||
| ) : ( | ||
| <button | ||
| onClick={handleDisconnect} | ||
| className="bg-bolt-elements-button-danger-background rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-bolt-elements-button-danger-backgroundHover text-bolt-elements-button-danger-text" | ||
| > | ||
| Disconnect | ||
| </button> | ||
| )} | ||
| {isConnected && ( | ||
| <span className="text-sm text-green-600 flex items-center"> | ||
| <div className="i-ph:check-circle mr-1" /> | ||
| Connected to GitHub | ||
| </span> | ||
| )} | ||
| </div> | ||
| <div className="space-y-4"> | ||
| <div className="i-ph:github-logo-duotone hidden" /> | ||
| // Preloading icons otherwise they will not be displayed. Need fixing. | ||
| <div className="i-ph:gitlab-logo-duotone hidden" /> | ||
| // Preloading icons otherwise they will not be displayed. Need fixing. | ||
| {Object.entries(providers).map(([key, plugin]) => ( | ||
| <ProviderCard | ||
| key={key} | ||
| provider={plugin.provider} | ||
| credentials={credentials[key]} | ||
| isExpanded={expandedProviders[key]} | ||
| onToggle={() => toggleProvider(key)} | ||
| onUpdateCredentials={(updates) => updateProviderCredentials(key, updates)} | ||
| onSave={() => handleSaveConnection(key)} | ||
| onDisconnect={() => handleDisconnect(key)} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.