feat: jira and synchro
This commit is contained in:
Julien Froidefond
189
components/settings/JiraConfigForm.tsx
Normal file
189
components/settings/JiraConfigForm.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { AppConfig } from '@/lib/config';
|
||||
|
||||
interface JiraConfigFormProps {
|
||||
config: AppConfig;
|
||||
}
|
||||
|
||||
export function JiraConfigForm({ config }: JiraConfigFormProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
baseUrl: '',
|
||||
email: '',
|
||||
apiToken: ''
|
||||
});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setMessage(null);
|
||||
|
||||
try {
|
||||
// Note: Dans un vrai environnement, ces variables seraient configurées côté serveur
|
||||
// Pour cette démo, on affiche juste un message informatif
|
||||
setMessage({
|
||||
type: 'success',
|
||||
text: 'Configuration sauvegardée. Redémarrez l\'application pour appliquer les changements.'
|
||||
});
|
||||
} catch (error) {
|
||||
setMessage({
|
||||
type: 'error',
|
||||
text: 'Erreur lors de la sauvegarde de la configuration'
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isJiraConfigured = config.integrations.jira.enabled;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Statut actuel */}
|
||||
<div className="flex items-center justify-between p-4 bg-[var(--card)] rounded border">
|
||||
<div>
|
||||
<h3 className="font-medium">Statut de l'intégration</h3>
|
||||
<p className="text-sm text-[var(--muted-foreground)]">
|
||||
{isJiraConfigured
|
||||
? 'Jira est configuré et prêt à être utilisé'
|
||||
: 'Jira n\'est pas configuré'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant={isJiraConfigured ? 'success' : 'danger'}>
|
||||
{isJiraConfigured ? '✓ Configuré' : '✗ Non configuré'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{isJiraConfigured && (
|
||||
<div className="p-4 bg-[var(--card)] rounded border">
|
||||
<h3 className="font-medium mb-2">Configuration actuelle</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div>
|
||||
<span className="text-[var(--muted-foreground)]">URL de base:</span>{' '}
|
||||
<code className="bg-[var(--background)] px-2 py-1 rounded text-xs">
|
||||
{config.integrations.jira.baseUrl || 'Non définie'}
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--muted-foreground)]">Email:</span>{' '}
|
||||
<code className="bg-[var(--background)] px-2 py-1 rounded text-xs">
|
||||
{config.integrations.jira.email || 'Non défini'}
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--muted-foreground)]">Token API:</span>{' '}
|
||||
<code className="bg-[var(--background)] px-2 py-1 rounded text-xs">
|
||||
{config.integrations.jira.apiToken ? '••••••••' : 'Non défini'}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Formulaire de configuration */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
URL de base Jira Cloud
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.baseUrl}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, baseUrl: e.target.value }))}
|
||||
placeholder="https://votre-domaine.atlassian.net"
|
||||
className="w-full px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-[var(--muted-foreground)] mt-1">
|
||||
L'URL de votre instance Jira Cloud (ex: https://monentreprise.atlassian.net)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Email Jira
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||
placeholder="votre-email@exemple.com"
|
||||
className="w-full px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-[var(--muted-foreground)] mt-1">
|
||||
L'email de votre compte Jira
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Token API Jira
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={formData.apiToken}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, apiToken: e.target.value }))}
|
||||
placeholder="Votre token API Jira"
|
||||
className="w-full px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-[var(--muted-foreground)] mt-1">
|
||||
Créez un token API depuis{' '}
|
||||
<a
|
||||
href="https://id.atlassian.com/manage-profile/security/api-tokens"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[var(--primary)] hover:underline"
|
||||
>
|
||||
votre profil Atlassian
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full"
|
||||
>
|
||||
{isLoading ? 'Sauvegarde...' : 'Sauvegarder la configuration'}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{message && (
|
||||
<div className={`p-4 rounded border ${
|
||||
message.type === 'success'
|
||||
? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200'
|
||||
: 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
|
||||
}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
|
||||
<h3 className="font-medium mb-2">💡 Instructions de configuration</h3>
|
||||
<div className="text-sm text-[var(--muted-foreground)] space-y-2">
|
||||
<p><strong>1. URL de base:</strong> Votre domaine Jira Cloud (ex: https://monentreprise.atlassian.net)</p>
|
||||
<p><strong>2. Email:</strong> L'email de votre compte Jira/Atlassian</p>
|
||||
<p><strong>3. Token API:</strong> Créez un token depuis votre profil Atlassian :</p>
|
||||
<ul className="ml-4 space-y-1 list-disc">
|
||||
<li>Allez sur <a href="https://id.atlassian.com/manage-profile/security/api-tokens" target="_blank" rel="noopener noreferrer" className="text-[var(--primary)] hover:underline">id.atlassian.com</a></li>
|
||||
<li>Cliquez sur "Create API token"</li>
|
||||
<li>Donnez un nom descriptif (ex: "TowerControl")</li>
|
||||
<li>Copiez le token généré</li>
|
||||
</ul>
|
||||
<p className="mt-3 text-xs">
|
||||
<strong>Note:</strong> Ces variables doivent être configurées dans l'environnement du serveur (JIRA_BASE_URL, JIRA_EMAIL, JIRA_API_TOKEN)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user