60 lines
2.3 KiB
JavaScript
60 lines
2.3 KiB
JavaScript
import { html } from 'htm/preact'
|
||
import { useState } from 'preact/hooks'
|
||
import { StatusLine } from '#tofu/components/atoms/StatusLine.js'
|
||
import { ConnectionForm } from '#tofu/components/molecules/ConnectionForm.js'
|
||
import { WebdavCheckReport } from '#tofu/components/molecules/WebdavCheckReport.js'
|
||
import { runWebdavCheck } from '#tofu/services/diagnostics/runWebdavCheck.js'
|
||
import { createWebdavClient } from '#tofu/services/webdav/createWebdavClient.js'
|
||
|
||
// First screen: check a Nextcloud folder step by step, or skip it entirely.
|
||
export function ConnectionPage({ onReady }) {
|
||
const [busy, setBusy] = useState(false)
|
||
const [steps, setSteps] = useState([])
|
||
const [status, setStatus] = useState({
|
||
state: 'idle',
|
||
message: 'Renseigner un serveur Nextcloud, ou continuer sans.',
|
||
})
|
||
|
||
async function connect({ serverUrl, username, password, folder }) {
|
||
setBusy(true)
|
||
setSteps([])
|
||
setStatus({ state: 'loading', message: 'Vérification de la connexion en cours…' })
|
||
const client = createWebdavClient({ serverUrl, username, password, folder })
|
||
const report = await runWebdavCheck(client, folder)
|
||
setSteps(report.steps)
|
||
setBusy(false)
|
||
if (!report.ok) {
|
||
setStatus({
|
||
state: 'error',
|
||
message: 'Connexion impossible — le détail de chaque étape est indiqué ci-dessous.',
|
||
})
|
||
return
|
||
}
|
||
setStatus({ state: 'saved', message: 'Connexion vérifiée, le dossier est utilisable.' })
|
||
onReady({ client, folder })
|
||
}
|
||
|
||
function continueWithoutNextcloud() {
|
||
onReady({ client: null, folder: null })
|
||
}
|
||
|
||
return html`
|
||
<article class="sheet">
|
||
<header class="sheet-header">
|
||
<h1 class="sheet-title">Connexion à Nextcloud</h1>
|
||
</header>
|
||
<div class="sheet-body">
|
||
<${ConnectionForm} busy=${busy} onConnect=${connect} />
|
||
<${StatusLine} message=${status.message} state=${status.state} />
|
||
<${WebdavCheckReport} steps=${steps} />
|
||
<p>
|
||
Sans Nextcloud, la semaine se saisit et s’imprime, mais rien n’est
|
||
enregistré : tout disparaît au rechargement de la page.
|
||
</p>
|
||
<button type="button" class="button" onClick=${continueWithoutNextcloud} disabled=${busy}>
|
||
Continuer sans Nextcloud
|
||
</button>
|
||
</div>
|
||
</article>
|
||
`
|
||
}
|