Spaces:
Sleeping
Sleeping
File size: 5,068 Bytes
8e0dd55 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | 'use client';
import React from 'react';
import { useLanguage } from '@/contexts/LanguageContext';
interface TokenInputProps {
selectedPlatform: 'github' | 'gitlab' | 'bitbucket';
setSelectedPlatform: (value: 'github' | 'gitlab' | 'bitbucket') => void;
accessToken: string;
setAccessToken: (value: string) => void;
showTokenSection?: boolean;
onToggleTokenSection?: () => void;
allowPlatformChange?: boolean;
}
export default function TokenInput({
selectedPlatform,
setSelectedPlatform,
accessToken,
setAccessToken,
showTokenSection = true,
onToggleTokenSection,
allowPlatformChange = true
}: TokenInputProps) {
const { messages: t } = useLanguage();
const platformName = selectedPlatform.charAt(0).toUpperCase() + selectedPlatform.slice(1);
return (
<div className="mb-4">
{onToggleTokenSection && (
<button
type="button"
onClick={onToggleTokenSection}
className="text-sm text-[var(--accent-primary)] hover:text-[var(--highlight)] flex items-center transition-colors border-b border-[var(--border-color)] hover:border-[var(--accent-primary)] pb-0.5 mb-2"
>
{showTokenSection ? t.form?.hideTokens || 'Hide Access Tokens' : t.form?.addTokens || 'Add Access Tokens for Private Repositories'}
</button>
)}
{showTokenSection && (
<div className="mt-2 p-4 bg-[var(--background)]/50 rounded-md border border-[var(--border-color)]">
{allowPlatformChange && (
<div className="mb-3">
<label className="block text-xs font-medium text-[var(--foreground)] mb-2">
{t.form?.selectPlatform || 'Select Platform'}
</label>
<div className="flex gap-2">
<button
type="button"
onClick={() => setSelectedPlatform('github')}
className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md border transition-all ${selectedPlatform === 'github'
? 'bg-[var(--accent-primary)]/10 border-[var(--accent-primary)] text-[var(--accent-primary)] shadow-sm'
: 'border-[var(--border-color)] text-[var(--foreground)] hover:bg-[var(--background)]'
}`}
>
<span className="text-sm">GitHub</span>
</button>
<button
type="button"
onClick={() => setSelectedPlatform('gitlab')}
className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md border transition-all ${selectedPlatform === 'gitlab'
? 'bg-[var(--accent-primary)]/10 border-[var(--accent-primary)] text-[var(--accent-primary)] shadow-sm'
: 'border-[var(--border-color)] text-[var(--foreground)] hover:bg-[var(--background)]'
}`}
>
<span className="text-sm">GitLab</span>
</button>
<button
type="button"
onClick={() => setSelectedPlatform('bitbucket')}
className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md border transition-all ${selectedPlatform === 'bitbucket'
? 'bg-[var(--accent-primary)]/10 border-[var(--accent-primary)] text-[var(--accent-primary)] shadow-sm'
: 'border-[var(--border-color)] text-[var(--foreground)] hover:bg-[var(--background)]'
}`}
>
<span className="text-sm">Bitbucket</span>
</button>
</div>
</div>
)}
<div>
<label htmlFor="access-token" className="block text-xs font-medium text-[var(--foreground)] mb-2">
{(t.form?.personalAccessToken || 'Personal Access Token').replace('{platform}', platformName)}
</label>
<input
id="access-token"
type="password"
value={accessToken}
onChange={(e) => setAccessToken(e.target.value)}
placeholder={(t.form?.tokenPlaceholder || 'Enter your access token').replace('{platform}', platformName)}
className="input-japanese block w-full px-3 py-2 rounded-md bg-transparent text-[var(--foreground)] focus:outline-none focus:border-[var(--accent-primary)] text-sm"
/>
<div className="flex items-center mt-2 text-xs text-[var(--muted)]">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1 text-[var(--muted)]"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{t.form?.tokenSecurityNote || 'Your token is stored locally and never sent to our servers.'}
</div>
</div>
</div>
)}
</div>
);
} |