135 lines
4.2 KiB
JavaScript
135 lines
4.2 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
|
||
export default function Settings({ onClose }) {
|
||
const [githubToken, setGithubToken] = useState('');
|
||
const [giteaToken, setGiteaToken] = useState('');
|
||
const [giteaURL, setGiteaURL] = useState('');
|
||
const [savedOk, setSavedOk] = useState(false);
|
||
|
||
function normalizeAndValidateGiteaUrl(rawUrl) {
|
||
const value = (rawUrl || '').trim();
|
||
if (!value) return { ok: true, value: '' };
|
||
|
||
let parsed;
|
||
try {
|
||
parsed = new URL(value);
|
||
} catch (_) {
|
||
return {
|
||
ok: false,
|
||
error: 'Ungültige Gitea-URL. Beispiel für IPv6: http://[2001:db8::1]:3000',
|
||
};
|
||
}
|
||
|
||
if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
|
||
return {
|
||
ok: false,
|
||
error: 'Die Gitea-URL muss mit http:// oder https:// beginnen.',
|
||
};
|
||
}
|
||
|
||
return { ok: true, value: value.replace(/\/$/, '') };
|
||
}
|
||
|
||
useEffect(() => {
|
||
window.electronAPI.loadCredentials().then(data => {
|
||
if (data) {
|
||
setGithubToken(data.githubToken || '');
|
||
setGiteaToken(data.giteaToken || '');
|
||
setGiteaURL(data.giteaURL || '');
|
||
}
|
||
});
|
||
}, []);
|
||
|
||
function save() {
|
||
const checkedUrl = normalizeAndValidateGiteaUrl(giteaURL);
|
||
if (!checkedUrl.ok) {
|
||
alert(checkedUrl.error);
|
||
return;
|
||
}
|
||
window.electronAPI.saveCredentials({ githubToken, giteaToken, giteaURL: checkedUrl.value });
|
||
setSavedOk(true);
|
||
setTimeout(() => setSavedOk(false), 2500);
|
||
}
|
||
|
||
return (
|
||
<div className="modalContent card settings-modal-content">
|
||
|
||
<div className="settings-header">
|
||
<div>
|
||
<div className="settings-eyebrow">Konfiguration</div>
|
||
<h2>⚙️ Einstellungen</h2>
|
||
<p className="settings-subtitle">
|
||
Zugangsdaten für GitHub und Gitea hinterlegen.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="settings-layout">
|
||
<div className="settings-column settings-column--left">
|
||
<section className="settings-panel settings-panel--credentials">
|
||
<div className="settings-panel-header">
|
||
<div>
|
||
<h3>Zugangsdaten</h3>
|
||
<p>API-Zugriffe für GitHub und Gitea konfigurieren.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="settings-fields-grid">
|
||
<div className="input-group">
|
||
<label htmlFor="react-githubToken">GitHub Token</label>
|
||
<input
|
||
id="react-githubToken"
|
||
type="password"
|
||
placeholder="ghp_…"
|
||
value={githubToken}
|
||
onChange={e => setGithubToken(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="input-group">
|
||
<label htmlFor="react-giteaToken">Gitea Token</label>
|
||
<input
|
||
id="react-giteaToken"
|
||
type="password"
|
||
placeholder="Token hier einfügen"
|
||
value={giteaToken}
|
||
onChange={e => setGiteaToken(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="input-group input-group--wide">
|
||
<label htmlFor="react-giteaURL">Gitea URL</label>
|
||
<input
|
||
id="react-giteaURL"
|
||
type="text"
|
||
placeholder="https://gitea.example.com"
|
||
value={giteaURL}
|
||
onChange={e => setGiteaURL(e.target.value)}
|
||
/>
|
||
<div className="settings-connection-tools">
|
||
<div className="settings-inline-hint">
|
||
Hinweis: IPv6 mit Klammern eingeben, z.B. http://[2001:db8::1]:3000
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="modal-buttons settings-modal-actions">
|
||
<button
|
||
className="accent-btn"
|
||
onClick={save}
|
||
style={savedOk ? { background: 'var(--success)', borderColor: 'var(--success)' } : {}}
|
||
>
|
||
{savedOk ? '✅ Gespeichert' : 'Speichern'}
|
||
</button>
|
||
{onClose && (
|
||
<button className="secondary" onClick={onClose}>Abbrechen</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|