feat(p12a): services git distants (PAT/app_password) + clone HTTPS
Modèle de données : - migration #11 git_credentials (secrets chiffrés SecretBox : secret_encrypted ; colonnes ssh/oauth posées pour P12b/P12c) ; #12 repos ALTER remote_url/git_service/credential_id (pas de FK) - types partagés api.ts (GitCredentialSummary sans secret + hasSecret/secretLast4, CRUD, RemoteRepoSummary, Clone*) ; protocole additif : topic 'clones' + message clone_update (CloneOperation) Backend : - core/git-credentials.ts (GitCredentialsManager(db, box)) : CRUD chiffré, test() (GET /user), getSecret()/authContext() internes, NULLification de repos.credential_id à la suppression - core/git-clients/ (github/gitlab/gitea) via fetch, sans dépendance : verify()+listRepos() paginés, erreurs typées AUTH_FAILED/RATE_LIMITED/UNREACHABLE, SSRF base_url http(s) - core/git-auth.ts : withGitAuth (GIT_ASKPASS éphémère 0o700, secret par env, GIT_TERMINAL_PROMPT=0, jamais dans l'URL/.git/config, nettoyage finally) - core/git.ts cloneRepo (spawn git clone --progress, parse progression, timeout) - core/clone-manager.ts (EventEmitter) : clone async, dest confiné sous scanRoots + non existant, auto-enregistrement via addRepo + métadonnées de provenance, nettoyage du clone partiel, events topic 'clones' - routes/git-connections.ts (CRUD + /test + /:id/repos + POST /repos/clone 202 + GET /repos/clone/:id) ; app.ts câble box→GitCredentialsManager + CloneManager→gateway ; gateway relaie 'clones' Frontend : - ws-client subscribeClones ; stores git-connections + clone (suivi WS) - components/settings/GitConnectionsSection (liste + formulaire pat/app_password, secret jamais ré-affiché) inséré dans SettingsView ; CloneRepoModal (connexion → repos distants paginés → dest scanRoots[0] → barre de progression WS → redirection) ; bouton « Cloner » dans DashboardView ; i18n EN+FR Tests : git-credentials (round-trip SecretBox, résumé sans secret, NULLification) ; acceptance-p12.mjs (clone bare local file:// → clone_update done + repo enregistré + secret ABSENT de l'API, de la DB et du .git/config) Sous-phases restantes : P12b (SSH), P12c (OAuth device flow).
This commit is contained in:
173
packages/web/src/components/CloneRepoModal.vue
Normal file
173
packages/web/src/components/CloneRepoModal.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" @click.self="emit('close')">
|
||||
<div class="flex max-h-[90vh] w-full max-w-lg flex-col gap-3 overflow-y-auto rounded-lg border border-zinc-800 bg-zinc-900 p-4">
|
||||
<header class="flex items-center gap-2">
|
||||
<h2 class="font-semibold text-zinc-100">{{ t('clone.title') }}</h2>
|
||||
<button class="btn ml-auto text-xs" @click="emit('close')">{{ t('common.cancel') }}</button>
|
||||
</header>
|
||||
|
||||
<!-- aucune connexion → renvoyer vers les réglages -->
|
||||
<p v-if="conn.connections.length === 0" class="text-sm text-zinc-400">
|
||||
{{ t('clone.noCredential') }}
|
||||
<RouterLink :to="{ name: 'settings' }" class="text-emerald-400 hover:underline" @click="emit('close')">{{ t('clone.goSettings') }}</RouterLink>
|
||||
</p>
|
||||
|
||||
<template v-else-if="!operationId">
|
||||
<label class="flex flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('clone.credential') }}
|
||||
<select v-model="credentialId" class="input" @change="loadRepos(1)">
|
||||
<option v-for="c in conn.connections" :key="c.id" :value="c.id">{{ c.label }} ({{ c.service }})</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div class="flex items-end gap-2">
|
||||
<label class="flex flex-1 flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('clone.search') }}
|
||||
<input v-model.trim="search" class="input" :placeholder="t('clone.searchPlaceholder')" @keyup.enter="loadRepos(1)" />
|
||||
</label>
|
||||
<BaseButton size="sm" :icon="RefreshCw" :loading="loadingRepos" @click="loadRepos(1)">{{ t('common.refresh') }}</BaseButton>
|
||||
</div>
|
||||
|
||||
<p v-if="reposError" class="text-xs text-amber-400">{{ reposError }}</p>
|
||||
<ul class="flex max-h-52 flex-col gap-0.5 overflow-y-auto">
|
||||
<li v-for="r in repos" :key="r.fullName">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm hover:bg-zinc-800"
|
||||
:class="selected?.fullName === r.fullName ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-300'"
|
||||
@click="select(r)"
|
||||
>
|
||||
<span class="min-w-0 flex-1 truncate font-mono">{{ r.fullName }}</span>
|
||||
<BaseBadge v-if="r.private" tone="zinc">{{ t('clone.private') }}</BaseBadge>
|
||||
</button>
|
||||
</li>
|
||||
<li v-if="!loadingRepos && repos.length === 0" class="px-2 py-1 text-xs text-zinc-600">{{ t('clone.noRepos') }}</li>
|
||||
</ul>
|
||||
<div v-if="nextPage" class="flex justify-center">
|
||||
<BaseButton size="sm" variant="ghost" :loading="loadingRepos" @click="loadRepos(nextPage)">{{ t('clone.more') }}</BaseButton>
|
||||
</div>
|
||||
|
||||
<label class="flex flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('clone.dest') }}
|
||||
<input v-model.trim="dest" class="input font-mono" :placeholder="t('clone.destPlaceholder')" />
|
||||
<span class="text-xs text-zinc-600">{{ t('clone.destHint') }}</span>
|
||||
</label>
|
||||
|
||||
<p v-if="error" class="text-xs text-amber-400">{{ error }}</p>
|
||||
<div>
|
||||
<BaseButton variant="primary" :icon="Download" :loading="starting" :disabled="!canClone" @click="onClone">{{ t('clone.clone') }}</BaseButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- progression -->
|
||||
<template v-else>
|
||||
<p class="text-sm text-zinc-300">{{ progressLabel }}</p>
|
||||
<div class="h-2 w-full overflow-hidden rounded bg-zinc-800">
|
||||
<div class="h-full bg-emerald-500 transition-all" :style="{ width: `${op?.progress ?? 0}%` }" />
|
||||
</div>
|
||||
<p v-if="op?.state === 'error'" class="text-xs text-rose-400">{{ op.error }}</p>
|
||||
<div v-if="op?.state === 'error'" class="flex gap-2">
|
||||
<BaseButton size="sm" variant="ghost" @click="operationId = null">{{ t('clone.back') }}</BaseButton>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Download, RefreshCw } from '@lucide/vue';
|
||||
import type { RemoteRepoSummary } from '@arboretum/shared';
|
||||
import { useGitConnectionsStore } from '../stores/git-connections';
|
||||
import { useCloneStore } from '../stores/clone';
|
||||
import { useSettingsStore } from '../stores/settings';
|
||||
import { useToastsStore } from '../stores/toasts';
|
||||
import BaseButton from './ui/BaseButton.vue';
|
||||
import BaseBadge from './ui/BaseBadge.vue';
|
||||
|
||||
const emit = defineEmits<{ close: [] }>();
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const conn = useGitConnectionsStore();
|
||||
const cloneStore = useCloneStore();
|
||||
const settings = useSettingsStore();
|
||||
const toasts = useToastsStore();
|
||||
|
||||
const credentialId = ref('');
|
||||
const search = ref('');
|
||||
const repos = ref<RemoteRepoSummary[]>([]);
|
||||
const nextPage = ref<number | null>(null);
|
||||
const loadingRepos = ref(false);
|
||||
const reposError = ref<string | null>(null);
|
||||
const selected = ref<RemoteRepoSummary | null>(null);
|
||||
const dest = ref('');
|
||||
const error = ref<string | null>(null);
|
||||
const starting = ref(false);
|
||||
const operationId = ref<string | null>(null);
|
||||
|
||||
const op = computed(() => (operationId.value ? cloneStore.get(operationId.value) ?? null : null));
|
||||
const scanRoot = computed(() => settings.scanRoots[0] ?? '');
|
||||
const canClone = computed(() => !!credentialId.value && !!selected.value && dest.value.trim() !== '');
|
||||
const progressLabel = computed(() => {
|
||||
if (!op.value) return t('clone.starting');
|
||||
if (op.value.state === 'done') return t('clone.done');
|
||||
if (op.value.state === 'error') return t('clone.failed');
|
||||
return op.value.phase ? `${op.value.phase}… ${op.value.progress ?? 0}%` : t('clone.cloning');
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (!settings.loaded) await settings.fetch();
|
||||
if (conn.connections.length === 0) await conn.fetchAll();
|
||||
const first = conn.connections[0];
|
||||
if (first) {
|
||||
credentialId.value = first.id;
|
||||
await loadRepos(1);
|
||||
}
|
||||
});
|
||||
|
||||
async function loadRepos(page: number): Promise<void> {
|
||||
if (!credentialId.value) return;
|
||||
loadingRepos.value = true;
|
||||
reposError.value = null;
|
||||
try {
|
||||
const res = await conn.listRemoteRepos(credentialId.value, page, search.value || undefined);
|
||||
repos.value = page === 1 ? res.repos : [...repos.value, ...res.repos];
|
||||
nextPage.value = res.nextPage;
|
||||
} catch (e) {
|
||||
reposError.value = e instanceof Error ? e.message : String(e);
|
||||
} finally {
|
||||
loadingRepos.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function select(r: RemoteRepoSummary): void {
|
||||
selected.value = r;
|
||||
const name = r.fullName.split('/').pop() ?? r.fullName;
|
||||
dest.value = scanRoot.value ? `${scanRoot.value}/${name}` : '';
|
||||
}
|
||||
|
||||
async function onClone(): Promise<void> {
|
||||
if (!selected.value) return;
|
||||
starting.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
operationId.value = await cloneStore.clone({ credentialId: credentialId.value, remoteUrl: selected.value.cloneUrl, dest: dest.value.trim() });
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : String(e);
|
||||
operationId.value = null;
|
||||
} finally {
|
||||
starting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// À la fin du clone : toast + redirection vers le tableau de bord (le repo y apparaît).
|
||||
watch(op, (o) => {
|
||||
if (o?.state === 'done') {
|
||||
toasts.success(t('clone.done'));
|
||||
emit('close');
|
||||
void router.push({ name: 'dashboard' });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
150
packages/web/src/components/settings/GitConnectionsSection.vue
Normal file
150
packages/web/src/components/settings/GitConnectionsSection.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<section class="card flex flex-col gap-3">
|
||||
<h2 class="flex items-center gap-2 text-sm font-semibold text-zinc-100">
|
||||
<Plug :size="16" /> {{ t('gitconn.title') }}
|
||||
</h2>
|
||||
<p class="text-xs text-zinc-500">{{ t('gitconn.hint') }}</p>
|
||||
|
||||
<!-- liste des connexions -->
|
||||
<ul v-if="store.connections.length" class="flex flex-col gap-1">
|
||||
<li v-for="c in store.connections" :key="c.id" class="card-inset flex flex-wrap items-center gap-2">
|
||||
<BaseBadge tone="sky">{{ c.service }}</BaseBadge>
|
||||
<span class="font-medium text-zinc-200">{{ c.label }}</span>
|
||||
<span class="text-xs text-zinc-500">{{ c.authType }}<template v-if="c.username"> · {{ c.username }}</template></span>
|
||||
<span v-if="c.hasSecret" class="font-mono text-xs text-zinc-600">••••{{ c.secretLast4 }}</span>
|
||||
<BaseBadge v-if="c.testResult" :tone="c.testResult === 'ok' ? 'emerald' : 'red'">{{ c.testResult }}</BaseBadge>
|
||||
<span class="ml-auto flex items-center gap-1">
|
||||
<BaseButton size="sm" variant="ghost" :loading="testingId === c.id" @click="onTest(c.id)">{{ t('gitconn.test') }}</BaseButton>
|
||||
<BaseButton v-if="confirmId === c.id" size="sm" variant="danger" @click="onDelete(c.id)">{{ t('common.confirm') }}</BaseButton>
|
||||
<BaseButton v-else size="sm" variant="ghost" :icon="Trash2" :aria-label="t('common.delete')" icon-only @click="confirmId = c.id" />
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-else class="text-xs text-zinc-600">{{ t('gitconn.empty') }}</p>
|
||||
|
||||
<!-- formulaire d'ajout -->
|
||||
<form v-if="adding" class="card-inset flex flex-col gap-2" @submit.prevent="onCreate">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<label class="flex flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('gitconn.service') }}
|
||||
<select v-model="form.service" class="input">
|
||||
<option value="gitea">Gitea</option>
|
||||
<option value="gitlab">GitLab</option>
|
||||
<option value="github">GitHub</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('gitconn.authType') }}
|
||||
<select v-model="form.authType" class="input">
|
||||
<option value="pat">{{ t('gitconn.pat') }}</option>
|
||||
<option value="app_password">{{ t('gitconn.appPassword') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex flex-1 flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('gitconn.label') }}
|
||||
<input v-model.trim="form.label" class="input" :placeholder="t('gitconn.labelPlaceholder')" required />
|
||||
</label>
|
||||
</div>
|
||||
<label v-if="form.service === 'gitea' || form.service === 'gitlab'" class="flex flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('gitconn.baseUrl') }}<template v-if="form.service === 'gitea'"> *</template>
|
||||
<input v-model.trim="form.baseUrl" class="input font-mono" placeholder="https://git.example.com" :required="form.service === 'gitea'" />
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<label class="flex flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ t('gitconn.username') }}
|
||||
<input v-model.trim="form.username" class="input" :placeholder="t('gitconn.usernamePlaceholder')" />
|
||||
</label>
|
||||
<label class="flex flex-1 flex-col gap-1 text-xs text-zinc-400">
|
||||
{{ form.authType === 'pat' ? t('gitconn.token') : t('gitconn.password') }}
|
||||
<input v-model="form.secret" type="password" class="input font-mono" autocomplete="off" required />
|
||||
</label>
|
||||
</div>
|
||||
<p v-if="error" class="text-xs text-amber-400">{{ error }}</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<BaseButton type="submit" variant="primary" size="sm" :loading="creating" :disabled="!canCreate">{{ t('gitconn.add') }}</BaseButton>
|
||||
<BaseButton type="button" size="sm" variant="ghost" @click="adding = false">{{ t('common.cancel') }}</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
<div v-else>
|
||||
<BaseButton size="sm" :icon="Plus" @click="openForm">{{ t('gitconn.addConnection') }}</BaseButton>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Plug, Plus, Trash2 } from '@lucide/vue';
|
||||
import type { GitAuthType, GitService } from '@arboretum/shared';
|
||||
import { useGitConnectionsStore } from '../../stores/git-connections';
|
||||
import { useToastsStore } from '../../stores/toasts';
|
||||
import BaseButton from '../ui/BaseButton.vue';
|
||||
import BaseBadge from '../ui/BaseBadge.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useGitConnectionsStore();
|
||||
const toasts = useToastsStore();
|
||||
|
||||
const adding = ref(false);
|
||||
const creating = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const testingId = ref<string | null>(null);
|
||||
const confirmId = ref<string | null>(null);
|
||||
const form = reactive({ service: 'gitea' as GitService, authType: 'pat' as GitAuthType, label: '', baseUrl: '', username: '', secret: '' });
|
||||
|
||||
const canCreate = computed(
|
||||
() => form.label.trim() !== '' && form.secret !== '' && (form.service !== 'gitea' || form.baseUrl.trim() !== ''),
|
||||
);
|
||||
|
||||
onMounted(() => void store.fetchAll());
|
||||
|
||||
function openForm(): void {
|
||||
Object.assign(form, { service: 'gitea', authType: 'pat', label: '', baseUrl: '', username: '', secret: '' });
|
||||
error.value = null;
|
||||
adding.value = true;
|
||||
}
|
||||
|
||||
async function onCreate(): Promise<void> {
|
||||
creating.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
await store.create({
|
||||
label: form.label.trim(),
|
||||
service: form.service,
|
||||
authType: form.authType,
|
||||
...(form.baseUrl.trim() ? { baseUrl: form.baseUrl.trim() } : {}),
|
||||
...(form.username.trim() ? { username: form.username.trim() } : {}),
|
||||
secret: form.secret,
|
||||
});
|
||||
adding.value = false;
|
||||
toasts.success(t('gitconn.added'));
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : String(e);
|
||||
} finally {
|
||||
creating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onTest(id: string): Promise<void> {
|
||||
testingId.value = id;
|
||||
try {
|
||||
const res = await store.test(id);
|
||||
if (res.ok) toasts.success(t('gitconn.testOk', { user: res.user ?? '' }));
|
||||
else toasts.error(t('gitconn.testFailed', { error: res.error ?? '' }));
|
||||
} catch (e) {
|
||||
toasts.error(e);
|
||||
} finally {
|
||||
testingId.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function onDelete(id: string): Promise<void> {
|
||||
confirmId.value = null;
|
||||
try {
|
||||
await store.remove(id);
|
||||
toasts.success(t('gitconn.deleted'));
|
||||
} catch (e) {
|
||||
toasts.error(e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user