70 lines
2.4 KiB
JavaScript
70 lines
2.4 KiB
JavaScript
import { useState } from 'preact/hooks'
|
||
import { html } from 'htm/preact'
|
||
import { TextField } from '#tofu/components/atoms/TextField.js'
|
||
import { DEFAULT_REMOTE_FOLDER } from '#tofu/const/DEFAULT_REMOTE_FOLDER.js'
|
||
|
||
const PASSWORD_NOTE_ID = 'connection-password-note'
|
||
|
||
// Nextcloud connection details. A real <form> with a submit button, so the
|
||
// Enter key validates. Values stay in this component until submit; the parent
|
||
// decides what to do with them and nothing is ever written to storage.
|
||
export function ConnectionForm({ busy = false, onConnect }) {
|
||
const [serverUrl, setServerUrl] = useState('')
|
||
const [username, setUsername] = useState('')
|
||
const [password, setPassword] = useState('')
|
||
const [folder, setFolder] = useState(DEFAULT_REMOTE_FOLDER)
|
||
|
||
function handleSubmit(event) {
|
||
event.preventDefault()
|
||
onConnect({ serverUrl, username, password, folder })
|
||
}
|
||
|
||
return html`
|
||
<form class="connection-form" onSubmit=${handleSubmit}>
|
||
<p class="connection-note" id=${PASSWORD_NOTE_ID}>
|
||
Utilisez un <strong>mot de passe d'application</strong> Nextcloud
|
||
(Paramètres › Sécurité › Appareils et sessions), et non le mot de passe de votre
|
||
compte. Il n'est conservé nulle part : ni dans le navigateur, ni dans un cookie.
|
||
Il disparaît au rechargement de la page, et il faut le saisir à nouveau.
|
||
</p>
|
||
<${TextField}
|
||
id="connection-server-url"
|
||
label="Adresse du serveur"
|
||
value=${serverUrl}
|
||
onInput=${setServerUrl}
|
||
placeholder="https://cloud.exemple.fr"
|
||
inputMode="url"
|
||
autocomplete="url"
|
||
required=${true}
|
||
/>
|
||
<${TextField}
|
||
id="connection-username"
|
||
label="Utilisateur"
|
||
value=${username}
|
||
onInput=${setUsername}
|
||
autocomplete="username"
|
||
required=${true}
|
||
/>
|
||
<${TextField}
|
||
id="connection-password"
|
||
label="Mot de passe d'application"
|
||
value=${password}
|
||
onInput=${setPassword}
|
||
type="password"
|
||
autocomplete="current-password"
|
||
describedBy=${PASSWORD_NOTE_ID}
|
||
required=${true}
|
||
/>
|
||
<${TextField}
|
||
id="connection-folder"
|
||
label="Dossier"
|
||
value=${folder}
|
||
onInput=${setFolder}
|
||
required=${true}
|
||
/>
|
||
<button type="submit" class="button" disabled=${busy}>
|
||
${busy ? 'Vérification…' : 'Se connecter'}
|
||
</button>
|
||
</form>
|
||
`
|
||
}
|