113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import { ExternalLink } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
|
|
const PROTON_BRIDGE_DOWNLOAD = "https://proton.me/mail/bridge"
|
|
|
|
export function ProtonBridgeWizard({
|
|
email,
|
|
imapPort,
|
|
smtpPort,
|
|
bridgePassword,
|
|
onBridgePasswordChange,
|
|
onImapPortChange,
|
|
onSmtpPortChange,
|
|
onContinue,
|
|
onBack,
|
|
}: {
|
|
email: string
|
|
imapPort: string
|
|
smtpPort: string
|
|
bridgePassword: string
|
|
onBridgePasswordChange: (v: string) => void
|
|
onImapPortChange: (v: string) => void
|
|
onSmtpPortChange: (v: string) => void
|
|
onContinue: () => void
|
|
onBack: () => void
|
|
}) {
|
|
return (
|
|
<div className="space-y-4 max-w-xl">
|
|
<div className="rounded-lg border border-border bg-muted/30 p-4 space-y-3 text-sm">
|
|
<p className="font-medium">Proton Mail via Bridge</p>
|
|
<ol className="list-decimal list-inside space-y-2 text-muted-foreground">
|
|
<li>
|
|
Installez{" "}
|
|
<a
|
|
href={PROTON_BRIDGE_DOWNLOAD}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-foreground underline"
|
|
>
|
|
Proton Mail Bridge
|
|
<ExternalLink className="size-3" />
|
|
</a>{" "}
|
|
sur cet ordinateur.
|
|
</li>
|
|
<li>
|
|
Connectez-vous avec <span className="text-foreground">{email}</span>.
|
|
</li>
|
|
<li>Copiez le mot de passe Bridge généré pour IMAP/SMTP.</li>
|
|
<li>Vérifiez que Bridge écoute sur localhost (ports par défaut ci-dessous).</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<Field label="IMAP port (Bridge)" value={imapPort} onChange={onImapPortChange} />
|
|
<Field label="SMTP port (Bridge)" value={smtpPort} onChange={onSmtpPortChange} />
|
|
<div className="sm:col-span-2">
|
|
<Field
|
|
label="Mot de passe Bridge"
|
|
type="password"
|
|
value={bridgePassword}
|
|
onChange={onBridgePasswordChange}
|
|
placeholder="Généré par Proton Bridge"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs text-muted-foreground">
|
|
Bridge doit rester ouvert en arrière-plan. Ultimail se connecte à{" "}
|
|
<code className="text-foreground">127.0.0.1</code>.
|
|
</p>
|
|
|
|
<div className="flex gap-2">
|
|
<Button type="button" disabled={!bridgePassword} onClick={onContinue}>
|
|
Tester et continuer
|
|
</Button>
|
|
<Button type="button" variant="ghost" onClick={onBack}>
|
|
Retour
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Field({
|
|
label,
|
|
value,
|
|
onChange,
|
|
type = "text",
|
|
placeholder,
|
|
}: {
|
|
label: string
|
|
value: string
|
|
onChange: (v: string) => void
|
|
type?: string
|
|
placeholder?: string
|
|
}) {
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">{label}</Label>
|
|
<Input
|
|
value={value}
|
|
type={type}
|
|
placeholder={placeholder}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|