Skip to content

Commit

Permalink
Some lint cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
Arne Durr committed Dec 17, 2024
1 parent a01c2de commit 300d01b
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 136 deletions.
1 change: 0 additions & 1 deletion app/components/settings/connections/ConnectionsTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export default function ConnectionsTab() {
{Object.entries(providers).map(([key, provider]) => (
<ProviderCard
key={key}
providerKey={key}
provider={provider}
credentials={credentials[key]}
isExpanded={expandedProviders[key]}
Expand Down
178 changes: 83 additions & 95 deletions app/components/settings/connections/ProviderCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react';
import type { GitProvider, ProviderCredentials } from '~/utils/gitProviders';

interface ProviderCardProps {
providerKey: string;
provider: GitProvider;
credentials: ProviderCredentials;
isExpanded: boolean;
Expand All @@ -13,7 +12,6 @@ interface ProviderCardProps {
}

export function ProviderCard({
providerKey,
provider,
credentials,
isExpanded,
Expand All @@ -22,99 +20,89 @@ export function ProviderCard({
onSave,
onDisconnect,
}: ProviderCardProps) {
return (
<div className="p-4 border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-3">
<div className="flex items-center justify-between cursor-pointer" onClick={onToggle}>
<div className="flex items-center">
<h3 className="text-lg font-medium text-bolt-elements-textPrimary">
{provider.title} Connection
</h3>
{credentials.username && (
<span className="ml-2 text-sm text-bolt-elements-textSecondary">
({credentials.username})
</span>
)}
</div>
<div className="flex items-center">
{credentials.isConnected && (
<div className="flex items-center mr-3">
<div className="w-2 h-2 rounded-full bg-green-500 mr-2" />
<span className="text-sm text-bolt-elements-textSecondary">Connected</span>
</div>
)}
<div className={`transform transition-transform ${isExpanded ? 'rotate-180' : ''}`}>
<div className="i-ph:caret-down text-bolt-elements-textSecondary" />
</div>
</div>
return (
<div className="p-4 border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-3">
<div className="flex items-center justify-between cursor-pointer" onClick={onToggle}>
<div className="flex items-center">
<h3 className="text-lg font-medium text-bolt-elements-textPrimary">{provider.title} Connection</h3>
{credentials.username && (
<span className="ml-2 text-sm text-bolt-elements-textSecondary">({credentials.username})</span>
)}
</div>
<div className="flex items-center">
{credentials.isConnected && (
<div className="flex items-center mr-3">
<div className="w-2 h-2 rounded-full bg-green-500 mr-2" />
<span className="text-sm text-bolt-elements-textSecondary">Connected</span>
</div>
)}
<div className={`transform transition-transform ${isExpanded ? 'rotate-180' : ''}`}>
<div className="i-ph:caret-down text-bolt-elements-textSecondary" />
</div>
</div>
</div>

{isExpanded && (
<div className="mt-4">
<div className="mb-4 p-3 bg-bolt-elements-background-depth-4 rounded border border-bolt-elements-borderColor">
<p className="text-sm text-bolt-elements-textSecondary mb-2">{provider.instructions}</p>
<ul className="text-sm text-bolt-elements-textSecondary space-y-1">
{provider.tokenSetupSteps.map((step, index) => (
<li key={index}>{step}</li>
))}
</ul>
</div>

<div className="flex mb-4">
<div className="flex-1 mr-2">
<label className="block text-sm text-bolt-elements-textSecondary mb-1">{provider.title} Username:</label>
<input
type="text"
value={credentials.username}
onChange={(e) => onUpdateCredentials({ username: e.target.value })}
disabled={credentials.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"
/>
</div>
<div className="flex-1">
<label className="block text-sm text-bolt-elements-textSecondary mb-1">Personal Access Token:</label>
<input
type="password"
value={credentials.token}
onChange={(e) => onUpdateCredentials({ token: e.target.value })}
disabled={credentials.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"
/>
</div>

{isExpanded && (
<div className="mt-4">
<div className="mb-4 p-3 bg-bolt-elements-background-depth-4 rounded border border-bolt-elements-borderColor">
<p className="text-sm text-bolt-elements-textSecondary mb-2">{provider.instructions}</p>
<ul className="text-sm text-bolt-elements-textSecondary space-y-1">
{provider.tokenSetupSteps.map((step, index) => (
<li key={index}>{step}</li>
))}
</ul>
</div>

<div className="flex mb-4">
<div className="flex-1 mr-2">
<label className="block text-sm text-bolt-elements-textSecondary mb-1">
{provider.title} Username:
</label>
<input
type="text"
value={credentials.username}
onChange={(e) => onUpdateCredentials({ username: e.target.value })}
disabled={credentials.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"
/>
</div>
<div className="flex-1">
<label className="block text-sm text-bolt-elements-textSecondary mb-1">Personal Access Token:</label>
<input
type="password"
value={credentials.token}
onChange={(e) => onUpdateCredentials({ token: e.target.value })}
disabled={credentials.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"
/>
</div>
</div>

<div className="flex">
{!credentials.isConnected ? (
<button
onClick={onSave}
disabled={
credentials.isVerifying ||
!credentials.username ||
!credentials.token
}
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"
>
{credentials.isVerifying ? (
<>
<div className="i-ph:spinner animate-spin mr-2" />
Verifying...
</>
) : (
'Connect'
)}
</button>
) : (
<button
onClick={onDisconnect}
className="bg-red-500 text-white rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-red-600"
>
Disconnect
</button>
)}
</div>
</div>
</div>

<div className="flex">
{!credentials.isConnected ? (
<button
onClick={onSave}
disabled={credentials.isVerifying || !credentials.username || !credentials.token}
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"
>
{credentials.isVerifying ? (
<>
<div className="i-ph:spinner animate-spin mr-2" />
Verifying...
</>
) : (
'Connect'
)}
</button>
) : (
<button
onClick={onDisconnect}
className="bg-red-500 text-white rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-red-600"
>
Disconnect
</button>
)}
</div>
);
}
</div>
)}
</div>
);
}
7 changes: 1 addition & 6 deletions app/lib/hooks/useCredentials.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { toast } from 'react-toastify';
import Cookies from 'js-cookie';
import type { GitAuth } from 'isomorphic-git';
import { logStore } from '../stores/logs';
import { logStore } from '~/lib/stores/logs';

let masterKey: CryptoKey | null = null;

Expand Down Expand Up @@ -221,11 +221,6 @@ const saveGitAuth = async (url: string, auth: GitAuth) => {

const domain = getDomain(url);

// if (!auth.username || !auth.password) {
// toast.error('Username and token are required');
// return;
// }

try {
const encryptedCreds = await encrypt(
JSON.stringify({
Expand Down
65 changes: 32 additions & 33 deletions app/lib/hooks/useGitProviders.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export function useGitProviders() {

const initializeEncryption = async () => {
const success = await ensureEncryption();

if (success) {
loadSavedCredentials();
}
Expand All @@ -26,8 +27,9 @@ export function useGitProviders() {
const loadSavedCredentials = async () => {
for (const [key, provider] of Object.entries(gitProviders)) {
const auth = await lookupSavedPassword(provider.url);

if (auth?.username && auth?.password) {
setCredentials(prev => ({
setCredentials((prev) => ({

Check failure on line 32 in app/lib/hooks/useGitProviders.ts

View workflow job for this annotation

GitHub Actions / Test 

Argument of type '(prev: ProviderState) => { [x: string]: ProviderCredentials | { username: string | undefined; token: string | undefined; isConnected: true; isVerifying: boolean; }; }' is not assignable to parameter of type 'SetStateAction<ProviderState>'.
...prev,
[key]: {
...prev[key],
Expand All @@ -42,40 +44,39 @@ export function useGitProviders() {

const verifyCredentials = async (providerKey: string, username: string, token: string) => {
const provider = gitProviders[providerKey];
setCredentials(prev => ({
setCredentials((prev) => ({
...prev,
[providerKey]: { ...prev[providerKey], isVerifying: true },
}));

try {
const apiUrl = providerKey === 'github'
? 'https://api.github.com/user'
: 'https://gitlab.com/api/v4/user';
const apiUrl = providerKey === 'github' ? 'https://api.github.com/user' : 'https://gitlab.com/api/v4/user';

// Different authorization header format for GitHub and GitLab
const headers = providerKey === 'github'
? {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
Accept: 'application/json',
}
: {
'PRIVATE-TOKEN': token,
'Content-Type': 'application/json',
Accept: 'application/json',
};
const headers =
providerKey === 'github'
? {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
Accept: 'application/json',
}
: {
'PRIVATE-TOKEN': token,
'Content-Type': 'application/json',
Accept: 'application/json',
};

const response = await fetch(apiUrl, { headers });

Check failure on line 69 in app/lib/hooks/useGitProviders.ts

View workflow job for this annotation

GitHub Actions / Test 

No overload matches this call.
const data = await response.json();
console.log('response',data)
console.log('response', data);

// Verify the response data
const isValid = response.ok && (
(providerKey === 'github' && data.login === username) ||
(providerKey === 'gitlab' && data.username === username)
);
setCredentials(prev => ({
const isValid =
response.ok &&
((providerKey === 'github' && data.login === username) ||

Check failure on line 76 in app/lib/hooks/useGitProviders.ts

View workflow job for this annotation

GitHub Actions / Test 

'data' is of type 'unknown'.
(providerKey === 'gitlab' && data.username === username));

Check failure on line 77 in app/lib/hooks/useGitProviders.ts

View workflow job for this annotation

GitHub Actions / Test 

'data' is of type 'unknown'.

setCredentials((prev) => ({
...prev,
[providerKey]: {
...prev[providerKey],
Expand All @@ -91,14 +92,15 @@ export function useGitProviders() {
return isValid;
} catch (error) {
console.error(`Error verifying ${provider.title} credentials:`, error);
setCredentials(prev => ({
setCredentials((prev) => ({
...prev,
[providerKey]: {
...prev[providerKey],
isConnected: false,
isVerifying: false,
},
}));

return false;
}
};
Expand All @@ -124,7 +126,7 @@ export function useGitProviders() {
const handleDisconnect = async (providerKey: string) => {
const provider = gitProviders[providerKey];
await removeGitAuth(provider.url);
setCredentials(prev => ({
setCredentials((prev) => ({
...prev,
[providerKey]: {
...prev[providerKey],
Expand All @@ -135,18 +137,15 @@ export function useGitProviders() {
}));
};

const updateProviderCredentials = (
providerKey: string,
updates: Partial<ProviderCredentials>
) => {
setCredentials(prev => ({
const updateProviderCredentials = (providerKey: string, updates: Partial<ProviderCredentials>) => {
setCredentials((prev) => ({
...prev,
[providerKey]: { ...prev[providerKey], ...updates },
}));
};

const toggleProvider = (provider: string) => {
setExpandedProviders(prev => ({
setExpandedProviders((prev) => ({
...prev,
[provider]: !prev[provider],
}));
Expand All @@ -161,4 +160,4 @@ export function useGitProviders() {
updateProviderCredentials,
toggleProvider,
};
}
}
2 changes: 1 addition & 1 deletion app/utils/gitProviders.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,4 @@ export const gitProviders: Record<string, GitProvider> = {
'3. Copy the generated token and paste it here',
],
},
};
};

0 comments on commit 300d01b

Please sign in to comment.